Web Content Accessibility Guidelines 2.0

People who are blind, have low vision, have cognitive disabilities or have trouble reading text for any reason can have the text read aloud to them by assistive technology or otherwise transform the presentation of the text to meet their needs (e.g., change the font face, the text size, or the background and foreground colors).

People who are deaf, are hard of hearing, or who are having trouble understanding audio information for any reason can read the text presentation or have it translated and presented as sign language by assistive technology.

People who are deaf-blind can read the text in braille.

Additionally, text alternatives support the ability to search for non-text content and to repurpose content in a variety of ways.

Example 1: an image used as a button.

A magnifying glass icon is used to link to the search page of a Web site. A screen reader identifies the button as a link and speaks the text alternative, "Search."

Example 2: a data chart.

A bar chart compares how many widgets were sold in June, July, and August. The short label says, "Figure one - Sales in June, July and August." The longer description identifies the type of chart, provides a high-level summary of the data comparable to that available from the chart, and provides the data in a table.

Example 3: an audio recording of a speech (no video).

The link to an audio clip says, "Chairman's speech to the assembly." A link to a text transcript is provided immediately after the link to the audio clip.

Example 4: a recording of a symphony.

The link to an audio file says, "Beethoven's 5th Symphony performed by the Vienna Philharmonic Orchestra."

Example 5: an animation that illustrates how a car engine works.

An animation shows how a car engine works. There is no audio and the animation is part of a tutorial that describes how an engine works. All that is needed is a description of the image. From "How car engines work: Internal combustion"

Example 6: a pair of images used to create a visual effect.

Two images are used to create curved edges on a "tab" interface. The images do not provide information, functionality, or a sensory experience and are marked such that they can be ignored by an assistive technology.

Example 7: an internet radio station.

A radio station broadcasts over the internet. The station's Web site describes the type of music played, a schedule of the shows, and the "current song" is updated each time the DJ starts a new track. Interviews are recorded and published in the archives. Transcripts of the archived interviews are provided per Guideline 1.2 Provide synchronized alternatives for multimedia.

Example 8: a traffic Web camera.

A Web site allows end-users to select from a variety of Web cameras positioned throughout a major city. After a camera is selected, the image updates every 2 minutes. A short text alternative identifies the Web camera as, "TraffiCam." The site also provides a table of travel times for each of the routes covered by the Web cameras. The table is also updated every 2 minutes.

People who are deaf or have a hearing loss can access the auditory information through captions.

People who are blind or have low vision as well as those with cognitive disabilities who have difficulty interpreting visually what is happening benefit from audio descriptions of visual information.

Example 1: a movie with audio description.

Transcript of audio based on the first few minutes of, "Teaching Evolution Case Studies, Bonnie Chen" (copyright WGBH and Clear Blue Sky Productions, Inc.)

Describer: A title, "Teaching Evolution Case Studies. Bonnie Chen." Now, a teacher shows photographs.

Bonnie Chen: These are all shot at either the Everglades...for today you just happen to be a species of wading bird that has a beak like this."

Describer: She hands them each two flat, thin wooden blades

Example 2: a captioned tutorial.

A video clip shows how to tie a knot. The captions read, "(music)

USING ROPE TO TIE KNOTS

WAS AN IMPORTANT SKILL

FOR THE LIKES OF SAILORS, SOLDIERS, AND WOODSMEN."

From Sample Transcript Formatting by Whit Anderson

Separating content and structure from presentation allows Web content to be presented differently to meet the needs and constraints of different users without losing any of the information or structure. For example, information can be presented via speech or braille (text) that was originally intended to be presented visually.

It can also facilitate automatic emphasis of structure or more efficient navigation.

All of these can benefit people with cognitive, physical, hearing, and visual disabilities.

Example 1: A form that mentions in text which required fields are missing.

When a user submits a form without filling in all the required fields, a message appears that informs the user which fields are missing. The missing fields are also indicated in color to help people with cognitive limitations recognize what fields need attention. Because the message is also available in text, people who cannot see color well will still know which fields they have to correct.

Example 2: A bus schedule where the headers have been associated with the cells.

A bus schedule consists of a table with the bus stops listed vertically and the different trips listed horizontally. Each cell contains the time when that bus will be at that bus stop. Structural markup has been used to associate that cell with both the corresponding bus stop and the corresponding trip.

Example 3: A form where the labels for the checkboxes have been associated with the checkboxes.

In a form where users can select different options using checkboxes, the labels for the checkboxes have been associated with the checkboxes. This benefits different types of users. It allows users who are blind to determine what the checkbox is for. People with limited motor functions can check the checkbox more easily because they can click anywhere on the label instead of just on the checkbox.

