[contents]

W3C

Techniques for WCAG 2.0

Techniques and Failures for Web Content Accessibility Guidelines 2.0

W3C Working Draft 03 November 2008

This version:
http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20081103/
Latest version:
http://www.w3.org/TR/WCAG20-TECHS/
Previous version:
http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/
Editors:
Ben Caldwell, Trace R&D Center, University of Wisconsin-Madison
Michael Cooper, W3C
Loretta Guarino Reid, Google, Inc.
Gregg Vanderheiden, Trace R&D Center, University of Wisconsin-Madison
Previous Editors:
Wendy Chisholm (until July 2006 while at W3C)
John Slatin (until June 2006 while at Accessibility Institute, University of Texas at Austin)

This document is also available in these non-normative formats:


Abstract

"Techniques for WCAG 2.0" provides information to Web content developers who wish to satisfy the success criteria of Web Content Accessibility Guidelines (WCAG) 2.0. Techniques are specific authoring practices that may be used in support of the WCAG 2.0 success criteria. This document provides "General Techniques" that describe basic practices that are applicable to any technology, and technology-specific techniques that provide information applicable to specific technologies. Currently, technology-specific techniques are available for HTML, CSS, ECMAScript, SMIL, ARIA, and Web servers. The World Wide Web Consortium only documents techniques for non-proprietary technologies; the WCAG Working Group hopes vendors of other technologies will provide similar techniques to describe how to conform to WCAG 2.0 using those technologies. Use of the techniques provided in this document makes it easier for Web content to demonstrate conformance to WCAG 2.0 success criteria than if these techniques are not used.

Besides the techniques provided in this document, there may be other techniques that can be used to implement conformance to WCAG 2.0. The WCAG WG encourages submission of such techniques so they can be considered for inclusion in this document, in order to make the set of techniques maintained by the WCAG WG as comprehensive as possible. Please submit techniques for consideration using the "Techniques Submission Form."

This document is part of a series of documents published by the W3C Web Accessibility Initiative (WAI) to support WCAG 2.0.

Status of this Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

This is a Public Working Draft of "Techniques for WCAG 2.0". These techniques are produced by the Web Content Accessibility Guidelines Working Group to provide guidance about how to conform to the Web Content Accessibility Guidelines (WCAG) 2.0 Proposed Recommendation. Techniques are referenced from Understanding WCAG 2.0 and How to Meet WCAG 2.0. Please note that the contents of this document are informative (they provide guidance), and not normative (they do not set requirements for conforming to WCAG 2.0).

This Working Draft provides additional techniques to clarify WCAG 2.0 success criteria. Some techniques have been clarified or changed in response to comments received. Information about the relationship of success criteria is primarily indicated in Understanding WCAG 2.0, but advisory information is included in techniques as well. A summary of changes is available in the form of a version of Techniques for WCAG 2.0 with changes marked inline (all elements combined into one file).

Comments on this document are welcomed during the Proposed Recommendation period of WCAG 2.0. Your comments on this Working Draft will help the WCAG Working Group improve the document before it is published as a Working Group Note when WCAG 2.0 becomes a W3C Recommendation. While comments are not required in a particular time frame, the review period for the WCAG 2.0 Proposed Recommendation closes 2 December 2008, and the Working Group hopes to publish the final recommendation soon thereafter. Early comments on this document are therefore strongly encouraged. The Working Group requests that comments be made using the provided online or downloadable comment form. If this is not possible, comments can also be sent to public-comments-wcag20@w3.org. The archives for the public comments list are publicly available. Archives of the WCAG WG mailing list discussions are also publicly available.

Materials from the public to assist in documenting techniques are particularly welcomed. Please use the Techniques Submission Form to submit techniques.

This document has been produced as part of the W3C Web Accessibility Initiative (WAI). The goals of the WCAG Working Group are discussed in the WCAG Working Group charter. The WCAG Working Group is part of the WAI Technical Activity.

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. The group does not expect this document to become a W3C Recommendation. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.


Table of Contents

Appendix


Introduction to Techniques for WCAG 2.0

This document is part of a series of documents published by the W3C Web Accessibility Initiative (WAI) to support WCAG 2.0 [WCAG20]. It includes a variety of techniques which include specific authoring practices and examples for developing more accessible Web content. As well, it lists failures, which describe common mistakes that are considered failures of WCAG 2.0 Success Criteria.

In order to make the set of techniques maintained by the WCAG WG as comprehensive as possible, the WCAG WG encourages submission of new techniques so they can be considered for inclusion in this document. Please submit techniques for consideration using the "Techniques Submission Form."

Sufficient and Advisory Techniques

Rather than having technology specific techniques in WCAG 2.0, the guidelines and success criteria themselves have been written in a technology neutral fashion. In order to provide guidance and examples for meeting the guidelines using specific technologies (for example HTML) the working group has identified sufficient techniques for each Success Criterion that are sufficient to meet that Success Criterion. The list of sufficient techniques is maintained in the "Understanding WCAG 2.0" (and mirrored in How to Meet WCAG 2.0). In this way it is possible to update the list as new techniques are discovered, and as Web Technologies and Assistive Technologies progress.

Note that all techniques are informative. The "sufficient techniques" are considered sufficient by the WCAG Working Group to meet the success criteria. However, it is not necessary to use these particular techniques. If techniques are used other than those listed by the Working Group, then some other method for establishing the technique's ability to meet the success criteria would be needed

Most success criteria have multiple sufficient techniques listed. Any of the listed sufficient techniques can be used to meet the Success Criterion. There may be other techniques which are not documented by the working group that could also meet the Success Criterion. As new sufficient techniques are identified they will be added to the listing.

In addition to the sufficient techniques, there are a number of advisory techniques that can enhance accessibility, but did not qualify as sufficient techniques because are not sufficient to meet the full requirements of the success criteria, they are not testable, and/or are good and effective techniques in some circumstances but not effective or helpful in others. These are listed as advisory techniques and are right below the sufficient techniques. Authors are encouraged to use these techniques wherever appropriate to increase accessibility of their Web pages.

1. General Techniques


G1: Adding a link at the top of each page that goes directly to the main content area

Applicability

All technologies that contain links

This technique relates to:

Description

The objective of this technique is to provide a mechanism to bypass blocks of material that are repeated on multiple Web pages by skipping directly to the main content of the Web page. The first interactive item in the Web page is a link to the beginning of the main content. Activating the link sets focus beyond the other content to the main content. This technique is most useful when a Web page has one main content area, rather than a set of content areas that are equally important.

Note: Visible links are necessary for those navigating with a keyboard including switch users, those using techniques that generate keyboard strokes slowly, screen magnification software users, screen reader users working with sighted colleagues, keyboard only users and those navigating using voice recognition software.

Examples

Example 1: An online newspaper

An on-line newspaper contains many sections of information: a search function, a corporate banner, sidebars, minor stories, how to contact the newspaper, etc. The lead story is located in the middle of the page. The first link that the user reaches when tabbing through the page is titled "Skip to Lead Story". Activating the link moves visual focus to the story. Pressing tab again takes the user to the first link in the main story.

Example 2: A "Skip to main content" link

A Web page includes a variety of navigation techniques on each page: a bread crumb trail, a search tool, a site map, and a list of related resources. The first link on the page is titled "Skip to Main Content". A user activates the link to skip over the navigation tools.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that a link is the first focusable control on the Web page.

  2. Check that the description of the link communicates that it links to the main content.

  3. Check that the link is either always visible or visible when it has keyboard focus.

  4. Check that activating the link moves the focus to the main content.

  5. Check that after activating the link, the keyboard focus has moved to the main content

Expected Results
  • All checks above are true.


G4: Allowing the content to be paused and restarted from where it was paused

Applicability

Any technology that includes moving or scrolling content.

This technique relates to:

Description

The objective of this technique is to provide a way to pause movement or scrolling of content. If the user needs to pause the movement, to reduce distraction or to have time to read it, they can do so, and then restart it as needed. This mechanism can be provided either through interactive controls that conform to WCAG or through keyboard shortcuts. If keyboard shortcuts are used, they are documented.

Examples

  • A site contains a scrolling news banner at the top of the page. Users who need more time to read it can press the Escape key to pause the scrolling. Pressing Escape again restarts it.

  • A Web page contains a link labeled "How to tie a shoe" which links to a Flash animation. Text immediately preceding the link informs the user that pressing the spacebar will pause the animation and restart it again.

Tests

Procedure

On a page with moving or scrolling content,

  1. Use the mechanism provided in the Web page or by the user agent to pause the moving or scrolling content.

  2. Check that the moving or scrolling has stopped and does not restart by itself.

  3. Use the mechanism provided to restart the moving content.

  4. Check that the movement or scrolling has resumed from the point where it was stopped.

Expected Results
  • #2 and #4 are true.


G5: Allowing users to complete an activity without any time limit

Applicability

This technique applies to any technologies or methods supporting the implementation of an activity which does not require timed interaction for its functionality.

This technique relates to:

Description

The objective of this technique is to provide users with all the time they need to complete an activity. This technique involves providing a specified activity which does not require timed interaction. Users are allowed as much time as they need to interact with the activity.

Examples

  • An interactive exam for a course provides all questions on one Web page. Users can take as much time as they need to complete it.

  • In an interactive game, users can take as much time as they like on their turn instead of having to complete their move within a limited amount of time.

  • In an online auction, each bidder can submit only one bid rather than submitting multiple competitive bids based on timing. The bidding is open for a full day, providing enough time for anyone to complete the simple bid form. Once bidding is closed, the best bid wins.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Determine if any timed interactions are present.

Expected Results
  • #1 is false.


G8: Providing a movie with extended audio descriptions

Applicability

Any technology that supports audio and video.

This technique relates to:

Description

The objective of this technique is to provide a second version of video content that provides extended audio desciptions. One of the difficult things about creating traditional audio descriptions is that the narrator sometimes has to provide a lot of information during very short pauses in dialogue. Extended audio description temporarily pauses the audio and video to allow critical information to be delivered when pauses in dialogue are insufficient for adequate description.

Providing a second version of the movie with extended audio descriptions will make this content accessible for blind people who need to hear not only the dialogue but also the context and other aspects of the video that are not communicated by the characters' dialogue alone, and for which there is insufficient time during the natural dialogue.

Because it disrupts viewing for those who do not need the additional description, techniques that allow you to turn the feature on and off are often provided. Alternately, versions with and without the additional description can be provided.

Examples

Example 1

An alternate version of an online video of a family escaping from a burning building, there is a continuous dialogue between the husband and wife about where the children are. Meanwhile, in the background, a wall caves in, which is important information in the story because it will block their exit from that part of the building. The video track halts (same frame is repeated) while a narrator gives the details about the wall falling and the video continues.

Example 2

A training film has narrative that runs almost continuously throughout. An alternate version is available for people who have difficulty viewing the video portion. The alternate version freezes the video and provides audio description of key information.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Open the version of the movie that includes extended audio descriptions.

  2. Check that the video halts for extended audio description when there is not enough space to include necessary narration between the natural dialogue.

  3. Check that the necessary information is in the audio description.

  4. If the alternate version(s) are on a separate page, check for the availability of link(s) to allow the user to get to the other versions.

Expected Results
  • Checks #2 and #3 are true.


G9: Creating captions for live synchronized media

Applicability

Applies to all technologies that present Audio Visual information

This technique relates to:

Description

The objective of this technique is to allow users who cannot hear to be able to access real-time synchronized media broadcasts. It is more difficult to create accurate real-time captions because there is little time to correct mistakes or to listen a second time or consult someone to be sure the words are accurately reproduced. It is also harder to simplify or paraphrase information if it is flowing too quickly.

Real-time typing text entry techniques exist using stenographic and rapid typing technologies. Re-voicing speech-to-text (where a person listens to speech and then carefully re-voices it into a computer trained to their speech) is used today for telephone relay services and may be used in the future for captioning. Eventually speech-to-text with correction will be possible.

Examples

Example 1

Example 1: A television studio uses a real-time captioning service to create captions for its evening news online.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. a procedure and policy are in place to ensure that captions are delivered in real-time

Expected Results
  • #1 is true


G10: Creating components using a technology that supports the accessibility API features of the platforms on which the user agents will be run to expose the names and roles, allow user-settable properties to be directly set, and provide notification of changes

Applicability

programming technologies that have standard components that are programmed to interface with accessibility APIs

This technique relates to:

Description

The objective of this technique is to allow assistive technology to understand Web content so that it can convey equivalent information to the user through an alternate user interface.

Sometimes content is not created using markup language but rather using a programming language or tools. In many cases, these technologies have interface components that are already programmed to interface with accessibility APIs. If and author uses these components and fills in the properties (e.g. name, etc) the resulting user interface components in the content will be accessible to assistive technology.

However, if an author wants to create a user interface component that is new and they cannot use standard components, then they need to be sure to add the accessibility provisions themselves - and implement them in a way that is compatible with the accessibility API.

Examples

Example 1

Example 1: A Web page uses java to create an applet. A group of authors wants to create an entirely new type of interface component so they cannot use existing Java objects. They use Java swing classes to create their component because the Java swing classes already have provisions for connecting to different accessibility APIs. Using the Java swing classes they are able to create an interface component that exposes its name and role, is able to be set by AT and alerts AT to any updates.

Example 2: A Web page uses an original ActiveX control that is written in the C++ programming language. The control is written to explicitly support the Microsoft Active Accessibility (MSAA) API to expose information about accept commands. The control then interacts directly with assistive technology running the user agent on systems that support MSAA.

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. Render content using an accessible User Agent

  2. Use an Accessibility Tool designed for the Accessibility API of the User agent to evaluate each user interface component

  3. Check that name and role for each user interface component is found by the tool.

  4. Change the values on the component

  5. Check that the Accessibility tool is alerted.

Expected Results
  • Step #3 and #5 are true for each user interface component


G11: Creating content that blinks for less than 5 seconds

Applicability

Technologies that support blinking content.

This technique relates to:

Description

The objective of this technique is to minimize the distraction caused by blinking content and enable users to re-focus on the other content on the page.

Blinking content can be created using a variety of technologies, many of which include options to loop blinking content continuously or to otherwise specify the amount of time the blinking content is displayed. Limiting the blinking of content to five seconds minimizes the distraction that blinking can cause. This will benefit people with certain types of learning disabilities and people with low vision.

Examples

  • An animated image is used to highlight items on sale. Within a list of items for purchase, an image of a red tag followed by the phrase "On sale" is used to indicate items being offered at a reduced price. The image of the red tag blinks on loading of the page and stops within five seconds.

Tests

Procedure
  1. Find all items that blink.

  2. For each item that blinks, determine if the interval between the start and end of the blinking is less than five seconds.

Expected Results
  • #2 is true.


G13: Describing what will happen before a change to a form control that causes a change of context to occur is made

Applicability

Applies to all technologies.

This technique relates to:

Description

The objective of this technique is to provide information to users about what will happen when a change to a form control results in a change of context. Because changing the value of a form control does not typically result in a change of context, it is important that authors provide instructions that make the user aware of the behavior in advance. Where possible, it is a good idea to programmatically associate the instructions describing the change with the form control itself.

The following are some examples of how to provide the instruction in different situations.

  • Provide instruction on the Web page with reading order that precedes the user interface element that causes change of context by change of setting.

  • For a multi-step process where users must complete particular steps in order to reach the user interface element where changes of setting would cause a change of context, provide the instruction as part of the process prior to the step where they would encounter the change of context.

  • In the case of an intranet where user training is required prior to the use of a Web application where user interface elements that cause changes of context when settings are changed, instruction is provided as part of the training.

Examples

Example 1
  1. A series of radio buttons at the top of a page include options for German, French and Spanish. Instructions precede the buttons that instruct the user that the language will be changed upon selecting an option.

  2. A 50 question online survey displays one question at a time. Instructions appear at the beginning of the survey that explain that users will be taken to the next question of the survey upon selecting an answer to each question.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  • Locate content where changing the setting of a form control results in a change of context

  • Check to see that an explanation of what will happen when the control is changed is available prior to the controls activation

Expected Results
  • Check #2 is true.


G14: Ensuring that information conveyed by color differences is also available in text

Applicability

All technologies that support color and text.

This technique relates to:

Description

The objective of this technique is to ensure that when color differences are used to convey information, such as required form fields, the information conveyed by the color differences are also conveyed explicitly in text.

Examples

Example 1: A color-coded schedule

The schedule for sessions at a technology conference is organized into three tracks. Sessions for Track 1 are displayed over a blue background. Sessions in Track 2 are displayed over a yellow background. Sessions in Track 3 are displayed on a green background. After the name of each session is a code identifying the track in text: T1 for Track 1, T2 for Track 2, and T3 for Track 3.

