General Web Accessibility Guidelines
In addition to the recommendations described throughout the Web Guide, the Web Standards Group also provides the following general guidelines for addressing accessibility in your websites:
Help Users Navigate
Ensure that your website is easy for your users to navigate by establishing a clearly-defined information architecture and providing straightforward mechanisms for users to navigate within this architecture, including search engines and site outlines.
Furthermore, ensure that users can easily orient themselves within the structure of the website using techniques such as labeling the current section and using breadcrumb navigation.
Design for Device Independence
Your page should not depend on the user using a specific type of device. In other words, your page should be navigable by mouse, keyboard, voice, touch, and head wand. Elements that appear only upon mouse-over, for example, are usually inaccessible to people using screen readers. In general, any page that can be navigated via keyboard can also be navigated by voice or screen reader.
Avoid Time-Sensitive Content Changes
Avoid time-sensitive content changes or allow users to control the timing of these changes. For example, if your website features an image carousel that cycles through several images, provide options for users to pause or slow down the transition between images.
If your website must include time-sensitive content changes without user controls, provide ample time for the user to engage with the content. As a general rule: 20 seconds for every line of text.
Similarly, avoid moving content around the page unless users can control the movement of the content.
Don’t Use Pop-up Windows
Do not use “pop-up” windows, or separate, modal browser windows that are opened by the current page. They inhibit screen reader’s ability to read the desired active screen. Furthermore, most modern browsers automatically block the display of these windows.
Prefer HTML Over Non-HTML Documents
Always prefer HTML web pages over non-HTML document formats, like PDF files or Microsoft Word files. These file formats often can’t be viewed natively within a browser, forcing the user out of your website and into an alternate viewer.
Furthermore, making these alternate file formats accessible to screen readers and other assistive technologies often requires a completely separate approach than HTML documents, complicating your website’s accessibility maintenance.
If you must use a PDF, ensure that your PDF is accessible using Adobe’s PDF accessibility guidelines.
Consistent Page Layout
Your website should feature a consistent page layout with page elements, like navigation and main content areas, appearing in the same location and featuring the same format across your website.
Clear, Simple Language
Content within your website should be written in clear, simple language.
In general, your website should not require the use of plug-ins or extensions not already present in a browser.
If your website does require a plug-in or extension, provide a link to download that component near the content that requires it.
Use the CSS Speech properties to control how text on a web page is read via assistive technologies, like screen readers, including volume, balance, timing, and more.
Ensure Media is Accessible
When including multimedia, such as videos or interactive presentations, on your website, ensure that media is accessible to all of your users. For example, all videos should include captions for deaf and hard of hearing audiences.
Provide “Skip Links”
To allow users with screen readers to efficiently bypass redundant navigation on each page, provide a “skip link.” To create a skip link, create an HTML anchor at the start of the page’s content and provide an invisible link to that anchor at the top of your page’s HTML:
<!-- GOOD PRACTICE --> <body> <a class="hidden" href="#content">Skip to Content</a> <ul id="navigation"> <!-- Navigation --> </ul> <div id="content"> Welcome to the Department of Gauchos! </div> </body>
Always Use a Label or Accessible Alternative for Input Fields
<input> should have a
<!-- GOOD PRACTICE --> <label for="user-first-name">First Name</label> <input type="text" name="first-name" id="user-first-name">
This ensures that the purpose of your
<input> can be determined by assistive
technologies, like screen readers.
Sometimes, you may have a case where it’s not practical to include a
For example, in a simple search form:
<label for="search-terms">Search Terms</label> <input type="text" name="search-terms" id="search-terms"> <input type="submit" value="Search">
In this example, it’s redundant to include a
<label> for the
<input> where a
user enters search terms since it’s visually clear that a user should enter
search terms in this field.
However, you still want to include some alternative to a label. Otherwise, a user using a screen reader will not understand the purpose of the field until they switch focus to the submit button.
In this case, you can use the
<!-- GOOD PRACTICE --> <input type="text" aria-label="Search Terms" name="search-terms" id="search-terms"> <input type="submit" value="Search">
Ensure Accessibility of Icon Fonts
When using an icon font (for example, Font Awesome), ensure that the purpose of the icon is also clear to users with a screen reader. You can either include explanatory text alongside the icon:
<!-- GOOD PRACTICE --> <i class="fa fa-star"></i> Star
Or provide an
aria-label attribute if the icon is standing on its own:
<!-- GOOD PRACTICE --> <i class="fa fa-bars" aria-label="Menu"></i>
Nest Headings Properly
When using heading elements (
<h6>), follow two rules:
- Only use a single
<h1>element on a page
- Lower level headings should appear below/within higher level headings (for example, a
For example, the following example uses heading elements properly:
<!-- GOOD PRACTICE --> <h1>Gaucho Club</h1> <h2>About Us</h2> <h3>Our Mission</h3> <h3>Our Story</h3> <h2>Members</h2> <h2>In the News</h2>
The HTML5 specification used to allow for the use of multiple
<h1>s on a
page, but this approach never gained support.
Thus, the rules above should still be followed, even with the use of newer
<!-- GOOD PRACTICE --> <h1>Gaucho Club</h1> <section> <h2>About Us</h2> <h3>Our Mission</h3> <h3>Our Story</h3> </section> <h2>Members</h2> <aside> <h2>In the News</h2> </aside>
Ensure “Read More” Links Are Accessible
When providing a “Read More” link for content, ensure that assistive
technology users can parse the connection between the “Read More” link and its
parent content by providing an
<!-- GOOD PRACTICE --> <h2 id="headline">Gauchos Win Again</h2> <p>The Gauchos have done it again! <a href="/gauchos-win-again" aria-labelledby="headline">Read More</a></p>
Importance of Web Accessibility
Accessibility is a Civil Rights issue and inaccessible websites violate the effective communications requirement of the Americans with Disabilities Act (ADA) as well as provisions of Section 504 and 508 of the Rehabilitation Act. Just as the rights of disabled people are ensured by providing closed captioning for television programs, auditory crosswalk indicators or elevators and ramps in buildings with stairs, so too is it our obligation and responsibility to similarly accommodate the needs of the disabled when it comes to accessing electronic systems and data.
All campus units should make every effort to comply with WSG accessibility recommendations.
An accessible website means that people with disabilities are able to obtain the same information in an adaptable format that is available to persons who do not have a disability and who are not using adaptive technology. Your web page also needs to take reasonable measures to ensure you are not causing undue harm to persons with disabilities. A summary of key accessibility resources with respect to web pages is presented below.
If you have any questions regarding your responsibility for designing or maintaining an accessible web page or if you feel that you are unable to access a web page on campus because it lacks the required accessible features, please contact one of the individuals listed under our campus resources.
UCOP IT Accessibility Policies
In 2013, the UC Electronic Accessibility Leadership Team (EALT) proposed a new systemwide accessibility policy, which included the requirement that all websites should meet the WCAG 2.0 Level AA Success requirements.
For a guide on how to meet these requirements, use the customizable quick reference.
Adaptive Technology Specialist and ADA Web Compliance Officer
Policy Coordinator & Deputy ADA Compliance Officer
Director, Disabled Students Program
- University of California Resources for Developing Accessible websites
- World Wide Web Consortium (W3C) Web Accessibility Initiative
Adaptive Software Providers
- Firefox Web Developer Plug-in
- University of Minnesota List of Accessibility Tools
- W3C List of Accessibility Tools
- W3C Validator Tool
- A Guide to Disability Rights Laws
- Section 504 Fact Sheet
- Section 508 of the Rehabilitation Act of 1973
- Section 255 of the Telecommunications Act of 1996
- Americans with Disabilities Act of 1990
Relevant Case Law
The rights of disabled individuals in the United States are covered under several laws. These laws are in turn enforced by several agencies:
Section 504 of the Rehabilitation Act of 1973
“Section 504 states that “no qualified individual with a disability in the United States shall be excluded from, denied the benefits of, or be subjected to discrimination under” any program or activity that either receives Federal financial assistance or is conducted by any Executive agency or the United States Postal Service.
Each Federal agency has its own set of section 504 regulations that apply to its own programs. Agencies that provide Federal financial assistance also have section 504 regulations covering entities that receive Federal aid. Requirements common to these regulations include reasonable accommodation for employees with disabilities; program accessibility; effective communication with people who have hearing or vision disabilities; and accessible new construction and alterations. Each agency is responsible for enforcing its own regulations. Section 504 may also be enforced through private lawsuits. It is not necessary to file a complaint with a Federal agency or to receive a “right-to-sue” letter before going to court.” (Source)
Section 508 of The Rehabilitation Act of 1973:
“In 1998, Congress amended the Rehabilitation Act of 1973 to require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities. The law (29 U.S.C. § 794 (d)) applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508, agencies must give disabled employees and members of the public access to information that is comparable to access available to others. The United States Access Board discusses the Section 508 law and its responsibility for developing accessibility standards for EIT to incorporate into regulations that govern Federal procurement practices.” (Source)
Section 255 of The Telecommunications Act of 1996:
“FCC rules under Section 255 of the Communications Act require telecommunications equipment manufacturers and service providers to make their products and services accessible to people with disabilities, if such access is readily achievable. Where access is not readily achievable, manufacturers and service providers must make their devices and services compatible with peripheral devices and specialized customer premises equipment that are commonly used by people with disabilities, if such compatibility is readily achievable.” (Source)
The Americans with Disabilities Act of 1990:
“The ADA prohibits discrimination on the basis of disability in employment, State and local government, public accommodations, commercial facilities, transportation, and telecommunications. It also applies to the United States Congress.
To be protected by the ADA, one must have a disability or have a relationship or association with an individual with a disability. An individual with a disability is defined by the ADA as a person who has a physical or mental impairment that substantially limits one or more major life activities, a person who has a history or record of such an impairment, or a person who is perceived by others as having such an impairment. The ADA does not specifically name all of the impairments that are covered.” (Source).
Agencies Who Enforce Access
The United States Access Board
The United States Access Board covers Accessible Design and sets standards for architecture and design. They set rules and standards for such things as size, distribution and arrangement of disabled parking spaces, wheelchair access for theatres, design guidelines for talking or chirping crosswalk indicators, etc.
U.S. Department of Education
The U.S. Department of Education, Office for Civil Rights enforces Section 504 as it applies recipients of Federal Funding for education.
U.S. Department of Justice
Section 508 requires all federal government bodies and their contractors to make Information Technology accessible for the disabled.
The Federal Communications Commission (FCC)
The FCC coordinates Section 255 of The Telecommunications Act. They require the telecommunications industry to make equipment readily accessible or, alternatively, make equipment compatible with assistive technology devices.