Individuals with low vision can easily read characters in the content even if they don't have the wide field of view or full range of color perception used by fully sighted persons to separate text from background images. This will also aid comprehension for individuals with cognitive disabilities who benefit from easy discernment of text. Visual contrast also helps individuals with hearing impairments who are aided by clear visual representation of information

Individuals with hearing impairments that limit their ability to hear all of the frequencies of speech can make out the words from the sounds they can hear because they are not mixed with residual sounds from music or other background sounds.

Example 1: a background image on a page.

A background image and text are arranged so that there is no image behind the text or the image is so faint that the difference between the darkest part of the image and the text (which is dark) meets the standard foreground/background contrast requirements. The image behind the text also does not contain lines that are about the same width as the characters so they do not interfere with character recognition. This example could also apply to light letters on a dark background.

Example 2: speech over background sounds.

Because speech is often naturally mixed with background sounds (movies, live news etc) and cannot be easily removed or separated, captions are provided (under guideline 1.2) to make dialog understandable. However not all people can see or read the captions. Where speech is mixed or recorded so that it is at least 20 db above any background sounds, most people do not need to rely on captions to understand the dialog.

Individuals who are blind (and cannot use pointing devices) can have access to the functionality of the Web content or site.

Individuals with severe physical disabilities can use speech input (which simulates keystrokes) to both enter data and operate the interface elements on the page.

Example 1: operation with multiple input devices.

The content relies only on focus-in, focus-out, and activation events; these are defined in the API of the environment for which the content is written, and are intended to be operable by a variety of input devices, including pointing devices, keyboards and speech input systems.

Example 2: examples of Web content that would and would not be operable from a keyboard interface

• If it's written to be operable from a computer keyboard, it conforms (because it is operable from the keyboard.)

• If it's written to be used on a device that does not usually have a keyboard such as a cell phone, but it can be controlled by an optional keyboard for that device, it conforms. (A person who needs a keyboard - or alternate keyboard - can use it to control the application.)

• If it's written to be used with a device that does not have a keyboard, but it could also be used by similar devices that do and it would work with their keyboard, it conforms. (A person who needs a keyboard would not buy the device without the keyboard. That device may itself not be considered accessible. But the content can be controlled from a device with a keyboard and therefore conforms to this guideline.)

• If it's written to work with devices that do not have keyboards and it can not be used by any other devices that do have keyboards, then it does not conform. (It cannot be accessed via keyboard.)

People with reading disabilities, cognitive disabilities, and learning disabilities who may need more time to read and comprehend written text can have additional time to read the information.

People with physical disabilities can access content that is updated often.

Examples of functionality that must meet the success criteria of this checkpoint:

• automatic refresh,

• redirection,

• blinking or scrolling text,

• dialog that disappears after a short period,

• shutdown or deactivation of resource if activity is not received in a set amount of time.

Example 1: blinking text.

Client-side scripting is used to create blinking text. The content provides an option that allows the user to turn off the blinking.

Example 2: a news site that is updated regularly.

A news site causes its front page to be updated every half hour. The front page contains minimal text and primarily consists of links to content. A user who does not wish the page to update selects a checkbox. The checkbox is in the "user preferences" portion of the site which is one of the first links on each page.

Individuals with photosensitive epilepsy can avoid having seizures triggered by flashing or by spatial patterns.

When the logical structure is provided in markup or a data model,

• Users with physical disabilities can use structure to more easily jump between paragraphs, chapters, sections etc.

• Users with cognitive disabilities can use structure (chapter titles, headers, etc.) to provide more context for the text that follows them. They also provide warning of a change in context and reorient the user to the new focus.

• Users with blindness or low vision can jump from header to header to get an overview or to more quickly "skim" to the section they are interested in.

• Readers with low vision can sometimes (depending on display technology) change how chapter titles and headers are displayed to make them more visible and easier to use when skimming the document.

• the content can be presented on a variety of devices because the device software can choose only those elements of the content that it is able to display and display them in the most effective way for that device.

Providing different navigation mechanisms can provide a better match between different people's skills, background knowledge, visual vs. text orientation, and the type of information they are seeking at the moment.

Individuals with cognitive disabilities may find it easier to ask for what they want than to deduce its location from categorical choices.

Individuals with low vision or blindness may find search techniques that fetch everything that relates to a topic of interest to be easier than techniques that require them to scan lists or content for the items.

Presentation that emphasizes structure:

• enables users with cognitive and visual disabilities to orient themselves within the content,

• enables all users to move quickly through the content and notice major content divisions

• enables all users, but particularly users with visual or cognitive disabilities to focus on important content,

• enables all users, but particularly users with visual or cognitive disabilities to distinguish the different types of content.

Example 1: documentation for a product.

Identifying chapters in the structure of a book is appropriate and accepted way of labeling the structure. Within the chapters, headings identify (label) changes in context and highlight ideas contained in the following text. Subtle differences between the appearance of the chapter title and the section headings helps the user understand the hierarchy and relationship between the title and headings. The difference might be font size and margin indentation when presented visually, and spoken in a different voice or preceded by a sound when presented auditorily.