Example 2: A color-coded schedule with icons

The schedule for sessions at a technology conference is organized into three tracks. Next to the title of each session is a colored icon showing what track it belongs to: blue icons represent track 1, yellow icons represent Track 2, and green icons represent Track 3. Each icon is associated with a text alternative reading "Track 1," "Track 2," or "Track 3," as appropriate.

Example 3: A form with required fields

A form contains several required fields. The labels for the required fields are displayed in red. In addition, at the end of each label is an asterisk character, *. The instructions for completing the form indicate that "all required fields are displayed in red and marked with an asterisk *", followed by an example.

Note: Asterisks may not be read by all screen readers (in all reading modes) and may be difficult for users with low vision because they are rendered in a smaller size than default text. It is important for authors to include the text indicating that asterisk is used and to consider increasing the size of the asterisk that is presented.

Example 4: A form with a green submit button

An on-line loan application explains that green buttons advance in the process and red buttons cancel the process. A form contains a green button containing the text Go. The instructions say "Press the button labeled Go to submit your results and proceed to the next step."

Resources

No resources available for this technique.

Tests

Procedure

For each item where a color difference is used to convey information:

  1. Check that the information conveyed is also available in text and that the text is not conditional content.

Expected Results
  • Check #1 is true.


G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold

Applicability

Applies to any technology

This technique relates to:

Description

The purpose of testing for violations of the general and red flash thresholds is to allow people who have photosensitive seizures to view Web sites without encountering material that is likely to cause a seizure. Warnings can be provided but people may miss them and children may not be able to read or understand them. With this technique all material is checked and if it violates flash or red flash thresholds it is either not put on the site or it is modified so that it does not violate the thresholds.

Note 1: There are some simple tests that can be run for particular simple types of flashing. For example:

Note 2: For all other types, a tool is needed to keep track of all the factors and apply them to the video on a time-continuous basis.

Examples

  • An animation of a thunderstorm shows six flashes of lightning. The flashes are so fast and large that the general flash threshold is violated when tested with a flash analysis tool. The animation is modified to create a short pause after each pair of lightning flashes. After the changes are made, the animation does not violate the general flash threshold.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

Check to see to see that content does not violate the general flash and/or red flash threshold

  1. use a tool that to determine that neither the General Flash nor Red Flash threshold were exceeded

Expected Results
  • Check #1 is true.


G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text

Applicability

Any technology that produces visual output.

This technique relates to:

Description

The objective of this technique is to make sure that users can read text that is presented over a background. This technique goes beyond the 5:1 contrast technique to provide a higher level of contrast to make it easier for people with low vision to read.

If the background is a solid color (or all black or all white) then the contrast ratio of the text can be maintained by making sure that each of the text letters have a 7:1 contrast ratio with the background.

If the background or the letters vary in relative luminance (or are patterned), then the background around the letters can be chosen or shaded so that the letters maintain a 7:1contrast ratio with the background behind them even if they do not have that contrast ratio with the entire background.

The contrast ratio can sometimes be maintained by changing the relative luminance of the letters as the relative luminance of the background changes across the page.

Another method is to provide a halo around the text that provides the necessary contrast ratio if the background image or color would not normally be sufficiently different in relative luminance.

Examples

  • A black background is chosen so that light colored letters that match the company's logo can be used.

  • Text is placed over a picture of the college campus. Since a wide variety of colors and darknesses appear in the picture the area behind the text is fogged white so that the picture is very faint and the maximum darkness is still light enough to maintain a 7:1 contrast ratio with the black text written over the picture.

Resources

(none currently listed)

Tests

Procedure
  1. Measure the relative luminance of each letter (unless they are all uniform) using the formula:

    • L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:

      • if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4

      • if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4

      • if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

      and RsRGB, GsRGB, and BsRGB are defined as:

      • RsRGB = R8bit/255

      • GsRGB = G8bit/255

      • BsRGB = B8bit/255

      The "^" character is the exponentiation operator.

    Note: For aliased letters, use the relative luminance value found two pixels in from the edge of the letter.

  2. Measure the relative luminance of the background pixels immediately next to the letter using same formula.

  3. Calculate the contrast ratio using the following formula.

    • (L1 + 0.05) / (L2 + 0.05), where

  4. Check that the contrast ratio is equal to or greater than 7:1

Expected Results
  • #4 is true


G18: Ensuring that a contrast ratio of at least 5:1 exists between text (and images of text) and background behind the text

Applicability

Any technology that produces visual output.

This technique relates to:

Description

The objective of this technique is to make sure that users can read text that is presented over a background. For Success Criterion 1.4.3, this technique describes the minimum contrast ratio for text that is less than 18 point (if not bold) and less than 14 point (if bold). For Success Criterion 1.4.5, this technique relaxes the 7:1 contrast ratio requirement for text that is at least 18 point (if not bold) or at least 14 point (if bold).

If the background is a solid color (or all black or all white) then the relative luminance of the text can be maintained by making sure that each of the text letters have 5:1 contrast ratio with the background.

If the background or the letters vary in relative luminance (or are patterned) then the background around the letters can be chosen or shaded so that the letters maintain 5:1 contrast ratio with the background behind them even if they do not have that contrast ratio with the entire background.

The contrast ratio can sometimes be maintained by changing the relative luminance of the letters as the relative luminance of the background changes across the page.

Another method is to provide a halo around the text that provides the necessary contrast ratio if the background image or color would not normally be sufficiently different in relative luminance.

Examples

  • A black background is chosen so that light colored letters that match the companies logo can be used.

  • Text is placed over a picture of the college campus. Since a wide variety of colors and darknesses appear in the picture, the area behind the text is fogged white so that the picture is very faint and the maximum darkness is still light enough to maintain a 5:1 contrast ratio with the black text written over the picture.

    See also the contrast samples in related resources.

Resources

(none currently listed)

Tests

Procedure
  1. Measure the relative luminance of each letter (unless they are all uniform) using the formula:

    • L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:

      • if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4

      • if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4

      • if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

      and RsRGB, GsRGB, and BsRGB are defined as:

      • RsRGB = R8bit/255

      • GsRGB = G8bit/255

      • BsRGB = B8bit/255

      The "^" character is the exponentiation operator.

    Note: For aliased letters, use the relative luminance value found two pixels in from the edge of the letter.

  2. Measure the relative luminance of the background pixels immediately next to the letter using same formula.

  3. Calculate the contrast ratio using the following formula.

    • (L1 + 0.05) / (L2 + 0.05), where

  4. Check that the contrast ratio is equal to or greater than 5:1

Expected Results
  • #4 is true.


G19: Ensuring that no component of the content flashes more than three times in any 1-second period

Applicability

Applies to any technology

This technique relates to:

Description

The objective of this technique is to avoid flashing at rates that are known to cause seizures if the flashes are bright and large enough. Since some users may be using screen enlargers, this technique limits the flashing of any size content to no more than three flashes in any 1-second period.

Note 1: This technique is stricter than the Level 1 Success Criteria but is easier to test and can be used to meet the Level 1 Success Criteria because all failure thresholds in the Level 1 Success Criteria involve flashing 3.5 flashes or more within one second. Most content does not flash at all and even content that blinks does not blink this fast except on rare occasions. Therefore, in order to avoid having to carry out the more complex testing specified by the Success Criteria, one could follow this technique to ensure that content only flashes one, two, or at most three times in any 1-second period.

Note 2: Regarding 3.5 Flashes; if there are seven transitions from dark to light or light to dark, it would be 3.5 flashes, which is more than the allowed three flashes (six transitions).

Examples of 3.5 flashes or seven transitions:

  • STARTING DARK-LIGHT-DARK-LIGHT-DARK-LIGHT-DARK-LIGHT or

  • STARTING LIGHT-DARK-LIGHT-DARK-LIGHT-DARK-LIGHT-DARK.

Examples

  • Content has lightning flashes. Content is designed so that lightning only flashes two or three times without a pause in flashing.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that there are no more than three flashes during any 1-second period.

  2. If there are three flashes, check that the Light/Dark status at the end of the 1-second period is the same as at the start.

Expected Results
  • Both Step 1 and Step 2 are true.


G21: Ensuring that users are not trapped in content

Applicability

All technologies which support interactive operation.

This technique relates to:

Description

The objective of this technique is to ensure that keyboard users do not become trapped in a subset of the content that can only be exited using a mouse or pointing device. A common example is content rendered by plug-ins. Plug-ins are user agents that render content inside the user agent host window and respond to all user actions that takes place while the plug-in has the focus. If the plug-in does not provide a keyboard mechanism to return focus to the parent window, users who must use the keyboard may become trapped in the plug-in content.

This problem can be avoided by using one of the following mechanisms to provide a way for users to escape the subset of the content:

  • Ensuring that the keyboard function for advancing focus within content (commonly the tab key) exits the subset of the content after it reaches the final navigation location.

  • Providing a keyboard function to move the focus out of the subset of the content. Be sure to document the feature in an accessible manner within the subset.

  • If the technology used in the subset of the content natively provides a "move to parent" keyboard command, documenting that command before the user enters the plug-in so they know how to get out again.

If the author uses a technology that allows users to enter the sub-content with keyboard and does not allow users to exit the sub-content with keyboard by default (i.e. it is not a feature of the Web content technology or its user agents) then, in order to implement this technique the author would either build such a capability into their content or not use the technology.

Examples

  • Once a user tabs into an applet, further tabs are handled by the applet preventing the person from tabbing out. However, the applet is designed so that it returns keyboard focus back to the parent window when the person finishes tabbing through the tab sequence in the applet.

  • A page that includes content that is not accessibility-supported contains instructions about how to move focus back to the accessibility-supported content via the keyboard. The instructions precede the non accessibility-supported content.

  • The help information available from the content that is not accessibility supported documents how to move focus back to the accessibility-supported content via the keyboard, and the help information can be accessed via the keyboard.

  • The help information available for the Web page documents how to move focus from the content that is not accessibility supported to the accessibility-supported content via the keyboard, and the help information can be accessed via the keyboard.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. tab through content from start to finish.

  2. check to see if keyboard focus is trapped in any of the content such that the person cannot move out of any part of the content and continue through the rest of the content.

Expected Results
  • #2 is false


G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence

Applicability

All technologies that contain links.

This technique relates to:

User Agent and Assistive Technology Support Notes

JAWS 5.0 and later includes the following keystrokes:

  • alt+leftArrow: read previous sentence

  • alt+rightArrow: read next sentence

  • alt+NumPad 5: read current sentence

  • Ctrl+NumPad5: read current paragraph

Window-Eyes 5.5 has hotkeys to read the current sentence and current paragraph.

To surf the internet with WindowEyes you must be in browse mode. Current sentence and current paragraph hot keys do not work in browse mode in version 6.1.

The factory default settings for reading surrounding link context are as follows:

Desktop settings:

  • Character = CTRL-NUMPAD-LEFT ARROW

  • Word = CTRL-NUMPAD-RIGHT ARROW

  • Line = CTRL-NUMPAD-CENTER

  • Sentence = Not available in Browse mode

  • (Next Sentence command is undefined by default on Desktop mode but the next line is the DOWN Arrow.)

  • Next Paragraph = P

  • Prior Paragraph = Shift P

  • Current Paragraph = Not Available in Browse mode

Laptop

  • Character = ALT-SHIFT-LESS THAN

  • Word Prior = ALT-SHIFT-J

  • Word = ALT-SHIFT-K

  • Word Next = ALT-SHIFT-L

  • Sentence Prior = ALT-SHIFT-7

  • Sentence = unavailable in browse mode

  • Sentence Next = unavailable in browse mode

  • Paragraph = Undefined on Laptop by default

  • Line Prior = ALT-SHIFT-U

  • Line = ALT-SHIFT-I

  • Line Next = ALT-SHIFT-O

Description

The objective of this technique is to identify the purpose of a link from the link and its sentence context. The sentence enclosing the link provides context for an otherwise unclear link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the URI of the destination is generally not sufficiently descriptive.

Note: These descriptions will be most useful to the user if the additional information needed to understand the link precedes the link. If the additional information follows the link, there can be confusion and difficulty for screen reader users who are reading through the page in order (top to bottom).

Examples

Example 1:

A Web page contains the sentence "To advertise on this page, click here."

Although the link phrase 'click here' is not sufficient to understand the link, the information needed precedes the link in the same sentence.

Example 2:

A Web page contains the sentence "The first pilgrims came to America on the Mayflower."

Example 3:

In the news summary containing the sentence "The Smallville Times reports that the School Board chose a 2007 school calendar that starts on August 27.", the words "reports that" are a link to an article in the Smallville Times about the School Board meeting.

Note: Although this example satisfies the Success Criterion, putting information needed to understand the link after the link in this way is awkward for those who are reading through the document with a screen reader.

Resources

No resources available for this technique.

Tests

Procedure

For each link in the content that uses this technique:

  1. Check that the link is part of a sentence

  2. Check that text of the link combined with the text of its enclosing sentence describes the purpose of the link

Expected Results
  • The above checks are true.


G54: Including a sign language interpreter in the video stream

Applicability

Applies to all technologies that present synchronized media information

This technique relates to:

Description

The objective of this technique is to allow users who cannot hear or read text rapidly to be able to access synchronized media material.

For those who communicate primarily in sign language it is sometimes less preferable and sometimes not possible for them to read and understand text at the rate it is presented in captions. For these latter individuals it is important to provide sign language presentation of the audio information.

One universally compatible way of doing this is to simply embed a video of the sign language interpreter in the video stream. This has the disadvantage of providing a lower resolution image that cannot be easily enlarged without enlarging the entire image.

Note 1: If the video stream is too small, the sign language interpreter will be indiscernible. When creating a video steam that includes a video of a sign language interpreter, make sure there is a mechanism to play the video stream full screen in the accessibility-supported content technology. Otherwise, be sure the interpreter portion of the video is adjustable to the size it would be had the entire video stream been full screen.

Note 2: Since sign language is not usually a signed version of the printed language, the author has to decide which sign language to include. Usually the sign language of the primary audience would be used. If intended for multiple audiences, multiple sign languages may be used. Refer to advisory techniques for multiple sign languages.

Examples

  • Example 1: A television station provides a sign language interpreter in the corner of its on-line news video.

Resources

Resources are for information purposes only, no endorsement implied.

  • Guidelines for the Production of Signing Books

    • "Sign Language presentation" gives a broad overview of issues to consider when filming sign language interpreters. Includes discussion of signing both written and spoken originals.

    • Techniques for filming are discussed in chapter 12, “Filming the Signer(s)".

    • Useful information about how to display the sign language interpreter in relation to the original synchronized media content is provided in Chapter 13, "Editing"

      Note: These techniques may need to be adapted for Web-based presentation.

(none currently listed)

Tests

Procedure
  1. Have someone watch the program who can hear and is familiar with the sign language being used.

  2. Check to see if there is a sign language interpreter on screen.

  3. Check to see that dialogue and important sounds are being conveyed by the interpreter visible on screen.

Expected Results
  • #2 and #3 are true


G55: Linking to definitions

Applicability

All technologies that include links.

This technique relates to:

Description

The objective of this technique is to make the definition of a word, phrase, or abbreviation available by providing the definition, either within the same Web page or in a different Web page, and establishing a link between the item and its definition.

Links are a powerful option for providing access to the definition of a word, phrase, or abbreviation. A user can use the link to find the definition quickly and easily, and then return to his place in the content via the user agent's Back button.

Examples

Example 1

Technical terms and abbreviations in an article about sports injuries are linked to definitions in a medical dictionary.

Example 2

A textbook contains a glossary of new vocabulary words introduced in each chapter. The first occurrence of each of these words is linked to its definition in the glossary.

Example 3

A general glossary of abbreviations is provided. All occurrences of abbreviations are linked directly to the appropriate definition within that glossary.

Example 4

The word jargon is linked to its definition in the WCAG2 Glossary.

Example 5

The word "modulo" is jargon used in Web content about mathematics. A definition for modulo is included within the Web page. Each occurrence of the word modulo is linked to its definition.

Example 6

A Japanese idiom is linked to its definition. This example uses a link within the page to navigate to the definition of an idiomatic expression.

Example Code:


<p>....<a href="#definition">さじを投げる</a>....</p>

<h3>脚注:</h3>
<dl>
<dt id="definition" name="definition">さじを投げる</dt>
<dd>どうすることもできなくなり、あきらめること。</dd>
</dl> 

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

For each word, phrase, or abbreviation to be defined:

  1. Check that at least the first instance of the item is a link.

  2. Check that each link navigates to the definition of the item.

Expected Results
  • Checks #1 and #2 are true.


G56: Mixing audio files so that non-speech sounds are at least 20 decibels lower than the speech audio content

Applicability

Any technology

This technique relates to:

Description

