Web Content Accessibility Guidelines 2.0

Who Benefits from Guideline 1.1 (Informative)

• 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.

Examples of Guideline 1.1 (Informative)

• 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.

  Editorial Note: Does the above example help to clarify level 1 success criterion 6 or does it need additional clarification?

• 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.

Who Benefits from Guideline 1.2 (Informative)

• 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.

People without disabilities also benefit from media alternatives:

• People in noisy environments or with muted sound often rely on captions.

• Captions help many people to develop language and reading skills.

• Audio descriptions provide visual information for people who are temporarily looking away from the video presentation, for example, when following an instructional video and looking at their hands.

• Captions and text descriptions make it possible to index and search media files.

Examples of Guideline 1.2 (Informative)

• 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

• Editorial Note: Examples to be developed: an animation with soundtrack of music with lyrics, an interactive slideshow, an animation with musical soundtrack..

Who Benefits from Guideline 1.3 (Informative)

• 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.

Examples of Guideline 1.3 (Informative)

• 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.

Who Benefits from Guideline 1.4 (Informative)

• 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.

Examples of Guideline 1.4 (Informative)

• 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.

Who Benefits from Guideline 2.1 (Informative)

• 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.

Examples of Guideline 2.1 (Informative)

• 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 or 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 doesn't 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 doesn't 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.)

Who Benefits from Guideline 2.2 (Informative)

• People with reading disabilities, cognitive disabilities, and learning disabilities often need more time than most people to read and comprehend written text.

• People with physical disabilities can access content that is updated often in cases where content might not be processed and read before being refreshed or when read out of order by an assistive technology or voice browser.

Examples of Guideline 2.2 (Informative)

• Examples of content 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.

Who Benefits from Guideline 2.3 (Informative)

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

Who Benefits from Guideline 2.4 (Informative)

• 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.

Examples of Guideline 2.4 (Informative)

• 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.

Who Benefits from Guideline 2.5 (Informative)

• Identifying typing errors helps individuals with writing disabilities and people with dyslexia who often have difficulty writing text in forms or other places that need text input.

• 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.

Examples of Guideline 2.5 (Informative)

• 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.