Example 2: a scalable image of a bicycle.

Lines and a circle (spokes and rim) are grouped into a "wheel." Lines in a triangle that attach to each wheel are grouped into a "frame."

Example 3: user interface.

User interface controls are divided into organized groups.

Example 4: a data table.

Groups of rows or columns are labeled with headers.

Example 5: an audio presentation.

An audio rendering of a document, generated according to a style sheet, uses a different, more formal voice to read titles and headers so the listener can easily identify the words as a title and not part of the running text.

Identifying typing errors helps users who are blind, individuals with motor disabilities who may press keys by mistake, and those with certain types of learning disabilities who have difficulty writing text.

Certain disabilities make it more difficult to operate input devices, resulting in more input errors. For example, individuals with limited motor functions are more likely to make errors when they operate a mouse or a keyboard. Speech recognition systems may find it more difficult to recognize the speech of individuals with speech disabilities. Features that assist in recognizing and correcting errors benefit individuals with these types of disabilities.

Example 1: Identifying errors in a form submission.

An airline web site offers a special promotion on discounted flights. The user is asked to complete a simple form that asks for personal information such as name, address, phone number, seating preference and e-mail address. If any of the fields of the form are either not completed or completed incorrectly, the user is warned of the input error. The user is then presented with the same form, all previously and correctly entered information is still available. The user is asked to make corrections to any form field marked with a red arrow or two asterisks. Note: color alone is not used to indicate errors.

Example 2: Username and password errors.

A Web page requires the user to enter both a username and password. If either is incorrect, the user is informed that there was an error but, for security reasons, is not informed as to which field, the username or the password, is in error and suggestions for correcting are not offered.

Example 3: An online test.

A Web site provides an online test for certification in a particular field of study. The test identifies incorrect answers to the user but does not offer suggestions for correcting them. The purpose of the online test is to test the user's knowledge, therefore, providing hints on correct answers would go against the purpose of the Web site.

Example 4: Order confirmation.

A Web retailer offers online shopping for customers. When an order is submitted, the order information, including items ordered, quantity of each ordered, shipping address, and payment method, are displayed allowing the user to inspect the order for correctness. The user can either confirm the order or make changes.

Example 5: A selection list to reduce errors.

A Web retailer offers online shopping for customers interested in fly fishing gear. When the user is asked for his/her country, a pulldown list of countries is offered instead of having the user enter the information by typing. To possibly make things easier, the user is informed that countries are listed in alphabetical order.

Example 6: Search engine features.

A search engine is provided with a variety of search options for different skill levels and preferences. It includes an option to check the spelling of the search terms and offers "best guess" alternatives, query-by-example searches, and similarity searches.

Example 7: Spell checking in feedback forms.

A banking Web site provides a form for customers to submit questions or suggestions. The form user interface includes an optional spell-checking feature for the text input area where the question or suggestion is entered.

Example 8: Expected date format in a form.

In a form, there is a text box for "birthday". Next to this text box is the text "(MM-DD-YYYY)" to indicate the format in which the date should be entered.

Phrases from various languages are often interspersed in writing. When these phrases are identified, a speech synthesizer can voice text with the appropriate accent and pronunciation. When they are not identified, the speech synthesizer will use the default accent and pronunciation of the language on the rest of the content, which can make the phrase unintelligible. Identifying changes in language will also allow a tool to ask for automatic translations of that content. When editing content, authoring tools can switch between appropriate spelling dictionaries.

Providing the expansion of abbreviations and acronyms not only helps people who are not familiar with the abbreviation or acronym but can clarify which meaning of an abbreviation or acronym is appropriate to use. For example, the acronym "ADA" stands for both the American with Disabilities Act as well as the American Dental Association.

Defining key terms and specialized language will help people who are not familiar with the topic.

Facilitating unambiguous decoding of characters and words in content is also helpful for individuals who are learning to read or learning a second language.

All users, especially those with cognitive, learning, and/or reading disabilities benefit from the use of clear and simple writing. This should not discourage you from expressing complex or technical ideas.

Using clear and simple language also benefits people whose first language differs from your own, including those people who communicate primarily in sign language.

Sounds, graphics, videos and animations can help make concepts presented in a Web site easier to understand, especially for people with cognitive, reading, or learning disabilities or those who are unfamiliar with the language of the text of the site.

Summarizing information that is difficult to understand helps people who do not read well.

Providing a summary of the visual cues that show relationships between complex information helps people who do not use visual cues or who have difficulty using visual cues. For example, people who are completely blind do not use any visual cues, while people with dyslexia or with low vision might have difficulty interpreting visual cues.

Example 1: an acronym in a page title.