The objective of this technique is to allow authors to include sound behind speech without making it too hard for people with hearing problems to understand the speech. Making sure that the foreground speech is 20 db louder than the backgound sound makes the speech 4 times louder than the background audio. For information on Decibels (dB), refer to About Decibels.

Examples

Example 1: An announcer speaking over a riot scene
  • A narrator is describing a riot scene. The volume of the riot scene is adjusted so that it is 20 db lower than the announcer's volume before the scene is mixed with the narrator.

Example 2: Sufficient audio contrast between a narrator and background music

This example demonstrates a voice with music in the background in which the voice is the appropriate 20 DB above the background. The voice (foreground) is recorded at -17.52 decibels (average RMS) and the music (background) is at -37.52 decibels, which makes the foreground 20 decibels louder than the background.

Audio example

Audio Example: Foreground is 20 decibels above the background (mp3)

Transcript of audio example (good contrast):

"Usually the foreground refers to a voice that is speaking and should be understood. My speaking voice right now is 20 decibels above the background which is the music. This is an example of how it should be done.."

Visual example of the recording above

The audio example above is visually represented below in a snapshot of the file in an audio editor. A section is highlighted that contains foreground and background. It is a much larger wave than the section that contains only background.

Visual representation of sufficient contrast.
Failure Example 3: Insufficient Audio Contrast between a narrator and background music
Audio example of the failure

This example demonstrates a voice with music in the background in which the voice is not 20 DB above the background. The voice (foreground) is at -18 decibels and the music (background) is at about -16 decibels making the foreground only 2 decibels louder than the background.

Audio Example: Foreground is less than 20 decibels above the background (mp3)

Transcript of audio example (bad contrast):

"This is an example of a voice that is not loud enough against the background. The voice which is the foreground is only about 2 decibels above the background. Therefore is difficult to understand for a person who is hard of hearing. It is hard to discern one word from the next. This is an example of what not to do."

Visual example of the failure

The highlighted section contains foreground and background. The wave is almost the same size the section that contains only background, which means the background is too loud in comparison to the foreground voice.

Visual representation of bad contrast.

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. Locate loud values of background content between foreground speech

  2. Measure the volume in dB(A) SPL

  3. Measure the volume of the foreground speech in dB(A) SPL

  4. Subtract the values

  5. Check that the result is 20 or greater.

Expected Results
  • #5 is true


G57: Ordering the content in a meaningful sequence

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to ensure that the order of content presented to assistive technologies allows the user to make sense of the content. Some techniques permit the content to be rendered visually in a meaningful sequence even if the underlying order of the content is confusing.

For example, when mixing languages with different directionality in HTML, the bidirectional algorithm may place punctuation in the wrong place. Correctly ordered content maintains the punctuation in the correct sequence in the content stream and uses markup to override the bidirectional algorithm, rather than moving the punctuation in the content stream so that the default rendering positions it correctly.

When rendered visually, white space characters such a space or tab may not appear to be part of the content. However, when inserted into the content to control visual formatting, they may interfere with the meaning of the content.

At a larger granularity, controlling the placement of blocks of content in an HTML document using layout tables may produce a rendering in which related information is positioned together visually, but separated in the content stream. Since layout tables are read row by row, if the caption of an illustration is placed in the row following the illustration, it may be impossible to associate the caption with the image.

Examples

Example 1

A Web page from a museum exhibition contains a navigation bar containing a long list of links. The page also contains an image of one of the pictures from the exhibition, a heading for the picture, and a detailed description of the picture. The links in the navigation bar form a meaningful sequence. The heading, image, and text of the description also form a meaningful sequence. CSS is used to position the elements on the page.

Example Code:


Markup:

<h1>My Museum Page</h1>
<ul id="nav">
	<li><a href="#">Link 1</a></li>
	...
	<li><a href="#">Link 10</a></li>
</ul>
<div id="description">
<h2>Mona Lisa</h2>
<p>
<img src="img.png" alt="Mona Lisa">
</p>
<p>...detailed description of the picture...</p>
</div>

CSS:

ul#nav
{
	float: left;
	width: 9em;
	list-style-type: none;
	margin: 0;
	padding: 0.5em;
	color: #fff;
	background-color: #063;
}

ul#nav a
{
	display: block;
	width: 100%;
	text-decoration: none;
	color: #fff;
	background-color: #063;
}

div#description
{
	margin-left: 11em;
}

Resources

No resources available for this technique.

Tests

Procedure
  1. Linearize content using a standard approach for the technology (e.g., removing layout styles or running a linearization tool)

  2. Check to see if the order of content yields the same meaning as the original

Expected Results
  • Check #2 is true.


G58: Placing a link to the alternative for time-based media immediately next to the non-text content

Applicability

This technique is not technology specific and can be used in any technology that supports links.

This technique relates to:

Description

With this technique, a link to the collated document of captions and audio description is provided. The collated document could be at another location on the same Web page or at another URI. A link to the collated document is immediately adjacent to the non-text content. The link can be immediately before or after the synchronized media content. If the collated document is on the same Web page as other content then put "End of document" at the end so that they know when to stop reading and return to their previous place. If a "Back" button will not take the person back to the point from which they jumped, then a link back to the non-text content location is provided.

Examples

Example 1: An .MOV Document in an HTML Document

Code on a page called "Olympic_Sports.htm"

Example Code:


<a name="Olympic_Wrestling"></a>
<p><a href="http://www.example.com/movies/olympic_wrestling.mov">Olympic Wrestling movie</a>, 
<a href="http://www.example.com/transcripts/olympic_wrestling_transcript.htm>Olympic 
Wrestling collated Transcript</a></p>
Example 2: The link back to the .MOV Document in an HTML Document

Code on the page olympic_wrestling_transcript.htm

Example Code:


<p>Sports announcer 1: This is a great battle tonight between England's "Will Johnson" and 
"Theodore Derringo" from Argentina</p>

<p>Scenery: There is a mat set out in the middle of the stadium with 500 people in the 
stands...</p>

<p> ...more dialogue ...<p>

<p> ...more scenery...</p>

<p> ...etc...</p>

<p>Sports announcer 2: And that is all for tonight, thank you for joining us tonight where 
Will Johnson is the new Gold Medalist. 
<a href="../movies/Olympic_Sports.htm#Olympic_Wrestling>Return to Movie page</a> </p>

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Check for the presence of a link immediately before or after the non-text content

  2. Check that it is a valid link that points directly to the collated document of this particular synchronized media.

  3. Check for the availability of a link or back function to get the user back to the original location of the synchronized media content

Expected Results
  • Items #1 through 3 are all true.


G59: Placing the interactive elements in an order that follows sequences and relationships within the content

Applicability

All technologies that contain interactive elements and define a default tab order for interactive elements.

This technique relates to:

Description

The objective of this technique is to ensure that interactive elements receive focus in an order that follows sequences and relationships in the content. When designing the content, the interactive elements such as links and form controls are placed in the content so that the default tab order follows the sequences and relationships in the content. Each technology defines its default tab order, so the mechanism for placing the controls in the content will depend on the technology used.

As an example, in HTML, the default focus order follows the order in which elements appear in the content source. When the order of the HTML source matches the visual order of the Web page, tabbing through the content follows the visual layout of the content. When the source order does not match the visual order, the tab order through the content must reflect the logical relationships in the content that are displayed visually.

Examples

  • A form contains two text input fields that are to be filled in sequentially. The first text input field is placed first in the content, the second input field is placed second.

  • A form contains two, side-by-side sections of information. One section contains information about an applicant; the other section contains information about the applicant's spouse. All the interactive elements in the applicant section receive focus before any of the elements in the spouse section. The elements in each section receive focus in the reading order of that section.

Resources

No resources available for this technique.

Tests

Procedure
  1. Determine the order of interactive elements in the content.

  2. Determine the logical order of interactive elements.

  3. Check that the order of the interactive elements in the content is the same as the logical order.

Expected Results
  • Check #3 is true.


G60: Playing a sound that turns off automatically within three seconds

Applicability

Applies to all technologies except those for voice interaction.

This technique relates to:

Description

The purpose of this technique is to allow authors to play a sound on their Web page but avoid the problem of users not being able to use their screen readers due to interference by the content sound. It also allows the author to avoid putting controls on the Web page to control the sound - and the problem faced by users with screen readers in finding the control (when unable to hear their screen reader).

The technique is simple. The sound plays for 3 or less seconds and stops automatically.

Examples

  • Example 1: A Web page opens with a trumpet fanfare and then goes silent

  • Example 2: A homepage opens with the chairman saying "Binfor, where quality is our business." then going silent.

  • Example 3: A Web page opens with instructions on how to get started: "To begin, press the enter key."

  • Example 4: A Web page opens with a warning and then goes silent.

Resources

Resources are for information purposes only, no endorsement implied.

(none)

(none currently listed)

Tests

Procedure
  1. Load the Web page

  2. Check that all sound that plays automatically stops in 3 seconds or less

Expected Results
  • #2 is true


G61: Presenting repeated components in the same relative order each time they appear

Applicability

Any technologies.

This technique relates to:

Description

The objective of this technique is to make content easier to use by making the placement of repeated components more predictable. This technique helps maintain consistent layout or presentation between Web pages by presenting components that are repeated in these Web units in the same relative order each time they appear. Other components can be inserted between them, but their relative order is not changed.

This technique also applies to navigational components that are repeated. Web pages often contain a navigation menu or other navigational component that allows the user to jump to other Web pages. This technique makes the placement of navigational components more predictable by presenting the links or programmatic references inside a navigational component in the same relative order each time the navigational component is repeated. Other links can be removed or inserted between the existing ones, for example to allow navigation inside a subsection of a set of Web pages, but the relative order is not changed.

Examples

  • A Web site has a logo, a title, a search form and a navigation bar at the top of each page; these appear in the same relative order on each page where they are repeated. On one page the search form is missing but the other items are still in the same order.

  • A Web site has a left-hand navigation menu with links to the major sections of the site. When the user follows a link to another section of the site, the links to the major sections appear in the same relative order in the next page. Sometime links are dropped and other links are added, but the other links always stay in the same relative order. For example, on a Web site of a company that sells products and offers training, when a user moves from the section on products to the section on training, the links to individual products are removed from the navigation list, while links to training offerings are added.

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. List components that are repeated on each Web page in a set of Web pages (for example, on each page in a Web site).

  2. For each component, check that it appears in the same relative order with regard to other repeated components on each Web page where it appears.

  3. For each navigational component, check that the links or programmatic references are always in the same relative order.

Expected Results
  • #2 is true.

  • #3 is true.


G62: Providing a glossary

Applicability

Any technology containing text.

This technique relates to:

Description

The objective of this technique is to make the definition of a word, phrase, or abbreviation available by providing the definition in a glossary. A glossary is an alphabetical list of words, phrases, and abbreviations with their definitions. Glossaries are most appropriate when the words, phrases, and abbreviations used within the content relate to a specific discipline or technology area. A glossary can also provide the pronunciation of a word or phrase.

The glossary is included at the end of the Web page or the glossary is located via one of the mechanisms for locating content within a set of Web pages. (See Understanding Success Criterion 2.4.5.)

If the glossary contains several definitions for the same word, phrase, or abbreviation, simply providing the glossary is not sufficient to satisfy this Success Criterion. A different technique should be used to find the correct definition. This is especially important if the uses of the word, phrase, or abbreviation are not unique within the Web page, that is, if different occurrences of the item have different definitions.

Examples

Example 1

Users of on line chat forums have created several acronyms and abbreviations to speed up typing conversations on the computer. For example, LOL refers to "laughing out loud" and FWIW abbreviates "for what it's worth". The site provides a glossary page that lists the expansions for the commonly used acronyms and abbreviations.

Example 2

A Web page discussing mathematical theory includes a glossary of commonly used mathematical terms, abbreviations and acronyms.

Example 3

A textbook contains a glossary of new vocabulary words introduced in each chapter.

Example 4

Dutch text uses the phrase 'Hij ging met de kippen op stok' (He went to roost with the chickens). The glossary explains that this phrase means 'Hij ging vroeg naar bed' (He went to bed early).

Example 5: A glossary of idiomatic expressions

The American novel "The Adventures of Huckleberry Finn" includes many idiomatic expressions that were used in the southwestern United States in the 1840s. In an online edition designed for students, each idiomatic expression is linked to an item in the glossary.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Check that either

    • The glossary is included in the Web page, or

    • A mechanism is available to locate the glossary.

  2. Check that each word, phrase, or abbreviation to be defined is defined in the glossary

  3. Check that the glossary contains only one definition for each item.

Expected Results
  • All three checks above are true.

Note: The definition of abbreviation used in WCAG is : "shortened form of a word, phrase, or name where the original expansion has not been rejected by the organization that it refers to and where the abbreviation has not become part of the language."


G63: Providing a site map

Applicability

All technologies.

This technique relates to:

Description

This is one of a series of techniques for locating content that are sufficient for addressing Success Criterion 2.4.5. A site map is a Web page that provides links to different sections of the site. To make the site map available within the site, at a minimum every page that is listed in the site map contains a link to the site map.

The site map serves several purposes.

  • It provides an overview of the entire site.

  • It helps users understand what the site contains and how the content is organized.

  • It offers an alternative to complex navigation bars that may be different at different parts of the site.

There are different types of site maps. The simplest and most common kind of site map is an outline that shows links to each section or sub-site. Such outline views do not show more complex relationships within the site, such as links between pages in different sections of the site. The site maps for some large sites use headings that expand to show additional detail about each section.

A site map describes the contents and organization of a site. It is important that site maps be updated whenever the site is updated. A Web page that does not link to all the sections of a site, that presents an organization that is different from the site's organization, or that contains links that are no longer valid is not a valid site map.

Examples

Example 1

The Web Accessibility Initiative provides a WAI site map that lists different sections of its Web site. The site map shows the different sections of the Web site, and shows some of the substructure within those sections.

Example 2

The site map for an on-line magazine lists all the sections of the magazine and the subsections in each section. It also include links for Help, How to Contact Us, Privacy Policy, Employment Opportunities, How to Subscribe, and the home page for the magazine.

Resources

Resources are for information purposes only, no endorsement implied.

  • Graphic Organizers page at the National Center for Accessible Curriculum provides a useful overview of different kinds of graphic organizers and their uses, plus a summary of relevant research on the effectiveness of graphical organizers for students with learning disabilities.

  • Usability Glossary: sitemap

Tests

Procedure
  1. Check that the site contains a site map.

  2. Check that the links in the site map lead to the corresponding sections of the site.

  3. For each link in the site map, check that the target page contains a link to the site map.

  4. For each page in the site, check that the page can be reached by following some set of links that start at the site map.

Expected Results
  • All of the checks above are true.


G64: Providing a Table of Contents

Applicability

All technologies.

This technique relates to:

Description

This is one of a series of techniques for locating content that are sufficient for addressing Success Criterion 2.4.5. A table of contents provides links to sections and subsections of the same document. The information in the document is usually organized hierarchically, and is intended to be read sequentially. Just as there could be many books in a library, each with its own table of contents, a Web site may contain many documents, each with its own table of contents.

The table of contents serves two purposes:

  • It gives users an overview of the document's contents and organization.

  • It allows readers to go directly to a specific section of an on-line document.

The table of contents typically includes only major sections of the document, though in some cases an expanded table of contents that provides a more detailed view of a complex document may be desirable.

The sections of the document could be located on the same Web page or divided into multiple Web pages. A table of contents is particularly useful when a document is divided into multiple Web pages.

There is a distinction between a table of contents and other Navigational elements such as a Navigation Bar or Site Map. A table of contents provides links to sections of the same document. Those sections could be located on the same Web page or spread across multiple Web pages. But together, they make a complete idea. To better understand this, consider a hard copy book which has sections. Each section belongs to the book. There could be many books in a library. In this example, the "library" is the entire Web site.

Examples

Example 1

The Web Content Accessibility Guidelines 2.0 contains a table of contents that is a hierarchical list of links to the sections and subsections of the document. The hierarchy of the table of contents reflects the organization of the sections, and each item in the table of contents is a link that takes the user directly to that section.

Example 2

The first page of Using Accessible PDF Documents with Adobe Reader 7.0: A Guide for People with Disabilities contains a table of contents that lists the sections of the guide. The PDF version of the Guide for People with Disabilities contains a more detailed table of contents for the entire document on page 3.

Resources

No resources available for this technique.

Tests

Procedure
  1. Check that a table of contents or a link to a table of contents exists in the document.

  2. Check that the values and order of the entries in the table of contents correspond to the names and order of the sections of the document.

  3. Check that the entries in the table of contents link to the correct sections of the document.

Expected Results
  • All checks above are true.


G65: Providing a breadcrumb trail

Applicability

All technologies.

This technique relates to:

Description

A breadcrumb trail helps the user to visualize how content has been structured and how to navigate back to previous Web pages, and may identify the current location within a series of Web pages. A breadcrumb trail either displays locations in the path the user took to reach the Web page, or it displays the location of the current Web page within the organization of the site.

Breadcrumb trails are implemented using links to the Web pages that have been accessed in the process of navigating to the current Web page. They are placed in the same location within each Web page in the set.

It can be helpful to users to separate the items in the breadcrumb trailing with a visible separator. Examples of separators include ">", "|", "/", and "::".

Examples

Example 1

A developer searches within the Web site of an authoring tool manufacturer to find out how to create hyperlinks. The search results bring him to a Web page with specific instructions for creating hyperlinks using the authoring tool. It contains the following links to create a breadcrumb trail:

Example Code:


Home :: Developer Center :: How To Center 

In this example the breadcrumb trail does not contain the title of the current Web page, "How to create hyperlinks". That information is available as the title of the Web page.

Example 2

A photographer's portfolio Web site has been organized into different galleries and each gallery has further been divided into categories. A user who navigates through the site to a Web page containing a photo of a Gentoo penguin would see the following breadcrumb trail at the top of the Web page:

Example Code:


Home / Galleries / Antarctica / Penguins / Gentoo Penguin 

All of the items except "Gentoo Penguin" are implemented as links. The current location, Gentoo Penguin, is included in the breadcrumb trail but it is not implemented as a link.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

When breadcrumb trails have been implemented in a set of Web pages:

  1. Navigate to a Web page.

  2. Check that a breadcrumb trail is displayed.

  3. Check that the breadcrumb trail displays the correct navigational sequence to reach the current location or the correct hierarchical path to the current location within the site structure.

  4. For a breadcrumb trail that does not include the current location:

    1. Check that all elements in the breadcrumb trail are implemented as links.

  5. For a breadcrumb trail that does include the current location:

    1. Check that all elements except for the current location are implemented as links.

    2. Check that the current location is not implemented as a link.

  6. Check that all links navigate to the correct Web page as specified by the breadcrumb trail.

Expected Results
  • For all Web pages in the set using breadcrumb trails,

    • Checks #2, #3, and #6 are true.

    • Either check #4 or #5 is true.


G68: Providing a descriptive label that describes the purpose of live audio-only and live video-only content

Applicability

Applies to all technologies

This technique relates to:

Description

This technique provides a descriptive label for Live audio-only and live video-only content. This label may be used in combination with an alternative for time-based media for audio or an alternative for time-based media or audio description of the video. Those alternative however are not part of this technique. The purpose of this technique is to ensure that the user can determine what the non-text content is - even if they cannot access it. NOTE: Even if full alternatives are also available, it is important that users be able to identify the non-text content when they encounter it so that they are not confused, and so that they can associate it with the full alternative when they encounter it.

Examples

Example 1
  • A live video feed of the east coast highway has the following descriptive label "Live video picture of East Coast Highway just south of the I-81 interchange showing current traffic conditions."

  • A live audio feed of the Mississippi House of Representatives has the following descriptive label "Live audio from the microphones in the Mississippi House of Representatives."

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. remove, hide, or mask the non-text content

  2. display the text alternative(s)

  3. check that the purpose of the non-text content is clear - even if content is lost.

Expected Results
  • #3 is true.


G69: Providing an alternative for time based media

Applicability

General technique. Applies to all technologies

This technique relates to:

Description

The purpose of this technique is to provide an accessible alternative way of presenting the information in a synchronized media presentation.

In a synchronized media presentation, information is presented in a variety of ways including

  • dialogue,

  • sounds (natural and artificial),

  • the setting and background,

  • the actions and expressions of people, animals, etc.,

  • text or graphics,

  • and more.

In order to present the same information in accessible form, this technique involves creating a document that tells the same story and presents the same information as the synchronized media. Such a document is sometimes called a screenplay. It includes all the important dialogue and actions as well as descriptions of backgrounds etc. that are part of the story.

If an actual screenplay was used to create the synchronized media in the first place, this can be a good place to start. In production and editing however, the synchronized media usually changes from the screenplay. For this technique, the original screenplay would be corrected to match the dialogue and what actually happens in the final edited form of the synchronized media.

In addition, some special types of synchronized media include interaction that has to occur at particular places in the playing of the synchronized media. Sometimes it may result in an action taking place (e.g. something is purchased, sent, done, etc.). Sometimes it may change the course of the synchronized media (e.g. the synchronized media has multiple paths that are determined by user input). In those cases links or some other mechanism would be used in the alternative for time-based media to allow people using the alternative to be able to have the same options and abilities as those using the synchronized media.

Examples

  • A training film shows employees how to use a new piece of equipment. It involves a person talking throughout while they demonstrate the operation. The screenplay used to create the training film is used as a starting point. It is then edited and corrected to match the dialogue etc. The film and the resulting alternative for time-based media are then made available on the company Web site. Employees can then use either or both to learn how to use the machine.

  • An interactive shopping environment is created that allows users to steer themselves around in a virtual store and shop. An alternative for time-based media allows the users to access the same shopping in text with links to choose aisles and to purchase things instead of dragging them into a virtual shopping basket.

Resources

No resources available for this technique.

Tests

Procedure
  1. View the synchronized media presentation while referring to the alternative for time-based media

  2. Check that the dialogue in the alternative for time-based media matches the dialogue in the synchronized media presentation

  3. Check that the alternative for time-based media has descriptions of sounds.

  4. Check that the alternative for time-based media has descriptions of setting and setting changes.

  5. Check that the alternative for time-based media has descriptions of actions and expressions of any 'actors' (people, animals etc).

  6. If the alternate version(s) are on a separate page, check for the availability of link(s) to allow the user to get to the other versions.

Expected Results
  • #2, 3, 4, 5 are true.


G70: Providing a function to search an online dictionary

Applicability

All technologies

This technique relates to:

Description

The objective of this technique is to provide the definition of words, phrases, jargon, or abbreviation expansions by adding a mechanism to access an on-line dictionary to the Web page. This technique uses existing resources on the Web to provide the definition rather than requiring the author to create a glossary or other mechanism within the site. By providing access from within the Web page, a user can easily locate the desired definition. This technique can only be used if the online dictionary returns the correct definition.

Examples

Example 1

A site that describes how a computer works would include a search form on each Web page. The search would be performed against an on-line dictionary of computer terms, acronyms, and abbreviations. Since the dictionary is specialized for computer terms, the acronym expansion found should be more accurate than with a general dictionary.

Example 2

An online course in English grammar provides a paragraph of text which introduces new vocabulary words. Each of the vocabulary words is a link to an on-line dictionary to find the definition of the word. Activating a link will open up a new window to an online dictionary site with the specific vocabulary word defined.

Resources

No resources available for this technique.

Tests

Procedure

For each word, phrase, or abbreviation to be defined:

  1. Check that a mechanism exists within the Web page to search for the word, phrase, or abbreviation via an on-line dictionary.

  2. Check that the result of the search of the dictionary for the word, phrase, or abbreviation the correct definition.

Expected Results
  • Checks #1 and #2 are true.

Note: The definition of abbreviation used in WCAG is : "shortened form of a word, phrase, or name where the original expansion has not been rejected by the organization that it refers to and where the abbreviation has not become part of the language."


G71: Providing a help link on every Web page

Applicability

All technologies.

This technique relates to:

User Agent and Assistive Technology Support Notes

The example following does not work with JAWS—implicit labels are poorly supported, and JAWS does not read the Help link as part of the label before announcing the control (as required by the Success Criterion).

Description

The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing at least one link to the help information on each Web page. The link targets a help page with information specific to that Web page. Another approach is to provide a help link for every interactive control. Positioning this link immediately before or after the control allows users to easily tab to it if they have problems in the control. Displaying the help information in a new browser window ensures that any data that has already been entered into the form will not be lost. NOTE: A link is not the only means to provide help.

Examples

Example 1

The example below shows a label element enclosing both an input form control, and a help link following the "input" in sequence. Including the help link within the label element allows screen reader users to have access to the help link when interacting with the input form control.

Example Code:


<form action="test.html">
	<label for="test">Test control
	<input type="text" name="test" id="test" />
	<a href="help.html" target="_blank">Help</a></label>
</form>

Tests

Procedure
  1. Identify a Web page that contains forms.

  2. Determine if there is at least one link to help information specific to completing the form on this Web page or other resource.

  3. Determine if there are links either before or after each interactive control to help information specific to that control.

Expected Results
  • Either #2 or #3 are true.


G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content

Applicability

Applies to all technologies

This technique relates to:

Description

The objective of this technique is to provide a way to link to remote long descriptions in technologies that do not have a long description feature built directly into them (e.g. longdesc) or where the feature is known to not be supported.

With this technique, the long description is provided in another location than the non-text content. This could be at another location within the same URI or at another URI. A link to that long description is provided that is immediately adjacent to the non-text content. The link can be immediately before or after the non-text content. If the description is located along with other text then put "End of description" at the end so that they know when to stop reading and return to the main content. If a "Back" button will not take the person back to the point from which they jumped, then a link back to the non-text content location is provided.

This technique was commonly used in HTML before 'longdesc' was added to the specification. In HTML it was called a D-Link because it was usually implemented by putting a D next to images and using the D as a link to the long description. This technique is not technology specific and can be used in any technology that supports links.

Examples

Example 1: Bar chart

There is a bar chart on a Web page showing the sales for the top three salespeople.

The short text alternative says "October sales chart for top three salespeople."

Immediately after the non-text content is a small image denoting a long description. The alternate text for the image is "Long description of chart". The image links to the bottom of the page where there is a section titles "Description of charts on this page". The link points to this specific description: " Sales for October show Mary leading with 400 units. Mike follows closely with 389. Chris rounds out our top 3 with sales of 350. [end of description]"

Example 2: Bar chart - in non-HTML technology where user agent "back" is not supported for security reasons.

There is a bar chart on a Web page showing the sales for the top three salespeople.

The short text alternative says "October sales chart for top three salespeople."

Immediately after the non-text content is a small image denoting the long description. The alternate text for the image is "Long description of chart". The image links to another page titled "Description of charts in October Sales Report". The description link points to this specific description: "Sales for October show Mary leading with 400 units. Mike follows closely with 389. Chris rounds out our top 3 with sales of 350. End of description. <link> Back to Sales Chart </link> ]"

Example 3: Caption used as link

There is a chart. The figure caption immediately below the chart serves as a link to the long description. The Title attribute of the link makes it clear that this is a link to a long description.

Example 4: Transcript of an audio-only file

There is a recording of a speech by Martin Luther King. Links to the audio file and the transcript appear side by side.

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. check for the presence of a link immediately before or after the non-text content

  2. check that the link is a valid link that points directly to the long description of this particular non-text content.

  3. check that the long description conveys the same information as the non-text content

  4. check for the availability of a link or back function to get the user back to the original location of the non-text content

Expected Results

All 4 of the above are true


G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description

Applicability

Applies to all technologies

This technique relates to:

Description

The objective of this technique is to provide a long description without requiring the user to jump off to another location for the description. It also allows all users to see the description which may be useful to anyone who might miss some features in the non-text content.

With this technique, the long description is provided as part of the standard presentation (i.e. everyone receives it). The description is located near the non-text content but does not have to be the very next item. For example, there may be a caption under a chart with the long description provided in the following paragraph.

The location of this long description is then provided within the short text alternative so the user knows where to look for it if they cannot view the non-text content.

Examples

Example 1: Bar chart

There is a bar chart on a Web page showing the sales for the top three salespeople.

The short text alternative says: "October sales chart for top three salespeople. Details in text following the chart:"

The following is in the paragraph immediately below the chart. " Sales for October show Mary leading with 400 units. Mike follows closely with 389. Chris rounds out our top 3 with sales of 350"

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. check that the short text alternative includes the location of the long description

  2. Check that the long description is near the non-text content both visually and in the linear reading order

  3. check that the long description conveys the same information as the non-text content

Expected Results

All 3 of the above are true


G75: Providing a mechanism to postpone any updating of content

Applicability

Content that automatically updates itself.

This technique relates to:

Description

The objective of this technique is to ensure that users can postpone automatic updates of content, or other non-emergency interruptions. This can be accomplished either through a preference or by alerting users of an imminent update and allowing them to suppress it. If a preference is provided, automatic content update can be disabled by default and users can specify the frequency of automatic content updates if they choose to enable the setting.

Examples

  • A Web page provides stock quotes and automatically updates from time to time. The page provides a short form with a field "Refresh data frequency (minutes):" so users can adjust the frequency of the updating.

Tests

Procedure
  1. Find pages with content that automatically updates.

  2. For each automatic update, look for a mechanism to adjust the timing of the updates.

  3. Check that automatic updating is disabled by default or that the user is warned before an automatic update occurs and allowed to suppress it.

Expected Results
  • #3 is true.


G76: Providing a mechanism to request an update of the content instead of updating automatically

Applicability

Any technology or combination of technologies that support automatic updates.

This technique relates to:

Description

The objective of this technique is to let the user control if and when content is updated, in order to avoid confusion or disorientation caused by automatic refreshes that cause a change of context. Users of screen readers may find automatic updates confusing because it is not always clear what is happening. When a page is refreshed, the screen reader's “virtual cursor", which marks the user's current location on the page, is moved to the top of the page. People who use screen magnification software and people with reading disabilities may also be disoriented when pages are refreshed automatically.

Some content is frequently updated with new data or information. Some developers force automatic updates by inserting code in the content that causes the content to request a new copy of itself from the server. These updates and the frequency of these updates are not always under the user's control. Instead of triggering updates automatically, authors can provide a mechanism that allows the user to request an update of the content as needed.

Examples

Example 1

In HTML, a developer can provide a button or link that allows the user to update the content. For example, on a page with news items located at http://www.example.com/news.jsp

Example Code:

<a href="news.jsp">Update this page</a>
Example 2

In a Web interface for e-mail (Webmail), a developer can provide a button or link to fetch new incoming mails instead of updating automatically.

Resources

Resources are for information purposes only, no endorsement implied.

  • Time outs and page refreshes, by the Web Access Centre of the Royal National Institute of the Blind (RNIB), provides rationale and techniques.

(none currently listed)

Tests

Procedure
  1. Find mechanisms to update the content (if such a mechanism is present).

  2. For each such mechanism, check if it allows the user to request an update.

  3. For each such mechanism, check if it can cause an automatic update.

Expected Results
  • If #2 is true, then #3 is false.


G78: Providing a second, user-selectable, audio track that includes audio descriptions

Applicability

Applies to any technology that has a sound track and visual content.

This technique relates to:

Description

The objective of this technique is to provide an audio (spoken) version of information that is provided visually so that it is possible for people who cannot see to be able to understand audio-visual material.

Since most user agents today cannot merge multiple sound tracks, this technique adds the additional audio information to synchronized media by providing an option which allows users to replace the soundtrack with a new copy of the original soundtrack that has the additional audio description added. This added information focuses on actions, characters, scene changes and on-screen text (not captions) that are important to understanding the content.

Since it is not helpful to have this new information obscure key audio information in the original sound track (or be obscured by loud sound effects), the new information is added during pauses in dialogue and sound effects. This limits the amount of supplementary information that can be added to program.

The soundtrack with the audio description (of visual information) can either be an alternate sound track that the user can choose, or it can be the standard sound track that everyone hears.

Examples

  • A travelogue of the northeast has additional audio description added during the gaps in the dialogue to let listeners who are blind know what the person is talking about at any point in time.

  • A video shows a woodpecker carving a nest in a tree. A button within the content allows users to turn the audio description track on or off.

  • A lecture has audio description added whenever the instructor says things like "and this is the one that is most important." The audio descriptions lets listeners who can not see the video know what "this" is.

  • A movie file has two audio tracks, one of which includes audio description. Users can choose either one when listening to the movie by selecting the appropriate track in their media player.

Resources

Tests

Procedure
  1. Check that the audio track that includes audio descriptions can be turned on by using a control within the content itself or by selecting a preference in the media player.

  2. Listen to the synchronized media

  3. Check to see if gaps in dialogue are used to convey important information regarding visual content

Expected Results
  • Checks #1 and #3 are true.


G79: Providing a spoken version of the text

Applicability

Technologies that support links, audio formats.

This technique relates to:

Description