In the following heading, "People of the W3C." the acronym "W3C" is marked as an acronym. Because it has been marked appropriately, the user agent would be able to speak the letters of the acronym one at a time rather than attempting to pronounce it as though it were a word.

Example 2: a French phrase in an English sentence.

In the following sentence, "And with a certain je ne sais quoi, she entered both the room, and his life, forever." the French phrase "je ne sais quoi" is marked as French. Depending on the markup language, English may either be marked as the language for the entire document except where specified, or marked at the paragraph level.

Example 3: a description of a process.

A page describes how to learn to play soccer. Each step in learning the fundamentals of the game is illustrated with a photograph of a player doing what is described in the text.

Example 4: a description of a complex natural event.

A Web page discusses Mt. Pinatubo in the Phillipines. The page includes a description of the 1991 eruption as well as photos of the eruption and its aftermath. The page also includes a brief explanation of why volcanoes erupt. To clarify this explanation, there is also a link to an accessible video and 3D simulation of what happened underneath the crust and within the volcano during the eruption.

Example 6: stock trading data.

A news site is comparing the performance of the economy from 3rd quarter of this year with 3rd quarter from the last 3 years. They compare prices of the most popular stocks. They present the data in a bar graph with a link to the raw data they used to create the bar graph.

Example 7: history of music.

A grandfather's hobby is listening to and playing music. He creates a Web site that includes examples of many different types of music and musical instruments. When describing specific types of music, he links to a short sound clip.

Providing consistent and predictable responses to user actions is important feedback for users. This lets them know that your site is working properly and encourages them to continue interacting with the content. When users receive an unexpected response, they might conclude that something is wrong or broken. Some people might become so confused they will not be able to use your site.

Individuals who are unable to detect changes of context or may not realize that the context has changed are less likely to become disoriented while navigating a site. This applies to people in the following ways:

• Individuals who are blind or have low vision may have difficulty knowing when a visual context change, such as a new window popping up, has occurred. In this case, warning users of context changes in advance minimizes confusion when the user discovers that the back button no longer behaves as expected.

Some individuals with low vision, with dyslexia and who have difficulty interpreting visual cues may benefit from additional cues in order to detect changes of context.

Example 1: a form to deactivate pop-up windows.

A checkbox is provided on a page of links to let the user select whether they want the resultant pages to appear in new windows or not.

Example 2: a warning is given before displaying a pop-up window.

At the end of a news story, several links are provided for more information. At the beginning of each link is an icon of an arrow with the text equivalent, "Link will open in new window."

Example 3: frames that do not track history making the back button behave unexpectedly.

Example 4: forms.

Authors who ensure the accessibility of user interfaces within their content will:

• encounter fewer challenges when implementing these guidelines,

• avoid the need to create custom solutions and workarounds to address accessibility concerns,

• avoid the need to provide accessible alternate versions for content rendered in a technology that does not fully address these guidelines.

Benefits of determining and documenting technology requirements:

• Individuals can identify (either through site documentation or automatically through metadata) whether or not they are likely to be able to use a site. In conjunction with a search engine or a proxy server, this could be used to automatically filter out sites a user can not access or to automatically filter to the top sites that would be most usable.

• Documenting technology requirements will cause authors to evaluate assumptions about user agents and will minimize the number of sites that are inadvertently inaccessible because they are unaware of backward compatibility issues.

Benefits of ensuring user interface accessibility and providing accessible alternatives:

• Individuals who must use alternative browsing technologies and devices will be able to access the content.

• Individuals who can not afford or otherwise do not have access to newer technologies also benefit from backward compatibility in that they will not need to purchase upgrades or equipment as often.

Example 1: an online store that lists required technologies.

By documenting minimum user agent requirements, the store makes it possible for people using particular technologies to determine whether they are going to have trouble using the store or its checkout mechanism before they begin shopping. This prevents users from finding that, after they have selected their products and initiated a checkout process, they are unable to complete their transaction. They can, therefore, choose alternatives where they can be assured greater success.

Example 2: an intranet site that transforms gracefully.

A large company was concerned about the ability to address individuals at many diverse office locations that have different technology bases. To address the problem, they created two versions of their content and documented the requirements for each, making it easy for individual locations to determine which version would work best for their technologies.

Example 3: an informational site ensuring backward compatibility.

An information site covers a wide variety of subjects and wants to enable their visitors to quickly find the topics they're looking for. To do this, they have implemented an interactive menu system that is only supported in the most recent version of two popular user agents. To ensure that their visitors who do not use these specific user agents are still able to effectively use the site, a navigation mechanism that does not depend on the interactive menu system they are using is presented to user agents that do not support the newer technology.

Example 4: accessible APIs.

A Java applet uses the accessibility API defined by the language. Refer to the IBM Guidelines for Writing Accessible Applications Using 100% Pure Java.