Some users who have difficulty sounding out (decoding) words in written text find it very helpful to hear the text read aloud. This service can now be provided easily using either recorded human speech or synthetic speech. For example, there are a number of products that authors can use to convert text to synthetic speech, then save the spoken version as an audio file. A link to the spoken version can then be provided within the content. Cost depends in part on the quality of the voice used and whether the text is likely to change frequently.

  • Spoken versions of short texts and static text content

    This method is effective for small amounts of text and for longer documents that do not change often.

    1. Make a recording of someone reading the text aloud, or use a tool that converts individual documents or selected passages into synthetic speech. Choose the clearest, most attractive voice if a choice is available.

    2. Save the spoken version as an audio file. Use an audio format that is widely available and supported by media players.

    3. Provide a link to the audio version.

    4. Identify the audio format (for example, .MP3, .WAV, .AU, etc.).

    5. Provide a link to a media player that supports the format.

  • Spoken versions of text that changes

    Server-based methods may be best when pages change often or when user choice determines text content. Some server-based tools allow users to select any text they are interested in and listen to it. Typically, the user presses a button which starts the text-to-speech conversion and reads the text aloud.

Examples

Example 1: A Web site for a government agency

The Web site for a municipal housing authority has a button on every page labeled "Read this page aloud." The user selects the button and the page is spoken by a synthetic voice.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Check if a spoken version of the content is available.

Expected Results
  • Check #1 is true.


G80: Providing a submit button to initiate a change of context

Applicability

Content that includes forms.

This technique relates to:

Description

The objective of this technique is to provide a mechanism that allows users to explicitly request changes of context. Since the intended use of a submit button is to generate an HTTP request that submits data entered in a form, this is an appropriate control to use for causing a change of context and is a practice that does not create confusion for users.

Examples

Example 1

Example 1: A submit button is used for each form that causes a change in context.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Find all forms in the content

  2. For each form, check that it has a submit button

Expected Results
  • #2 is true


G81: Providing a synchronized video of the sign language interpreter that can be displayed in a different viewport or overlaid on the image by the player

Applicability

Applies to all synchronized media technologies that allow synchronization of multiple video streams

This technique relates to:

Description

The objective of this technique is to allow users who cannot hear or read text rapidly to be able to access synchronized media material without affecting the presentation of the material for all viewers.

For those who communicate primarily in sign language it is sometimes less preferable and sometimes not possible for them to read and understand text at the rate it is presented in captions. For these latter individuals it is important to provide sign language presentation of the audio information.

This technique accomplishes this by providing the sign language interpretation as a separate video stream that is synchronized with the original video stream. Depending on the player, this secondary video stream can be overlaid on top of the original video or displayed in a separate window. It may also be possible to enlarge the sign language interpreter separately from the original video to make it easier to read the hand, body and facial movements of the signer.

NOTE: Since sign language is not usually a signed version of the printed language, the author has to decide which sign language to include. Usually the sign language of the primary audience would be used. If intended for multiple audiences, multiple languages may be used. See advisory technique for multiple sign languages.

Examples

Example 1

Example 1: A university provides a synchronized sign language interpreter video stream that can be displayed, at the viewer's option, along with any of their education programs.

Resources

Resources are for information purposes only, no endorsement implied.

  • Guidelines for the Production of Signing Books

    • "Sign Language presentation" gives a broad overview of issues to consider when filming sign language interpreters. Includes discussion of signing both written and spoken originals.

    • Techniques for filming are discussed in chapter 12, “Filming the Signer(s)".

    • Useful information about how to display the sign language interpreter in relation to the original synchronized media content is provided in Chapter 13, "Editing".

      Note: These techniques may need to be adapted for Web-based presentation.

(none)

(none currently listed)

Tests

Procedure
  1. Enable the display of the sign-language window in the player.

  2. Have someone watch the program who can hear and is familiar with the sign language being used.

  3. Check to see if there is a sign language interpreter on screen or in a separate window.

  4. Check to see that dialogue and important sounds are being conveyed by the interpreter and are synchronized with the audio.

Expected Results
  • #3 and #4 are true


G82: Providing a text alternative that identifies the purpose of the non-text content

Applicability

Applies to all technologies

This technique relates to:

Description

The purpose of this technique is to provide useful information via the text alternative even if the full function of the non-text content cannot be provided.

Sometimes, a text alternative cannot serve the same purpose as the original non-text content (for example an applet meant to develop two dimensional rapid targeting skills and eye hand coordination.) In these cases this technique is used. With this technique a description of the purpose of the non-text content is provided.

Examples

Example 1
  • An eye-hand coordination development applet has the following text alternative "Applet that uses the mouse and moving targets to develop eye-hand coordination"

  • A camera applet that has a round disk where you push on the edges to control a remote camera and a slider in the middle for zooming has the following text alternative "Control for aiming and zooming remote video camera".

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. remove, hide, or mask the non-text content

  2. replace it with the text alternative

  3. check that the purpose of the non-text content is clear - even if function is lost.

Expected Results
  • #3 is true.


G83: Providing text descriptions to identify required fields that were not completed

Applicability

Content that includes mandatory fields in user input

This technique relates to:

Description

The objective of this technique is to notify the user when a field that must be completed has not been completed. When users fail to provide input for any mandatory form fields, information is provided in text to enable the users to identify which fields were omitted. One approach is to use client-side validation and provide an alert dialog box identifying the mandatory fields which were omitted. Another approach, using server-side validation, is to re-display the form (including any previously entered data), with either a text description at the location of the omitted mandatory field, or a text description that identifies the omitted mandatory fields.

Examples

  • A user attempts to submit a form but has neglected to provide input or select a choice in one or more mandatory fields. Using client-side validation, the omission is detected and an alert dialog appears informing the user that mandatory fields have not been completed. The labels of the fields with this problem are changed to identify the problem field, and links to the problem fields are inserted in the document after the submit button so the user can move to them after dismissing the alert.

  • A user attempts to submit a form but has neglected to provide input or select a choice in one or more mandatory fields. Using server-side validation, the omission is detected and the form is re-displayed with a text description at the top informing which mandatory fields were omitted. Each omitted mandatory field is also identified using a text label so that the user does not have to return to the list at the top of the form to find the omitted fields.

  • A user is completing a form that contains mandatory fields. The labels of the fields indicate whether or not they are mandatory. The user tabs to a mandatory field, and tabs out of the field without entering any data or selecting a choice. A client-side script modifies the label of the field to indicate that leaving it blank was an error.

    Note: Some screen readers may not notice and announce the change to the label so screen reader users may be unaware of the error.

Tests

Procedure
  1. Fill out a form, deliberately leaving one or more required (mandatory) fields blank, and submit it.

  2. Check that a text description is provided identifying the mandatory field(s) that was not completed.

Expected Results
  • #2 is true


G84: Providing a text description when the user provides information that is not in the list of allowed values

Applicability

Content that collects user input where a limited set of values must be input.

This technique relates to:

Description

When users enter input that is validated, and errors are detected, the nature of the error needs to described to the user in manner they can access. One approach is to present an alert dialog that describes fields with errors when the user attempts to submit the form. Another approach, if validation is done by the server, is to return the form (with the user's data still in the fields) and a text description at the top of the page that indicates the fact that there was a validation problem, describes the nature of the problem, and provides ways to locate the field(s) with a problem easily. The "in text" portion of the Success Criterion underscores that it is not sufficient simply to indicate that a field has an error by putting an asterisk on its label or turning the label red. A text description of the problem should be provided.

When input must be one of a set of allowed values, the text description should indicate this fact. It should include the list of values if possible, or suggest the allowed value that is most similar to the entered value.

Examples

  • The user inputs invalid data on a form field. Before the user submits the form, an alert dialog appears that describes the nature of the error so the user can fix it.

  • The user inputs invalid data on a form field and submits the form. The server returns the form, with the user's data still present, and indicates clearly in text at the top of the page that there were input errors. The text describes the nature of the error(s) and clearly indicates which field had the problem so the user can easily navigate to it to fix the problem.

Tests

Procedure
  1. Enter invalid data in a form field.

  2. Check that information is provided in text about the problem.

Expected Results
  • #2 is true.


G85: Providing a text description when user input falls outside the required format or values

Applicability

Content that accepts user data input, with restrictions on the format, value, and/or type of the input.

This technique relates to:

Description

The objective of this technique is to provide assistance in correcting input errors where the information supplied by the user is not accepted . When users enter data input that is validated, and input errors are detected, information about the nature and location of the input error is provided in text to enable the users to identify the problem. One approach is to use client-side validation and provide an alert dialog box that describes the error immediately when users enter invalid data in field. Another approach, using server-side validation, is to re-display the form (including any previously entered data), and a text description at the top of the page that indicates the fact that there was an error , describes the nature of the problem, and provides ways to easily locate the field(s) with a problem.

However the text description is provided, it should do one of the following things to assist the user:

  • Provide examples of the correct data entry for the field,

  • Describe the correct data entry for the field,

  • Show values of the correct data entry that are similar to the user's data entry, with instructions to the user as to how to enter one of these correct values should the user choose to do so.

Examples

  • The user inputs invalid data on a form field. When the user exits the field, an alert dialog appears that describes the nature of the error so the user can fix it.

  • The user inputs invalid data on a form field and submits the form. The server returns the form, with the user's data still present, and indicates clearly in text at the top of the page that there were input errors. The text describes the nature of the error(s) and clearly indicates which field had the problem so the user can easily navigate to it to fix the problem.

  • The user inputs invalid data on a form field and attempts to submit the form. Client side scripting detects the error, cancels the submit, and modifies the document to provide a text description after the submit button describing the error, with links to the field(s) with the error. The script also modifies the labels of the fields with the problems to highlight them.

Tests

Procedure
  1. Fill out a form, deliberately enter user input that falls outside the required format or values

  2. Check that a text description is provided that identifies the field in error and provides some information about the nature of the invalid entry and how to fix it.

Expected Results
  • #2 is true


G86: Providing a text summary that requires reading ability less advanced than the upper secondary education level

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to provide a summary of complex content. The summary is provided in addition to the original content.

Users with disabilities that make it difficult to decode words and sentences are likely to have trouble reading and understanding complex text. This technique provides a short statement of the most important ideas and information in the content. The summary is easier to read because it uses shorter sentences and more common words than the original.

The following steps can be used to prepare the summary:

  1. Identify the most important ideas and information in the content.

  2. Write one or more paragraphs that use shorter sentences and more common words to express the same ideas and information. (The number of paragraphs depends on the length of the original.)

  3. Measure the readability of the summary.

  4. Edit the summary. Consider dividing longer sentences into two or replacing long or unfamiliar words with shorter, more common terms.

  5. Repeat steps 3 and 4 as needed.

Examples

Example 1: A technical article with a readable summary

An article describes a technical innovation. The first item after the title of the article is a section with the heading, “Summary." The average length of the sentences in the summary is 16 words (compared to 23 words for sentences in the article), and it uses short, common words instead of the technical jargon in the article. A readability formula is applied; the summary requires reading ability less advanced than the lower secondary education level.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

For each summary provided as supplemental content:

  1. Measure the readability of the summary.

  2. Check that the summary requires reading ability less advanced than the lower secondary education level.

Expected Results
  • # 2 is true.


G87: Providing closed captions

Applicability

Any audiovideo technology where there are user agents that support closed captions.

This technique relates to:

Description

The objective of this technique is to provide a way for people who have hearing impairments or otherwise have trouble hearing the dialogue in synchronized media material to be able to view the material and see the dialogue and sounds - without requiring people who are not deaf to watch the captions. With this technique all of the dialogue and important sounds are embedded as text in a fashion that causes the text not to be visible unless the user requests it. As a result they are visible only when needed. This requires special support for captioning in the user agent.

NOTE: Captions should not be confused with subtitles. Subtitles provide text of only the dialogue and do not include important sounds.

Examples

Example 1

Example 1: In order to ensure that users who are deaf can use their interactive educational materials, the college provides captions and instructions for turning on captions for all of their audio interactive educational programs.

Example 2: The online movies at a media outlet all include captions and are provided in a format that allows embedding of closed captions.

Example 3: Special caption files including synchronization information are provided for an existing movie. Players are available that can play the captions in a separate window on screen, synchronized with the movie window.

Example 4: A video of a local news event has captions provided that can be played over the video or in a separate window depending on the player used.

Resources

Tests

Procedure
  1. Turn on the closed caption feature of the media player

  2. View the synchronized media content

  3. Check that captions (of all dialogue and important sounds) are visible

Expected Results
  • #3 is true


G88: Providing descriptive titles for Web pages

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to give each Web page a descriptive title. Descriptive titles help users find content, orient themselves within it, and navigate through it. A descriptive title allows a user to easily identify what Web page they are using and to tell when the Web page has changed. The title can be used to identify the Web page without requiring users to read or interpret page content. Users can more quickly identify the content they need when accurate, descriptive titles appear in site maps or lists of search results. When descriptive titles are used within link text, they help users navigate more precisely to the content they are interested in.

The title of each Web page should:

  • Identify the subject of the Web page

  • Make sense when read out of context, for example by a screen reader or in a site map or list of search results

  • Be short

It may also be helpful for the title to

  • Identify the site or other resource to which the Web page belongs

  • Be unique within the site or other resource to which the Web page belongs

Examples

Example 1: A title that lists the most important identifying information first

A Web page is published by a group within a larger organization. The title of the Web page first identifies the topic of the page, then shows the group name followed by the name of the parent organization.

Example Code:


<title>Working with us: The Small Group: The Big Organization</title>
Example 2: A synchronized media presentation with a descriptive title

A synchronized media presentation about the 2004 South Asian tsunami is titled “The Tsunami of 2004."

Example 3: A Web page with a descriptive title in three parts

A Web page provides guidelines and suggestions for creating closed captions. The Web page is part of a “sub-site" within a larger site. The title is separated into three parts by dashes. The first part of the title identifies the organization. The second part identifies the sub-site to which the Web page belongs. The third part identifies the Web page itself. (For a working example, see WGBH – Media Access Group – Captioning FAQ.)

Example 4: A newspaper Web page

A Web site that only permits viewing of the current edition titles its Web page "National News, Front Page". A Web site that permits editions from different dates to be viewed titles its Web page, "National News, Front Page, Oct 17, 2005".

Resources

No resources available for this technique.

Tests

Procedure
  1. Check that the Web page has a title

  2. Check that the title is relevant to the content of the Web page.

  3. Check that the Web page can be identified using the title.

Expected Results
  • All checks above are true.


G89: Providing expected data format and example

Applicability

Pages that collect information from users, and restrict the format the user can use.

This technique relates to:

Description

The objective of this technique is to help the user avoid input errors by informing them about restrictions on the format of data that they must enter. This can be done by describing characteristics of the format or providing a sample of the format the data should have.

Note: For data formats with common variations, such as dates and times, it may be useful to provide a preference option so users can use the format that is most comfortable to them.

Examples

Example 1

The following HTML form control for a date indicates in the label that the date must be in day-month-year format, not month-day-year as many users in the United States may assume.

Example Code:


<label for="date">Date (dd-mm-yyyy)</label>
<input type="text" name="date" id="date" />

Tests

Procedure
  1. Identify form controls that will only accept user input data in a given format.

  2. Determine if each of the form controls identified in 1 provides information about the expected format.

Expected Results
  • #2 is true.


G90: Providing keyboard-triggered event handlers

Applicability

Applies to all technologies where content includes functionality.

This technique relates to:

Description

The objective of this technique is to permit individuals who rely on a keyboard or keyboard interface to access the functionality of the content. To do this, make sure that all event handlers triggered by non-keyboard UI events are also associated with a keyboard-based event, or provide redundant keyboard-based mechanisms to accomplish the functionality provided by other device-specific functions.

Examples

  • Example 1: A drag and drop feature A photo application includes a "drag" and "drop" feature to allow users to re-order photographs in an on-line album for presentation as a slide show. It also includes a feature that allows users to select a photo and 'cut' and 'paste' the items into the list at the appropriate point using only the keyboard.

  • Example 2: A reorder feature A Web application that allows users to create surveys by dragging questions into position includes a list of the questions followed by a text field that allows users to re-order questions as needed by entering the desired question number.

Resources

No resources available for this technique.

Tests

Procedure
  1. check that all functionality can be accessed using only the keyboard

Expected Results
  • #1 is true


G91: Providing link text that describes the purpose of a link

Applicability

All technologies that contain links.

This technique relates to:

Description

The objective of this technique is to describe the purpose of a link in the text of the link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.

Examples

Example 1: Describing the purpose of a link in HMTL in the text content of the a element

Example Code:


<a href="routes.html">
  Current routes at Boulders Climbing Gym
</a>

Resources

No resources available for this technique.

Tests

Procedure

For each link in the content that uses this technique:

  1. Check that text of the link describes the purpose of the link

Expected Results
  • The above check is true.


G92: Providing long description for non-text content that serves the same purpose and presents the same information

Applicability

Applies to all technologies

This technique relates to:

Description

The objective of this technique is to provide a long text alternative that serves the same purpose and presents the same information as the original non-text content when a short text alternative is not sufficient.

Combined with the short text alternative, the long description should be able to substitute for the non-text content. The short alternative identifies the non-text content; the long alternative provides the information. If the non-text content were removed from the page and substituted with the short and long descriptions, the page would still provide the same function and information.

In deciding what should be in the text alternatives, the following questions are helpful.

  • Why is this non-text content here?

  • What information is it presenting?

  • What purpose does it fulfill?

  • If I could not use the non-text content, what words would I use to convey the same function and/or information?

Examples

Example 1

A chart showing sales for October has a short text alternative of "October sales chart". The long description would read "Bar Chart showing sales for October. There are 6 salespersons. Maria is highest with 349 units. Frances is next with 301. Then comes Juan with 256, Sue with 250, Li with 200 and Max with 195. The primary use of the chart is to show leaders, so the description is in sales order."

Example 2

A line graph that shows average winter temperatures from the past 10 years includes a short text alternative of "Average winter temperatures 1996-2006." The long description includes the data table that was used to generate the line graph.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Remove, hide, or mask the non-text content

  2. Display the long description

  3. Check that the long description conveys the same information conveyed by the non-text content.

Expected Results
  • #3 is true.


G93: Providing open (always visible) captions

Applicability

Any synchronized media technology, even ones that do not support closed captions.

This technique relates to:

Description

The objective of this technique is to provide a way for people who are deaf or otherwise have trouble hearing the dialogue in audio visual material to be able to view the material. With this technique all of the dialogue and important sounds are embedded as text in the video track. As a result they are always visible and no special support for captioning is required by the user agent.

NOTE: Captions should not be confused with subtitles. Subtitles provide text of only the dialogue and do not include important sounds.

Examples

  • In order to ensure that everyone can view their online movies, even if users do not know how to turn on captions in their media player, a library association puts the captions directly into the video.

  • A news organization provides open captions on all of its material.

Resources

Resources are for information purposes only, no endorsement implied.

(none listed)

Tests

Procedure
  1. Watch the synchronized media with closed captioning turned off.

  2. Check that captions (of all dialogue and important sounds) are visible.

Expected Results
  • #2 is true


G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

Applicability

Applies to all technologies.

This technique relates to:

Description

The objective of this technique is to create a text alternative that serves the same purpose and presents the same information as the original non-text content. As a result, it is possible to remove the non-text content and replace it with the text alternative and no functionality or information would be lost. This text alternative should not necessarily describe the non-text content. It should serve the same purpose and convey the same information. This may sometimes result in a text alternative that looks like a description of the non-text content. But this would only be true if that was the best way to serve the same purpose.

If possible, the short text alternative should completely convey the purpose and information. If it is not possible to do this in a short phrase or sentence, then the short text alternative should provide a brief overview of the information. A long text alternative would be used in addition to convey the full information.

The text alternative should be able to substitute for the non-text content. If the non-text content were removed from the page and substituted with the text, the page would still provide the same function and information. The text alternative would be brief but as informative as possible.

In deciding what text to include in the alternative, it is a often a good idea to consider the following questions:

  • Why is this non-text content here?

  • What information is it presenting?

  • What purpose does it fulfill?

  • If I could not use the non-text content, what words would I use to convey the same function and/or information?

When non-text content contains words that are important to understanding the content, the alt text should include those words. If the text in the image is more than can fit in a short text alternative then it should be described in the short text alternative and a long text alternative should be provided as well with the complete text.

Examples

  • A search button uses an image of a magnifying glass. The text alternative is "search" and not "magnifying glass".

  • A picture shows how a knot is tied including arrows showing how the ropes go to make the knot. The text alternative describes how to tie the knot, not what the picture looks like.

  • A picture shows what a toy looks like from the front. The text alternative describes a front view of the toy.

  • An animation shows how to change a tire. A short text alternative describes what the animation is about. A long text alternative describes how to change a tire.

  • A logo of the TechTron company appears next to each product in a list that is made by that and has a short text alternative that reads, "TechTron."

  • A chart showing sales for October has an short text alternative of "October sales chart". It also has a long description that provides all of the information on the chart.

  • A heading contains a picture of the words, "The History of War" in stylized text. The alt text for the picture is "The History of War".

  • An image of a series of books on a shelf contains interactive areas that provide the navigation means to a Web page about the particular book. The text alternative "The books available to buy in this section. Select a book for more details about that book." describes the picture and the interactive nature.

Resources

No resources available for this technique.

Tests

Procedure
  1. Remove, hide, or mask the non-text content

  2. Replace it with the text alternative

  3. Check that nothing is lost (the purpose of the non-text content is met by the text alternative)

  4. If the non-text content contains words that are important to understanding the content, the words are included in the text alternative

Expected Results
  • Check #3 is true. If the non-text content contains words that are important to understanding the content, check #4 is also true


G95: Providing short text alternatives that provide a brief description of the non-text content

Applicability

Applies to all technologies

This technique relates to:

Description

This technique is used when the text needed to serve the same purpose and present the same information as the original non-text content is too lengthy or when this goal cannot be achieved with text alone. In that case this technique is used to provide a short text alternative that briefly describes the non-text content. (A long text alternative is then provided using another technique such that the combination serves the same purpose and presents the same information as the original non-text content.)

In deciding what text to include in the alternative, it is often a good idea to consider the following questions:

  • Why is this non-text content here?

  • What information is it presenting?

  • What purpose does it fulfill?

  • If I could not use the non-text content, what words would I use to convey the same function and/or information?

Examples

  • A chart showing sales for October has an short text alternative of "October sales chart". It also has a long description that provides all of the information on the chart.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check for the presence of a short text alternative that provides a brief description of the non-text content.

Expected Results
  • Check #1 is true.


G96: Providing textual identification of items that otherwise rely only on sensory information to be understood

Applicability

All technologies that present description of a content rendering to the user.

This technique relates to:

Description

The objective of this technique is to ensure that items within a Web page are referenced in the content not only by shape, size, sound or location, but also in ways that do not depend on that sensory perception. For example, a reference may also describe the function of the item or its label.

Examples

Example 1

A round button is provided on a form to submit the form and move onto the next step in a progression. The button is labeled with the text "go." The instructions state, "to submit the form press the round button labeled go". This includes both shape and textual information to locate the button.

Example 2

Instructions for a Web page providing on-line training state, "Use the list of links to the right with the heading, 'Class Listing' to navigate to the desired on-line course." This description provides location as well as textual clues to help find the correct list of links.

Example 3

The following layout places a button in the lower right corner and indicates it by position. An indication of the text label clarifies which button to use for users who access a linearized version in which the position is not meaningful.

Example Code:


<table>
  <tbody>
    <tr>
      <td colspan="2">Push the lower right [Preview] button.</td>
      <td>
        <span style="background: ButtonFace; color: ButtonText; border: 
        medium outset ButtonShadow; 
        width: 5em; display: block; font-weight: bold; text-align: center;">
        Print</span>
      </td>
    </tr>
    <tr>
      <td>
        <span style="background: ButtonFace; color: ButtonText; border: 
        medium outset ButtonShadow; 
        width: 5em; display: block; font-weight: bold; text-align: center;">
        Cancel</span>
      </td>
      <td>
        <span style="background: ButtonFace; color: ButtonText; border: 
        medium outset ButtonShadow; 
        width: 5em; display: block; font-weight: bold; text-align: center;">
        OK</span>
      </td>
      <td>
        <span style="background: ButtonFace; color: ButtonText; border: 
        medium outset ButtonShadow; 
        width: 5em; display: block; font-weight: bold; text-align: center;">
        Preview</span>
      </td>
    </tr>
  </tbody>
</table>
            

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

Find all references in the Web page that mention the shape, size, or position of an object. For each such item:

  1. Check that the reference contains additional information that allows the item to be located and identified without any knowledge of its shape, size, or relative position.

Expected Results
  • Check #1 is true.


G97: Providing the abbreviation immediately following the expanded form

Applicability

Any technology containing text.

This technique relates to:

Description

The objective of this technique is to make the expanded form of an abbreviation available by associating the expanded form with its abbreviation the first time it occurs within a Web page. The expansion of any abbreviation can be found by searching the Web page for the first use.

When shortening a word, phrase or name by means of an abbreviation, initialism, acronym, or other shortened form, provide the full form before providing the abbreviated form. This makes the text easier to read and is advised by many style guides.

Note that some abbreviations require explanations rather than expansions. This technique is not appropriate for such abbreviations.

This technique is applied to the first occurrence of an abbreviation in a Web page. When combining multiple resources into a single Web page, the abbreviation would be expanded at the beginning of each resource. In this case, however, using a different technique for providing the expanded form may be more appropriate.

Examples

Example 1

"The United Nations High Commissioner for Human Rights (UNHCR) was established in 1950 to provide protection and assistance to refugees."

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure

For each abbreviation in the content,

  1. Search for the first use of that abbreviation in the authored component.

  2. Check that the first use is immediately preceded by the expanded form of the abbreviation.

  3. Check that the expanded form is the correct expanded form for the use of the abbreviation.

Expected Results
  • Checks #2 and #3 are true.


G98: Providing the ability for the user to review and correct answers before submitting

Applicability

Sites that collect data from users that is specific to the moment it is submitted, such as test data, and cannot be changed once it is submitted.

This technique relates to:

Description

The objective of this technique is to provide users with a way to ensure their input is correct before completing an irreversible transaction. Testing, financial, and legal applications permit transactions to occur which cannot be "undone". It is therefore important that there be no errors in the data submission, as the user will not have the opportunity to correct the error once the transaction has been committed.

On a simple, 1-page form this is easy because the user can review the form before submitting. On a form that spans multiple Web pages, however, data is collected from the user in multiple steps before the transaction is committed. The user may not recall all of the data that was entered in previous steps before the step which commits the transaction.

One approach is to cache the results of each individual step and allow the user to navigate back and forth at will to review all data entered. Another approach is to provide a summary of all data collected in all steps for the user to review prior to the final commitment of the transaction.

Before the final step that commits the transaction to occur, instructions are provided to prompt the user to review the data entered and confirm. Once the user confirms, the transaction is completed.

Examples

  • An online banking application provides multiple steps to complete a transfer of funds between accounts as follows:

    1. Select "transfer from" account

    2. Select "transfer to" account

    3. Enter transfer amount

  • A summary of the transaction is provided showing the from and to accounts and the transfer amount. The user can select a button to either complete the transaction or cancel it.

  • A testing application provides multiple pages of questions. At any time, the user can choose to return to previously completed sections to review and change answers. A final page is displayed providing buttons to either submit the test answers or review answers.

Tests

Procedure

In a testing application or one that causes financial or legal transactions to occur and that also collects data from users in multiple steps:

  1. Determine if the user is allowed to return to previous steps to review and change data.

  2. Determine if a summary of all data input by the user is provided before the transaction is committed and a method is provided to correct errors if necessary.

Expected Results
  • Either #1 or #2 is true.


G99: Providing the ability to recover deleted information

Applicability

Content where user actions cause content to be deleted.

This technique relates to:

Description

When a Web application provides the capability of deleting information, the server can provide a means to recover information that was deleted in error by a user. One approach is to delay deleting the data by merely marking it for deletion or moving it to a holding area (such as a trash can) and waiting some period of time before actually deleting it. During this time period, the user can request that the data be restored or can retrieve it from the holding area. Another approach is to record all delete transactions in such a way that data can be restored if requested by the user, such as in the edit history stored by wikis and source control applications.The retrievable information that is stored should be that which would be needed to correct the transaction.

Examples

  • A Web application allows users to set up folders and store data within them. Each folder and data item is accompanied by a checkbox to mark it for action, and two buttons, one to move and one to delete. If the user selects the delete button by mistake, large amounts of data could be lost. The application presents the data as deleted to the user right away, but schedules it for actual deletion in one week. During the week, the user may go into a "deleted items" folder and request any folder or data item awaiting actual deletion to be restored.

Tests

Procedure
  1. Identify functionality that allows deleting content

  2. Delete content and attempt to recover it.

  3. Check if deleted information can be recovered.

Expected Results
  • #3 is true.


G100: Providing the accepted name or a descriptive name of the non-text content

Applicability

All technologies

This technique relates to:

Description

The objective of this technique is to allow users to identify the non-text content even if the non-text content is intended to provide a specific sensory experience. For example, a deaf person may want to know what an audio instrumental file is - even if they cannot hear it. Similarly, a blind person may want to know what the subject of a visual image is - even if they cannot see it.

Examples

Example 1
  • Example 1: A painting of the Mona Lisa has an alternate text of "Mona Lisa, by Leonardo da Vinci"

  • Example 2: A sound file has an alternate text of "5 Grade schoolers playing a Theramin".

  • Example 3: A famous modern art piece is labeled "Red, Blue and Yellow, by Piet Mondrian"

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. Check that alternate text provides a descriptive name

  2. Check that alternate text provides a name that has be previously given to the non-text content by the author or another.

Expected Results
  • #1 or #2 is true


G101: Providing the definition of a word or phrase used in an unusual or restricted way

Applicability

Any technology containing text.

This technique relates to:

Description

The objective of this technique is to provide a definition for any word used in an unusual or restricted way.

A word is used in an unusual or restricted way when:

  • dictionaries give several definitions of the word but one specific definition must be used in order to understand the content;

  • a specific definition must be used in order to understand the content and dictionaries list that definition as rare, archaic, obsolete, etc.;

  • the author creates a new definition that must be used in order to understand the content.

This technique can also be used to provide definitions for jargon, that is, the specialized vocabulary used in a particular profession or technical field and understood by people in that field but not by people outside the field.

The technique can also be used to define idiomatic expressions. For example, speakers of a language who live in a particular region may use idiomatic expressions that are accepted by everyone in the region but not by people from other regions where the same language is spoken.

Examples

Example 1: A term used in a restricted way

The word "technology" is widely used to cover everything from the stone tools used by early humans to contemporary digital devices such as cell phones. But in WCAG 2.0, the word technology is used in a more restricted way: it means a mechanism for encoding instructions to be rendered, played or executed by user agents, including markup languages, data formats, and programming languages used in producing and delivering Web content.

Example 2: A word used according to an obsolete definition

The word "ether" is defined as a substance that filled interplanetary space: "He believed that sound traveled through the ether."

Example 3: Jargon

The word "driver" is defined as software that contains specific instructions for a printer: "It may be necessary to update the driver for your printer."

Example 4: An idiomatic expression

Some people say "spill the beans" when they mean "reveal a secret", e.g., "In the police station, Joe spilled the beans about the plot to kidnap the prime minister."

Example 5: An idiomatic expression in Japanese

This example uses parentheses to provide the definition of an idiomatic expression in Japanese. The phrase in Japanese says that "he throws a spoon." It means that there was nothing he can do and finally he gives up.

さじを投げる(どうすることもできなくなり、あきらめること)。

Example 6: An unfamiliar adopted foreign word in English

Users may not understand the meaning of an unfamiliar word adopted from another language: "We need to leave town pronto (quickly).

Example 7: Unfamiliar adopted words in Japanese

In Japanese, Kata-kana is used for adopted foreign words. If words are unfamiliar to users, provide the meaning or translation so that users can understand them.

アクセシビリティ(高齢者・障害者を含む全ての人が利用できること)は、Webサイトに不可欠である。

English translation: "Accessibility" (it can be accessed by all users including elderly people and people with disabilities) is an essential aspect of the Websites.

レイアウトテーブルとCSSの併用をハイブリッド(複合型)という。

English translation: Using both layout table and CSS is called "hybrid" (combination of multiple forms).

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

For each word or phrase used in an unusual or restricted way:

  1. Check that a definition is provided for the word or phrase

Expected Results
  • Check #1 is true.


G102: Providing the expansion or explanation of an abbreviation

Applicability

Any technology containing text.

This technique relates to:

Description

The objective of this technique is to provide information necessary to understand an abbreviation.

An abbreviation is the shortened form of a word, phrase, or name. For most abbreviations, providing the full word, phrase, or name is sufficient.

Some abbreviations represent words or phrases that are borrowed from a foreign language. For instance, many commonly used abbreviations in English are derived from Latin phrases, such as the short list of examples given below. The expanded form is only provided here as background information. For this category of abbreviations, providing an explanation is more helpful than the original expanded form, and the explanation of the abbreviation is provided instead of the expansion.

AbbreviationLatin expansionExplanation
a.m.ante meridiembefore noon; in the morning
p.m.post meridiemafter noon; in the afternoon
e.g.exempli gratiafor example
cfconfer/conferaturcompare

If abbreviations do not need an expansion (for example, because the original expansion has been rejected by the organization that it refers to or if the abbreviation has become part of the language), provide an explanation, if appropriate, or treat the abbreviation as a word that does not require explanation.

Examples

Example 1: ADA

Some abbreviations have more than one meaning, and the meaning depends on the context. For example, ADA means "American Dental Association" in one context and "Americans with Disabilities Act" in another. Only the expansion relevant to the context needs to be provided.

Example 2: English abbreviations for phrases borrowed from Latin

In the following sentence, the explanation "for example" would be provided for "e.g.": Students participating in team sports, e.g. basketball or football, must set their schedules around team practice time.

Example 3: ABS

Some languages (including English and Dutch) borrowed the acronym ABS (Antiblockiersystem: anti-lock brakes) from German. An explanation (anti-lock brakes) is provided, rather than the expansion

Example 4: acronyms with no expansion

Examples of acronyms which no longer have expansions include

  • SIL, which used to mean Summer Institute of Linguistics, is now a name in its own right. See SIL history.

  • IMS, which used to mean Instructional Management Systems, is now a name in its own right.

For this category of examples, a short explanation of what the organization is or does is sufficient.

Example 5: Phrases that were once abbreviations, but have become part of the language

The Dutch fragment "'s nachts" meaning "at night" was originally an abbreviation for "des nachts". In the current Dutch language, the word "des" is rarely used anymore and perceived as archaic. Providing an expansion could be confusing. For "'s nachts" an expansion is not provided.

The English phrase "o'clock" was originally an abbreviation for "of the clock". Since then, "o'clock" has become part of the English language and an expansion does not need to be provided.

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure

For each abbreviation in the content,

  1. If the abbreviation has no expanded form, an explanation is provided.

  2. If the expanded form of the abbreviation is in a different language than the content, an explanation is provided.

  3. Otherwise, the expanded form is provided.

Expected Results
  • All the checks above are true.


G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to provide visual illustrations that help users with reading disabilities understand difficult text that describes concepts or processes. The illustrations are provided in addition to the text.

Users with disabilities that make it difficult to decode words and sentences are likely to have trouble reading and understanding complex text. Charts, diagrams, animations, photographs, graphic organizers, or other visual materials often help these users. For example:

  • Charts and graphs help users understand complex data.

  • Diagrams, flowcharts, videos, and animations help users understand processes.

  • Concept maps and other graphic organizers help users understand how ideas are related to each other.

  • Photographs, drawings, and videos can help users understand natural or historical events or objects.

Examples

Example 1: An annual report for a company

An annual report discusses multiple factors that influenced the company's performance in the past year. The report also includes charts and graphs that illustrate how these factors interact. Each chart or graph has a text alternative as required by Success Criterion 1.1.1. Each one also has a number in its caption (e.g., “Figure 7"). These numbers are used in the text to reference the charts or graphs.

Example 2: Screen shots in technical documentation

Online documentation for a product includes step by step instructions. Each step is illustrated by a screen shot that shows the visual appearance of the screen. Each screen shot has text alternatives as required by Success Criterion 1.1.1.

Example 3: Illustrations of a complex natural event

A Web site discusses the tsunami of 2004. The site describes how the tsunami affected different places around the Indian Ocean. Photographs of the devastation in each area are included. Each photograph has a text alternative as required by Success Criterion 1.1.1. The site also explains what happens underwater during a tsunami. The explanation is accompanied by an animation that shows how a tsunami occurs and spreads over the ocean. The animation has a text alternative as required by Success Criterion 1.1.1.

Resources

Resources are for information purposes only, no endorsement implied.

  • Hall, T., and Strangman, N. CAST: Graphic organizers. Retrieved 5 April 2005 from NCAC Publications. This article illustrates several different kinds of graphic organizers, explains how each type may be useful, and summarizes research findings that graphic organizers support learning, especially among students with learning disabilities.

  • Tufte, Edward. Envisioning information. Cheshire, Conn.: Graphics Press. 1990.

  • Tufte, Edward. The visual display of quantitative information. Cheshire, Conn.: Graphics Press. 1983.

  • Tufte, Edward. Visual explanations : images and quantities, evidence and narrative. Cheshire, Conn.: 1997.

(none currently listed)

Tests

Procedure
  1. Identify text that discusses ideas or processes that must be understood in order to use the content.

  2. Check if visual illustrations are available in the content or through links within the content.

  3. Check that visual illustrations show the concepts or processes discussed in the text.

Expected Results
  • Checks #2 and #3 are true.


G105: Saving data so that it can be used after a user re-authenticates

Applicability

Web pages that require user authentication and limit the time available for submitting data.

This technique relates to:

Description

Web servers that require user authentication often terminate the session after a set period of time if there is no activity from the user. If the user is unable to input the data quickly enough and the session times out before they submit, the server will require re-authentication before proceeding. When this happens, the server stores the data in a temporary cache while the user logs in, and when the user has re-authenticated, the data is made available from the cache and the form is processed as if there had never been a session time-out. The server does not keep the cache indefinitely, merely long enough to ensure success after re-authentication in a single user session, such as one day.

Examples

  • A user has logged in to use a forum and replies to a post. The time taken to write the reply is longer than the time allowed by the server for a session of inactivity. The user submits the reply and is informed of the time out and prompted to log in again to submit the response. The user's post reply is retained by the server and if the user log-in is successful the reply is processed as normal. If the log-in cannot be successfully completed the reply is discarded.

  • The user had logged in to a secure area and fills out a form. The session times out for security reasons. The form data is retained by the server and the user is informed of the time out and is prompted to log-in again. If the user logs in correctly, the form is presented to the user with all of the data previously entered and user can submit the form. If the log-in cannot be successfully completed the form data is discarded.

Tests

Procedure

On a site that requires user login to submit data,

  1. Log in and begin the timed activity.

  2. Allow the session to time out.

  3. Submit the data.

  4. Re-authenticate.

  5. Check that the process can continue and be completed without loss of data, including the original data and any changes made after re-authentication.

Expected Results
  • #5 is true.


G107: Using "activate" rather than "focus" as a trigger for changes of context

Applicability

Applies to all technologies.

This technique relates to:

Description

The objective of this technique is to provide a method for activating things that is predictable by the user. Users with cognitive disabilities and people using screen readers or screen magnifiers may be confused by an unexpected event such as automatic form submission or activation of a function that causes a change of context.

With this technique, all changes of context would be triggered only by a specific action on the part of the user. Further, that action would be one that usually causes changes in context, such as clicking on a link or pressing a submit button. Actions that simply move the focus to an element would not cause a change of context.

Examples

Example 1
  • A page pops up a new window only when the user clicks(or uses spacebar) on a button rather than using onfocus to pop up a new window.

  • A submit button is used to move on to the next data entry screen rather than having the next screen appear automatically when the user tabbed onto a 'done' button.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Using a keyboard, cycle focus through all content

  2. Check that no changes of context occur when any component receives focus.

Expected Results
  • #2 is true


G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes

Applicability

Markup technologies where it is possible to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes.

This technique relates to:

Description

The objective of this technique is to allow assistive technology to understand Web content so that it can convey equivalent information to the user through an alternate user interface and allow them to operate controls through the AT.

This technique involves using standard, documented and supported features to expose these properties to AT. It relies on the fact that these standard controls in standard browsers meet the requirements.

For HTML these assumptions are good. They may also be appropriate for some other technologies.

Even when the components support accessibility, it is essential that some information be provided by the author. For example, a control may have the ability to provide a name but the author still has to provide the name. The role attribute however may already be provided since it is a standard component with a fixed role.

Examples

Example 1

Example 1: A Web page written in HTML or XHTML uses standard form controls, and identifies the form control using the title attribute. The user agent makes information about these controls, including the name, available to assistive technology through the DOM and through a platform-specific Accessibility API.

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. Visually inspect the markup or use a tool.

  2. Check that proper markup is used such that the name and role, for each user interface component can be determined.

  3. Check that proper markup is used such that the user interface components that accept user input can all be operated from AT.

Expected Results
  • Step #2 and #3 are both true for each user interface component


G110: Using an instant client-side redirect

Applicability

Applies to all technologies.

This technique relates to:

Description

The objective of this technique is to enable redirects on the client side without confusing the user. Redirects are preferably implemented on the server side (see SVR1: Implementing automatic redirects on the server side instead of on the client side (SERVER) ), because a server-side redirect does not cause new content to be displayed before the server sends the content located at the new URI. However, authors do not always have control over server-side technologies; in that case, they can use a client-side redirect. A client-side redirect is implemented by code inside the content that instructs the user agent to retrieve content from a different URI. It is important that the redirecting page or Web page only contains information related to the redirect.

Examples

Example 1: HTML: meta Refresh With a URI and No Timeout

In HTML 4.x and XHTML 1.x, it is possible to implement a client-side redirect using the meta element: see H76: Using meta refresh to create an instant client-side redirect (HTML) .

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Find each link or programmatic reference to another page or Web page.

  2. For each link or programmatic reference, check if the referenced Web page contains code (e.g. meta element or script) that causes a client-side redirect.

  3. For each link or programmatic reference that causes a client-side redirect, check if the redirect is implemented without a time limit or delay and that the page only contains information related to the redirect.

Expected Results

Step 2 is false or step 3 is true.


G111: Using color and pattern

Applicability

All technologies that support images.

This technique relates to:

Description

The objective of this technique is to ensure that when color differences are used to convey information within non-text content, patterns are included to convey the same information in a manner that does not depend on color.

Examples

Example 1

A real estate site provides a bar chart of average housing prices in several regions of the United States. The bar for each region is displayed with a different solid color and a different pattern. There is sufficient contrast between the solid and pattern colors to meet Success Criterion 1.4.1. The legend uses the same colors and patterns to identify each bar.

Example 2

An on-line map of a transportation system displays each route in a different color. The stops on each route are marked with a distinctive icon such as a diamond, square, or circle to help differentiate each route.

Example 3

A flow chart describes a set of iterative steps to complete a process. It uses dashed, arrowed lines with a green background to point to the next step in the process when the specified condition passes. It uses dotted arrowed lines with a red background to point to the next step in the process when the specified condition fails. There is sufficient contrast between the line and background colors to meet Success Criterion 1.4.1.

Example 4

The content includes an interactive game. The game pieces for the 4 players are distinguished from one another using both color and pattern.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

For each image within the Web page that use color differences to convey information:

  1. Check that all information that is conveyed using color is also conveyed using patterns that do not rely on color.

Expected Results
  • Check #1 is true.


G112: Using inline definitions

Applicability

Any technology containing text.

This technique relates to:

Description

The objective of this technique is to provide a definition in context for any word used in an unusual or restricted way. The definition is provided in the text, either just before or just after the word is used. The definition may be included in the same sentence as the word that is being defined, or in a separate sentence.

Examples

Example 1: Ether

He believed that sound traveled through the ether, which was thought to be a substance that filled interplanetary space.

Example 2: Driver

It may be necessary to update the driver for your printer (the driver is software that contains specific instructions for your printer).

Example 3: W3C key words

Definition: The key words must, must not, required, shall, shall not, should, should not, recommended, may, and optional in this specification are to be interpreted as described in RFC 2119.

Example 4: A Japanese idiomatic expression defined in context

This example uses parentheses to provide the definition of an idiomatic expression in Japanese. The phrase in Japanese says that "he throws a spoon." It means that there was nothing he can do and finally he gives up.

さじを投げる(どうすることもできなくなり、あきらめること)。

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

For each word or phrase used in an unusual or restricted way:

  1. Check that the word is defined in text either before or after the first occurrence of the word.

Expected Results
  • Check #1 is true.


G115: Using semantic elements to mark up structure

Applicability

Markup languages, including HTML 4.01, XHTML 1.x

This technique relates to:

Description

The objective of this technique is to mark up the structure of the Web content using the appropriate semantic elements. In other words, the elements are used according to their meaning, not because of the way they appear visually.

Using the appropriate semantic elements will make sure the structure is available to the user agent. This involves explicitly indicating the role that different units have in understanding the meaning of the content. The nature of a piece of content as a paragraph, header, emphasized text, table, etc. can all be indicated in this way. In some cases, the relationships between units of content should also be indicated, such as between headings and subheadings, or amongst the cells of a table. The user agent can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.

In HTML, for example, phrase-level elements such as em, abbr, and cite add semantic information within sentences, marking text for emphasis and identifying abbreviations and citations, respectively. MathML, a markup language designed to maintain important distinctions between structure and presentation in mathematics, includes special "presentation" markup for the complex notations used to represent mathematical ideas as well as "content" (semantic) markup for the mathematical ideas themselves.

Examples

Example 1

A paragraph contains a hyperlink to another page. The hyperlink is marked up using the a element.

Example Code:


<p>Do you want to try our new tool yourself? A free 
demonstration version is available in our 
<a href="download.html">download section</a></p>
Example 2

A page about the history of marriage uses a quotation from Jane Austen's novel, Pride and Prejudice, as an example. The reference to the book is marked up using the cite element and the quotation itself is marked up using the blockquote element.

Example Code:


<p>Marriage was considered a logical step for a bachelor, 
as can be seen in the first chapter of the novel 
<cite>Pride and Prejudice</cite>:</p>
<blockquote>
     <p>It is a truth universally acknowledged, that a single man in
     possession of a good fortune, must be in want of a wife.</p>

     <p>However little known the feelings or views of such a man may
     be on his first entering a neighbourhood, this truth is so well
     fixed in the minds of the surrounding families, that he is considered
     the rightful property of some one or other of their daughters.</p>
</blockquote>
Example 3

A car manual explains how to start the engine. The instructions include a warning to make sure the gear is in neutral. The author feels the warning is so important that it should be emphasized so the warning is marked up using the strong element.

Example Code:


<h1>How to start the engine</h1>
<p>Before starting the engine, <strong>make sure the gear 
is in neutral</strong>. Next, turn the key in the ignition. 
The engine should start.</p>
Example 4

This example shows how to use the em and strong elements to emphasize text.

Example Code:


<p>What she <em>really</em> meant to say was, 
"This is not ok, it is <strong>excellent</strong>!"</p>
Example 5: Using highlighting and background color to visually and semantically identify important information.

Example Code:


<style type="text/css">
.vocab {
background-color:cyan;
font-style:normal;
}
</style>
.......
<p>New vocabulary words are emphasized and highlighted 
with a cyan background</p>
<p>The <em class="vocab">scathing </em> review of the play 
seemed a bit too harsh. .... </p>

Resources

Tests

Procedure
  1. Check if there are parts of the content that have a semantic function.

  2. For each part that has a semantic function, if corresponding semantic markup exists in the technology, check that the content has been marked up using that semantic markup.

Expected Results
  • Check #2 is true.


G117: Using text to convey information that is conveyed by variations in presentation of text

Applicability

Technologies that support variations in the visual presentation of text.

This technique relates to:

Description

The objective of this technique is to ensure that information conveyed through variations in the formatting of text is conveyed in text as well. When the visual appearance of text is varied to convey information, state the information explicitly in the text. Variations in the visual appearance can be made by changes in font face, font size, underline, strike through and various other text attributes. When these types of variations convey information, that information needs to be available elsewhere in the content via text. Including additional sections in the document or an inline description where the variation in presentation of text occurs can be used to convey the information.

Examples

Example 1: An on-line test requires students to write a short summary of a longer document.

When a sentence in the original document contains a word or phrase that must be used in the summary, the word or phrase is shown in a different font than the rest of the sentence. A separate section also lists all the words and phrases that must be used in the summary.

Example 2: Font variations and explicit statements.

An on-line document has gone through multiple drafts. Insertions are underlined and deletions are struck through. At the end of the draft a "change history" lists all changes made to each draft.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Find items where variations in presentation of text are used to convey information.

  2. For those items, check to determine if information conveyed visually is also stated explicitly in text.

Expected Results
  • Check #2 is true.


G120: Providing the pronunciation immediately following the word

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to make the pronunciation of a word available by providing the pronunciation after the word at least the first time it occurs within a Web page.

When a Web page contains words with the same spelling but different pronunciations, this technique is not appropriate for providing the pronunciation unless it is provided for each instance.

This technique is applied to the first occurrence of an abbreviation in a Web page. When combining multiple resources into a single Web page, the abbreviation would be expanded at the beginning of each resource. In this case, however, using a different technique for providing the expanded form may be more appropriate.

Examples

Example 1

In the following example of Japanese text, the information giving the pronunciation in Han characters(Kanji) is rendered in parentheses immediately following the text.

Example Code:


<p> 慶應大学 (けいおうだいがく) </p>

Resources

No resources available for this technique.

Tests

Procedure

For each word that requires pronunciation information:

  1. Search for the first use of that word in the Web page.

  2. Check that the first use is immediately followed by the pronunciation of the word.

Expected Results
  • Check #2 is true.


G121: Linking to pronunciations

Applicability

All technologies that include links.

This technique relates to:

Description

The objective of this technique is to make the pronunciation of a word available by providing information about the pronunciation, either within the same Web page or in a different Web page, and establishing a link between the item and its pronunciation.

Examples

Example 1

A word is linked to its entry in a dictionary that includes pronunciation information.

Example 2

A word is linked to a sound file that will speak the pronunciation.

Example 3

A word in linked to its entry in a pronouncing dictionary.

Example 4

A word is linked to an International Phonetic Alphabet (IPA) representation of its pronunciation.

Example 5

A word is linked to an unambiguous phonetic spelling of the pronunciation.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

For each word that requires pronunciation information:

  1. Check that at least the first instance of the item is a link.

  2. Check that each link navigates to information about the pronunciation of the item.

Expected Results
  • All checks are true.


G122: Including a text cue whenever color cues are used

Applicability

All technologies that support color and text.

This technique relates to:

Description

The objective of this technique is to combine color and text or character cues to convey information. Most users can quickly scan the content to locate information conveyed by using color differences. Users who cannot see color can look or listen for text cues; people using Braille displays or other tactile interfaces can detect text cues by touch.

Examples

Example 1: Required fields in an HTML form

The instructions for an online form say, "Required fields are shown in red and marked with (required)." The cue "(required)" is included within the label element.

Example Code:


<label for="lastname" class="required">Last name(required):</label>
<input id="lastname" type="text" size="25" value=""/>
.required {
color=red;
}

Resources

No resources available for this technique.

Tests

Procedure

For any content where color differences are used to convey information:

  1. Check that the same information is available through text or character cues.

Expected Results
  • Check #1 is true.


G123: Adding a link at the beginning of a block of repeated content to go to the end of the block

Applicability

All technologies that contain links.

This technique relates to:

Description

The objective of this technique is to provide a mechanism to bypass a block of material by skipping to the end of the block. The first link in the block or the link directly preceding the block moves focus to the content immediately after the block. Activating the link advances the keyboard focus past the block. When there are multiple blocks to be skipped, the user skips from block to block via these links.

Examples

Example 1: Skip navigation links

The pages on an organization's Web site include a navigation bar or main menu containing links to major sections of the site, the site map, information about the organization, and how to contact the organization. The first link in this area is titled "Skip Navigation Links". A user activates the link to skip over these links.

Example 2: A book index

A book contains an index that is divided into a set of pages. In the content at the beginning of each page of the index are links for each letter of the alphabet, linking into the index where the entries start with that letter. The first link in the set is titled "Skip Links into Index". A user activates this link to skip over the links.

Example 3: Several sets of links

All the pages on a Web site include a section containing links to the site map, information about the organization, and how to contact the organization. All the pages in each section of the site also contain a set of links to its subsections. The first link in the first block is titled "Skip Navigation Links" and skips over the first set of links. The first link in the second block is titled "Skip Section Links" and skips over the subsection links.

Example 4: HTML page with several blocks of navigation links

This example demonstrates both the use of Heading elements at the beginning of each section (H69) and links that skip to the end of each section. This allows people to skip blocks of repeated content using keyboard navigation or using heading navigation, depending on the capabilities of their user agents. Note that some sections of the content are wrapped in a div element to work around a limitation of Internet Explorer (see the User Agents Notes for Creating HTML links to skip blocks of content (future link)).

Example Code:


<p><a href="#content">Content title</a></p>
    <h2>Main Navigation</h2>
    <ul>
      <li><a href="#subnav">Sub Navigation</a></li>
      <li><a href="/a/">Link A</a></li>
      <li><a href="/b/">Link B</a></li>
      <li><a href="/c/">Link C</a></li>
...
      <li><a href="/j/">Link J</a></li>
    </ul>
    <div class="iekbfix">
      <h2 id="subnav">Sub Navigation</h2>
      <ul>
        <li><a href="#ultranav">Ultra Sub Navigation</a></li>
        <li><a href="/suba/">Sub A</a></li>
        <li><a href="/subb/">Sub B</a></li>
        <li><a href="/subc/">Sub C</a></li>
...
        <li><a href="/subj/">Sub J</a></li>
      </ul>
    </div>
    <div class="iekbfix">
      <h2 id="ultranav">Ultra Sub Navigation</h2>
      <ul>
        <li><a href="#content">Content title</a></li>
        <li><a href="/ultraa/">Ultra A</a></li>
        <li><a href="/ultrab/">Ultra B</a></li>
        <li><a href="/ultrac/">Ultra C</a></li>
...
        <li><a href="/ultraj/">Ultra J</a></li>
      </ul>
    </div>
    <div>
      <h2 id="content">Content title</h2>
      <p>Now that I have your attention...</p>
    </div>

And the CSS

Example Code:


div.iekbfix {
  width: 100%;
} 
  

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that a link is the last focusable control before the block of repeated content or the first link in the block.

  2. Check that the description of the link communicates that it skips the block.

  3. Check that the link is either always visible or visible when it has keyboard focus.

  4. Check that activating the link moves the focus to the content immediately after the block.

  5. Check that after activating the link, the keyboard focus has moved to the content immediately after the block.

Expected Results
  • All checks above are true.


G124: Adding links at the top of the page to each area of the content

Applicability

All technologies that contain links

This technique relates to:

Description

The objective of this technique is to provide a mechanism to bypass blocks of material by providing a list of links to the different sections of the content. The links in this list, like a small table of contents at the beginning of the content, set focus to the different sections of the content. This technique is particularly useful for pages with many independent sections, such as portals. It may also be combined with other techniques for skipping blocks within a section.

Examples

Example 1

The Web pages on a site all start with three links that navigate to the main content of that Web page, the search field, and the navigation bar.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each link in the set of links provided for this purpose:

  1. Check that the only controls in the Web page that precede the link are other links in the set.

  2. Check that the description of each link communicates that it links to some section of the content.

  3. Check that the link is either always visible or visible when it has keyboard focus.

  4. Check that activating the link moves the focus to that section of the content.

Expected Results
  • All checks above are true.


G125: Providing links to navigate to related Web pages

Applicability

All technologies that contain links

This technique relates to:

Description

The objective of this technique is to make it possible for users to locate additional information by providing links to related Web pages. It is one of a series of techniques for locating content that are sufficient for addressing Success Criterion 2.4.5. Links are a basic component of the World Wide Web. They are the mechanism that makes the Web an interconnected Web of content. Most authors employ this technique automatically when creating Web pages.

Examples

Example 1

The Web Content Accessibility Guidelines 2.0 contains links to definitions of terms used in guidelines and Success Criteria, links to documents explaining how to meet different Success Criteria, a table of contents for each section containing links to different subsections of that section, and a Comparison of WCAG 1.0 checkpoints to WCAG 2.0 . As users browse the document, they can follow these links to find related information.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each link in the Web page:

  1. Check whether the link leads to related information.

Expected Results
  • Check #1 is true.


G126: Providing a list of links to all other Web pages

Applicability

All technologies that contain links

This technique relates to:

Description

The objective of this technique is to provide a list of links to all the Web pages in the set on each Web page. It is one of a series of techniques for locating content that are sufficient for addressing Success Criterion 2.4.5. This technique is only effective for small sets of Web pages; if the list of links is longer than the rest of the content in the Web page, it may make the Web page more difficult for users to understand and use.

Note: Success Criterion 2.4.1 requires a technique for skipping this list of links.

Examples

Example 1

A family Web site contains home pages for all the members of the family. Each page contains a list of links to the home pages of the other family members.

Example 2

An electonic book is broken into separate Web pages for each chapter. Each Web page starts with a small table of contents that contains links to all the chapters in the book.

Resources

No resources available for this technique.

Tests

Procedure
  1. Check that each Web page contains a list of links to the other Web pages in the site

  2. Check that the links in the list lead to the corresponding Web pages.

  3. Check that the list contains a link for every Web page in the site.

Expected Results
  • All of the checks above are true.


G127: Identifying a Web page's relationship to a larger collection of Web pages

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to enable users to identify the relationship between the current Web page and other Web pages in the same collection (e.g., on the same Web site). In some cases this can be done programmatically—for example by using the rel attribute of the link element in HTML. In other cases the information is provided by including the relevant information in the title of the Web page.

Examples

Example 1: The title of a Web page includes the name of the sub-site

A large Web site includes tutorials and reference materials for numerous technologies. The title of each Web page includes the name of the sub-site as well as the organization that produces the site.

Example 2: Including identifying information in metadata

A Web page includes metadata that identifies it as the table of contents for a collection of documents. The metadata for each document in the collection identifies the document's position in the collection and provides a reference to the table of contents.

Example 3: Chapters in an online textbook

An online textbook is divided into chapters. The title of each Web page includes the number and title of the chapter as well as the title of the textbook.

Resources

No resources available for this technique.

Tests

Procedure
  1. Check if the title of the Web page describes the Web page's relationship to the collection to which it belongs.

  2. Check if the Web page includes metadata identifying the Web page's relationship to the collection to which it belongs.

Expected Results
  • Check #1 or check #2 is true.


G128: Indicating current location within navigation bars

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to help orient the user by providing information about the current location via the navigational user interface component. This technique is especially useful when the Web pages are steps in a task that must be processed in order. Providing this indication helps the user to better understand his place in the sequence. The location may be indicated by adding an icon or text, or by changing the state of the item.

Examples

Example 1

A Web page implements tab panel style navigation. A list of panel tabs is displayed horizontally across the page. The current content is displayed in a panel below the list of panel tabs. When the user navigates to and selects a particular panel tab the content in the panel is updated to reflect the topic of the selected tab. In addition, the background color of the selected tab is changed from the default color and a check mark icon is displayed next to the tab panel text to indicate it is the active panel. The check mark icon includes an appropriate text alternative.

Example 2

The layout for a Web page uses a frameset and frames. One of the frames is designated as the navigation frame and another frame displays the content of the Web site. When the user selects a link in the navigation frame, the information related to the link is displayed within the content frame. The text for the selected item in the navigation frame is updated with an asterisk character to indicate that it is the selected topic.

Example 3

The navigation bar for a site is implemented as a list of links. The navigation bar appears on all Web pages within a collection of Web pages. As the user gives focus to or hovers over a particular link in the navigation bar the background color of the link is changed. This change in styling on mouseover or focus is specified via the cascading style sheet for the Web page. When focus is removed from the link the style is reset to the normal link style. When the link is activated to change the contents of the page, the selected link within the navigation bar is disabled since the result of following this link is the Web page currently being displayed. Changing the background color gives sighted users visual notification of the link to be selected. Disabling the link provides information to all users that it is the currently selected topic.

Resources

No resources available for this technique.

Tests

Procedure

When the navigation component is repeated within a set of Web pages:

  1. Check that the user is giving an indication of the currently selected item within the navigational unit.

  2. Check that the selected item matches the content which is being displayed.

Expected Results
  • Checks #1 and #2 are true.


G130: Providing descriptive headings

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to make section headings within Web content descriptive. Descriptive headings and titles (see G88: Providing descriptive titles for Web pages) work together to give users an overview of the content and its organization. Descriptive headings identify sections of the content in relation both to the Web page as a whole and to other sections of the same Web page.

Descriptive headings help users find specific content and orient themselves within the Web page.

Authors may also want to consider putting the most important information at the beginning of each heading. This helps users “skim" the headings to locate the specific content they need, and is especially helpful when browsers or assistive technology allow navigation from heading to heading.

Examples

Example 1

An HTML page that describes the range of tasks for disaster preparation may have the following headings:

Example Code:


  <h1>Disaster preparation</h1>
  <h2>Flood preparation</h2>
  <h2>Fire preparation</h2>

Note that the level 2 headings have the distinguishing information at the beginning (ie, instead of "Preparation for floods", "Preparation for fires", etc).

Example 2

A short article about the history of a town that explains about the founding and expansion of the town and then goes into some depth about the current situation. The title of the Web page is "History of Ourtown". The first section is called "The founding of Ourtown". The second section is called "Expansion of Ourtown". The third section is called "Ourtown today" which has the following subsections: "People in Ourtown", "Organizations in Ourtown" and "Buildings in Ourtown".

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Determine if the Web page contains headings.

  2. Check that each heading identifies its section of the content.

Expected Results
  • Check #2 is true.


G131: Providing descriptive labels

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to ensure that the label for any interactive component within Web content makes the component's purpose clear. Using the appropriate technology-specific techniques for technologies for associating labels with interactive controls allows assistive technology to recognize the label and present it to the user.

Examples

Example 1: Online maps with controls for zooming in and out

A Web application presents maps of a city. Users can “zoom in" to view part of the map in greater detail, and can “zoom out" to make the show a larger part of the city. The controls can be operated using either a mouse or a keyboard. The controls are labeled “Zoom in (Ctrl + Shift + L)" And “Zoom out (Ctrl + Shift + R)."

Example 2: A form asking the name of the user

A form asks the name of the user. It consists of two input fields to ask for the first and last name. The first field is labeled "First name", the second is labeled "Last name".

Example 3: A form with required fields

A purchasing form includes several fields that are required. In addition to identifying the field, the label for each required field includes the word “required" in parentheses.

Resources

No resources available for this technique.

Tests

Procedure

For each interface component in the content:

  1. Identify the purpose of the interface component.

  2. Check that any required label is present.

  3. Check that each label makes the component's purpose clear.

Expected Results
  • Checks #2 and #3 are true.


G133: Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit

Applicability

Content that includes multipart forms

This technique relates to:

Description

The objective of this technique is to minimize the risk that users with disabilities will lose their work by providing a checkbox to request additional time to complete multipart forms. The checkbox can allow the user to request a specific amount of additional time (for example 15 minutes) or an indefinite extension. (Note that allowing an indefinite extension would be inappropriate if it jeopardized user privacy or network security.)

Examples

Example 1: A checkbox for requesting a specific extension

A Web page contains the first part of a five-part form. Immediately following the general instructions for completing the form is a checkbox with the label, “Allow an additional 15 minutes to complete each part of this form."

Example 2: Requesting an indefinite extension

A Web page contains the first part of a three-part form. Each part of the form includes more than 10 items. Some items require users to follow links for additional information. Immediately following the general instructions for completing the form is a checkbox with the label, “Allow as much time as I need to complete this form. I understand that I must close (quit) the Web browser if I choose to stop before completing the last part of the form."

Tests

Procedure

If the Web page contains the first part of a multipart form:

  1. Check that the Web page includes a checkbox to request additional time to complete the form.

  2. Check that if the checkbox is checked, additional time is provided to complete the form.

Expected Results
  1. All checks are true.


G134: Validating Web pages

Applicability

Any markup languages and many other technologies.

This technique relates to:

Description

The objective of this technique is to avoid ambiguities in Web pages that often result from code that does not validate against formal specifications. Each technology's mechanism to specify the technology and technology version is used, and the Web page is validated against the formal specification of that technology. If a validator for that technology is available, the developer can use it.

Validation will usually eliminate ambiguities (and more) because an essential step in validation is to check for proper use of that technology's markup (in a markup language) or code (in other technologies). Validation does not necessarily check for full conformance with a specification but it is the best means for automatically checking content against its specification.

Examples

Example 1: Validating HTML

HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement) and are valid according to the HTML version specified by the document type declaration. The developer can use off-line or online validators (see Resources below) to check the validity of the HTML pages.

Example 2: Validating XML

XHTML, SVG, SMIL and other XML-based documents reference a Document Type Definition (DTD) or other type of XML schema. The developer can uses online or off-line validators (including validation tools built into editors) to check the validity of the XML documents.

Example 3: Batch validation with Ant

The xmlvalidate task of Apache Ant can be used for batch validation of XML files. The following Apache Ant target is a simple example for the validation of files with the extension .xml in the directory dev\\Web (relative to the Ant build file).

Example Code:


   <target name="validate-xml"> 
   <xmlvalidate lenient="no"> 
   <fileset dir="dev/web" includes="*.xml" /> 
   </xmlvalidate> 
   </target>  

Resources

Resources are for information purposes only, no endorsement implied.

Validating HTML and XHTML

  • The W3C Markup Validation Service by the World Wide Web Consortium allows you to validate HTML and XHTML files by URI, by file upload and by direct input of complete HTML or XHTML documents. There are also separate pages with an extended interface for file upload and for validating by URI (advanced options such as encodings and document types).

  • Installation Documentation for the W3C Markup Validation Service explains how to install this service (for example for use on an intranet).

  • HTML Validator is a German version of the W3C Markup Validation Service.

  • WDG HTML Validator by the Web Design Group allows you to enter a URI to validate single pages or entire sites. There are also versions to validate Web pages in batch mode (by specifying one or more URIs of HTML documents to validate), by file upload and by direct input of HTML code.

  • Offline HTMLHelp.com Validator is a tool for Unix users; it