This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.

Hide All Edits   |   Toggle Deletions  |   Toggle Issue Numbers   |   Toggle [start]/[end] Markers   |   Show All Edits

Changes are displayed as follows:

W3C

Techniques for WCAG 2.0

Techniques and Failures for Web Content Accessibility Guidelines 2.0

W3C Working Group Note 7 October 2016 -- Diff-marked Version

This version:
http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/
Latest version:
http://www.w3.org/TR/WCAG20-TECHS/
Previous version:
http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160317/
Editors:
Michael Cooper, W3C
Andrew Kirkpatrick, Adobe Systems Inc.
Joshue O Connor, InterAccess
Previous Editors:
Loretta Guarino Reid (until May 2013 while at Google, Inc.)
Gregg Vanderheiden (until May 2013 while at Trace R&D Center, University of Wisconsin-Madison)
Ben Caldwell (until September 2010 while at Trace R&D Center, University of Wisconsin-Madison)
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

This Techniques for WCAG 2.0 document provides guidance for web content authors and evaluators on meeting Web Content Accessibility Guidelines (WCAG) 2.0 [WCAG20] success criteria. It is part of a series of documents published by the W3C Web Accessibility Initiative (WAI) to support WCAG 2.0. For an introduction to WCAG, supporting technical documents, and educational material, see Web Content Accessibility Guidelines (WCAG) Overview.

Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques. For important information about techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG 2.0.

Techniques for WCAG 2.0 is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use How to Meet WCAG 2.0: A customizable quick reference to read the WCAG success criteria, and follow links from there to specific topics in Understanding WCAG 2.0 and to specific techniques.

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 Working Group Note "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 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).

WCAG 2.0 Techniques was previously published on 11 December 2008 as a Working Group Note and updated 14 October 2010, 3 January 2012, 5 September 2013, 3 March 2014, 8 April 2014, 16 September 2014, 26 February 2015, and 17 March 2016. This new version updates the support information provided for WCAG 2.0. Note that WCAG 2.0 itself remains unchanged, only the informative support materials have been updated. Primary changes include clarifications based on input from the public and translators. Changes in this version include clarifications in techniques G136: Providing a link at the beginning of a nonconforming Web page that points to a conforming alternate version, ARIA2: Identifying a required field with the aria-required property (ARIA) , and F68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name .

The changes are highlighted in the diff-marked version.

The Working Group requests that any comments be made using the options documented in Instructions for Commenting on WCAG 2.0 Documents. 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. Comments received on this document may be addressed in future versions of this document, or in another manner. Archives of the WCAG WG mailing list discussions are also publicly available, and future work undertaken by the Working Group may address comments received on this document.

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 Group Note 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. 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.

This document is governed by the 1 September 2015 W3C Process Document.


Sections

Table of Contents


Introduction to Techniques for WCAG 2.0

This Techniques for WCAG 2.0 document provides guidance for web content authors and evaluators on meeting Web Content Accessibility Guidelines (WCAG) 2.0 [WCAG20] success criteria. It is part of a series of documents published by the W3C Web Accessibility Initiative (WAI) to support WCAG 2.0. For an introduction to WCAG, supporting technical documents, and educational material, see Web Content Accessibility Guidelines (WCAG) Overview.

WCAG 2.0 itself is a stable document that does not change. This Techniques for WCAG 2.0 document is updated periodically, about twice per year, to cover more current best practices and changes in technologies and tools.

Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques..

Note: W3C cautions against requiring W3C's sufficient techniques. The only thing that should be required is meeting the WCAG 2.0 success criteria. To learn more, see:

Techniques for WCAG 2.0 is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use How to Meet WCAG 2.0: A customizable quick reference to read the WCAG success criteria, and follow links from there to specific topics in Understanding WCAG 2.0 and to specific techniques.

Publication of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0 success criteria and conformance requirements. Developers need to be aware of the limitations of specific technologies and provide content in a way that is accessible to people with disabilities.

For important information about techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG 2.0.

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, and when there are not multiple navigation sections on the page.

Note: It is preferable for links to be visible at all times, since users navigating via the keyboard include 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. However, Success Criterion 2.4.1 does not require that they be visible when they do not have focus, and links that are visible only when they have focus can meet this success criterion.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 (client and/or server side).

Expected Results
  • #1 is false.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 descriptions. 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. This 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, #3 and #4 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

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

Example 2

A user watches an online seminar on their mobile device, including captioning provided through the use of Communication Access Real-time Translation (CART). The captions provided also benefit in-person participants who need captioning and can view the information on their own device.

Resources

No resources available for this technique.

Tests

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

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

After completion, the custom component should be tested for Accessibility Support.

Examples

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

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

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.

  6. Check that the component works with assistive technologies.

Expected Results
  • Checks #3, #5 and #6 are true for each user interface component.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

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

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 an icon consisting of a colored circle with a number in the middle showing what track it belongs to: blue circles with the number 1 represent track 1, yellow circles with the number 2 represent Track 2, and green circles with the number 3 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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 to determine that neither the General Flash nor Red Flash threshold were exceeded

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 4.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: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 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

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 R sRGB <= 0.03928 then R = R sRGB /12.92 else R = ((R sRGB +0.055)/1.055) ^ 2.4

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

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

      and R sRGB, G sRGB, and B sRGB are defined as:

      • R sRGB = R 8bit /255

      • G sRGB = G 8bit /255

      • B sRGB = B 8bit /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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G18: Ensuring that a contrast ratio of at least 4.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).

Note: When evaluating this success criterion, the font size in points should be obtained from the user agent or calculated on font metrics in the way that user agents do. Point sizes are based on the CSS pt size CSS3 Values. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.

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 4.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 a 4.5:1 contrast ratio with the background behind them even if they do not have that contrast ratio with the entire background.

For example, if a letter is lighter at the top than it is a the bottom, it may be difficult to maintain the contrast ratio between the letter and the background over the full letter. In this case, the designer might darken the background behind the letter, or add a thin black outline (at least one pixel wide) around the letter in order to keep the contrast ratio between the letter and the background above 4.5:1.

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.

For example, if a page is very light on one edge and fades to very dark on the other edge, there is no color that can run across the page and meet the contrast guidelines on both edges. One way of addressing this would be to change the lightness of the letters as well so that each letter always meets the contrast ratio for the background that is immediately behind the letter.

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 logo can be used.

  • Text is placed over a picture of the college campus. Since a wide variety of colors and shades 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 4.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 R sRGB <= 0.03928 then R = R sRGB /12.92 else R = ((R sRGB +0.055)/1.055) ^ 2.4

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

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

      and R sRGB, G sRGB, and B sRGB are defined as:

      • R sRGB = R 8bit /255

      • G sRGB = G 8bit /255

      • B sRGB = B 8bit /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 4.5:1

Expected Results
  • #4 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 A Success Criteria but is easier to test and can be used to meet the Level A Success Criteria because all failure thresholds in the Level A 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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 that keyboard focus is not trapped in any of the content.

  3. If keyboard focus appears to be trapped in any of the content, check that help information is available explaining how to exit the content and can be accessed via the keyboard.

Expected Results
  • #2 is false

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

See User Agent Support Notes for G53.

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:

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 or beside 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.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 this is different from the order in which the content is encoded in the underlying source file.

For example, when mixing languages with different directionality in HTML, the bidirectional algorithm may position punctuation in the wrong location in the visual rendering. The visual rendering problem could be corrected by moving the punctuation in the content stream so that the bidirectional algorithm positions it as desired, but this would expose the incorrect content order to assistive technology. The content is both rendered in the correct order visually and exposed to assistive technology in the correct order by using markup to override the bidirectional algorithm.

When rendered visually, white space characters such as 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.

Markup:

Example Code:


  <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:

Example Code:


  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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

No resources available for this technique.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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. For example, a Web page is not a valid site map when any one of the following is true:

  1. it does not link to all the sections of a site, or

  2. it presents an organization that is different from the site's organization, or

  3. it contains links that are no longer valid.

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.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 table of contents for Accessing PDF Documents with Assistive Technology: A Screen Reader User's Guide begins on the second page.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

Example 3

The information architecture of an ecommerce Web site is categorized from general to increasingly more specific product subsections.

You are here: Acme Company → Electronics → Computers → Laptops

The trail begins with "You are here" and ends with the current page. Items in the trail are clickable or tappable links with the exception of "You are here" and "Laptops." This example uses a right arrow symbol (→) as a separator.

In this example a h2 element, a nav element with an aria-label attribute, and an unordered list are used to provide semantics. The markup would be styled using CSS to display the breadcrumb trail horizontally.

HTML for this example

Example Code:

 
          <nav aria-label="Breadcrumbs"> 
            <h2>You are here:</h2> 
            <ul>
              <li><a href="/">Acme Company</a> &#8594;</li> 
              <li><a href="/electronics/">Electronics</a> &#8594;</li>
              <li><a href="/electronics/computers/">Computers</a> &#8594;</li>
              <li>Laptops</li>
            </ul> 
          </nav>
      

CSS for this example

Example Code:

 
      nav, h2, ul, ul li{ display: inline;}
      nav > h2{ font-size: 1em; } 
      ul { padding-left: 0em; }
      

Working example: Breadcrumb example

Resources

Resources are for information purposes only, no endorsement implied.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G68: Providing a short text alternative 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 short text alternative for Live audio-only and live video-only content. This text may be used in combination with a full text alternative for time-based media (for audio or video), or in combination with audio description (for video). Those alternatives, 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.

Tests

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

  2. Display the short 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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 feature 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 is 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."

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G71: Providing a help link on every Web page

Applicability

All technologies.

This technique relates to:

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 that includes a help link. 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
                <a href="help.html" target="_blank">Help</a></label>
                <input type="text" name="test" id="test" />
                </form>
            

Tests

Procedure
  1. Identify a Web page that contains forms.

  2. Determine if there is at least one link to help information explaining how to complete the form on this Web page.

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

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 titled "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.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

No resources available for this technique.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 the 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 ability exists to turn on the audio track that includes audio descriptions. For example, by using a control within the content itself or by selecting a control or preference in the media player or operating system.

  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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

Note: The best practice is to include a message or alert, as some users may not be aware that an error has occurred and could assume that the form is not functioning correctly. It is also best practice to include an error notification in the page title (title element) since a screen reader user is likely to believe the page was submitted correctly and continue to navigate to another page as soon as the new page is returned instead of reading the main content area of the page again.

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.

  3. Check that other data previously entered by the user is re-displayed, unless the data is in a security related field where it would be inappropriate to retain the data for re-display (e.g. password).

Expected Results
  • #2 and #3 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

  3. Check that other data previously entered by the user is re-displayed, unless the data is in a security related field where it would be inappropriate to retain the data for re-display (e.g. password).

Expected Results
  • #2 and #3 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G86: Providing a text summary that can be understood by people with lower secondary education level reading ability

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.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

No resources available for this technique.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G97: Providing the first use of an abbreviation immediately before or after 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.

For English, when shortening a word, phrase or name by means of an abbreviation, initialism, acronym, or other shortened form, it is advisable to provide the full form before providing the abbreviated form. This makes the text easier to read and is advised by many style guides. Other languages may have different conventions.

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

"The WAI (Web Accessibility Initiative) demonstrates the W3C commitment to accessibility."

Resources

Resources are for information purposes only, no endorsement implied.

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 or followed 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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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. Check that the user is prompted to review and confirm data.

  2. If user data are collected in multiple steps, the user is allowed to return to previous steps to review and change data.

  3. 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 #2 or #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G100: Providing a short text alternative which is 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
  • A painting of the Mona Lisa has an alternate text of "Mona Lisa, by Leonardo da Vinci".

  • A sound file has an alternate text of "5 Grade children playing a Theramin".

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

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that short text alternative provides a descriptive name.

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

Expected Results
  • #1 or #2 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

  • A user logs 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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

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.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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: Indicating new content with boldface and a text indicator

The following example shows a list of accessibility standards. WCAG 2.0 is new, so is indicated in bold face. To avoid conveying information solely by presentation, the word "(new)" is included after it as well.

Example Code:


              <h2>Web Accessibility Guidelines</h2>
                <ul>
                <li><strong>WCAG 2.0 (New)</strong></li>
                <li>WCAG 1.0</li>
                <li>Section 508</li>
                <li>JIS X 8341-3</li>
                ...
                </ul>
            
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.

Example 3: Providing an alternate way to know which words in the text have been identified by using a different font.

An on-line test requires students to write a short summary of a longer document. The summary must contain certain words from the original 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.

Resources

No resources available for this technique.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 after activating the link, the keyboard focus has moved to the content immediately after the block.

Expected Results
  • All checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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

No resources available for this technique.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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, therefore allowing the user to identify the purpose of the control.The label may also be used to include text or a text symbol indicating that input is required.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


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 use 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).

  • 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 is the off-line version of the online WDG HTML Validator.

  • Off-line HTML Validator – A clipbook for NoteTab by Professor Igor Podlubny is an extension for the programming editor NoteTab. It uses James Clark's open-source SGML parser, which is also used by the W3C Markup Validation Service.

  • Do-it-yourself Offline HTML Validator by Matti Tukiainen explains how you can create a simple validator with James Clark's SGML parser on Windows.

  • Validating an entire site by Peter Kranz explains how you can install a modified version of the W3C Markup Validation Service that outputs validation results as XML on Mac OS. Source code (in Perl and Python) is available.

  • HTML Validation Widget adds a "Validate HTML" option to Internet Explorer's context menu and validates the current HTML document with the Web Design Group's HTML Validator.

  • Can I use the W3C MarkUp Validation Service to validate HTML? explains how you can validate HTML from within the free editor HTML-Kit.

  • HTML/XML Validator is an online repair tool for HTML and XHTML based on Tidy and PHP 5. It is available in several languages but it is not a real validator.

  • Fix Your Site With the Right DOCTYPE! by Jeffrey Zeldman explains what HTML and XHTML doctypes work and what their effect is on the rendering mode of a few browsers.

  • Modifying Dreamweaver to Produce Valid XHTML by Carrie Bickner.

  • XHTML-Schemata für FrontPage 2003 und Visual Studio .NET by Christoph Schneegans is a German article that explains how the W3C XML Schemas for XHTML 1.0 can be used in FrontPage 2003 and Visual Studio .NET to create valid code.

  • Nvu is a free and open-source Web authoring tool for Windows, Macintosh and Linux that can call the W3C HTML Validation Service.

  • Amaya by the World Wide Web Consortium is a free and open-source Web authoring tool with support for HTML, XHTML, CSS, SVG and MathML that alerts you to validity errors when you save a document.

  • Web Developer Extension is an extension for Mozilla, Firefox and Flock by Chris Pedrick that allows you to use the W3C Validation Services for HTML and CSS.

Validating XML

  • XML Validator - A Document Validation Service by JavaView allows you to check wellformedness and validity of XML files, by file upload or by direct input of XML code.

  • Apache Ant's XMLValidate Task can be used to validate XML-based documents. This tool can be used to validate entire directories (and subdirectories) of XML files.

  • XML Schema Validator by Christoph Schneegans is an online tool that allows you to validate XML (and XHTML) files by URI, by file upload, by direct input of complete XML documents, and by direct input of XML code fragments. A bookmarklet that allows you to validate the page currently displayed in your browser is also available. This validator claims to be more accurate than the W3C validator.

  • XML Schema Validator by CoreFiling is an online tool that allows you to validate an XML file against a W3C XML Schema, both of which can be uploaded.

  • NetBeans: Working with XML, Part 1 and NetBeans: Working with XML, Part 2 by Tim Boudreau and others, explains how to enable XML support, validation and other related functionality in the open-source NetBeans framework.

  • Schema Validator: this is a validator that allows you to paste XML and W3C XML Schema code into text boxes to validate XML code.

  • XML Nanny: a graphical tool for validating XML and XHTML, with support for DTD, W3C XML Schema, RELAX NG and Schematron (Max OX X).

Note that many programming editors, XML editors and integrated development environments (IDEs) can validate XML files. These include the following free and/or open-source tools:

  • the programming editor JEdit with the XML and SideKick plugins, which supports DTDs and W3C XML Schemas,

  • the “workbench" Eclipse with the Web Tools Platform,

  • the Web authoring tool SCREEM for the Gnome desktop environment, which supports DTDs,

  • the XML editor Jaxe, which validates XML files with Apache Xerces,

  • the XML editor Xerlin, which supports DTDs and to some extent W3C XML schema,

  • the XML editor xmloperator, which supports DTDs and RELAX NG schemas,

  • Emacs in nXML mode (see the YahooGroup Emacs nXML Mode),

  • the XML editor Pollo, which supports DTDs, W3C XML Schemas and RELAX NG schemas, and is best suited for tree-like XML files.

(none currently listed)

Tests

Procedure

For HTML, SGML-based and XML-based technologies:

  1. Load each page or document into a validating parser.

  2. Check that no validation errors are found.

For other technologies:

Follow the validation procedure defined for the technology in use, if any exists.

Expected Results

For HTML, SGML-based and XML-based technologies:

Step 2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G135: Using the accessibility API features of a technology to expose names and roles, to allow user-settable properties to be directly set, and to 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 an 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.

Examples

Example 1
  • A Web page uses java to create an applet. Java swing objects (e.g., pushbutton) are used because they have accessibility properties built in that can be accessed from assistive technology written in Java and, with the Java Access Bridge, those written in other languages that use the Accessibility API of the operating system. The author fills in the values for the components and the result is accessible to AT.

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 are found by the tool.

Expected Results
  • Step #3 is true for each user interface component

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G136: Providing a link at the beginning of a nonconforming Web page that points to a conforming alternate version

Applicability

Primary content does not conform to WCAG but alternate versions exist that do conform to WCAG. This technique can only be used if a technology makes it possible to create an accessible link to an alternate version.

This technique relates to:

Description

The objective of this technique is to enable users to access alternate content that conforms to WCAG if the primary content, or the default content that users encounter when visiting a particular URI, does not conform. The alternate page, or conforming alternate version, may make some design or functionality compromises in order to conform, but must meet the requirements described in the definition in order to be a conforming alternate version. The definition of "conforming alternate version" is:

conforming alternate version

version that

  1. conforms at the designated level, and

  2. provides all of the same information and functionality in the same human language, and

  3. is as up to date as the non-conforming content, and

  4. for which at least one of the following is true:

    1. the conforming version can be reached from the non-conforming page via an accessibility-supported mechanism, or

    2. the non-conforming version can only be reached from the conforming version, or

    3. the non-conforming version can only be reached from a conforming page that also provides a mechanism to reach the conforming version

Note 1: In this definition, "can only be reached" means that there is some mechanism, such as a conditional redirect, that prevents a user from "reaching" (loading) the non-conforming page unless the user had just come from the conforming version.

Note 2: The alternate version does not need to be matched page for page with the original (e.g., the conforming alternate version may consist of multiple pages).

Note 3: If multiple language versions are available, then conforming alternate versions are required for each language offered.

Note 4: Alternate versions may be provided to accommodate different technology environments or user groups. Each version should be as conformant as possible. One version would need to be fully conformant in order to meet conformance requirement 1.

Note 5: The conforming alternative version does not need to reside within the scope of conformance, or even on the same Web site, as long as it is as freely available as the non-conforming version.

Note 6: Alternate versions should not be confused with supplementary content, which support the original page and enhance comprehension.

Note 7: Setting user preferences within the content to produce a conforming version is an acceptable mechanism for reaching another version as long as the method used to set the preferences is accessibility supported.

See Understanding Conforming Alternate Versions

When using this techique, placing a WCAG-conforming link to alternate content at the top of the page allows users to find the link quickly and to move to the conforming alternate version. To ensure users can always find the alternate version, regardless of where they enter the site, each page that does not conform at the specified level would include a link to the conforming alternate version.

Examples

  • On a Web site, for each page that does not conform to WCAG at the declared level, the first link on the page is called "Accessible version" (or using other link text that properly conveys the purpose of the link). The target of this link is the alternate version of the page that conforms to WCAG at the declared level.

Tests

Procedure
  1. Identify a page that does not conform to WCAG at the claimed conformance level.

  2. Determine if the page contains a link to a conforming alternate version of the page.

  3. Determine if the alternate version is a conforming alternate version of the original page and that it conforms to WCAG 2.0 at the claimed conformance level.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G138: Using semantic markup 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 semantic markup to convey information. Most users can quickly scan the content to locate information conveyed by using color. For users who cannot see color, semantic markup can provide a different type of cue. User agents can then make this type of 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.

Most user agents will visually distinguish text that has been identified using semantic markup. Some assistive technologies provide a mechanism for determining the characteristics of content that has been created using proper semantic markup.

Examples

Example 1: Color and strong emphasis for required form fields

An HTML form contains several required fields. The labels for the required fields are displayed in red. In addition, the text of each label is marked up with the STRONG element for stronger emphasis. The instructions for completing the form indicate that "all required fields are displayed in red and are emphasized", followed by an example.

Resources

Tests

Procedure

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

  1. Check that the same information is available through semantic markup.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G139: Creating a mechanism that allows users to jump to errors

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 help users find input errors where the information supplied by the user is not accepted. This includes fields with missing required information and fields with incorrect information. When users enter data input that is checked, and input errors are detected, a link to that error is provided so that the user does not have to search for it. One approach is to use server-side validation, and 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 input error, describes the nature of the problem, and provides a link the field(s) with a problem.

Examples

Example 1: Server-side error checking

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 not accepted. The text describes the nature of the error(s) and provides a link to the field that had the problem so the user can easily navigate to it to fix the problem.

Example 2: Client-side error checking with a popup

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

Example 3: Client-side error checking with no popup

When the user submits a form, instead of taking them to a new page, a script automatically sets focus to a text link that says "Errors have occurred." The link goes to the first item in an ordered list of descriptive error messages. Each list item is a link to the control where the error had occurred. And there is a link from the error back to the ordered list of descriptive error messages. The process is repeated as needed.

Tests

Procedure
  1. Fill out a form, deliberately leaving a required (mandatory) field blank, and make an input error on another field and submit the form.

  2. Check that a text message is provided that identifies the field that is missing required data.

  3. Check that a text message is provided that identifies the field with the input error.

  4. Check that there is a link to each field that is missing required data from the missing data message

  5. Check that there is a link to the list of errors from the error message.

Note: Success Criterion 3.3.2 requires that if an input error is detected and suggestions for correction are known and can be provided without jeopardizing the security or purpose of the content, the suggestions are provided to the user.

Expected Results
  • If #2 is true, then #4 is true.

  • If #3 is true, then #5 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G140: Separating information and structure from presentation to enable different presentations

Applicability

Any technology

This technique relates to:

Description

The objective of this technique is to facilitate the interaction of assistive technology with content by logically separating the content's structural encoding from the presentational encoding. Structural encoding is the indication of elements such as headings, paragraphs, lists, tables, etc., and is done by using technology features reserved for the purpose. By contrast, presentational encoding is the indication of formatting effects, such as typeface, color, size, position, borders, etc., and is also supported by technology features.

While presentational features visually imply structure — users can determine headings, paragraphs, lists, etc. from the formatting conventions used — these features do not encode the structure unambiguously enough for assistive technology to interact with the page effectively. Providing separate structure, functionality, and presentation layers allows the semantics implied by the formatting to become programmatically determined via the structure layer.

Following this technique allows user agents to:

  • Perform meaningful structure transformations based on the existing structure of the content, such as reordering sections or generating a list of sections or a list of links.

  • Support interaction with content based on structural characteristics that cannot be determined by assistive technology on the basis of presentational information alone. For instance, it may be desirable to provide special interactions with lists by indicating the number of list items or skipping to the end, but this is only possible if the list structure is encoded in addition to the list presentation.

  • Modify the presentation of content by substituting alternate presentation rules attached to structural features.

Examples

Example 1: HTML with CSS

An HTML document uses the structural features of HTML, such as paragraphs, lists, headings, etc., and avoids presentational features such as font changes, layout hints, etc. CSS is used to format the document based on its structural properties. Well-crafted "class" attributes in the HTML extend the semantics of the structural markup if needed to allow more flexible formatting with CSS. Assistive technologies can substitute or extend the CSS to modify presentation, or ignore the CSS and interact directly with the structural encoding.

Example 2: Tagged PDF

A PDF document consists mostly of the content embedded with formatting information. Information about the structure is provided in a separate section of the document using XML-like tags; this is called "tagged PDF". The information in these tags can be used by assistive technologies to perform meaningful structure transformations (e.g., generating a list of sections) or to support interaction with content based on structural characteristics (e.g., jumping to the start of forms).

Tests

Procedure
  1. Examine the encoding of a document.

  2. Check that structural information and functionality are explicitly provided and is logically separated from presentational information.

Expected Results
  • Check #2 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G141: Organizing a page using headings

Applicability

Pages with content organized into sections.

This technique relates to:

Description

The objective of this technique is to ensure that sections have headings that identify them. Success Criterion 1.3.1 requires that the headings be marked such that they can be programmatically identified.

In HTML, this could be done using the HTML heading elements (h1, h2, h3, h4, h5, and h6). These allow user agents to automatically identify section headings. Other technologies use other techniques for identifying headers. To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).

Examples

Example 1: Headings used to organize an HTML page

A page on cooking techniques uses a h1 element for the overall title, and h2 elements for major sections on cooking with oil vs cooking with butter, and h3 elements for sub-sections on oil-cooking techniques.

Example Code:


              <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <title>Cooking techniques</title>
                </head>
                <body>
                <h1>Cooking techniques</h1>
                ... some text here ...
                <h2>Cooking with oil</h2>
                ... text of the section ...
                <h3>Sautéeing</h3>
                ...
                <h3>Deep frying</h3>
                <h2>Cooking with butter</h2>
                ... text of the section ...
                </body>
              </html>
            

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Examine a page with content organized into sections.

  2. Check that a heading for each section exists.

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G142: Using a technology that has commonly-available user agents that support zoom

Applicability

All technologies with user-agent provided zoom capability.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for G142.

Description

The objective of this technique is to ensure content can be scaled uniformly by using a Web technology supported by user agents that change text size via a Zoom tool.

Content authored in technologies that are supported by user agents that can scale content uniformly (that is, zoom into content) satisfy this Success Criterion. Because this technique relies completely on user agent functionality, it is critical to test with a wide variety of user agents.

This technique requires that the zoom function preserve all spatial relationships on the page and that all functionality continues to be available.

Examples

  • Internet Explorer 7 and Opera 9 provide a zoom function that scales HTML/CSS page content uniformly.

  • To allow users to resize text, Adobe Reader provides a magnification tool that scales PDF pages uniformly.

(none currently listed)

Tests

Procedure
  1. Display content in a user agent

  2. Zoom content to 200%

  3. Check whether all content and functionality is available

Expected Results
  • Check #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G143: Providing a text alternative that describes the purpose of the CAPTCHA

Applicability

Applies to all technologies.

This technique relates to:

Description

The purpose of this technique is to provide information via the text alternative that identifies the non-text content as a CAPTCHA. Such tests often involve asking the user to type in text that is presented in an obscured image or audio file. From the text alternative, the user can tell that the CAPTCHA requires completing a task and what type of task it is.

When an alternate version of a CAPTCHA is available, the text alternative should include instructions about how to find the alternate version.

Examples

  • A CAPTCHA test asks the user to type in text that is displayed in an obscured image. The text alternative is "Type the word in the image".

  • A CAPTCHA test asks the user to type in text that is played in an audio file. The text alternative is "Type the letters spoken in the audio".

Tests

Procedure
  1. Remove, hide, or mask the CAPTCHA.

  2. Replace it with the text alternative.

  3. Check that the text alternative describes the purpose of the CAPTCHA.

Expected Results
  • Check #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality

Applicability

Applies to all technologies.

This technique relates to:

Description

The purpose of this technique is to reduce occasions in which a user with a disability cannot complete a CAPTCHA task. Because there are alternate CAPTCHA tasks that use different modalities, a user is more likely to be able to complete one of the tasks successfully.

Examples

  • A Web page that includes a CAPTCHA test that must be completed successfully before the user can advance to the next step in a process. The page includes both a visual task, such as typing words displayed in a image, and an audio task, such as typing letters spoken in an audio file. A user with hearing disabilities who cannot pass the audio CAPTCHA may be able to pass the video CAPTCHA.

  • A blog comment form includes a visual CAPTCHA that must be completed before a user can submit comments. In addition to the visual CAPTCHA, it includes a CAPTCHA with a form field that asks, "What is two plus seven?" with a text entry field that allows users to enter the correct answer.

Tests

Procedure

For each CAPTCHA in a Web page

  1. Check that the Web page contains another CAPTCHA for the same purpose but using a different modality.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G145: Ensuring that a contrast ratio of at least 3: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 relaxes the 4.5:1 contrast ratio requirement for text that is at least 18 point (if not bold) or at least 14 point (if bold).

Note: When evaluating this success criterion, the font size in points should be obtained from the user agent or calculated on font metrics in the way that user agents do. Point sizes are based on the CSS pt size CSS3 Values. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.

If the background is a solid color (or all black or all white) then the contrast ratio of the larger-scale text can be maintained by making sure that each of the text letters have a 3: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 3: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 company's logo can be used.

    Larger-scale 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 3: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 R sRGB <= 0.03928 then R = R sRGB /12.92 else R = ((R sRGB +0.055)/1.055) ^ 2.4

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

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

      and R sRGB, G sRGB, and B sRGB are defined as:

      • R sRGB = R 8bit /255

      • G sRGB = G 8bit /255

      • B sRGB = B 8bit /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 3:1

Expected Results
  • #4 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G146: Using liquid layout

Applicability

Applies to all technologies.

This technique relates to:

Description

The objective of this technique is to be able to present content without introducing horizontal scroll bars by using layout techniques that adapt to the available horizontal space. Liquid layouts define layout regions that both resize with text, and reflow as needed to display the region on the screen. Although the exact layout therefore varies, the relationship of elements and the reading order remains the same. This is an effective way to create designs that present well on different devices and for users with different font size preferences.

The basic principles of liquid layouts are to:

  1. Define the size of layout regions using units that will cause the region to scale relative to text, so they enlarge or shrink as text is enlarged or shrunk;

  2. Position the layout regions as a row of adjacent floating boxes, which wrap to new rows as needed in much the same way as words in a paragraph wrap.

Complex liquid layouts may be achieved by nesting layout regions, thus creating localized liquid layouts within a larger liquid layout. Even simple liquid layouts require design finesse to achieve good-looking results at a wide range of text sizes, but well-designed liquid layouts can be the most effective page design.

Examples

Example 1: Simple liquid layout in HTML and CSS

The following fairly simple example uses HTML and CSS to create a liquid layout. The three columns adjust their size as text size is adjusted. When the total horizontal width exceeds the available width of the columns, the last column wraps to be positioned below, rather than beside, the previous column. The font size can be increased without either clipping or introducing horizontal scrolling until the longest word no longer fits in a column. This particular example uses percent sizes for the columns and defines them as floating regions using the "float" property.

Example Code:


              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                <title>Example of Basic Liquid Layout</title>
                <style type="text/css">
                .column
                {
                border-left: 1px solid green;
                padding-left:1%;
                float: left;
                width: 32%;
                }
                #footer
                {
                border-top: 1px solid green;
                clear: both;
                }
                </style>
                </head>
                <body>
                <h1>WCAG Example</h1>
                <h2>Text in Three Columns</h2>
                <div title="column one" class="column">
                <h3>Block 1</h3>
                <p> The objective of this technique is to be able to present content 
                without introducing horizontal scroll bars by using layout 
                techniques that adapt to the available horizontal space.
                </p>
                </div>
                <div title="column two" class="column">
                <h3>Block 2</h3>
                <p> This is a very simple example of a page layout that adapts as the
                text size changes.
                </p>
                </div>
                <div title="column three" class="column">
                <h3>Block 3</h3>
                <p> For techniques that support more complex page layouts, see the
                Resources listed below.
                </p>
                </div>
                <p id="footer">Footer text</p>
                </body>
                </html>
            

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Display content in a user agent.

  2. Increase text size to 200%.

  3. Check whether all content and functionality is available with no horizontal scrolling.

Expected Results
  • Check #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults

Applicability

Any technology where text and background color are specified separately and browsers can control default colors.

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. With this technique the author avoids having to do any contrast measures by simply not specifying the text color and not specifying the background. As a result the colors of both are completely determined by the user agent.

Some people who have vision disabilities set their user agent to override certain colors that they have trouble seeing. This technique will help avoid a situation where the user agent and web site conflict with each other over the foreground and/or background colors resulting in the same color for text and background, which would make it invisible for user who set their own colors in their browser or Assistive Technology.

Examples

Example 1

The author specifies neither text color nor background, and does not use CSS. As a result the user can set his browser defaults to provide the colors and contrasts that work well for them.

Resources

Tests

Procedure
  1. Look in all places that text color can be specified

  2. Check that text color is not specified

  3. Look in all areas that background color or image used as a background can be specified

  4. Check that no background color or image used as a background is specified

Expected Results
  • # 2 and 4 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G149: Using user interface components that are highlighted by the user agent when they receive focus

Applicability

All technologies with user-agent provided focus highlighting.

This technique relates to:

Description

The objective of this technique is to ensure that the focused component can be visually identified by the user by relying on user agent support. It is common for user agents to highlight standard controls in some way when they receive focus. UAAG-conformant user agents do so when they satisfy checkpoint 10.2 "Highlight selection, content focus, enabled elements, visited links". When authors use standard controls for which the user agent provides this support, users are informed of the focus location in a standard, predictable way.

Examples

  • When html text input fields receive focus, browsers display a blinking vertical bar at the insertion point in the text field.

  • When html links receive focus, they are surrounded by a dotted focus highlight rectangle.

Resources

Tests

Procedure

For each focusable component in the Web page:

  1. Set focus to the control

  2. Check whether the user agent has highlighted the control in some way

Expected Results
  • #2 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G150: Providing text based alternatives for live audio-only content

Applicability

All technologies that present live audio-only 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 audio broadcasts. It is more difficult to create accurate real-time alternatives because there is little time to correct mistakes, to listen a second time or to 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

  • A radio station uses Web based captioning services to provide alternatives for live sporting events; the output from the service is incorporated in a viewport of the Web page which also includes a streaming audio control.

Tests

Procedure
  1. Check that a procedure and policy is in place to ensure that text alternatives are delivered in real-time.

  2. Check that procedure and policy are working by conducting a random sample to see if text alternatives appear.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G151: Providing a link to a text transcript of a prepared statement or script if the script is followed

Applicability

All technologies that present live audio-only information

This technique relates to:

Description

The objective of this technique is to provide a transcript or script if the live audio content is following a set script. Because it is prepared in advance, the script can be more accurate and complete than live transcription. However, the script will not be synchronized with the audio as it plays. Live audio should not deviate from the script for this technique.

With this technique, a link to the transcript or script is provided and should conform to WCAG 2.0 and could either be included at another location on the same Web page or at another URI.

Examples

  • A live radio play of a fringe theatre group is being broadcast to the Web. As the actors stick largely to a set script, and the budget for the program is small, the producers provide a link (with the playwright's permission) to the script of the play in HTML.

  • A member of the government broadcasts an important policy speech on the Web. A transcript of the speech is made available on the Web site when the speech starts.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check for the presence of a link that points directly to the script or transcript.

  2. Check that the live audio follows the script.

  3. 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
  • All checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)

Applicability

Any technology that supports animated gif (GIF89a)

This technique relates to:

Description

The objective of this technique is to ensure that animated gif images stop blinking within five seconds. There are three aspects of the design of animated gif images that work together to determine how long the image blinks (or otherwise animates):

  • the number of frames in the image, which are discrete images in the animation sequence;

  • the frame rate, which is how long each image is displayed;

  • the number of repetitions, which is how many times the entire animation is performed;

At its simplest, the duration of the animation is the number of frames times the frame rate times the number of repetitions. For example, a simple blinking image with 2 frames, a frame rate of .5 seconds, and 3 repetitions will have a duration of (2 * 0.5 * 3) seconds, or exactly 3 seconds.

Many animated gif images have a constant frame rate, i.e., the amount of time each frame is displayed is the same. However, it is possible to set a different frame rate for each frame, to allow certain frames to be displayed longer than others. In this case, the duration of the animation is the sum of the frame rates times the number of repetitions. For example, a simple image with two frames, the first of which displays for .75 seconds and the second for .25 seconds, and three repetitions will have a duration of ((.75 + .25) * 3) seconds, also exactly 3 seconds.

For an image to stop blinking within 5 seconds, one of the three variables must be adjusted. Most commonly, set the number of repetitions to five seconds divided by the product of the number of frames times the frame rate (or by the sum of the frame rate). Truncate this number down to the nearest integer, do not round up to the next integer, to ensure that the image will stop within five seconds.

If even one repetition results in more than five seconds of animation, one of the other factors must be adjusted. Reduce the number of frames in the image, or increase the frame rate. Be careful when increasing the frame rate that the resulting image does not fail the requirement not to exceed the general flash or red flash thresholds; attention to this is especially important for large images.

Examples

  • A simple blinking image. An image has 2 frames, a frame rate of .5 seconds, and 3 repetitions. The animation has a duration of (2 * 0.5 * 3) seconds, or exactly 3 seconds, and therefore meets the requirements of the success criterion.

Tests

Procedure
  1. Display an animated gif and time how long it animates.

  2. Alternatively, use an image editor to determine the number of frames, the frame rate, and the number of repetitions. Calculate the product of the number of frames multiplied by the frame rate times the number of repetitions. If the frame rates are not uniform, calculate the product of the sum of the frame rates multiplied by the number of repetitions.

  3. Using either method, the duration of animation should be less than or equal to 5 seconds.

Expected Results
  • Check #3 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G153: Making the text easier to read

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to ensure that the text of the Web page is not difficult to read. Users with disabilities that make it difficult to decode words and sentences are likely to have trouble reading and understanding complex text. If the text does not require reading ability more advanced than the lower secondary education level, no supplements or alternative versions are needed.

In order to reduce the complexity of the text:

  • Develop a single topic or subtopic per paragraph.

  • Use the simplest sentence forms consistent with the purpose of the content. For example, the simplest sentence-form for English consists of Subject-Verb-Object, as in John hit the ball or The Web site conforms to WCAG 2.0.

  • Use sentences that are no longer than the typical accepted length for secondary education. (Note: In English that is 25 words.)

  • Consider dividing longer sentences into two.

  • Use sentences that contain no more than two conjunction.

  • Indicate logical relationships between phrases, sentences, paragraphs, or sections of the text.

  • Avoid professional jargon, slang, and other terms with a specialized meaning that may not be clear to people.

  • Replace long or unfamiliar words with shorter, more common terms.

  • Remove redundant words, that is, words that do not change the meaning of the sentence.

  • Use single nouns or short noun-phrases.

  • Remove complex words or phrases that could be replaced with more commonly used words without changing the meaning of the sentence.

  • Use bulleted or numbered lists instead of paragraphs that contain long series of words or phrases separated by commas.

  • Make clear pronoun references and references to other points in the document.

  • Use the active voice for documents written in English and some other Western languages, unless there is a specific reason for using passive constructions. Sentences in the active voice are often shorter and easier to understand than those in the passive voice.

  • Use verb tenses consistently.

  • Use names and labels consistently.

Examples

  • The help pages for a Web application are written in language that is not more advanced than the lower secondary education level.

Tests

Procedure
  1. Measure the readability of the text.

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

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G155: Providing a checkbox in addition to a submit button

Applicability

Any technology

This technique relates to:

Description

The objective of this technique is to provide a checkbox that users must select to indicate they have reviewed their input and are ready for it to be committed. This is important when the nature of the transaction is such that it may not be reversible if input errors are subsequently discovered or when the result of an action is that data is deleted. The author provides a checkbox that is not selected when the page loads, with a label like "I confirm that the input is correct and am ready to submit" or "I confirm that I wish to delete this data". The checkbox should be located near the submit button to help the user notice it during the submission process. If the checkbox is not selected when the form is submitted, the input is rejected and the user is prompted to review their entry, select the checkbox, and resubmit. Only if the checkbox is selected will the input be accepted and the transaction processed.

This checkbox helps to guard against the consequences of an accidental form submission, and also serves to prompt the user to be sure they have entered accurate data. This is more secure than simply putting a label on the submit button like "input is correct, submit". Providing the checkbox as a separate control from the submit button forces the user to "double-check", as they must both select the checkbox and activate the submit button for the transaction to proceed. As such, this is a mechanism for reviewing, confirming, and correcting information before finalizing the submission.

Note: When users submit information without selecting the checkbox, they should not lose the information that they have entered when they return to the form to resubmit.

Examples

  • An online bank service allows users to transfer money between accounts in different currencies. Because exchange rates are constantly in flux, the money cannot be re-exchanged at the same rate if the user discovers an error in their input after the transaction has been carried out. In addition to the "account from", "account to", and "amount" fields, there is a checkbox with a label "I have checked that the amount I wish to transfer is correct". If this checkbox is not selected when the user submits the form, the transaction is not carried out and the user is notified. If the checkbox is selected, the (irreversible) transaction is carried out.

  • An online payment system stores user bank account information in order to process payments. There is an elaborate procedure for users to enter new accounts and verify that they are the owner. There is the facility to delete old accounts, but if an account is accidentally deleted, it would be difficult to reinstate it, and the transaction history with that account would be lost. Therefore, on pages that allow users to delete accounts, there is a checkbox with the label "I confirm that I wish to delete this account." If this checkbox is not selected when the user submits the form, the account is not deleted and the user is given an error message. Only if the checkbox is selected is the account deleted.

  • A checkout form on a shopping site includes a form that collects order, shipping and billing information. After submitting the form, the user is taken to a page where the information they have submitted is summarized for review. Below the summary, a checkbox with the label "I have reviewed and confirmed that this data is correct" is shown. The user must mark the checkbox and activate a "complete order" button in order to complete the transaction.

Tests

Procedure

For user input pages that cause irreversible transactions to occur:

  1. Check that a checkbox indicating user confirmation of the input or action is provided in addition to the submit button.

  2. Check that if the checkbox is not selected when the form is submitted, the input is rejected and the user is prompted to review their entry, select the checkbox, and resubmit.

Expected Results
  • Checks #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text

Applicability

All technologies

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for G156.

Description

Some people with cognitive disabilities require specific color combinations of foreground text and background to help them successfully understand the contents of the Web page. Most popular browsers provide the option to change colors settings globally within the browser. In this case the colors selected by the user override the foreground and background colors specified by the Web author.

In order to meet this success criteria, the Web author would design the page so that it works with browsers that have these controls, and the author does not override these controls.

Note that overriding the foreground and background colors of all text on a page may hide visual clues to the grouping and organization of the Web page, making it much more difficult to understand and use. This technique may not be appropriate when background colors are used to delineate areas of the page. This technique may be appropriate for technologies and user agents that do not alter border colors when background colors are overridden. If background colors are used to delineate areas of the page, "C23: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content (CSS) " may be used to permit the user to control the colors of the main text while retaining the visual structure of the Web page.

Examples

  • A Web page is designed using HTML and CSS to specify the foreground and background colors. The user sets their own colors in Internet Explorer 7 and they can view the content with their chosen foreground and background colors.

  • A Web page is designed using HTML and CSS. There is a link on the page to instructions on how to set colors in various browsers.

Resources

No resources available for this technique.

Tests

Procedure
  1. Open the Web page in a browser that allows users to change colors of HTML content.

  2. Change the foreground and background colors in the browser settings so they are different than those specified in the content.

  3. Return to the page and check that that the new specified foreground text and background colors in the browser override the colors specified in the content.

Expected Results
  • Check #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G157: Incorporating a live audio captioning service into a Web page

Applicability

All technologies that present live audio-only information.

This technique relates to:

Description

The objective of this technique is to use a real-time caption service to provide a text version of live audio content. Such services use a trained human operator who listens in to what is being said and uses a special keyboard to enter the text with only a small delay. They are able to capture a live event with a high degree of fidelity, and also to insert notes on any non spoken audio which is essential to understanding the event. The viewport containing the caption text is available on the same Web page as the live audio content.

Examples

  • An internet radio station provides a viewport on its Web page for its news services. Live news reports, especially emergency reports, are transcribed by a real-time caption service and displayed in the viewport.

  • A conferencing or screen-sharing service includes a window with running real-time transcription of the verbal presentation. This is achieved by arranging ahead of time with a remote relay audio-teleconference captioning service. The online web conferencing or screen-sharing service needs to be designed with this possible usage in mind because using a separate window for the live text would be a significant usability barrier.

  • A recurring audio conference uses an online hand-raising utility to assist with queuing. In order to facilitate use of this product in conjunction with an on-line relay conference captioning service, the queuing utility is designed to be fully operational in a narrow viewport. For additional enhancement, a website is created to bring up both viewports within a single Web page.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that the Web page contains a viewport associated with the live audio content.

  2. Check that the text of the live audio content appears in the viewport with less than 30 seconds delay.

Expected Results
  • All checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G158: Providing an alternative for time-based media for audio-only content

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 an audio-only presentation.

In an audio-only presentation, information is presented in a variety of ways including dialogue and sounds (both natural and artificial). 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 prerecorded audio-only content. In this technique, the document serves as long description for the content and includes all of the important dialogue and as well as descriptions of background sounds etc. that are part of the story.

If an actual script was used to create the audio-only content in the first place, this can be a good place to start. In production and editing however, the content often varies somewhat from the script. For this technique, the original script would be corrected to match the dialogue and what actually happens in the final edited form of the audio presentation.

Examples

  • A podcast includes a description of new features in a recent software release. It involves two speakers informally discussing the new and updated features and describing how they are used. One of the speakers works from a list of questions that was used to outline the discussion prior to recording. After the recording is complete, the outline is then edited and supplemented to match the dialogue etc. The resulting transcript is then made available on the speakers Web site along with the audio-only file. The text alternative that identifies the audio only content reads, "Episode 42: Zap Version 12 (text transcript follows)" and the link to the transcript is provided immediately following the audio-only content.

Resources

Tests

Procedure
  1. View the audio-only content while referring to the alternative for time-based media.

  2. Check that the dialogue in the transcript matches the dialogue and information presented in the audio-only presentation.

  3. If the audio includes multiple voices, check that the transcript identifies who is speaking for all dialogue.

  4. Check that at least one of the following is true:

    1. The transcript itself can be programmatically determined from the text alternative for the audio-only content

    2. The transcript is referred to from the programmatically determined text alternative for the audio-only content

  5. 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
  • All of the above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G159: Providing an alternative for time-based media for video-only content

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 video-only presentation.

In a video-only presentation, information is presented in a variety of ways including animation, text or graphics, the setting and background, the actions and expressions of people, animals, etc. 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 prerecorded video-only content. In this technique, the document serves as a long description for the content and includes all of the important information as well as descriptions of scenery, actions, expressions, etc. that are part of the presentation.

If a screenplay for the video-only content was used to create the content in the first place, this can be a good place to start. In production and editing however, the final version often varies somewhat from the screenplay. To use the screenplay, it would need to be corrected to match the final edited form of the video-only presentation.

Examples

  • An animation shows how to assemble a woodworking project. There is no audio, but the animation includes a series of numbers to represent each step in the process as well as arrows and picture-in-picture highlights illustrating how the assembly is completed. It also includes short outtake animations illustrating what will happen if assembly is done incorrectly. A text alternative that identifies the video-only content reads, "Breadbox assembly video (text description follows)," and the text description of the video includes a full text description of each step in the video.

Resources

No resources available for this technique.

Tests

Procedure
  1. View the video-only content while referring to the alternative for time-based media.

  2. Check that the information in the transcript includes the same information that is in the video-only presentation.

  3. If the video includes multiple people or characters, check that the transcript identifies which person or character is associated with each action described.

  4. Check that at least one of the following is true:

    1. The transcript itself can be programmatically determined from the text alternative for the video-only content

    2. The transcript is referred to from the programmatically determined text alternative for the video-only content

  5. 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
  • All of the above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G160: Providing sign language versions of information, ideas, and processes that must be understood in order to use the content

Applicability

All technologies.

This technique relates to:

Description

For some people who are deaf or have certain cognitive disabilities, sign language may be their first language. A sign language version of the page may be easier for them to understand than a written language version. The objective of this technique is to provide sign language versions of content that help signing users understand difficult text that describes concepts or processes. The sign language content is provided in addition to the text.

Since this is supplemental content (and not sign language for speech in content) it should be viewed as separate from the content and would not necessarily be synchronized. Although there may be occasions when that would be useful, it is not required.

To make the sign language version available with the rest of the Web page contents, the video may be embedded in the Web page directly or the Web page may include a link that brings up a video player in a separate window. The sign language version could also be provided via a link to a separate Web page that displays the video.

Sign language is a three-dimensional, visual language that uses the hands, arms, shoulders, head, face, lips and tongue of the signer. For viewers to understand what is being signed, the video must record the sign language completely. Generally speaking, the signer should be as close to the camera as possible without risking cut-offs (such as hands moving outside the video).

Information on how to find sign language interpreters is listed in the resources section below.

Note 1: If the video stream is too small, the sign language interpreter will be indiscernible. When creating a video stream 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

  • The information about how to contact support or send questions about a Web site is provided in a sign language video as well as in text.

  • Help pages for a Web application are provided in sign language as well as in text.

  • A company Web site provides sign language videos describing the technical details of each product.

  • A religious Web site includes American Sign Language among the different languages in which it makes its site available.

Resources

Tests

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

  2. Check if sign language supplements to the text are available in the content or through links within the content.

  3. Check that the sign language supplements show the concepts or processes discussed in the text.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G161: Providing a search function to help users find content

Applicability

All technologies that include forms.

This technique relates to:

Description

Providing a search function that searches your Web pages is a design strategy that offers users a way to find content. Users can locate content by searching for specific words or phrases, without needing to understand or navigate through the structure of the Web site. This can be a quicker or easier way to find content, particularly on large sites.

Some search companies offer sites free access to their search applications. Search engines are available that can be installed on your own server. Some web hosting companies offer search scripts that customers can include on their web pages. Most services also offer paid versions of their tools with more advanced features.

Implementing a search function that will spell-check the terms, include different endings for the terms (stemming), and allow for the use of different terminology (synonyms) will further increase the accessibility of the search function.

The search functionality is added by either including a simple form on the Web page, usually a text field for the search term and a button to trigger the search or by adding a link to a page that includes a search form. The search form itself must be accessible, of course.

Techniques that are used to optimize search engine results for external searches also support internal search engines and make them more effective: use keywords, META tags, and an accessible navigation structure. Search sites provide guidance on how to create content that is optimized for search, for instance Google Webmaster Guidelines, and Yahoo! Search Content Quality Guidelines.

Examples

Example 1: A Shopping Site

A shopping site organizes its products into different categories, such as women's clothes, men's clothes, and children's clothes. These have subcategories, such as tops, pants, shoes, and accessories. Each page also contains a search form. Users can type the product number or product description into the search field and go directly to that product, rather than needing to navigate the product categories to find it.

Example 2: A Help Center

A Help Center contains thousands of pages of Help information about a company's products. A search form allows users to search just the Help Center pages to find articles that contain the search terms.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that the Web page contains a search form or a link to a search page

  2. Type text into the search form that occurs in the set of Web pages

  3. Activate the search

  4. Check that the user is taken to a page that contains the search term

  5. Check that the user is taken to a page that contains a list of links to pages containing the search term

Expected Results
  • Check #1 is true, and either Check #4 or Check #5 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G162: Positioning labels to maximize predictability of relationships

Applicability

All technologies that support forms

This technique relates to:

Description

When labels for form fields are positioned where the user expects them visually, it is easier to understand complex forms and to locate specific fields. Labels for most fields are positioned immediately before the field, that is, for left-to-right languages, either to the left of the field or above it, and for right-to-left languages, to the right of the field or above it. Labels for radio buttons and checkboxes are positioned after the field.

These positions are defined because that is the usual (and therefore most predictable) position for the label for fields, radiobuttons and checkboxes.

Labels are positioned before input fields since the fields sometimes vary in length. Positioning them before allows the labels to line up. It also makes labels easier to locate with a screen magnifier since they are immediately before the field and also can be found in a vertical column (when the start of the fields line up vertically). Finally, if the field has data in it, it is easier to understand or check the data if one reads the label first and then the content rather than the other way around.

Checkboxes and radio buttons have a uniform width while their labels often do not. Having the radio button or checkbox first therefore allows both the buttons and the labels to line up vertically.

Examples

Example 1: Labels above text fields

Two form fields with labels positioned immediately above them.

Example 2: Labels to the left of text fields

Two form fields with labels positioned immediately to the left.

Example 3: Labels to the right of radio buttons

A group of form controls contains two radio buttons with labels positioned to the right of the radio buttons.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each form field on the Web page:

  1. Check that the form field has a visible label.

  2. If the form field is a checkbox or radio button, check that the label is immediately after the field.

  3. If the form field is not a checkbox or radio button, check that the label is immediately before the field.

Expected Results
  • All checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G163: Using standard diacritical marks that can be turned off

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to provide users with a mechanism for turning standard diacritical marks on or off.

Many languages use diacritical marks or diacritics to indicate the pronunciation of words or to help distinguish between words. Some languages may use diacritics to denote vowels, to indicate consonant doubling, to indicate the absence of a vowel or a consonant, or for other purposes. Although text without such diacritics can be readable, the addition of diacritics can improve readability.

Examples

Example 1

A Web page in Hawaiian displays all diacritical marks by default and provides links that allow users to select the level of display of diacritical marks:

  • Display no diacritical markings

  • Use the footmark (‘) for the ʻokina, but do not display macrons

  • Show all diacritical markings

The visitor selects the level he or she prefers, and this preference is stored into a session cookie. All subsequent pages during that same session have access to the cookie, and show or hide diacritics according to the selected level.

On the server side, content is stored with all diacritical markings. If a visitor prefers fewer or no diacritics, a server-side function replaces or removes diacritics as desired before sending the response.

Example at Hawaiian language online.

Tests

Procedure

For any Web page in a human language that uses diacritical marks to distinguish between meanings:

  1. Check that the default version of the content uses diacritical marks.

  2. Check that there is a mechanism to turn diacritical marks on or off.

  3. Check that using the mechanism to turn off diacritical marks results in content that does not display diacritical marks.

  4. Check that using the mechanism to turn on diacritical marks results in content that displays diacritical marks.

Expected Results
  • Checks #1 - #4 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G164: Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request

Applicability

All technologies that provide forms.

This technique relates to:

Description

The objective of this technique is to allow users to recover from errors made when placing an order by providing them with a period of time during which they can cancel or change the order. In general, a contract or an order is a legal commitment and cannot be canceled. However, a Web site may choose to offer this capability, and it provides a way for users to recover from errors.

The Web content would need to tell the user how long the cancellation period is after submitting the form and what the procedure would be to cancel the order. The cancellation procedure may not be possible online. It may, for instance, require written notice be sent to an address listed on the Web page.

After submitting the form, the user is informed of the length of the cancellation period and the procedure for canceling the transaction. It's best to provide the cancellation procedure at the same website where the transaction was submitted so that it is as easy to cancel as it was to submit and to accommodate users who may be unable to use other mechanisms. But, if necessary, the cancellation procedure may be provided through some other mechanism or combination of mechanisms as long as it has equivalent cross-disability accessibility. In this case, users are warned prior to submitting the form that they will not be able to cancel their order online.

Examples

Example 1: Online shopping

An online shopping Web site lets users cancel purchases up to 24 hours after they have been made. The Web site explains their policy, and includes a summary of the policy on the purchase receipt emailed to the user. After 24 hours, the purchase will be shipped to the user and can no longer be canceled.

Example 2: Custom orders

A Web site sells custom sports jackets that are made to order. The customer chooses the fabric and provides body measurements for the tailor. The Web site gives customers up to three days to change or cancel an order. Once the material has been cut to the customer's specifications, it is no longer possible to change or cancel the order. The company policy is described on its Web site.

Tests

Procedure
  1. Check that the Web page describes the time period to cancel or change an order.

  2. Check that the Web page describes the process for canceling or changing an order.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over

Applicability

Technologies that contain focusable elements

This technique relates to:

Description

Operating systems have a native indication of focus, which is available in many user agents. The default rendering of the focus indicator isn't always highly visible and may even be difficult to see against certain backgrounds. However, many platforms allow the user to customize the rendering of this focus indicator. Assistive technology can also change the appearance of the native focus indicator. If you use the native focus indicator, any system-wide settings for its visibility will carry over to the Web page. If you draw your own focus indicator, for example by coloring sections of the page in response to user action, these settings will not carry over, and AT will not usually be able to find your focus indicator.

Examples

Example 1

The default focus indicator on Microsoft Windows is a one-pixel, black dotted line around the focused element. On a page with a dark background, this can be very difficult to see. The creator of the page uses the default, and the user customizes it in Windows to make it a bright color.

Example 2

In HTML, form elements and links can be focused by default. In addition, any element with a tabindex attribute >= 0 can take focus. Both types of focused elements use the system focus indicator and will pick up platform changes in the focus indicator style.

Tests

Procedure
  1. Use the features of your platform to customize the appearance of the focus indicator

  2. Tab through the page, noting the path of the focus

  3. Check that the focus indicator for each control is visible

Expected Results
  • Check #3 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G166: Providing audio that describes the important video content and describing it as such

Applicability

All technologies that can contain video content

This technique relates to:

Description

Video-only content is inaccessible to people who are blind and to some who have low vision. Therefore, it is important for them to have an audio alternative. One way of doing this is to provide an audio track describing the information in the video. The audio should be a common audio format used on the internet, such as MP3.

Examples

Example 1

A Web page has a link to a video-only presentation of a spaceship landing on Mars. The link to the video is a picture of a spaceship. Near the video is a link to an audio file of a person describing the video. This would look something like the following code example in HTML.

Example Code:


              <a href="../video/marslanding.mp4"><img src="../images/spaceship.jpg" 
                alt="Mars landing, video-only" width="193" height="255"/></a>
                <br />
                <a href="Mars_landing_audio.mp3">Audio description of "Mars Landing"</a>
            

Tests

Procedure

For a Web page that contains video-only content:

  1. Check that there is link to an audio alternative which describes the contents of the video immediately before or after the video-only content.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G167: Using an adjacent button to label the purpose of a field

Applicability

All technologies that support forms

This technique relates to:

Description

When a button invokes a function on an input field, has a clear text label, and is rendered adjacent to the input field, the button also acts as a label for the input field. This label helps users understand the purpose of the field without introducing repetitive text on the Web page. Buttons that label single text fields typically follow the input field.

Note: The field must also have a programmatically determined name, per Success Criterion 4.1.2.

Examples

Example 1: A search function

A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The button is positioned right after the text field so that it is clear to the user that the text field is where to enter the search term.

A text field with a button positioned to the right demonstrating the use of a button to label a field.
Example 2: Picking a form

A user in the United States must fill in a form. Since the laws and requirements are different in different states within the United States, the user must select the version of a form for his state of residence. A dropdown list allows the user to pick a state. The adjacent button is labeled "Get Form for State." Pressing the button takes the user to the Web page containing the form for the selected state.

Tests

Procedure

For a field and a button using this technique:

  1. Check that the field and button are adjacent to one another in the programmatically determined reading sequence.

  2. Check that the field and button are visually rendered adjacent to one another.

Expected Results
  • All checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G168: Requesting confirmation to continue with selected action

Applicability

All technologies.

This technique relates to:

Description

This technique is to seek confirmation from the user that the selected action is his or her intended action. Use this technique in situations where the action can not be undone after it has been followed through. This will help users avoid submitting a form or deleting data by mistake.

For example, this may occur when the user expects the 'submit' and 'cancel' buttons to occur in an order contrary to what is provided and selects a button too quickly to notice the unexpected order. Presenting the user with a confirmation request allows the user to recognize the error and either stop the submission of data or stop the loss of entered data.

The request for confirmation should inform the user of the action that was selected and the consequences of continuing with the action.

Examples

Example 1: Airline travel

An online travel Web site lets users create travel itineraries that reserve seats with different airlines. Users may look up, amend and cancel their current itineraries. If the user needs to cancel his travel plans, he finds the itinerary on the Web page and deletes it from his list of current itineraries. This action results in the cancellation of his seat reservations and is not reversible. The user is informed that the selected action will cancel their current seat reservations and that it may not be possible to make a comparable booking on the same flights once this action has been taken. The user is asked to confirm or cancel the deletion of the itinerary.

Example 2: Webmail

A Webmail application stores a user's email on a server, so that it can be accessed from anywhere on the web. When a user deletes an email message, it is moved to a trash folder from which it can be retrieved if it was deleted by accident. There is an "empty trash" command for deleting the messages in the trash folder from the server. Once the trash folder has been emptied, the messages can no longer be retrieved. Before emptying the trash folder, the user is asked to confirm or cancel deletion of the email in the trash folder.

Example 3: An online test

A form is used to collect answers for a test. When the 'submit' or 'reset' button is selected the user is presented with a web page that informs them of their choice and asks for confirmation to continue. Example 1: "You have selected to reset the form. This will delete all previously entered data and will not submit any answers. Would you like to reset the form? [yes button] [no button]" Example 2: "You have selected to submit the form. This will submit entered data as your final answers and can not be changed. Would you like to submit the form? [yes button] [no button]"

Example 4: Trading stocks

A brokerage site allows users to buy and sell stocks and other securities. If the user makes a transaction during trading hours, a dialog is presented informing the user that the transaction is immediate and irreversible, and has buttons that say "continue" and "cancel."

Tests

Procedure
  1. Initiate the action that can not be reversed or changed.

  2. Check that a request to confirm the selected action is presented.

  3. Check that the action can be confirmed and canceled.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G169: Aligning text on only one side

Applicability

All technologies.

This technique relates to:

Description

Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create "rivers of white" running down the page, which can make the text difficult for some people to read. This failure describes situations where this confusing text layout occurs. The best way to avoid this problem is not to create text layout that is fully justified.

Examples

Example 1

For most technologies, simply leave out any alignment declarations. For example, the following text will be justified to the left by default in HTML where the language of the page is left to right.

Example Code:


              <p>
                Lorem ipsum dolor sit amet, ...
                </p>
            
Example 2

A Web page includes sections with mixed alignment. Paragraphs in the body of the page are aligned to the left margin. The text also includes a number of pulled quotations which are aligned to the right margin.

Tests

Procedure
  1. Open the page in a common browser.

  2. Verify that content is not justified (aligned to both the left and the right margins).

Expected Results
  • Test procedure #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically

Applicability

All technologies where sound can be played automatically.

This technique relates to:

Description

The intent of this technique is to allow a user to turn off sounds that start automatically when a page loads. The control to turn off the sounds should be located near the beginning of the page to allow the control to be easily and quickly discovered by users. This is useful for those who utilize assistive technologies (such as screen readers, screen magnifiers, switch mechanisms, etc.) and those who may not (such as those with cognitive, learning and language disabilities).

In this technique, an author includes a control that makes it possible for users to turn off any sounds that are played automatically. The control should be keyboard operable, located early in the tab and reading order, and clearly labeled to indicate that it will turn off the sounds that are playing.

Examples

Example 1

A Web page contains a time-based media presentation that includes an audio track as well as an animated video describing how to repair a lawnmower engine. The page contains 2 buttons that say "Pause" and "Stop", which give the user control over when and if the time-based media plays.

Example 2

A Web page contains an embedded short film. The page contains a button that says "Pause the movie", which allows the user to pause the film.

Example 3

A Web page contains a Flash presentation that includes video and audio. The page contains a button that says "Turn off multimedia", which allows the user to stop any video and audio from playing.

Tests

Procedure
  1. Load a Web page.

  2. Check for music or sounds that start automatically.

  3. Check that a control that allows the user to turn off the sounds is provided near the beginning of the page.

Expected Results
  • Check #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G171: Playing sounds only on user request

Applicability

All technologies that can play sound.

This technique relates to:

Description

The intent of this technique is to allow a user to control the use of sounds in Web content. Someone that uses a screen reader may find it very distracting and difficult to listen to their screen reader if there are also sounds coming from Web content. Providing a way to play sounds only upon request will give a user the control needed to listen to any sounds or other audio without interfering with the output from a screen reader.

Examples

Example 1

A Web page from a grey whale conservation society has a looping background sound of grey whales singing. There are also sounds of water splashing. The sounds do not start automatically. Instead, the Web content provides a link at the top of the page to allow the user to start the sounds manually. The button says "Turn sounds on." After pressing the "turn sounds on" button, the sounds are heard. The user is then presented with an option to "turn sounds off."

Example 2

A link is provided to a sound file that includes the sounds of the grey whales. The link text says, "Hear the song of the grey whale (mp3)."

Tests

Procedure
  1. Load a Web page that is known to contain sounds that play for 3 seconds or longer.

  2. Check that no sounds play automatically.

  3. Check that there is a way for a user to start sounds manually.

Expected Results
  • Check #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G172: Providing a mechanism to remove full justification of text

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to provide a version of the page that does not have full justification (justified both left and right).

There may be circumstances when for layout purposes an author may want to have the text fully justified. In these cases, it is sufficient to provide a feature that removes the justification of text. The control should be easy to find and access and near the beginning of the page.

Note: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version (CSS) and Understanding Conforming Alternate Versions for more information.

Examples

Example 1

A classic novel online is on a site that attempts to duplicate the look of the originally published work, which includes full justification. A button is provided near the top of the page saying "remove full justification" and a style switching technique is used to swap out the style sheet. The new style sheet aligns the text only on the left.

Tests

Procedure
  1. Open a page with full justification.

  2. Check that there is a feature to remove the full justification.

  3. Check that the feature removes the full justification.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G173: Providing a version of a movie with 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 audio desciptions 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 a second version of the movie where the original soundtrack and additional audio description have been combined in a single track. This additional 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.

Providing a second version of the movie that includes audio descriptions as the primary sound track 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.

Examples

  • Two versions of a video of an opera are available. The first version includes only the music. The second version includes both the music and voice describing the actions of the performers on stage.

  • A video of juggler performing in front of group of children includes a version with audio description. The narrator of the audio description describes the number and type of items the juggler is juggling as well as the reactions the children have during the performance.

Resources

Tests

Procedure
  1. Open the version of the media that includes audio description.

  2. Listen to the movie.

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

  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
  • #3 and #4 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast

Applicability

Any technology.

This technique relates to:

Description

When the contrast between the text and its background for some portion of the page has not been designed to meet the contrast level for Success Criterion 1.4.3 or 1.4.6, it is possible to meet these guidelines using the "Alternate Version" clause in the conformance requirements (Conformance Requirement 1). A link or control on the page can either change the page so that all aspects conform, or it could take the viewer to a new version of the page that does conform at the desired level. Placing the link or control prominently on the page will assist users in accessing the conforming content readily.

For this technique to be used successfully, three things must be true:

  1. The link or control on the original page must itself meet the contrast requirement of the desired SC. (If the user cannot see the control they may not be able to use it to go to the new page.)

  2. The new page must contain all the same information and functionality as the original page.

  3. The new page must conform to all of the SC for the desired level of conformance. (i.e., the new page cannot just have the desired level of contrast but otherwise not conform).

This technique can be used to meet Success Criterion 1.4.3 by having text (or images of text) on the alternate version of the page be 4.5:1 contrast and any large text (or images of large text) be 3:1 contrast with its background. If the alternate version of the page has all text (or images of text) with 7:1 contrast and large text (or images of large text) with 4.5:1 contrast then it would satisfy both Success Criterion 1.4.3 and 1.4.6.

Note: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version (CSS) and Understanding Conforming Alternate Versions for more information.

Examples

  • A page with some headlines that do not meet the 3:1 contrast requirements has a high contrast (5:1) link at the top of the page that takes the user to a new version of the page with minimum 4.5:1 contrast on all text and images of text.

  • A page uses shaded backgrounds for effect but results in text to background contrast of 4:1. A control at the top of the page says "high contrast". Clicking on it causes different styles to be used and dropping the background colors to achieve 7:1 contrast.

Tests

Procedure
  1. Check that a link or control exists on the original page that provides access to the alternate version.

  2. Check that the link or control on the original page conforms to all success criteria for the conformance level being tested.

  3. Check that the alternate version meets the contrast and all other success criteria for the conformance level being tested.

Expected Results
  • All three checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G175: Providing a multi color selection tool on the page for foreground and background colors

Applicability

Any technology that allows users to store preferences for reuse on other pages.

This technique relates to:

Description

The objective of this technique is to include a control on a Web page or set of Web pages that allows users to specify preferred foreground and background colors for the content. This technique can be implemented using any technology that allows users to store preferences that can be used across pages. Using this technique, an author includes a color picker control on the site which allows users to select and save foreground and background color preferences for use on other pages in a site. Pages are designed to look for these preferences and adapt accordingly when saved settings are found.

Many users with cognitive disabilities have trouble with standard black text on a white background. Sometimes, they can read the text a lot better using different colors for the text and background and sometimes these color combinations are very specific and not what would be expected by someone else (for instance brown on blue).

Some of these users will have difficulty setting colors using the browser's color settings or the operating systems color settings. Providing a tool on the web page that provides a wide range of foreground and background colors will allow them to easily change the colors without digging into the browser settings.

Examples

Example 1

The user may type hex values into the text fields. The "pick" link will open a color selection tool for the adjoining field.

Screenshot showing the foreground and background color controls, which are text fields containing hex values. Each field has a link which opens a color picker control positioned between the label and the text field.

The color selection tool opened for selecting a color.

Screenshot showing the color selection tool with the color picker opened to select a color for the foreground. The user is presented with a choice of 216 colors.

Here is a working example of this technique implemented using PHP, Javascript, CSS and XHTML: Color Picker Example.

Resources

No resources available for this technique.

Tests

Procedure
  1. Check that there is a control on the page that is identified as a color selection tool.

  2. Check that the color selection tool provides a variety of colors choices for the text and background.

  3. Select new colors for the text and background using the tool.

  4. Check that the content is updated to use the selected color combinations.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G176: Keeping the flashing area small enough

Applicability

Appropriate to use for all general Web content including special cases like material that is specifically designed for a display in a foyer.

This technique relates to:

Description

The purpose of this technique is to provide an easy way to pass the success criterion for things that flash, but are small.

If you have something that flashes more than 3 times in a one second period (so G19 can't be used), but the area that is flashing is less than 25% of 10 degrees of visual field (which represents the central area of vision in the eye), then it would automatically pass.

The 10 degree of visual field represents the central area of vision in the eye. This area is highly packed with visual sensors. Flashes in this area are transmitted to the visual cortex. For those with photosensitivity, this flashing of activity on the visual cortex can cause seizures. Flashing on other areas of the eye (which have far fewer sensors) has much less effect on the cortex. Hence, the focus on just the 10 degrees of central vision.

Formula 1: Small Safe Area for Web Content

Most Web authors do not know how to translate visual field to pixels, which is what they generally can deal with. This technique provides that translation.

At this point in time, the most prevalent display is 1024 x 768 and about 15-17 inches diagonally. When viewed at a typical viewing distance (22-26 inches) a 10 degree visual field will capture an area approximately 341 x 256 pixels. This is not circular, but neither is the central vision of most users, and the difference is so small (and at the edge of the central vision where sensors are fewer) that it is not important.

Since the criterion is 25% of any 10 degree visual field, any single flashing event on a screen (there is no other flashing on screen) that is smaller than a contiguous area of 21,824 sq pixels (any shape), would pass the General and Red Flash Thresholds.

1024 x 768 was chosen because it represents the most common screen size. It also works with higher resolution screens since the tighter pixel density would result in a smaller and safer image size.

Users with lower resolution displays or that enlarge or view their screens closely would have a higher risk depending on the viewing distance. To address the needs of this group, G19: Ensuring that no component of the content flashes more than three times in any 1-second period should be used since it is independent of screen resolution or viewing distance.

Formula 2: Small Safe Area for Known Displays

To calculate the small safe area (in pixels) on the screen when the screen size, resolution, and viewing distance is known, use the following procedure.

Note: For a number of reasons (distribution of central vision sensors often non-circular, simplicity, computational convenience, historical), a 4:3 rectangular approximation of the central 10 degree of visual field is used that is 10 degrees wide and 7.5 degrees high. This has an area of 75 square degrees, vs the 78.5 square degree area of a true circle of 10 degrees.

  1. To convert viewing distance to rectangle size, multiply the viewing distance by 0.1745 (10 * Pi / 180) to get the width of the rectangle, and multiply the viewing distance by 0.1309 (7.5 * Pi / 180) to get the height of the rectangle. (This calculation can be done in inches, or millimeters, or any other unit of length.)

  2. Determine size of 10 degree angle of view in pixels.

    To do this, multiply the width and height of the rectangle from step 1 by the resolution of the screen, in pixels per unit length, to get the horizontal and vertical size of the rectangle in pixels.

    • For a 1080p widescreen display (which is 1920 by 1080 pixels), the resolution of the screen in pixels per inch is 2203 divided by the diagonal screen size, in inches.

    • For a 720p widescreen display (which is usually 1365 by 768 pixels), the resolution of the screen in pixels per inch is 1566 divided by the diagonal screen size, in inches.

    • For an LCD computer monitor which specifies the pixel pitch in millimeters / pixel, the resolution of the screen in pixels per inch is 25.4 divided by the pixel pitch in millimeters.

    For any display, if you know the actual diagonal screen size in inches, and the horizontal and vertical resolution of the display in pixels, then the resolution of the screen in pixels per inch is the square-root of ( (horizontal resolution in pixels) * (horizontal resolution in pixels) + (vertical resolution in pixels) * (vertical resolution in pixels) ).

  3. Multiply the width of the rectangle by the height and divide by 4.

Examples

  • An author creates an animation that will be displayed on a screen in the entrance lounge at a company. Using the size and resolution of the display and the closest distance that a person can stand when viewing the display, they calculate the size of 25% of the 10 degree of central vision in pixels (using the formula above). This would be the small safe area. They then are careful to never flash any area larger than the small safe area.

Resources

Tests

Procedure
  1. The small safe area is calculated.

  2. Check that only one area of the screen is flashing at any time.

  3. Check that the flashing content would fit into a contiguous container whose area is less than the small safe area.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G177: Providing suggested correction text

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 suggest correct text where the information supplied by the user is not accepted and possible correct text is known. The suggestions may include correct spelling or similar text from a known pool of possible text.

Depending on the form, suggestions could be located next to the field where the error was identified, elsewhere on the page or via a search mechanism or reference where results would be listed on another URI. Where possible, suggestions for correction should be incorporated in a way that is easy for the user. For example, an incorrect submission may return a list of possible corrections where the user can select a checkbox or radio button to indicate which option was intended. Suggestions or links to the suggestions should be placed close to the form fields they are associated with, such as at the top of the form, preceding the form fields, or next to the form fields requiring correction.

Examples

  • A form field requires the user to input a length of time that could range from days to years. The user enters the number "6". The server returns the form as the user had submitted it and also includes a suggested text next to the form field: "Error detected. Did you mean: 6 days, 6 weeks, 6 months or 6 years?"

  • The user enters an incorrectly spelled city name. The server returns the form as the user had submitted it and also includes a message at the top of the form informing the user of the error and a link to a list of city names that the user may have meant, as determined by comparing their original input to a database of city names.

  • A bus route trip planner allows users to enter their origin an destination, allowing users to enter street addresses, intersections and city landmarks. When a user enters "Kohl," they are prompted with a list of search results with similar matches that reads, "Your search for 'Kohl' returned the following". A select box follows the prompt lists, "Kohl Center," "Kohl's Dept. Store-East" and "Kohl's Dept. Store-West" as options the user can choose from.

  • A search runs a spell check on input and provides a link of alternatives if a spelling error is detected. When the user clicks on the link, the search is automatically resubmitted with the correct spelling.

Tests

Procedure
  1. Identify form fields where correct text could be inferred from incorrect text.

  2. Fill out the form, deliberately filling in the identified form fields with incorrect text.

  3. Check that the user is presented with suggestions for the correct text.

  4. Check that the suggestions are provided next to the form field or a link to the suggestions is provided close to the form field.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent

Applicability

All technologies.

This technique relates to:

Description

The purpose of this technique is to provide a mechanism on the Web page to incrementally increase the size of text. Many people with low vision do not use magnifying software, and they may not be familiar with their browser's text size adjustments. This may be particularly true of older people who are learning about computers later in life and who may be experiencing age related vision loss. It may also be true of some people with cognitive disabilities who require increased font size.

This technique provides a mechanism that some users will find easier to use. The mechanism may include links or buttons that will switch the visual presentation to a different style sheet or use scripts to change the text size dynamically.

To implement this technique, an author provides controls that allow the user to incrementally increase or decrease the text size of all of the text on the page to a size that is at least 200% of the default text size.

This can be achieved by providing links, buttons or linked images and the controls themselves should be as easy to find (e.g. prominently positioned within the page, presented in a larger text size, high contrast, etc.) as possible.

This technique can also be used in circumstances where scalable fonts cannot be used, such as legacy code situations.

Note: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version (CSS) and Understanding Conforming Alternate Versions for more information.

Examples

  • A newspaper article has two buttons near the top of the page. The "increase text size" button has a big letter "T" with an upward arrow and the "decrease text size" button has a small letter "T" with a down arrow. There is alt text on each button.

  • A site has a number of style sheets with different text size. The user can choose any of the style sheets if their browser provides this functionality. Each page also includes the links "Increase text size" and "Decrease text size" that will change the style sheet currently applied to the appropriate alternate style sheet.

  • A site includes the text "Change text size:" followed by text links "Up" and "Down" on every Web page. The links trigger a Javascript that alters the value of the text-size property accordingly.

  • A site includes a link on every page that reads "Change text size." The resulting page includes a series of links that includes options representing the available sizes. The links read, "Smallest font size," "Small font size," "Default font size," "Large font size," etc. Instructions preceding the list direct users to choose a link to change to the desired font size.

Tests

Procedure
  1. Set the viewport size to 1024px by 768px or larger.

  2. Increase the text size and check to see if the text size increased.

  3. Check that the text size can be increased to 200% of the original size.

  4. Check that after increasing the text size to 200% of the original size, there is no loss of content or functionality (e.g. no parts of the text are clipped, boxes do not overlap, controls are not obscured or separated from their labels, etc.).

  5. Decrease the text size to its default value and check to see if it in fact returned to the default size.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width

Applicability

All technologies that reflow text when windows are resized.

This technique relates to:

Description

Some user agents support changing the size of text without changing other dimensions of the text container. Loss of content or functionality can occur when the text overflows the space that was allocated for it. However, the layout properties may provide a way to continue to display the content effectively. The block sizes may be defined wide enough that the text does not overflow when resized by 200%. Text may wrap when it no longer fits within the block, and the block may be tall enough that all the text continues to fit in the block. The block may provide scrollbars when the resized text no longer fits.

Examples

Example 1: A multi-column page layout

HTML and CSS are used to create a two-column layout for a page of text. Using the default value of the white-space property, normal, causes text to wrap. So as the size of the text is increased to 200%, the text reflows and the column of text grows longer. If the column is too long for the viewport, the user agent provides scrollbars so the user can scroll text into view because the author has specified the CSS rule overflow:scroll or overflow:auto.

Example 2

A newspaper layout with blocks of text in columns. The blocks have a fixed width, but no height set. When the text is resized in the browser, the text wraps and makes the blocks taller.

Tests

Procedure
  1. Increase text size to 200%.

  2. Check whether all content and functionality is available.

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G180: Providing the user with a means to set the time limit to 10 times the default time limit

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to give people with disabilities enough time to complete tasks which may take them longer than someone without those challenges. Some mechanism such as a preference setting or a control on the page lets the user change the time limits to at least 10 times the default time limit. Preferably, the mechanism would have a variable adjustment that lets the user change the time limit to any value in its range, but could also provide ways to change the time limit by discrete increments. The user changes the time limit at the beginning of his session, before any activity that has a time limit.

Examples

  • An airline has an online ticket purchasing application. By default, the application has a 1 minute time limit for each step of the purchase process. At the beginning of the session, a Web page includes information that says, "We expect that each step in the purchasing process will take users one minute to complete. Would you like to adjust the time limit?" followed by several radio buttons "1 minute, 2 minutes, 5 minutes, 10 minutes."

  • A Web based email application automatically logs users out when there has been no activity for 30 minutes. The application includes a preference that allows users to adjust the amount of time to any value.

Tests

Procedure
  1. Check to see if there is a mechanism to set the time limit to 10 times the default time limit.

  2. Change the time limit to a new value that is 10 times the default time limit.

  3. Perform an action that has a time limit.

  4. Wait until the default time limit has passed.

  5. Check that the time limit does not expire until the limit specified in step 2 has passed.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G181: Encoding user data as hidden or encrypted data in a re-authorization page

Applicability

Pages that require user authentication where the time available for submitting data is limited.

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 passes (as hidden data) the information from the form into the page that is used for re-authentication. Then, when the user re-authenticates, the server can use the information passed on from the re-authentication page to submit the form directly or to present a page that includes the data that is to be submitted for review. In this technique, the server does not have to store any user-submitted data on server. This is an important technique for those cases where it is either illegal or a security risk for the server to store information temporarily. It also is useful in that it frees the server from having to maintain the stored information and reconnect it with the newly authenticated session.

Note: If the data users are submitting is sensitive or presents a security risk, authors should consider the process used to pass the data to the re-authentication page and, after re-authentication, to the page that will process the original data in order to ensure that the data is protected.

Examples

  • A user has logged in to use a wiki and begins editing a page. The time taken to complete the edits exceeds the time allowed by the server for session inactivity. When the user submits the edits, the user is notified that the session has timed out and is redirected to a login page. The script that handles the original form submission passes the edits as a variable to the login page and when the user successfully logs in, passes the users edits back to the script that handles form submissions and the edits are processed as though no session timeout had occurred.

  • A user had logged in to a secure shopping site and fills out some of the information on an order form. For security reasons, the session times out after 30 mintues, but the user does not submit the form until 45 minutes after loading the page. The user is informed of the time out and is prompted to log-in again. If the user logs in correctly, the order form is presented to the user with all of the data previously entered and the user is able to review their submission and submit the form. If the log-in is not successfully completed, then the form data is discarded by the server.

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.

  6. Check that the process used to save the information submitted in step 3 is not stored on the server. (Note: This requires knowledge of the technology and features used to implement the technique.)

Expected Results
  • Checks #5 and #6 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G182: Ensuring that additional visual cues are available when text color differences are used to convey information

Applicability

Colored text when the color is used to convey information such as:

  • Words that are links in a paragraph

  • Items in a list where some are different than others and are presented in colored text

This technique relates to:

Description

The intent of this technique is to provide a redundant visual cue for users who may not be able to discern a difference in text color. Color is commonly used to indicate the different status of words that are part of a paragraph or other block of text or where special characters or graphics cannot be used to indicate which words have special status. For example, scattered words in text may be hypertext links that are marked as such by being printed in a different color. This technique describes a way to provide cues in addition to color so that users who may have difficulty perceiving color differences or have low vision can identify them.

To use this technique, an author incorporates a visual cue in addition to color for each place where color alone is used to convey information. Visual cues can take many forms including changes to the font style, the addition of underlines, bold, or italics, or changes to the font size.

Note: While this technique is sufficient to meet the visual requirements of Success Criterion 1.4.1, the information conveyed by the color must also be available programmatically to satisfy Success Criterion 1.3.1. See How to Meet 1.3.1.

Examples

  • The default formatting for links on a page includes presenting them both in a different color than the other text on the page underlining them to make the links identifiable even without color vision.

  • An article comparing the use of similar elements in different markup languages uses colored text to identify the elements from each language. Elements from the first markup language are identified using BLUE, bolded text. Elements from the second are presented as RED, italicized text.

  • A news site lists links to the articles appearing on its site. Additional information such as the section the article appears in, the time the article was posted, a related location or an indication that it is accompanied by live video appears in some cases. The links to the articles are in a different color than the additional information but the links are not underlined, and each link is presented in a larger font than the rest of the information so that users who have problems distinguishing between colors can identify the links more easily.

  • Short news items sometimes have sentences that are also links to more information. Those sentences are printed in color and use a sans-serif font face while the rest of the paragraph is in black Times-Roman.

Tests

Procedure
  1. Locate all instances where the color of text is used to convey information.

  2. Check that any text where color is used to convey information is also styled or uses a font that makes it visually distinct from other text around it.

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them

Applicability

Colored text when color alone is used to convey information such as words that are links in a paragraph

This technique relates to:

Description

The intent of this technique is to provide a redundant visual cue for users who may not be able to discern a difference in text color. Color is commonly used to indicate words that are links within a paragraph or other block of text. For example, scattered words in text may be hypertext links that are identified only by a difference in color with surrounding text. This technique describes a way to provide additional cues on hover and focus so that users who may have difficulty perceiving color differences or have low vision can identify them.

With this technique, a relative luminance (lightness) difference of 3:1 or greater with the text around it can be used if additional visual confirmation is available when a user points or tabs to the link. Visual highlights may, for example, take the form of underline, a change in font style such as bold or italics, or an increase in font size.

While using this technique is sufficient to meet this success criteria, it is not the preferred technique to differentiate link text. This is because links that use the relative luminance of color alone may not be obvious to people with black/white color blindness. If there are not a large number of links in the block of text, underlines are recommended for links.

Note 1: This technique is about the use of color in addition to luminosity. In this technique, the contrast ratio refers to the contrast between a link and the words around it. In Success Criterion 1.4.3 and 1.4.6, contrast ratio refers to the contrast between a word and its background. The difference is that this technique is about the ability for users to tell the difference (a noticeable difference) between different pieces of text whereas the contrast ratio used in success criterion 1.4.3 and 1.4.6 is about the readability of the text with its background for different color and vision disabilities.

Note 2: If an author wants to use the color portion of this technique (i.e., using different colors for the words where the colors have sufficient contrast with each other) and the author also wants to conform to SC 1.4.3 (contrast of both words with their backgrounds) the following colors can be used. (e.g., black text in a paragraph on a white background with the links shown as one of the colors in example 1 below.

Note 3: If assistive technology or Web browsers at some point all provide an option to underline all links on Web pages for users, this could be used instead of an author-provided link highlighting mechanism.

Examples

Example 1: Colors that would provide 3:1 contrast with black words and 4.5:1 contrast with a white background
Example 2

The hypertext links in a document are medium-light blue (#3366CC) and the regular text is black (#000000). Because the blue text is light enough, it has a contrast of 3.9:1 with the surrounding text and can be identified as being different than the surrounding text by people with all types of color blindness, including those individuals who cannot see color at all.

Resources

Tests

Procedure
  1. Locate all instances where color alone is used to convey information about text.

  2. Check that the relative luminance of the color of the text differs from the relative luminance of the surrounding text by a contrast ratio of at least 3:1.

  3. Check that pointing (mouseover) to the link causes a visual enhancement (such as an underline, font change, etc.)

  4. Check that moving keyboard focus to the link causes a visual enhancement (such as an underline, font change, etc.)

Expected Results
  • Checks #2, #3, and #4 are all true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to help the user avoid input errors by informing them ahead of time about restrictions on the format of data that they must enter. Instructions on such restrictions are provided at the top of forms. This technique works best for forms that have a small number of fields or those where many form fields require data in the same format. In these cases, it is more efficient to describe the format once in instructions at the top of the form rather than repeating the same information for each field that has the same restricted format requirement.

Examples

Example 1

A business networking site allows users to post descriptions of jobs they have held. The form to gather the information includes fields for the company name, job title, from and to dates, and job description. At the top of the form are the following instructions:

  • Enter requested information about the position you wish to add to your profile. Dates should be entered in mm/dd/yyyy format."

Example 2

A corporate directory allows users to customize information such as telephone number and job responsibilities by editing their profile. At the top of the form are the following instructions:

  • You can modify the information in any field. When you select Finish, your changes will be saved and you will have the opportunity to publish your profile. Should you decide that you don't want to keep your changes, select the Cancel button.

  • You cannot edit the information that is displayed as system text in your profile (i.e., not contained in a field). This information has been obtained from an corporate human resources information. If you find something is incorrect or out of date that you cannot edit, select the help icon next to the information to find out how to correct it.

  • Phone numbers may contain numbers and dashes (-) only.

  • Required fields are marked with an asterisk (*) and must be filled in to complete the form.

Tests

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

  2. Determine if instructions are provided at the top of the form about the expected format of each of the form controls identified in 1.

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G185: Linking to all of the pages on the site from the home page

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 all the information in a small Web site by providing links to all Web pages from the home page. When the number of pages in the site is small enough, the home page can contain site map information directly. The other pages in the Web site contain links to the home page.

In this way, the home page serves as two mechanisms in one. It provides the usual navigation to pages. It also is a de facto site map to the site.

All the Web pages in the site may contain links to all the other pages, and those sets of links satisfy Success Criterion 3.2.3 (Consistent Navigation).

Examples

  • A small commercial Web site for a consultant contains a home page, a Contacts page for contacting the consultant, a page describing the consultant's background, and a page with examples of the consultant's work. Each page contains a navigation bar that links to all the other pages in the site.

Tests

Procedure
  1. Check that the home page contains links to all other pages in the Web site.

  2. Check that all other pages in the Web site contain links to the home page.

Expected Results
  • All of the above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G186: Using a control in the Web page that stops moving, blinking, or auto-updating content

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to provide the user a control that allows him to stop moving or blinking content. Since the control is in the web page, the control itself meets the appropriate level of WCAG conformance e.g., it has appropriate contrast, it has a name that identifies it, it is keyboard accessible. The control is either at the top of the page or adjacent to the moving content. A single control may stop all moving or blinking content on the page, or there may be separate controls for separate parts of the content.

Examples

Example 1: Stock Market Ticker Tape

A Web page displays the latest stock market results in a "ticker tape" that automatically scrolls across the bottom of the screen. A "Pause" button lets the user stop the ticker tape. When the ticker tape is unpaused, it resumes displaying the current stock market information.

Example 2: Teleconferencing Tool

A teleconferencing Web page displays a speaker queue of people who wish to speak. A checkbox on the page lets the user choose whether the display of the queue should be updated automatically when a new person is added or removed, or whether it should only be updated when the user presses the "Refresh" button. When the queue is being updated automatically, the Refresh button is deactivated.

Tests

Procedure
  1. Check that there is a control on the Web page to stop the motion.

  2. Activate the control.

  3. Check that the motion, blinking or auto-updating has stopped.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G187: Using a technology to include blinking content that can be turned off via the user agent

Applicability

All technologies.

This technique relates to:

Description

The objective of this technique is to ensure that blinking content can be turned off using user agent features. User agents allow users to stop animation of content in certain technologies. When the user activates this feature, all animation, including blinking, is stopped. This feature can be provided either through interactive controls that conform to WCAG or through documented keyboard shortcuts.

The most common way for users to stop animation is to press the "escape" key. As long as there are no processes that take precedence in the event queue for a press of that key, this is taken as a command to stop animation of moving or blinking content.

Technologies for which this is known generally to work include:

  • Graphics Interchange Format (GIF)

  • Animated Portable Network Graphics (APNG)

Examples

  • A page contains a blinking banner intended to draw the user's attention to it. The banner is an animated gif image which repeats indefinitely. The user presses the "escape" key, which causes the user agent to stop the animation of all animated gif images on the page.

Tests

Procedure
  1. Load a page that includes blinking content.

  2. Activate the browser's stop animation command (usually the Escape key).

  3. Check to see if the blinking stops.

Expected Results
  • Check #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G188: Providing a button on the page to increase line spaces and paragraph spaces

Applicability

Any technology.

This technique relates to:

Description

Many people with cognitive disabilities have trouble reading text that is single spaced. A button that increases the line height will help them read the content. In order to retain the separation of paragraphs, the space between paragraphs should also increase so that it is at least 1.5 times as high as the line spacing.

Note: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version (CSS) and Understanding Conforming Alternate Versions for more information.

Examples

Example 1

Use standard style page switching and have a button or link on the page that switches the stylesheet. The new stylesheet contains a rule to increase the line height and a class to increase the paragraph spacing.

Example Code:


              p {line-height: 150%; margin-bottom: 2em;}
            

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that there is a button or link on the page that increases the size of the line height and the paragraph spacing, which is labeled as such.

  2. Activate the button or link.

  3. Check that the button or link increases the line height to at least 1.5 (150%)

  4. Check that the button or link increases the paragraph spacing at least 1.5 times greater than the line spacing.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G189: Providing a control near the beginning of the Web page that changes the link text

Applicability

All technologies that contain links.

This technique relates to:

Description

The objective of this technique is to provide the user with a control near the beginning of the page that takes the user to a conforming alternate version of the Web page where the link text alone of each link is sufficient to determine its purpose out of context.

Some users prefer to have links that are self-contained, where there is no need to explore the context of the link. Other users find including the context information in each link to be repetitive and to reduce their ability to use a site. Among users of assistive technology, the feedback to the working group on which is preferable has been divided. This technique allows users to pick the approach that works best for them. Users who need or prefer potentially longer but complete link text use this version.

If the control for switching to the alternate version is a link, it must always be possible to understand the purpose of the control directly from its link text.

This technique provides the alternate version for the current page view. It is also possible, and in some cases would be advisable, to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site and would automatically be taken to their preferred version.

Note: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version (CSS) and Understanding Conforming Alternate Versions for more information.

Examples

Example 1: Providing a Link to another Version

A Web page lists books for download in different formats. Alternate versions of the Web page use just the book format as the link text or the book title and format type.

Version with short link text:

Example Code:


              ...
                <h1>Books for download</h1>
                <p><a href="books-full-links.html" >Full link Version</a></p>
                <ul>
                <li>The History of the Web: 
                <a href="history.docx" class="hist">Word</a>, 
                <a href="history.pdf" class="hist">PDF</a>, 
                <a href="history.html" class="hist">HTML</a>
                </li>
                ...
                </ul>
            

Version with full link text:

Example Code:


              ...
                <h1>Books for download</h1>
                <p><a href="books-short-links.html" >Short link Version</a></p>
                <ul>
                <li>The History of the Web: 
                <a href="history.docx" class="hist">The History of the Web(Word)</a>, 
                <a href="history.pdf" class="hist">The History of the Web(PDF)>/a>, 
                <a href="history.html" class="hist">The History of the Web(HTML)</a>
                </li>
                ...
                </ul>
            

Tests

Procedure
  1. Check that there is a control near the beginning of the Web page to change link text.

  2. Activate the control.

  3. Check that all links in the resulting Web page have link text that describes their purpose.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G190: Providing a link adjacent to or associated with a non-conforming object that links to a conforming alternate version

Applicability

All technologies.

This technique relates to:

Description

It is better for all objects on a page to conform, but there are certain circumstances where that may not be possible. There may be situations when an object or section of content targets people with certain disabilities while those same attributes make it inaccessible for someone else. There may also be other reasons not to have a conforming object on the Web page. When an object does not conform, then a link to a conforming alternate version is adjacent to the non-conforming object in the linear reading order or is associated with the the non-conforming content. The conforming alternate version conveys the same information as the non-conforming version.

Examples

Example 1: A video of a rap song where audio descriptions would interfere with the artistic integrity of the music

A video of a rap song named "The Hip Hop Kid" has a musical background. Introducing "Audio Description" speaking parts during the pauses in the song would interfere with the guitar lines and drum grooves that the artist is trying to convey. On the Web page, immediately following the video object, there is a link that says, "Audio described version of 'The hip hop kid'" which contains a version of the video containing audio descriptions of what is happening visually in the video.

Example 2: An image of a historical document

A Web page about the Declaration of Independence contains an image of the document. There is not sufficient contrast between the text and the background, and the handwriting on the document is difficult to read. A link takes the user to an HTML version of the document.

Example 3: An animation that is not accessibility supported

An interactive animation created using a Web technology that is not accessibility supported is displayed on a Web page. A link to a conforming alternate version of the animation is adjacent to the non-conforming content.

Tests

Procedure

For each non-conforming object in a page:

  1. Check to see if there is a non-conforming object on the Web Page.

  2. Check to see if there is a link to an identifiable conforming version of the object directly after the non-conforming object in the linear reading order.

  3. Check to see if the link goes to a conforming version.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G191: Providing a link, button, or other mechanism that reloads the page without any blinking content

Applicability

This technique relates to all technologies.

This technique relates to:

Description

This is a general technique for allowing people who cannot use a page with blinking content to turn the blinking content off. Conformance Requirement 1 allows for conforming alternate pages to be used to meet conformance. This technique is an example of that approach applied to success criteria 2.2.2.

It is important that the page without blinking content contain all of the information that was on the page with blinking content.

Note 1: Removing the content that was blinking from the page would only be satisfactory if the blinking content was redundant with non blinking content in the original page.

Note 2: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version (CSS) and Understanding Conforming Alternate Versions for more information.

Examples

  • A page has blinking text at the top warning users that they should not submit the page without first registering. A link at the very top of the page reloads the page with the blinking text replaced with text that is styled to be highly visible but does not blink.

Tests

Procedure
  1. Check that there is a mechanism to reload page to turn off blinking.

  2. Check that reloaded page has no blinking.

  3. Check that the reloaded page has all the information and functionality of the original page.

Expected Results
  • All of the above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G192: Fully conforming to specifications

Applicability

This technique relates to all markup languages with specifications.

This technique relates to:

Description

When markup languages are used in a way that fully conforms to their specifications, all of the requirements in 4.1.1 are met. Therefore, while fully conforming to specifications is not required to conform to WCAG 2.0, it is a best practice and is sufficient to meet Success Criterion 4.1.1.

Examples

  • A page is created with care to make sure that all technologies are used according to specification. It is run through a validator and all identified errors are corrected. Specification requirements that can not be identified by validation are also checked and any failures are corrected.

Tests

Procedure
  1. Check that all technologies are used according to specification.

Note: While validators can be great tools for catching errors, they usually cannot catch all cases where content fails to fully conform to a specification.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G193: Providing help by an assistant in the Web page

Applicability

All technologies.

This technique relates to:

Description

The purpose of this technique is to provide help using a multimedia avatar that provides assistance in using the Web page. An avatar can be particularly helpful to people with cognitive disabilities who may have trouble reading text. The use of visuals will help some people to focus on the material presented.

Note: The multimedia avatar must also satisfy relevant Success Criterion in Guideline 1.2.

Examples

  • The home page of an online banking application has an embedded avatar named Vanna. She gives new online banking clients a tour of the features provided in the application. The assistant can be started and stopped and paused. The client can rewind and fast forward through the material. A text alternative of the information is available from a link next to the avatar.

  • A volunteer site has a welcoming page for new volunteers. In it there is an application form. On the right side of the page there an interactive multimedia file with an avatar that explains all the features and sections of the application form.

Tests

Procedure
  1. Check that there is an assistant in the Web page.

  2. Check that the assistant provides information to help understand the content of the page.

Expected Results
  • All of the above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G194: Providing spell checking and suggestions for text input

Applicability

This technique relates to all technologies.

This technique relates to:

Description

In this technique spell checking and suggestions for text are provided. Often people with cognitive disabilities have trouble spelling a word, but may be able to get the spelling approximately correct. A spell checking program will save them time-consuming research on how to spell the word. This may also be true for blind and low vision users who might make a mistake when typing. It will also help people with dexterity disabilities who may be using a head pointer, or who may have scanning software which makes it very slow and difficult to type. A spell-checking solution that provides word suggestion(s) and a simple mechanism to select one and input it into the text input field provides important help for these users and others.

Examples

  • A search engine has a form field for search terms. When the form is submitted, a server-side application checks the spelling. If the spelling doesn't match any words for that language, it sends back a page with a text message at the top saying "Did you mean ..." with a link to the suggested word. If the user clicks on the link the suggested term is entered into the form field and is resubmitted.

  • An airline has a on online ticket purchasing application. When a user types the name of a city into the form field a dropdown menu shows the closest match to the city in the top of the menu and other suggestions below.

Tests

Procedure
  1. Check that there is a form field on the page.

  2. Enter a misspelled word.

  3. Check that a suggested spelling is presented.

  4. Check that a mechanism is available to enter the suggested word into the form.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G195: Using an author-supplied, highly visible focus indicator

Applicability

Generally applicable.

This technique relates to:

Description

The objective of this technique is enhance the focus indicator in the browser, by creating a highly visible one in the content. The default focus indicator in many browsers is a thin,dotted, black line. It can be difficult to see the line when it is around a form element which already has an outline, when the focused element is inside a table cell, when the focused element is very small, or when the background of the page is a dark color.

In this technique, when the user places focus on an element, using the mouse, tab key, arrow keys, keyboard shortcuts, or any other method, the application makes that focus more visible, using a combination of a highly contrasting color, a thick line, and other visual indicators such as a glow.

Examples

Example 1: Links

A Web page has a dark background color and light text and links. When focus lands on a link, the link is outlined with a bright yellow line, 3 pixels wide.

Example 2: Form Elements

A Web page includes a form inside a table. The borders of both the table and the form elements are thin, black lines. When focus lands on a form element, the element is outlined with a 5 pixel red line that is partially transparent.

Example 3: Menus

A Web page includes an interactive menu with sub-menus. A user can move focus in the menu using the arrow keys. As focus moves, the currently focused menu item changes its background to a different color, which has a 3:1 contrast ratio with the surrouding items and a 4.5:1 contrast ratio with its own text.

Tests

Procedure
  1. Place focus on each focusable user interface element on the page using the mouse.

  2. Check that there is a highly visible focus indicator.

  3. Place focus on each focusable user interface element on the page using the keyboard.

  4. Check that there is a highly visible focus indicator.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G196: Using a text alternative on one item within a group of images that describes all items in the group

Applicability

Any technology where a grouping of non-text content is used to present information or functionality.

This technique relates to:

Description

The objective of this technique is to avoid unnecessary duplication that occurs when a grouping of adjacent non-text content is used to present information or functionality.

In some cases, pages will present a group of images to convey information. When presented together or in a specific combination these groupings can convey different types of information. For example, two images of a star where one is presented in black and white and the other is colored can be used in combination to represent a user rating. For example, three filled stars followed by two unfilled stars might represent a rating of three out of five stars.

To use this technique, an author provides a text alternative that serves the equivalent purpose for the entire group and associates it with one item in the group. The other items in the group are then marked in a way that can be ignored by assistive technologies. In this way, the user is able to more efficiently identify the purpose of the group and can avoid duplication or confusion that may result had a text alternative been provided for each item in the group.

Examples

Example 1: A rating system in HTML

In the following example, a rating is shown as three filled stars and two empty stars. While a text alternative could have been provided for each of the five images, the author has instead provided the rating in the form "3 out of 5 stars" for the first image and has marked the others using null alt text.

Example Code:


              <p>Rating: 
                <img src="star1" alt="3 out of 5 stars">
                <img src="star1" alt="">
                <img src="star1" alt="">
                <img src="star2" alt="">
                <img src="star2" alt="">
                </p>
            
Example 2: A button created from a group of images in XHTML

In this example, each button has a set of images to indicate the level of conformance to WCAG being claimed. This approach makes it possible for assistive technologies to avoid announcing things like, "Image A, Image A, Image A" etc.

Example Code:


              <p>Conformance Level:</p>
                <button name="A"><img src="a.png" alt="A" /></button> <br />
                <button name="AA"><img src="a.png" alt="AA" /><img src="a.png" alt="" /></button> <br />
                <button name="AAA"><img src="a.png" alt="AAA" /><img src="a.png" alt="" /><img src="a.png" alt="" /></button>
            

Tests

Procedure
  1. Check that one item in the group includes a text alternative that serves the equivalent purpose for the entire group.

  2. Check that the other items in the group are marked in a way that can be ignored by assistive technologies.

  3. Check that the items marked in a way that can be ignored by assistive technologies are adjacent to the item that contains the text alternative for the group.

Expected Results
  • All of the above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G197: Using labels, names, and text alternatives consistently for content that has the same functionality

Applicability

All content.

This technique relates to:

Description

The purpose of this technique is to help users with cognitive disabilities, blindness and vision loss to understand what will happen when they interact with a function on a Web page. If there are different labels on user interface components (i.e., elements, links, JavaScript objects, etc.) that have the same function, the user will not know that they have encountered a component with the same function and will not know what to expect. This could lead to many unnecessary errors. It is also recommended that this approach to consistent labelling be applied across the Web site.

Examples

  • A Web page has a form field at the top of the page labeled "Search". On the bottom of the page is another form field which provides the same function. It is also labeled "Search."

  • A picture of a question mark is used to steer users to sections of the page that provide additional information. Each time the picture of the question mark appears it has the same text alternative "more information."

  • A link to the Contact Us page of a Web site has the link text "Contact". At the bottom of the page there is a link that also goes to the Contact Us page. It also has the link text "Contact".

Tests

Procedure
  1. Check that each component is associated with text that identifies it (i.e., label, name, or text alternative).

  2. Check that this associated text is identical for each user interface component with the same function.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G198: Providing a way for the user to turn the time limit off

Applicability

This technique relates to all technologies.

This technique relates to:

Description

The objective of this technique is to provide a mechanism for people who cannot complete tasks within a specified time limit to turn off the time limit.

It is essential that the mechanism for turning off the time limit can be completed without a time limit itself and before the time limit for the page expires. To do this - the mechanism should be available at or near the top of the page so that it can be found and activated quickly by people with a wide range of disabilities.

Examples

  • A page has a listing of news headlines that automatically update every minute. At the top of the page is a link that turns off the updating.

Tests

Procedure
  1. Check that there is a mechanism to turn off any time limits near the top of the page.

  2. Verify that the time limit for the page is long enough that a user can easily navigate to the mechanism even if they are 10 times slower than most users.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G199: Providing success feedback when data is submitted successfully

Applicability

Content that accepts user data input.

This technique relates to:

Description

The objective of this technique is to reduce the effort required for users to confirm that an action, such as submitting a Web form, was completed successfully. This can be accomplished by providing consistently presented feedback that explicitly indicates success of an action, rather than requiring a user to navigate through content to discover if the action was successful.

Significant effort can be expended by users who can not easily scan through information to confirm their action (such as that data submitted has been successfully entered into a database, sent to a person, or added to content being edited).

Examples

  • A user logs into a system and gets a response indicating that: "You have successfully logged in," so they do not need to navigate through the screen to find an indicator that they are logged in, such as finding their user name, or perhaps the login link replaced with a logout link. Finding these cues can be time consuming.

  • A user fills in a quiz or test and submits it. The response informs them that the test was successfully submitted, so that they don't need to navigate through data, such as a list of submitted tests, to confirm that the test is listed there.

  • A visitor creates an account on a Web site. After submission of the form, feedback suggests that "Registration was successfully submitted ...," If they are automatically logged in after registration, the response also says "...and you have been logged in." If confirmation is required, the feedback includes a message such as "...an email has been sent to you to which you must reply to confirm your registration."

  • A user submits a form with information directed at support staff. The feedback indicates that the "The message was successfully sent, and you should receive a reply within the next 48 hours."

Tests

Procedure
  1. Fill in form fields with no errors.

  2. Submit the form.

  3. Check that a feedback message on the screen confirms that the submission was successful.

Expected Results
  • Check #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G200: Opening new windows and tabs from a link only when necessary

Applicability

Pages that open new windows

This technique relates to:

Description

The objective of this technique is to limit the use of links or buttons that open new windows or tabs within Web content. In general, it is better not to open new windows and tabs since they can be disorienting for people, especially people who have difficulty perceiving visual content. However there are some situations where it is preferable from an accessibility perspective to open a new window or tab. Here are two such situations:

  1. Opening a page containing context-sensitive information, such as help instructions, or an alternate means of completing a form, such as a calendar-based date picker, will significantly disrupt a multi-step workflow, such as filling in and submitting a form, if the page is opened in the same window or tab.

  2. The user is logged into a secured area of a site, and following a link to a page outside of the secured area would terminate the user's logon. In this case opening external links in an external window allows the user to access such references while keeping their login active in the original window.

It is recommended that when links are opened to a new window, there is advance warning.

Examples

Example 1: Online Form

An online form provides extensive context-sensitive help for each form field on a separate page because there is too much text to include within the form. The links to the context-sensitive help open in new windows or tabs to prevent the loss of any form data that has already been entered.

Example 2: Secure Web site

A page on a secure Web site includes a link to an external page that is outside of the secure session. The link opens in a new window or tab since opening the link in the same window will break or destroy the secure session.

Example 3: Date Picker

An online form includes a date field that allows the user to manually type in the date or select a date from a calendar-based date picker on a separate page. The link to the calendar-based date picker opens in a new window or tab to prevent the loss of any form data that has already been entered.

Resources

Resources are for information purposes only, no endorsement implied.

Beware of opening links in a new window

Top-10 New Mistakes of Web Design


G201: Giving users advanced warning when opening a new window

Applicability

Pages that open new windows

This technique relates to:

Description

The objective of this technique is to provide a warning before automatically opening a new window or tab. Opening new windows automatically when a link is activated can be disorienting for people who have difficulty perceiving visual content, and for some people with cognitive disabilities, if they are not warned in advance. Providing a warning allows the user to decide it they want to leave the current window, and the warning will help them find their way back, if they do decide they would like to go to the new window. It will help them understand that the "back" button will not work and that they have to return to the last window they had open, in order to find their previous location.

Examples

Example 1: Including the warning in the text describing a control

The name or label that describes a control can include the warning about opening in a new window.

Example Code:


              <a href="knitting.html" target="_blank">All about Knitting 
                (opens in new window)</a>
            
Example 2: Using CSS to provide a warning before opening a new window

The code below uses CSS to provide a warning before opening a new window.

Example Code:


              <html>
                <head>
                <title>Pop-Up Warning</title>
                <style type="text/css">
                body {
                margin-left:2em;
                margin-right:2em;
                }
                :focus { outline: 0; }
                a.info {
                position:relative;
                z-index:24;
                background-color:#ccc;
                color:#000;
                text-decoration:none
                }
                a.info:hover, a.info:focus, a.info:active {
                z-index:25;
                background-color:#ff0
                }
                a.info span {
                position: absolute;
                left: -9000px;
                width: 0;
                overflow: hidden;
                }
                a.info:hover span, a.info:focus span, a.info:active span {
                display:block;
                position:absolute;
                top:1em; left:1em; width:12em;
                border:1px solid #0cf;
                background-color:#cff;
                color:#000;
                text-align: center
                }
                div.example {
                margin-left: 5em;
                }
                </style>
                </head>
                <body>
                <h1>Pop-Up Warning</h1>
                <p> This is an example of an <a class="info"
                href="popup_advisory_technique.html" target="_blank">
                <strong>External link</strong><span>Opens a new
                window</span></a>
                </p>
                </body>
                </html>
            

Tests

Procedure

For each link that opens automatically in a new window or tab when a change of context is initiated by a user request:

  1. Check that there is a warning spoken in assistive technology that this link opens to a new window.

  2. Check that there is a visual warning in text that this link opens to a new window.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G202: Ensuring keyboard control for all functionality

Applicability

All technologies that support interactive operation.

This technique relates to:

Description

The objective of this technique is to provide keyboard operation for all the functionality of the page. When all functionality of content can be operated through a keyboard or keyboard interface, it can be operated by those with no vision as well as by those who must use alternate keyboards or input devices that act as keyboard emulators like speech input software or on-screen keyboards.

A keyboard interface allows users to provide keystroke input to programs even if the computing device that they are using does not contain a hardware keyboard. For example, many mobile devices have keyboard interfaces within their operating system as well the option to connect external wireless keyboards. Applications can use the interface to obtain keyboard input either from an external keyboard or from other services that provide simulated keyboard output, such as switch devices, handwriting interpreters or speech-to-text applications.

To implement this technique, first determine what functionality is available to users on the page. In this step, it is important to consider functions performed using both the mouse and the keyboard together. Examples of functionality include the use of physical controls such as links, menus, buttons, checkboxes, radio buttons and form fields as well as the use of features like drag and drop, selecting text, resizing regions or bringing up context menus. Other examples of functionality may based on tasks such as adding or removing an item from a shopping cart or initiating a chat session with a sales representative.

Once the functionality of the content has been determined, the author verifies that each of the functions identified can be performed using only the keyboard.

Note: This does not necessarily mean that each of the individual controls can be used from the keyboard as long as there are multiple methods to perform the same function available on the page. Authors are advised to consider how users will discover any keyboard equivalents which are available.

Examples

  • A page with images used as links changes when the user hovers over the image with a mouse. To provide keyboard users with a similar experience, the image is also changed when a user tabs to it.

  • A page that allows users to click and drag items in a list to reorder them also includes a series of controls that allows keyboard users to move items up, down or to the beginning and end of the list.

  • The mobile version of a web site includes a menu button that is tapped to open a site menu, which is implemented as a floating overlay. To provide access to people using external keyboards or ability switches with their mobile device, the menu button and the site menu are both implemented such that they can be operated via the mobile device's keyboard interface.

Tests

Procedure
  1. Identify all functionality on the content.

  2. Check that all functionality can be accessed using only the keyboard or keyboard interface.

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G203: Using a static text alternative to describe a talking head video

Applicability

Videos of only a speaker

This technique relates to:

Description

The purpose of this technique is to provide an alternative to audio description for synchronized media that has no important time based information contained in the video portion of the media. This particularly applies to "talking head" videos where a person is talking in front of an unchanging background, such as a press conference, company president talk, or government announcement, etc. In this case there are no "important visual details" which would warrant audio description.

Audio description is not necessary when there is one person speaking against an unchanging background because there is no time-based visual information in the video that is "important" to the understanding of the content. The environment is static and therefore can be described in a non-multimedia static format such as alternative text that is programmatically associated with the video.

All that is necessary in this case is a static text alternative which would contain a general description of the context of the environment, any opening/closing credits, any text that appears in the bottom of the video with the name of the speaker, and other basic information, if these are seen on the screen and cannot be heard in the audio.

This technique does NOT apply to a situation where there are multiple speakers and where the identity of each new speaker is not evident in the audio track but is identified on screen with visual text as they speak. In this case, audio description should be used, and this technique would not apply.

Examples

Example 1: A video of a CEO speaking to shareholders

A CEO is speaking to shareholders from his office. The video has a title page at the beginning of the video giving the date. When the speaker begins, there is a strip of text at the bottom of the video saying "John Doe, President of XYZ Cooperation". At the end of the video are title credits that say "produced by the Honest TV Productions Ltd."

As an alternative, there is a paragraph below the video which is associated with the video file using aria-describedby which says: "July 22, 2011, John Doe, President of XYZ cooperation, speaking from his office. Video produced by produced by the Honest TV Productions Ltd."

Tests

Procedure
  1. Check that there is no important time-based information in the video track

  2. Check that the programmatically associated description of the media contains any context of the content that is not contained in the audio track (e.g. speaker identification, credits, context)

Expected Results
  • All checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G204: Not interfering with the user agent's reflow of text as the viewing window is narrowed

Applicability

All technologies

This technique relates to:

Description

This technique helps avoid situations where horizontal scrolling may occur. Many people with cognitive disabilities and low vision users who do not use assistive technology have a great deal of trouble with blocks of text that require horizontal scrolling. It involves not interfering with the reflow of text if the window is narrowed. One of the best ways to do this is to define widths of text block containers in percentages.

HTML and XHTML user agents automatically reflow text as the browser window is narrowed as long as the author does not specify widths using absolute measurements such as pixels or points.

Examples

Example 1

A newspaper site includes articles with columns that adjust with the user agents window width. Users with cognitive disabilities can narrow the column to a width that makes it easier to read.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Open the content that contains a block of text in a common user agent.

  2. Check to see if the user agent has a setting that needs to be enabled to allow for reflow, and if so, enable it.

  3. Narrow the viewing window to 1/4 of the screen width.

  4. Check to see that the content does not require horizontal scrolling to read a line of text.

Expected Results
  • Check #4 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G205: Including a text cue for colored form control labels

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.

The text cue must be included as part of the programmatically determinable name for the control.

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=""/>
<style type="text/css">
  .required {
    color:red;
  }
</style>

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


G206: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text

Applicability

All technologies that support style switching

This technique relates to:

Description

There may be situations where an author needs to use a layout that requires horizontal scrolling. In that case, it is sufficient to provide options within the content that switch to a layout that does not require the user to scroll horizontally to read a line of text. This may be achieved using standard style switching technology.

It should be noted that it is also sufficient to lay out the content in such a way that horizontal scrolling is required to access content, but that it is not necessary to scroll horizontally in order to read a line of text.

For instance, a spreadsheet that requires horizontal scrolling is acceptable if no horizontal scrolling is necessary for each column individually (i.e., scrolling is only necessary to see other columns, but not for the left or right edges of each individual column).

Note: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version and Understanding Conforming Alternate Versions for more information.

Examples

Example 1

A real estate company has an online annual report that has an identical layout to that of their print version, and as such, requires horizontal scrolling to read a line of text. A control is on the page that switches the stylesheet and provides a layout that does not require horizontal scrolling.

Example 2

A financial spreadsheet is online. It includes text explaining changes in the housing market in January. Off-screen to the right, there is a column with an explanation of changes to the market in September. The user can horizontally scroll to the September area and read each line of text without any further scrolling when the window size is maximized.

Tests

Procedure
  1. Open the content that requires horizontal scrolling on a full screen window.

  2. Check that there is an option within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text.

  3. Activate the option.

  4. Check to make sure that horizontal scrolling is not required to read any line of text.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


2. HTML and XHTML Techniques


H2: Combining adjacent image and text links for the same resource

Applicability

HTML4, HTML5, and XHTML documents that contain links.

This technique relates to:

Description

This objective of this technique is to provide both text and iconic representations of links without making the web page more confusing or difficult for keyboard users or assistive technology users. Since different users finding text and icons more usable, providing both can improve the accessibility of the link.

Many links have both a text and iconic representation adjacent to each other, but rendered in separate a elements. Visually they appear to be a single link, but many users encounter them as adjacent identical links. For a keyboard user, it is tedious to navigate through redundant links. For users of assistive technologies, it can be confusing to encounter successive identical links. When the text alternative for the icon is a duplicate of the link text, it is repetitive as screen readers read the description twice.

If the author omitted alternative text from the link image, it would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical link.

This technique provides such links by putting the text and image together in one a element and providing null alternative text on the image to eliminate duplication of text. In this way, both representations of the link are provided, but keyboard users only encounter one link and assistive technology that provides users with link lists for a web page do not include duplicate links.

Sometimes the text and the icon link are rendered in separate, adjacent table cells to facilitate page layout. Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If CSS is used, this technique can be applied to combine the links.

Examples

Example 1

The icon and text are contained in the same a element. (HTML4 / HTML5)

Example Code:

 <a href="products.html">
   <img src="icon.gif" alt="">
   Products page
 </a>      
Example 2

A link contains an icon and text, and the site help refers to the icon. The img has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon. (HTML4 / HTML5)

Example Code:

<a href="home.html">
  <img src="house.gif" alt="home page icon">
  Go to the home page
</a>     

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each a applying this technique:

  1. Check that every img element contained within the a element has a null value set for its alt attribute.

  2. Check that the a element contains an img element that has either a null alt attribute value or a value that supplements the link text and describes the image

Expected Results
  • All checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H4: Creating a logical tab order through links, form controls, and objects

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to provide a logical tab order when the default tab order does not suffice. Often, G59: Placing the interactive elements in an order that follows sequences and relationships within the content is sufficient and this technique is not necessary. It can be very easy to introduce usability bugs when setting the tab order explicitly.

In some cases, the author may want to specify a tab order that follows relationships in the content without following the order of the interactive elements in the code. In these cases, an alternative order can be specified using the tabindex attribute of the interactive element. The tabindex is given a value between 0 and 32767.

When the interactive elements are navigated using the tab key, the elements are given focus in increasing order of the value of their tabindex attribute. Elements that have a tabindex value higher than zero will receive focus before elements without a tabindex or a tabindex of 0. After all of the elements with a tabindex higher than 0 have received focus, the rest of the interactive elements are given focus in the order in which they appear in the Web page.

Examples

Example 1

A genealogical search form searches for marriage records. The search form includes several input fields for the bride and the groom. The form is marked up using a data table that includes the fields of the groom in the first column and the fields of the bride in the second column. The order in the content is row by row but the author feels it is more logical to navigate the form column by column. This way, all the groom's criteria can be filled in before moving on to the bride's criteria. The tabindex attributes of the input fields are used to specify a tab order that navigates column by column.

Example Code:

<form action="#" method="post">
 <table summary="the first column contains the search criteria 
  of the groom, the second column the search criteria of 
  of the bride">
 <caption>Search for marriage records</caption>
 <tr>
   <th>Search criteria</th>
   <th>Groom</th>
   <th>Bride</th>
 </tr>
 <tr>
  <th>First name</th>
  <td><input type="text" size="30" value="" name="groomfirst" 
      title="First name of the groom" tabindex="1"></td>
  <td><input type="text" size="30" value="" name="bridefirst" 
       title="First name of the bride" tabindex="4"></td>
 </tr>
 <tr>
  <th>Last name</th>
  <td><input type="text" size="30" value="" name="groomlast" 
      title="Last name of the groom" tabindex="2"></td>
  <td><input type="text" size="30" value="" name="bridelast" 
      title="Last name of the bride" tabindex="5"></td>
 </tr>
 <tr>
  <th>Place of birth</th>
  <td><input type="text" size="30" value="" name="groombirth" 
      title="Place of birth of the groom" tabindex="3"></td>
  <td><input type="text" size="30" value="" name="bridebirth" 
      title="Place of birth of the bride" tabindex="6"></td>
 </tr>
</table>
</form>      
Example 2

A Web page contains a search field in the upper right corner. The field is given tabindex="1" so that it will occur first in the tab order, even though it is not first in the content order.

Example 3

Tabindex values need not be sequential nor must they begin with any particular value. The values do not have to be unique. Elements that have identical tabindex values are navigated in the order they appear in the character stream.

In sections of the content where the tab order follows the content order, it can be less error prone to give all elements the same tabindex value rather than specifying a different number for each element. Then it is easy to rearrange those elements or add new elements and maintain a logical tab order.

Example Code:

 <a href="xxx" tabindex = "1">First link in list</a>
<a href="xxx" tabindex = "1">Second link in list</a>
<a href="xxx" tabindex = "1">Link that was added long 
  after the original list was created</a>
<a href="xxx" tabindex = "1">Third link in list</a>
  ...
<a href="xxx" tabindex = "1">Twentieth link in list</a>      

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check if tabindex is used

  2. If tabindex is used, check that the tab order specified by the tabindex attributes follows relationships in the content.

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H24: Providing text alternatives for the area elements of image maps

Applicability

HTML and XHTML Documents that contain area elements.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H24.

Description

The objective of this technique is to provide text alternatives that serve the same purpose as the selectable regions of an image map. An image map is an image divided into selectable regions defined by area elements. Each area is a link to another Web page or another part of the current Web page. The alt attribute of each area element serves the same purpose as the selectable area of the image.

Examples

Example 1

This example uses the alt attribute of the area element to provide text that describes the purpose of the image map areas.

Example Code:

<img src="welcome.gif" usemap="#map1" 
    alt="Areas in the library. Select an area for
more information on that area." /> 
<map id="map1" name="map1">
  <area shape="rect" coords="0,0,30,30"
    href="reference.html" alt="Reference" />
  <area shape="rect" coords="34,34,100,100"
    href="media.html" alt="Audio visual lab" />
</map>   

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each area element in an image map:

  1. Check that the area element has an alt attribute.

  2. Check that the text alternative specified by the alt attribute serves the same purpose as the part of image map image referenced by the area element of the imagemap.

Expected Results
  • The above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H25: Providing a title using the title element

Applicability

HTML and XHTML

This technique relates to:

Description

All HTML and XHTML documents, including those in individual frames in a frameset, have a title element in the head section that defines in a simple phrase the purpose of the document. This helps users to orient themselves within the site quickly without having to search for orientation information in the body of the page.

Note that the (mandatory) title element, which only appears once in a document, is different from the title attribute, which may be applied to almost every HTML and XHTML element.

Examples

Example 1

This example defines a document's title.

Example Code:

<html xmlns="http://www.w3.org/1999/xhtml">   
   <head>     
      <title>The World Wide Web Consortium</title>     
   </head>   
   <body>     
      ...   
   </body> 
</html>  

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Examine the source code of the HTML or XHTML document and check that a non-empty title element appears in the head section.

  2. Check that the title element describes the document.

Expected Results
  • Checks 1 and 2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H28: Providing definitions for abbreviations by using the abbr element

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H28.

Description

The objective of this technique is to provide expansions or definitions for abbreviations by using the abbr element

It is always appropriate to use the abbr element for any abbreviation, including acronyms and initialisms. When using HTML 4 and XHTML, initialisms and acronyms may be marked up using the acronym element. In HTML5 and newer versions of HTML the acronym element was marked as obsolete in favor of the more general abbr element.

Examples

Example 1: Using abbr element to expand abbreviations.

Example Code:

<p>Sugar is commonly sold in 5 <abbr title="pound">lb.</abbr> bags.</p>
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>              
Example 2: Using abbr element to define abbreviations.

Example Code:

<p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr>
The New York Times <abbr title="and others">et al.</abbr> is the landmark lawsuit 
brought by members of the National Writers Union against ......</p>  
Example 3: Using the abbr element to expand an acronym

Example Code:

 <p>The use of <abbr title="Keep It Simple Stupid">KISS</abbr> became popular in ...</p>        
            
Example 4: Using the abbr element to expand an initialism

Example Code:

 <p><abbr title="World Wide Web">WWW</abbr></p>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that an expansion or definition is provided for each abbreviation via abbr.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H30: Providing link text that describes the purpose of a link for anchor elements

Applicability

HTML and XHTML documents that contain links, (<a href> elements)

This technique relates to:

Description

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

When an image is the only content of a link, the text alternative for the image describes the unique function of the link.

When the content of a link contains both text and one or more images, if the text is sufficient to describe the purpose of the link, the images may have an empty text alternative. (See Using null alt text and no title attribute on img elements for images that assistive technology should ignore.) When the images convey information beyond the purpose of the link, they must also have appropriate alt text.

Examples

Example 1

Describing the purpose of a link in HTML in the text content of the a element.

Example Code:

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

Using the alt attribute for the img element to describe the purpose of a graphical link.

Example Code:

<a href="routes.html">
   <img src="topo.gif" alt="Current routes at Boulders Climbing Gym" /> 
</a> 
Example 3

Using an empty alt attribute when the anchor (a) element contains text that describes the purpose of the link in addition to the img element. Note that the link text will appear on the page next to the image.

Example Code:

<a href="routes.html">
  <img src="topo.gif" alt="" />
  Current routes at Boulders Climbing Gym
</a>
Example 4

A site allows users to provide feedback on products, when the user is logged in, by clicking on the "Feedback" link in a product detail page. Other users or the product manufacturer are able to provide a response to any feedback. The feedback link displays an icon before the "Feedback" text when a response to the user's feedback is available. The help information describes this icon as a talking bubble containing quotation marks and includes the icon itself as an example. The icon's text alternative in the help text is "Response received icon". The same text alternative is used in the product detail pages (when a response is available) to allow identification of this icon through multiple modalities.

Example Code:

<a href="prod_123_feedback.htm">Feedback 
         <img src="response.gif" width="15" height="15" alt="Response received icon" /></a>
Example 5

A link contains text and an icon, and the icon provides additional information about the target.

Example Code:

<a href="WMFP.pdf">
Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format"/>
</a>
Example 6

The “MyCorp” company’s annual report is made available on the corporate website as a PDF file, and the annual corporate budget is made available as an Excel file on the web site.

Note: Many users prefer to know the file type when opening a file that results in opening a new application to view the file, so it is often regarded as useful to include this additional information. However, this is not required for compliance with this success criterion.

Example Code:

<p>
<a href=”2009mycorp_report.pdf”>MyCorp 2009 Annual Report (pdf)</a><br />
<a href=”2009mycorp_budget.xls”>MyCorp 2009 Annual Budget (Excel)</a>
</p>
Example 7

Using a link to wrap block level elements in HTML5.

Example Code:

<article>
<a href="news.html">
<h3>Budget Debate Continues in Parliament</h3>
<p class="subhead"><img class="alertimg" src="alerticon.png" alt="Breaking News" height="30" width="30">Members of Parliament continued vigorous debate on three challenging issues surrounding the upcoming year's budget.</p>
<p>Read more</p>
</a>
</article>

This is shown in the working example of using a link to wrap block level elements.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each link in the content that uses this technique:

  1. Check that text or a text alternative for non-text content is included in the a element

  2. If an img element is the only content of the a element, check that its text alternative describes the purpose of the link

  3. If the a element contains one or more img element(s) and the text alternative of the img element(s) is empty, check that the text of the link describes the purpose of the link

  4. If the a element only contains text, check that the text describes the purpose of the link

Expected Results
  • The above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H32: Providing submit buttons

Applicability

Content that includes form controls.

This technique relates to:

Description

The objective of this technique is to provide a mechanism that allows users to explicitly request changes of context. The intended use of a submit button is to generate an HTTP request that submits data entered in a form, so it is an appropriate control to use for causing a change of context.

Examples

Example 1:

This is a basic example of a form with a submit button.

Example Code:


<form action="http://www.example.com/cgi/subscribe/" method="post"><br /> 
 <p>Enter your e-mail address to subscribe to our mailing list.</p><br /> 
 <label for="address">Enter email address:</label><input type="text" 
 id="address" name="address" /> 
 <input type="submit" value="Subscribe" /><br /> 
</form>
Example 2:

The following example uses a server-side script (specified in the action attribute) that redirects the user to the requested page.

Example Code:

 <form action="http://www.example.com/cgi/redirect/" method="get"><br /> 
    <p>Navigate the site.</p><br /> 
    <select name="dest"><br /> 
      <option value="/index.html">Home</option/><br /> 
      <option value="/blog/index.html">My blog</option/><br /> 
      <option value="/tutorials/index.html">Tutorials</option/><br /> 
      <option value="/search.html">Search</option/><br /> 
    </select><br /> 
  <input type="submit" value="Go to Page" /><br /> 
  </form> 

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 (input type="submit", input type="image", or button type="submit")

Expected Results
  • #2 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H33: Supplementing link text with the title attribute

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H33.

Description

The objective of this technique is to demonstrate how to use a title attribute on an anchor element to provide additional text describing a link. The title attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the title attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the title attribute.

Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text (CSS) or H30: Providing link text that describes the purpose of a link for anchor elements.

Examples

Example 1: Clarifying the purpose of a link

Example Code:

<a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html" 
   title="Read more about failed elephant evacuation">
   Evacuation Crumbles Under Jumbo load
</a>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

Examine the source code for anchor elements.

  1. For each anchor element that has a title attribute, check that the title attribute together with the link text describes the purpose of the link.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to use Unicode right-to-left marks and left-to-right marks to override the HTML bidirectional algorithm when it produces undesirable results. This may be necessary, for instance, when placing neutral characters such as spaces or punctuation between different directional text runs. The concepts used in this technique are described in What you need to know about the bidi algorithm and inline markup.

Unicode right-to-left marks and left-to-right marks can be entered directly or by means of character entities or numeric character references, as shown here.

  • left-to-right mark: &lrm; or &#x200e; (U+200E)

  • right-to-left mark: &rlm; or &#x200f; (U+200F)

Due to the bidi algorithm, a source code editor may not display character entities or numeric character references as expected.

Examples

Example 1

This example shows an Arabic phrase in the middle of an English sentence. The exclamation point is part of the Arabic phrase and should appear on its left. Because it is between an Arabic and Latin character and the overall paragraph direction is LTR, the bidirectional algorithm positions the exclamation mark to the right of the Arabic phrase.

The title is "مفتاح معايير الويب!" in Arabic.

Visually-ordered ASCII version (RTL text in uppercase, LTR in lower):

the title is "HCTIWS SDRADNATS BEW!" in arabic.

Inserting a Unicode right-to-left mark in the code immediately after the exclamation mark positions it correctly when you view the displayed text (see below). You can use a character escape or the (invisible) control character to insert the right-to-left mark.

The title is "مفتاح معايير الويب!‏" in Arabic.

Visually-ordered ASCII version:

the title is "!HCTIWS SDRADNATS BEW" in arabic.

Resources

Tests

Procedure
  1. Examine the source for places where text changes direction.

  2. When text changes direction, check whether neutral characters such as spaces or punctuation occur adjacent to text that is rendered in the non-default direction.

  3. When #2 is true and the HTML bidirectional algorithm would produce the wrong placement of the neutral characters, check whether the neutral characters are followed by Unicode right-to-left or left-to-right marks that cause neutral characters to be placed as part of the preceding characters.

Expected Results
  • Check #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H35: Providing text alternatives on applet elements

Applicability

HTML and XHTML Documents that load Java applets where applet is not deprecated.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H35.

Description

Provide a text alternative for an applet by using the alt attribute to label an applet and providing the text alternative in the body of the applet element. In this technique, both mechanisms are required due to the varying support of the alt attribute and applet body text by user agents.

Examples

Example 1: An applet to play the tic-tac-toe game.

Example Code:

<applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game">
   tic-tac-toe game
</applet>  

Tests

Procedure
  1. View the source code of the applet element

  2. Check that the applet element contains an alt attribute with a text alternative for the applet

  3. Check that the applet element contains a text alternative for the applet in the body of the applet element

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H36: Using alt attributes on images used as submit buttons

Applicability

Applies to content using image-based submit buttons.

This technique relates to:

Description

For input elements of type 'image', the alt attribute of the input element is used to provide a functional label. This label indicates the button's function, but does not attempt to describe the image. The label is especially important if there are multiple submit buttons on the page that each lead to different results.

The input element is used to create many kinds of form controls. Although the HTML and XHTML DTDs permits the alt attribute on all of these, it should be used only on image submit buttons. User agent support for this attribute on other types of form controls is not well defined, and other mechanisms are used to label these controls.

Examples

Example 1

An input element with an alt attribute

Example Code:

<form action="http://example.com/prog/text-read" method="post">
  <input type="image" name="submit" src="button.gif" alt="Submit" />
</form>    

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For all input elements that have a type attribute value of "image", check for the presence of an alt attribute.

  2. Check that the alt attribute indicates the button's function.

Expected Results
  • #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H37: Using alt attributes on img elements

Applicability

Images used within HTML documents.

This technique relates to:

Description

When using the img element, specify a short text alternative with the alt attribute. Note. The value of this attribute is referred to as "alt text".

When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.

Examples

Example 1

An image on a Website provides a link to a free newsletter. The image contains the text "Free newsletter. Get free recipes, news, and more. Learn more." The alt text matches the text in the image.

Example Code:

<img src="newsletter.gif" alt="Free newsletter. 
   Get free recipes, news, and more. Learn more." />
Example 2

An image on a Web site depicts the floor plan of a building. The image is an image map with each room an interactive map area. The alt text is "The building's floor plan. Select a room for more information about the purpose or content of the room." The instruction to "select a room" indicates that the image is interactive.

Resources

Resources are for information purposes only, no endorsement implied.

HTML 4.01 IMG element

HTML 4.01 alt attribute

Tests

Procedure
  1. Examine each img element in the content

  2. Check that each img element which conveys meaning contains an alt attribute.

  3. If the image contains words that are important to understanding the content, the words are included in the text alternative.

Expected Results

Checks #2 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H39: Using caption elements to associate data table captions with data tables

Applicability

HTML and XHTML data tables

This technique relates to:

Description

The objective of this technique is to programmatically associate captions for data tables where captions are provided in the presentation. The caption for a table is a table identifier and acts like a title or heading for the table.

The caption element is the appropriate markup for such text and it ensures that the table identifier remains associated with the table, including visually (by default). In addition, using the caption element allows screen reading software to navigate directly to the caption for a table if one is present.

The caption element may be used whether or not the table includes a summary attribute. The caption element identifies the table whereas the summary attribute gives an overview of the purpose or explains how to navigate the table. If both are used, the summary should not duplicate information in the caption .

Note: Although WCAG 2.0 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML and XHTML table elements and to conform to the coding practice of separating presentation from content. If a table is used for layout, the caption element is not used. The purpose of a layout table is simply to control the placement of content; the table itself is “transparent" to the user. A caption would "break" this transparency by calling attention to the table. See F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables for details..

Examples

Example 1: An appointment calendar with a caption

Example Code:

<table>
<caption>Schedule for the week of March 6</caption>
...</table> 

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each data table:

  1. Check that the table includes a caption element.

  2. Check that the content of the caption element identifies the table.

Expected Results
  • #1 and #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H40: Using description lists

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to provide the description of names or terms by presenting them in a description list. The list is marked up using the dl element. Within the list, each term is put in a separate dt element, and its description goes in the dd element directly following it. Multiple terms can be associated with a single description, as can a single term with multiple descriptions, provided that semantic sequence is maintained. The title attribute can be used to provide additional information about the description list. Usage of description lists ensures that terms and their descriptions are semantically related even as presentation format changes, as well as ensuring that these terms and descriptions are semantically grouped as a unit.

Description lists are easiest to use when the descriptions are ordered alphabetically. A common use for description lists is a glossary of terms.

Note: In HTML5 the name "Description list" was introduced. In previous versions these lists were referred to as "Definition lists".

Examples

Example 1

A list of descriptions of nautical terms used on a Website about sailing.

Example Code:

<dl title="Nautical terms">
  <dt>Knot</dt>
  <dd>
    <p>A <em>knot</em> is a unit of speed equaling 1 
      nautical mile per hour (1.15 miles per hour or 1.852 
      kilometers per hour).</p>
  </dd>
  <dt>Port</dt>
  <dd>
    <p><em>Port</em> is the nautical term (used on 
      boats and ships) that refers to the left side
      of a ship, as perceived by a person facing towards 
      the bow (the front of the vessel).</p>
  </dd>
  <dt>Starboard</dt>
  <dd>
    <p><em>Starboard</em> is the nautical term (used 
      on boats and ships) that refers to the right 
      side of a vessel, as perceived by a person 
      facing towards the bow (the front of the vessel).</p>
  </dd>
</dl>        

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For any set of terms and their associated descriptions:

  1. Check that the list is contained within a dl element.

  2. Check that each term in the list being described is contained within a dt element.

  3. Check that when there is more than one term that shares the same decription that the dt elements immediately follow each other.

  4. Check that the description for each term is contained in one or more dd elements.

  5. Check that the one or more dd elements immediately follow the one or more dt elements containing the term being described.

Expected Results
  • All checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H42: Using h1-h6 to identify headings

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to use HTML and XHTML heading markup to provide semantic code for headings in the content. Heading markup will allow assistive technologies to present the heading status of text to a user. A screen reader can recognize the code and announce the text as a heading with its level, beep or provide some other auditory indicator. Screen readers are also able to navigate heading markup which can be an effective way for screen reader users to more quickly find the content of interest. Assistive technologies that alter the authored visual display will also be able to provide an appropriate alternate visual display for headings that can be identified by heading markup.

Examples

Example 1: Hierarchical Heading Organization

In the following example, headings are used in a hierarchical layout with h3 as a subsection of h2, which is a subsection of h1.

Example Code:

<h1>Plant Foods that Humans Eat</h1>
<p>There are an abundant number of plants that humans eat...</p>
<h2>Fruit</h2>
<p> A fruit is a structure of a plant that contains its
  seeds...</p>
<h3>Apple</h3>
<p>The apple is the pomaceous fruit of the apple tree...</p>
<h3>Orange</h3>
<p>The orange is a hybrid of ancient cultivated origin...</p>
<h3>Banana</h3>
<p>Banana is the common name for herbaceous plants ...</p>
<h2>Vegetables</h2>
<p>A vegetable is an edible plant or part of a plant other than a
  sweet fruit ...</p>
<h3>Broccoli</h3>
<p>Broccoli is a plant of the mustard/cabbage family ... </p>
<h3>Brussels sprouts</h3>
<p>The Brussels sprout of the Brassicaceae family, is a Cultivar
  group of wild cabbage ...</p>
<h3>Green beans</h3>
<p>Green beans have been bred for the fleshiness, flavor, or
  sweetness of their pods...</p>
Example 2: Headings in a 3-column layout

In this example, the main content of the page is in the middle column of a 3-column page. The title of the main content matches the title of the page, and is marked as h1, even though it is not the first thing on the page. The content in the first and third columns is less important, and marked with h2.

Note: It is important to note that the example code below is not intended to prescribe what level of heading should be used for a particular section of the web page. In the example, the layout could be presented with the first heading in each column at the same logical level (such as an h1), or as found in the example, where the logical level reflects its importance in relation to the main content.

Example Code:

<head>
 <title>Stock Market Up Today</title>
 </head>

 <body>

 <!-- left nav -->
 <div class="left-nav">
 <h2>Site Navigation</h2>
 <!-- content here -->
 </div>

 <!-- main contents -->
 <div class="main">
 <h1>Stock Market up today</h1>
 <!-- article text here -->
 </div>

 <!-- right panel -->
 <div class="left-nav">
 <h2>Related links</h2>
 <!-- content here -->
 </div>
 </body>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that heading markup is used when content is a heading.

  2. Check that heading markup is not used when content is not a heading.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H43: Using id and headers attributes to associate data cells with header cells in data tables

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to associate each data cell (in a data table) with the appropriate headers. This technique adds a headers attribute to each data cell (td element). It also adds an id attribute to any cell used as a header for other cells. The headers attribute of a cell contains a list of the id attributes of the associated header cells. If there is more than one id, they are separated by spaces.

This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute. Using this technique also makes these complex relationships perceivable when the presentation format changes.

This technique is not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout.

Examples

Example 1: A table with multiple rows of headers

Example Code:

<table>
   <tr>
     <th rowspan="2" id="h">Homework</th>
     <th colspan="3" id="e">Exams</th>
     <th colspan="3" id="p">Projects</th>
   </tr>
   <tr>
     <th id="e1" headers="e">1</th>
     <th id="e2" headers="e">2</th>
     <th id="ef" headers="e">Final</th>
     <th id="p1" headers="p">1</th>
     <th id="p2" headers="p">2</th>
     <th id="pf" headers="p">Final</th>
   </tr>
   <tr>
    <td headers="h">15%</td>
    <td headers="e e1">15%</td>
    <td headers="e e2">15%</td>
    <td headers="e ef">20%</td>
    <td headers="p p1">10%</td>
    <td headers="p p2">10%</td>
    <td headers="p pf">15%</td>
   </tr>
  </table>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check for layout tables: determine whether the content has a relationship with other content in both its column and its row. If “no," the table is a layout table. If “yes," the table is a data table.

  2. For data tables, check that any cell that is associated with more than one row and/or one column header contains a headers attribute that lists the id for all headers associated with that cell.

  3. For data tables where any cell contains an id or headers attribute,

    1. Check that each id listed in the headers attribute of the data cell matches the id attribute of a cell that is used as a header element

    2. Check that the headers attribute of a data cell contains the id attribute of all headers associated with the data cell

    3. Check that all ids are unique (that is, no two elements in the page have the same id)

Expected Results
  • If table is a layout table, no cells contain headers or id attributes

  • If table is a data table and any cell contains an id attribute, checks #3.a, #3.b, and #3.c are true.

  • If table is a data table and any cell is associated with more than one row and/or one column header, check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H44: Using label elements to associate text labels with form controls

Applicability

HTML and XHTML controls that use external labels

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H44.

Description

The objective of this technique is to use the label element to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control.

The id attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the Web page.

This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2, the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field.

An additional benefit of this technique is a larger clickable area for the control, since clicking on the label or the control will activate the control. This can be helpful for users with impaired motor control.

Note that the label is positioned after input elements of type="checkbox" and type="radio".

Note 1: Elements that use explicitly associated labels are:

  • input type="text"

  • input type="checkbox"

  • input type="radio"

  • input type="file"

  • input type="password"

  • textarea

  • select

Note 2: The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button).

  • Submit and Reset buttons ( input type="submit" or input type="reset")

  • Image buttons ( input type="image")

  • Hidden input fields ( input type="hidden")

  • Script buttons (button elements or <input type="button">)

Examples

Example 1: A text input field

The text field in the example below has the explicit label of "First name:". The label element's for attribute matches the id attribute of the input element.

Example Code:

<label for="firstname">First name:</label> 
<input type="text" name="firstname" id="firstname" />
Example 2: A checkbox

Example Code:

<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>
Example 3: A group of radio buttons

A small, related group of radio buttons with a clear description and labels for each individual element.

Note: To provide clear associations and instructions for a large set of related radio buttons H71: Providing a description for groups of form controls using fieldset and legend elements , should be considered.

Example Code:

 <h1>Donut Selection</h1>

<p>Choose the type of donut(s) you would like then select 
   the "purchase donuts" button.</p>

<form action="http://example.com/donut" method="post">
<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>
</form>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For all input elements of type text, file or password, for all textareas and for all select elements in the Web page:

  1. Check that there is a label element that identifies the purpose of the control before the input, textarea, or select element

  2. Check that the for attribute of the label element matches the id of the input, textarea, or select element

  3. Check that the label element is visible.

For all input elements of type checkbox or radio in the Web page::

  1. Check that there is a label element that identifies the purpose of the control after the input element

  2. Check that the for attribute of the label element matches the id of the input element

  3. Check that the label element is visible.

Expected Results
  • Checks #1 and #2 are true. For Success Criterion 3.3.2, Check #3 is also true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H45: Using longdesc

Applicability

HTML and XHTML documents that include images that cannot be described in a short text alternative.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H45.

Description

The objective of this technique is to provide information in a file designated by the longdesc attribute when a short text alternative does not adequately convey the function or information provided in the image. The longdesc attribute is a URI, the target of which contains a long description of the non-text content.

Authors can provide a description for an image by including text in a separate resource or within the text of the page containing the image. An advantage of using a separate resource for the description is that it is easily reusable for multiple instances of the same image, it does not add on-page visual clutter to the original document, and the description's end-point is apparent to the user. An advantage of providing the description within the same page as the image is that all users can access the description. A limitation of the on-page method, as well as in providing multiple descriptions on a single separate page, is that current implementations supporting longdesc do not identify the long description's end-point. Authors can solve this by providing a well-formed description, which identifies the where the description ends.

Examples

Example 1: Using longdesc to refer to a long description contained on a separate resource.

Example Code:

<p><img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/></p>
Example 2: Using longdesc to refer to a long description within the same page.

Example Code:

<img longdesc="thispage.html#desc" alt="Line graph of the number of subscribers" src="http://www.company/images/graph.png">
<div id="desc">
<h3>Long Description: Line graph of the number of subscribers</h3>
<!-- Full Description of Graph -->
<p>Long description ends.</p>
<div>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that the img element has a longdesc attribute.

  2. Check that the value of the longdesc attribute is a valid URI of an existing resource.

  3. Check that the content at the target of that URI contains a long description describing the original non-text content associated with it.

Expected Results
  • #1 through #3 are all true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H46: Using noembed with embed

Applicability

Documents that load plugins with the embed element.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H46.

Description

The objective of this technique is to provide alternative content for the embed element in a noembed element. The noembed is rendered only if the embed is not supported. While it can be positioned anywhere on the page, it is a good idea to include it as a child element of embed so that it is clear to assistive technologies that a text alternative is associated with the embed element it describes.

Examples

Example 1: noembed is provided inside an embed

Example Code:

<embed src="../movies/history_of_rome.mov"
  height="60" width="144" autostart="false">
  <noembed>
    <a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of Rome"</a>
  </noembed>
</embed>
Example 2: noembed is provided beside an embed

Example Code:

<embed src="moviename.swf" width="100" height="80"
  pluginspage="http://example.com/shockwave/download/" />
<noembed>
  <img alt="Still from Movie" src="moviename.gif" 
    width="100" height="80" />
</noembed>;

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Check if embed element has a child noembed element

  2. Check if embed element has a noembed element that immediately follows it.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H48: Using ol, ul and dl for lists or groups of links

Applicability

HTML, XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H48.

Description

The objective of this technique is to create lists of related items using list elements appropriate for their purposes. The ol element is used when the list is ordered and the ul element is used when the list is unordered. Definition lists (dl) are used to group terms with their definitions. Although the use of this markup can make lists more readable, not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.

When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item and using <br> elements to separate the list items.

Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.

The list structure (ul/ol) is also useful to group hyperlinks. When this is done, it helps screen reader users to navigate from the first item in a list to the end of the list or jump to the next list. This helps them to bypass groups of links if they choose to.

Examples

Example 1: A list showing steps in a sequence

This example uses an ordered list to show the sequence of steps in a process.

Example Code:

 <ol>
  <li>Mix eggs and milk in a bowl.</li>
  <li>Add salt and pepper.</li>
</ol>
Example 2: A grocery list

This example shows an unordered list of items to buy at the store.

Example Code:

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Butter</li>
</ul>
Example 3: A word and its definition

This example uses a definition list to group a definition with the term that is being defined.

Example Code:

<dl>
  <dt>blink</dt>
  <dd>turn on and off between .5 and 3 times per second
  </dd>
</dl> 
Example 4: Contact information using a definition list

This example uses a defintion list to mark up pairs of related items. The pairs themselves are a logically related list. Since browsers lack wide support for CSS styling on definition list elements, span elements have been included in the markup for styling purposes only, and are not required:

<dl>
<dt><span>name:</span></dt><dd><span>John Doe</span></dd>
<dt><span>tel:</span></dt><dd><span>01-2345678</span></dd>
<dt><span>fax:</span></dt><dd><span>02-3456789</span></dd>
<dt><span>email:</span></dt><dd><span>johndoe@someemail.com</span></dd>
</dl>

The following CSS styling can be used to format each paired item in the list on its own line, as well as giving a table-like layout:

dt, dd{float: left;margin: 0;padding: 0;}
dt{clear:both;font-weight: bold}
dt span{display: inline-block; width: 70px;}
dd span{display: inline-block; margin-right: 5px;}

This is shown in the working example of Contact information using a definition list

Example 5: Using lists to group links

In this example the links are grouped using the ul and li elements.

Example Code:

<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
    <li><a href="kitchen.html">Kitchen</a></li>
    <li><a href="bedbath.html">Bed &amp; Bath</a></li>
    <li><a href="dining.html">Fine Dining</a></li>
    <li><a href="lighting.html">Lighting</a></li>
    <li><a href="storage.html">Storage</a><li>
</ul> 

CSS can be used to style the list elements, so this technique can be used with a variety of visual appearances.

Here is a style that removes the list bullets and the left padding that creates the indent and flows the individual list elements horizontally.

Example Code:

ul.navigation {
  list-style: none; 
  padding: 0;
}
ul.navigation li {
  display: inline;
}

This style removes the list bullets and the left padding and displays the items in a floating block.

Example Code:

ul.navigation {
 list-style: none; 
 padding: 0;
}
ul.navigation li {
 display: block; 
 float: left;
}

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that content that has the visual appearance of a list (with or without bullets) is marked as an unordered list.

  2. Check that content that has the visual appearance of a numbered list is marked as an ordered list.

  3. Check that content is marked as a definition list when terms and their definitions are presented in the form of a list.

Expected Results
  • All the checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H49: Using semantic markup to mark emphasized or special text

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H49.

Description

The objective of this technique is to demonstrate how semantic markup can be used to mark emphasized or special text so that it can be programmatically determined. Using semantic markup to mark emphasized or special text also provides structure to the document. User agents 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.

Most user agents will visually distinguish text that has been identified using semantic markup. Some assistive technologies provide a mechanism for determining the characteristics of content that has been created using proper semantic markup.

Examples

See rendered examples of semantic text.

Example 1

This example shows how to use the em and strong elements to emphasize text. The em and strong elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.).

Example Code:

 ...What she <em>really</em> meant to say was, &quot;This is not ok, 
 it is <strong>excellent</strong>&quot;!... 
Example 2

This example shows using the blockquote element to mark up long quotations which may require paragraph breaks. It also demonstrates the use of the cite element to specify a reference.

Example Code:

<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
 <blockquote>
   <p>Even in the days before my teacher came, I used to feel along the square stiff boxwood
   hedges, and, guided by the sense of smell, would find the first violets and lilies.  
   There, too, after a fit of temper, I went to find comfort and to hide my hot face 
   in the cool leaves and grass.</p>
 </blockquote>
Example 3

Here is the use of the q element to mark up a shorter quotation. Quotes are provided around the q element, because many user agents do not support this element yet and therefore do not display it properly (see UA notes). CSS rules to suppress automatic generation of quotes are provided for those user agents that do support the q element, to prevent them from generating quotes automatically in addition to the quotes provided by the author, resulting in double-quoted content. In the future, when the q element is more broadly supported, the need to provide quotes and suppress browser-generated quotes will go away.

Example Code:

q:before { content: ""; } 
q:after { content: ""; }  

Example Code:

 <p>Helen Keller said, "<q>Self-pity is our worst enemy and if we yield to it, 
we can never do anything good in the world.</q>"</p>
Example 4

Superscripts and subscripts are created using the sup and sub elements.

Example Code:

 <p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>The chemical notation for water is H<sub>2</sub>O.</p>

Resources

Tests

Procedure
  1. Examine the content for information that is conveyed through variations in presentation of text.

  2. Check that appropriate semantic markup (such as em, strong, cite, blockquote, sub, and sup) have been used to mark the text that conveys information through variations in text.

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H51: Using table markup to present tabular information

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to present tabular information in a way that preserves relationships within the information even when users cannot see the table or the presentation format is changed. Information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal). These relationships are represented in columns and rows, and the columns and rows must be recognizable in order for the logical relationships to be perceived.

Using the table element with the child elements tr, th, and td makes these relationships perceivable. Techniques such as inserting tabs to create columns or using the pre element are purely visual, and visually implied logical relationships are lost if the user cannot see the table or the visual presentation is changed.

Simple tables generally have only one level of headers for columns and/or one level of headers on the rows.

Usually, for simple tables, row 1 column 1 is either blank or describes the contents of the entire column 1. Row 1 columns are not blank (i.e. they contain "column headings"), describe the contents of the entire column, and allow the reader to distinguish the difference in meaning between that column and other columns.

Column 1 rows are usually not blank, they often contain "row headings" which describe the contents of the entire row, and allow the reader to distinguish the difference in meaning between that row and the other rows. Otherwise, the Column 1 would contain simple data.

Examples

Example 1: A schedule marked up as a simple data table with column and row headers

This example uses markup for a simple data table. The first row shows the days of the week. Time intervals are shown in the first column. These cells are marked with the th element. This identifies the days of the week as column headers and the time intervals as row headers.

Screen readers speak header information that changes as the user navigates the table. Thus, when screen reader users move to left or right along a row, they will hear the day of the week (the column header) followed by the appointment (if any). They will hear the time interval as they move up or down within the same column.

Example Code:

 <table>
  <tr>
    <td> </td>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
  </tr>
  <tr>
    <th>8:00-9:00</th>
    <td>Meet with Sam</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th>9:00-10:00</th>
    <td> </td>
    <td> </td>
    <td>Doctor Williams</td>
    <td>Sam again</td>
    <td>Leave for San Antonio</td>
  </tr>
</table> 

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check for the presence of tabular information.

  2. For each occurrence of tabular information:

    1. Check that table markup with at least the elements table, tr, th, and td is used.

Expected Results
  • All checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H53: Using the body of the object element

Applicability

Documents that load media with the object element.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H53.

Description

The objective of this technique is to provide a text alternative for content rendered using the object element. The body of the object element can be used to provide a complete text alternative for the object, or may contain additional non-text content with text alternatives.

Fallback content for the object element is only available to the user when the media loaded by the element is not rendered by the user agent, because the user agent does not support the media technology or the user has instructed the user agent not to render that technology. In these situations, the fallback content will be presented to the user. If the media is rendered without the fallback content, the media needs to be directly accessible. Authors can only rely on this technique to satisfy the success criterion if they are not relying on the direct accessibility of the media's technology in their conformance claim, and reasonably expect users will be able to access the fallback.

Examples

Example 1: An object includes a long description that describes it

Example Code:

 <object classid="http://www.example.com/analogclock.py">
  <p>Here is some text that describes the object and its operation.</p>
</object>
Example 2: An object includes non-text content with a text alternative

Example Code:

<object classid="http://www.example.com/animatedlogo.py">
  <img src="staticlogo.gif" alt="Company Name" />
</object>   
            
Example 3: The image object has content that provides a brief description of the function of the image

Example Code:

<object data="companylogo.gif" type="image/gif">
  <p>Company Name</p>
</object>
Example 4

This example takes advantage of the fact the object elements may be nested to provide for alternative representations of information.

Example Code:

<object classid="java:Press.class" width="500" height="500">
  <object data="Pressure.mpeg" type="video/mpeg">
    <object data="Pressure.gif" type="image/gif">
      As temperature increases, the molecules in the balloon...
    </object>
  </object>
</object>  

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that the body of each object element contains a text alternative for the object.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H54: Using the dfn element to identify the defining instance of a word

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to use the dfn to mark the use of a word or phrase where it is defined. The dfn element is used to indicate the defining instance of the enclosed term. In other words, it marks the occurrence of the term where the term is defined. Note that it encloses the term, not the definition. This technique would be used in combination with G112: Using inline definitions to provide the definition.

Examples

Example 1

The following code snippet demonstrates the use of the dfn element.

Example Code:

<p>The Web Content Accessibility Guidelines require that non-text content
has a text alternative. <dfn>Non-text content</dfn> is content that is not a sequence
of characters that can be programmatically determined or where the sequence is
not expressing something in human language; this includes ASCII Art (which is a
pattern of characters), emoticons, leetspeak (which is character substitution), and
images representing text .</p> 

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Identify all words that are defined inline in the text, that is, where the definition occurs in a sentence near an occurrence of the word.

  2. Check that each word that is defined inline is contained in a dfn element.

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H56: Using the dir attribute on an inline element to resolve problems with nested directional runs

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to identify changes in the text direction of text that includes nested directional runs by providing the dir attribute on inline elements. A nested directional run is a run of text that includes mixed directional text, for example, a paragraph in English containing a quoted Hebrew sentence which in turn includes an English phrase. Use of the dir attribute on an enclosing span or other inline element may be necessary because the Unicode bidirectional algorithm can produce undesirable results when mixed directional text contains spaces or punctuation. The concepts used in this technique are described in What you need to know about the bidi algorithm and inline markup.

Examples

Example 1

This example defines the text direction of a nested, mixed-direction phrase, in Hebrew and English, to be right-to-left. Because the whole quote is in Hebrew, and therefore runs right to left, the text "W3C" and the comma should appear to the left of (i.e., after) the Hebrew text, like this:

The title is "פעילות הבינאום, W3C" in Hebrew.

Visually-ordered ASCII version (RTL text in uppercase, LTR in lower):

the title is "w3c ,YTIVITCA NOITAZILANOITANRETNI" in hebrew.

The Unicode bidirection algorithm alone is insufficient to achieve the right result, and leaves the text 'W3C' on the right side of the quote:

The title is "פעילות הבינאום, W3C" in Hebrew.

Visually-ordered ASCII version:

the title is "YTIVITCA NOITAZILANOITANRETNI, w3c" in hebrew.

The following markup will produce the expected result:

Example Code:


<p>The title says "<span lang="he" 
dir="rtl">פעילות הבינאום, W3C</span>" in Hebrew.</p> 

Resources

Tests

Procedure
  1. Examine the text direction of text in the document

  2. If the text direction is right-to-left, check that for the ancestor element that has a dir attribute, the attribute has the value "rtl"

  3. If the text direction is left-to-right, check that there is no ancestor element with a dir attribute, or that for the ancestor element that has a dir attribute, the attribute has the value "ltr"

Expected Results
  • Checks #2 and #3 are true for all text.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H57: Using language attributes on the html element

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H57.

Description

The objective of this technique is to identify the default language of a document by providing the lang and/or xml:lang attribute on the html element.

Identifying the language of the document is important for a number of reasons:

  • It allows braille translation software to substitute control codes for accented characters, and insert control codes necessary to prevent erroneous creation of Grade 2 braille contractions.

  • Speech synthesizers that support multiple languages will be able to orient and adapt to the pronunciation and syntax that are specific to the language of the page, speaking the text in the appropriate accent with proper pronunciation.

  • Marking the language can benefit future developments in technology, for example users who are unable to translate between languages themselves will be able to use machines to translate unfamiliar languages.

  • Marking the language can also assist user agents in providing definitions using a dictionary.

HTML 4.01 uses the lang attribute of the html element. XHTML served as text/html uses the lang attribute and the xml:lang attribute of the html element, in order to meet the requirements of XHTML and provide backward compatibility with HTML. XHTML served as application/xhtml+xml uses the xml:lang attribute of the html element. Both the lang and the xml:lang attributes can take only one value.

Note 1: HTML only offers the use of the lang attribute, while XHTML 1.0 (as a transitional measure) allows both attributes, and XHTML 1.1 allows only xml:lang.

Note 2: Allowed values for the lang and xml:lang attributes are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional subcodes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of subcodes is optional but may be helpful in certain circumstances.

Examples

Example 1

This example defines the content of an HTML document to be in the French language.

Example Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr"> 
<head>
  <title>document écrit en français</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>  
<body>     
	...document écrit en français...   
</body>
</html>
Example 2

This example defines the content of an XHTML 1.0 document with content type of text/html to be in the French language. Both the lang and xml:lang attributes are specified in order to meet the requirements of XHTML and provide backward compatibility with HTML.

Example Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
  <title>document écrit en français</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body> 
...document écrit en français...      
</body>
</html>  
Example 3

This example defines the content of an XHTML 1.1 document with content type of application/xhtml+xml to be in the French language. Only the xml:lang attribute is specified.

Example Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>document écrit en français</title>
	<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body> 
	...document écrit en français... 
</body>
</html>

Resources

Tests

Procedure
  1. Examine the html element of the document.

  2. Check that the html element has a lang and/or xml:lang attribute.

  3. Check that the value of the lang attribute conforms to BCP 47: Tags for the Identification of Languages or its successor and reflects the primary language used by the Web page.

Expected Results
  • The above checks are all true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H58: Using language attributes to identify changes in the human language

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H58.

Description

The objective of this technique is to clearly identify any changes in language on a page by using the lang or xml:lang attribute, as appropriate for the HTML or XHTML version you use.

HTML 4.01 uses the lang attribute on elements. XHTML served as text/html uses the lang attribute and the xml:lang attribute on elements, in order to meet the requirements of XHTML and provide backward compatibility with HTML. XHTML served as application/xhtml+xml uses the xml:lang attribute on elements.

Note: HTML only offers the use of the lang attribute, while XHTML 1.0 (as a transitional measure) allows both attributes, and XHTML 1.1 allows only xml:lang.

Allowed values for the lang and xml:lang attributes are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional subcodes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of subcodes is optional but may be helpful in certain circumstances.

Examples

Example 1

This example demonstrates the use of the xml:lang attribute defining a quote written in German. This snippet could be included by an XHTML 1.1 document where lang is not allowed.

Example Code:

<blockquote xml:lang="de">
  <p>
    Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
    aber der Esel merkte, daß kein guter Wind wehte, lief fort
    und machte sich auf den Weg nach Bremen: dort, meinte er,
    könnte er ja Stadtmusikant werden.
  </p>
</blockquote>   
            

Resources

Tests

Procedure

For each element in the document:

  1. Check that the human language of the content of the element is the same as the inherited language for the element as specified in HTML 4.01, Inheritance of language codes

For each lang attribute in the document:

  1. Check that the value of the lang attribute conforms to BCP 47: Tags for the Identification of Languages or its successor

For each xml:lang attribute in the document:

  1. Check that the value of the xml:lang attribute conforms to BCP 47: Tags for the Identification of Languages or its successor

Expected Results
  • All checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H59: Using the link element and navigation tools

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H59.

Description

The objective of this technique is to describe how the link element can provide metadata about the position of an HTML page within a set of Web pages or can assist in locating content with a set of Web pages. The value of the rel attributes indicates what type of relation is being described, and the href attribute provides a link to the document having that relation. Multiple link elements can provide multiple relationships. Several values of rel are useful:

  • Start: Refers to the first document in a collection of documents.

  • Next: Refers to the next document in a linear sequence of documents.

  • Prev: Refers to the previous document in an ordered series of documents.

  • Contents: Refers to a document serving as a table of contents.

  • Index: Refers to a document providing an index for the current document.

Examples

Example 1

A Web page for Chapter 2 of an on-line book might contain the following links within the head section.

Example Code:

<link rel="Contents" href="Contents.html" title="Table of Contents"  />
<link rel="Index" href="Index.html" title="Index" />
<link rel="Prev" href="Chapter01.html" title="01. Why Volunteer?" />
<link rel="Next" href="Chapter03.html" title="03. Who Volunteers?" />

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For a Web page that is within a sequence or collection of Web pages:

  1. Check that all link elements pertaining to navigation occur in the head section of the document.

  2. For each link element in the head section of the document which pertains to navigation, check that it contains at least:

    1. a rel attribute identifying the link type

    2. a valid href attribute to locate the appropriate resource

Expected Results
  • All of the checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H60: Using the link element to link to a glossary

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H60.

Description

The objective of this technique is to provide a mechanism for locating a glossary. When terms in the content are defined on a separate glossary page, the glossary is referenced using a link element in the head element of the document that uses the glossary. The rel attribute of the link element is set to "glossary", and the href attribute contains the URI of the glossary page. User agents can then assist users in accessing the glossary quickly and easily.

Examples

Example 1: The WCAG 2.0 Glossary.

Example Code:

 <link rel="glossary" href="http://www.w3.org/TR/WCAG20/#glossary">

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure

For any set of words and their definitions that are meant to serve as a glossary:

  1. Check that the head section of the Web page that contains words, phrases or abbreviations defined in a glossary contains a link element

  2. Check that the link element has attribute rel="glossary"

  3. Check that the href attribute of the link element refers to the glossary page.

Expected Results
  • All 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."

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H62: Using the ruby element

Applicability

XHTML 1.1 and HTML5

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H62.

Description

The objective of this technique is to use ruby annotation to provide information about the pronunciation and meaning of a run of text where meaning is determined by pronunciation.

There are many languages in which a run of text may mean different things depending on how the text is pronounced. This is common in East Asian languages as well as Hebrew, Arabic, and other languages; it also occurs in English and other Western European languages.

Ruby Annotation allows the author to annotate a "base text," providing a guide to pronunciation and, in some cases, a definition as well. Ruby is commonly used for text in Japanese and other East Asian languages. Ruby Annotation is defined as a module for XHTML 1.1 or HTML5.

There are two types of Ruby markup: simple and complex. Simple Ruby markup applies to a run of text such as a complete word or phrase. This is known as the "base" text (rb element). The Ruby annotation that indicates how to pronounce the term (the rt element, or Ruby text) is shown in a smaller font. (The term "Ruby" is derived from a small font used for this purpose in printed texts.) The Ruby text is usually rendered above or immediately before the base text, that is, immediately above horizontal text or immediately to the right of vertical text. Sometimes Japanese uses Ruby to provide the meaning of text on the other side of the base text (visually) from the phonetic annotation. Simple Ruby markup also provides a "fallback" option for user agents that do not support Ruby markup (that is, user agents that do not support XHTML 1.1 or HTML5).

Complex Ruby markup makes it possible to divide the base text into smaller units, each of which may be associated with a separate Ruby annotation. Complex Ruby markup does not support the fallback option.

Ruby annotation is uncommon in languages such as Hebrew, where Unicode fonts can include diacritical marks that convey pronunciation. It is also uncommon in English and European languages.

Note: The primary reason for indicating pronunciation through Ruby or any other means is to make the content accessible to people with disabilities who could read and understand the language of the content if information about pronunciation were provided. It is not necessary to provide information about pronunciation for use by people who are not familiar with the language of the content.

Examples

Example 1: Ruby markup providing pronunciation information for an initialism

This example uses Ruby annotation to give the pronunciation of the initialism (acronym) formed by the first letters of the words Web Content Accessibility Guidelines. The letters WCAG are the base (the rb element), and the pronunciation information is shown by the Ruby text (the rt element). The Ruby parenthesis element rp is used for user agents that do not support Ruby annotations to indicate that the text in the rt element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)

Example Code:

<p>When we talk about these guidelines, we often just call them
  <ruby>
    <rb>WCAG</rb>
    <rp>(</rp>
      <rt>Wuh-KAG</rt>
    <rp>)</rp>
  </ruby>.
</p>
Example 2: Ruby annotation for Japanese

The following is an example in Japanese. For Japanese, the Ruby is used to give the reading of Han characters(Kanji). the Ruby parenthesis element rp is used for user agents that do not support Ruby annotations to indicate that the text in the rt element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)

Example Code:

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

Resources

Tests

Procedure

For each run of text where a Ruby annotation is used to provide pronunciation information:

  1. Check that a rt element contains pronunciation information for each run of text defined by the rb element.

  2. If simple Ruby markup is used, check that the rp element is present to indicate to user agents that do not support Ruby annotations that the text in the rt element provides the pronunciation information. .

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H63: Using the scope attribute to associate header cells and data cells in data tables

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H63.

Description

The objective of this technique is to associate header cells with data cells in complex tables using the scope attribute. The scope attribute may be used to clarify the scope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values row, col, rowgroup, and colgroup identify these possible scopes respectively.

For simple data tables where the header is not in the first row or column, like the one in Example 1, this technique can be used. Based on screen reader support today, its use is suggested in two situations both relating to simple tables:

  • data cells marked up with td that also function as row header or column header

  • header cells marked up with td instead of th. Sometimes, authors use this to avoid the display characteristics associated with th and also do not choose to use CSS to control the display for th.

Note 1: For simple tables that have the headers in the first row or column then it is sufficient to simply use the TH elements without scope.

Note 2: For complex tables use ids and headers as in H43: Using id and headers attributes to associate data cells with header cells in data tables.

Note 3: Some users may find it easier to work with several simple tables than one more complex table. Authors may wish to consider whether they can convert complex tables to one or more simple tables.

Examples

Example 1: A simple schedule

In the following example, column #1 contains serial numbers for rows in the table and the second column contains the key value for the row. The cells in the second column may then use scope="row". The cells in the first row too are marked up with td and use scope="col".

Example Code:

 <table border="1">
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <th scope="col">Name</th>
    <th scope="col">Phone#</th>
    <th scope="col">Fax#</th>
    <th scope="col">City</th>
  </tr><tr>
    <td>1.</td>
    <th scope="row">Joel Garner</th>
    <td>412-212-5421</td>
    <td>412-212-5400</td>
    <td>Pittsburgh</td>
  </tr><tr>
    <td>2.</td>
    <th scope="row">Clive Lloyd</th>
    <td>410-306-1420</td>
    <td>410-306-5400</td>
    <td>Baltimore</td>
  </tr><tr>
    <td>3.</td>
    <th scope="row">Gordon Greenidge</th>
    <td>281-564-6720</td>
    <td>281-511-6600</td>
    <td>Houston</td>
  </tr>
</table> 

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each data table:

  1. Check that all th elements have a scope attribute.

  2. Check that all td elements that act as headers for other elements have a scope attribute.

  3. Check that all scope attributes have the value row, col, rowgroup, or colgroup.

Expected Results
  • All checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H64: Using the title attribute of the frame and iframe elements

Applicability

HTML and XHTML documents that use frames or iframes

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H64.

Description

The objective of this technique is to demonstrate the use of the title attribute of the frame or iframe element to describe the contents of each frame. This provides a label for the frame so users can determine which frame to enter and explore in detail. It does not label the individual page (frame) or inline frame (iframe) in the frameset.

Note that the title attribute labels frames, and is different from the title element which labels documents. Both should be provided, since the first facilitates navigation among frames and the second clarifies the user's current location.

The title attribute is not interchangeable with the name attribute. The title labels the frame for users; the name labels it for scripting and window targeting. The name is not presented to the user, only the title is.

In HTML5 the frame element is marked as obsolete. The iframe element remains part of the HTML5 specification.

Examples

Example 1

This example shows how to use the title attribute with frame to describe the frames containing the navigation bar and the document.

Example Code:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>A simple frameset document</title>
  </head>
  <frameset cols="10%, 90%">
    <frame src="nav.html" title="Main menu" />
    <frame src="doc.html" title="Documents" />
    <noframes>
      <body>
        <a href="lib.html" title="Library link">Select to
        go to the electronic library</a>
      </body>
    </noframes>
  </frameset>
</html> 
Example 2

This example shows how to use the title attribute with iframe to describe the contents of an inline frame. The example also includes an alternative link to the page included by the iframe element for older browsers, which may not understand the iframeelement.

Example Code:

 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>A document using iframe</title>
  </head>
...
<iframe src="banner-ad.html" id="testiframe" 
  name="testiframe" title="Advertisement">
    <a href="banner-ad.html">Advertisement</a>
</iframe>
...
</html>  

Resources

Tests

Procedure
  1. Check each frame and iframe element in the HTML or XHTML source code for the presence of a title attribute.

  2. Check that the title attribute contains text that identifies the frame.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H65: Using the title attribute to identify form controls when the label element cannot be used

Applicability

HTML and XHTML form controls that are not identified using value, alt, or element content

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H65.

Description

The objective of this technique is to use the title attribute to label form controls when the visual design cannot accommodate the label (for example, if there is no text on the screen that can be identified as a label) or where it might be confusing to display a label. User agents, including assistive technology, can speak the title attribute.

Examples

Example 1: A pulldown menu that limits the scope of a search

A search form uses a pulldown menu to limit the scope of the search. The pulldown menu is immediately adjacent to the text field used to enter the search term. The relationship between the search field and the pulldown menu is clear to users who can see the visual design, which does not have room for a visible label. The title attribute is used to identify the select menu. The title attribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers.

Example Code:

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
…
</select> 
Example 2: Input fields for a phone number

A Web page contains controls for entering a phone number in the United States, with three fields for area code, exchange, and last four digits.

Example Code:

<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code" 
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number" 
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" 
type="text" size="4" value="" >
</fieldset> 
Example 3: A Search Function

A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.

Example Code:


<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
Example 4: A data table of form controls

A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen LABEL) it is difficult for non-visual users to pause and interrogate for corresponding row/column header values using their assistive technology while tabbing through the form.

For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button is a concatenation of the answer choice (column header) and the text of the question (row header) with a hyphen or colon as a separator.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Identify each form control that is not associated with a label element

  2. Check that the control has a title attribute

  3. Check that the title attribute identifies the purpose of the control

Expected Results
  • All checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H67: Using null alt text and no title attribute on img elements for images that AT should ignore

Applicability

HTML and XHTML documents that load images.

This technique relates to:

Description

The purpose of this technique is to show how images can be marked so that they can be ignored by Assistive Technology.

If no title attribute is used, and the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored.

Note: Have a "null" alt attribute is not the same as having no alt attribute.

Examples

Example 1

The following image is used to insert a decorative image on a Web page.

Example Code:


<img src="squiggle.gif" width="20" height="20" alt="" />

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

For each image that should be ignored:

  1. Check that title attribute is either absent or empty.

  2. Check that alt attribute is present and empty.

Expected Results
  • #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H69: Providing heading elements at the beginning of each section of content

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H69.

Description

The objective of this technique is to use section headings to convey the structure of the content. Heading markup can be used:

  • to indicate start of main content

  • to mark up section headings within the main content area

  • to demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation

  • to mark up images of text that are used as headings

  • to allow users the ability to navigate a page by sections or skip repeated blocks of information

Headings are designed to convey logical hierarchy. Skipping levels in the sequence of headings may create the impression that the structure of the document has not been properly thought through or that specific headings have been chosen for their visual rendering rather than their meaning. Authors are encouraged to nest headings hierarchically. When headings are nested hierarchically, the most important information is given the highest logical level, and subsections are given subsequent logical levels.(i.e., h2 is a subsection of h1). Providing this type of structure will help users understand the overall organization of the content more easily.

Since headings indicate the start of important sections of content, it is possible for users with assistive technology to jump directly to the appropriate heading and begin reading the content. This significantly speeds interaction for users who would otherwise access the content slowly. Headings create chunks of information that can be found easily by people with disabilities, such as a blind person using a screen reader, or a person with a cognitive disability who uses assistive technology that delineates groups of information, or someone with a communication disability or illiteracy, who uses a screen reader to assist them in their reading.

Note: All of our techniques assume that people needing special user agents (including AT or special plug-ins) will get and be using that type user agent (eg screen reader, or plug-in that allows keyboard navigation of properly marked up content, etc).

Examples

Example 1

This example organizes the sections of a search page by marking each section heading using h2 elements.

Example Code:

<h1>Search Technical Periodicals</h1>
 <h2>Search</h2>
 <form action="search.php">
  <p><label for="searchInput">Enter search topic: </label>
  <input type="text" size="30" id="searchInput">
  <input type="submit" value="Go"></p>
 </form>
 <h2>Available Periodicals</h2>
 <div class="jlinks">
  <a href="pcoder.com">Professional Coder</a> |
  <a href="algo.com">Algorithms</a> |
  <a href="jse.com">Journal of Software Engineering</a>
 </div>
 <h2>Search Results</h2>
 ... search results are returned in this section ...   
Example 2: Headings show the overall organization of the content

In this example, heading markup is used to make the navigation and main content sections perceivable.

Example Code:

<!-- Logo, banner graphic, search form, etc.  -->
  <h2>Navigation</h2>
    <ul>
      <li><a href="about.htm">About us</a></li>
      <li><a href="contact.htm">Contact us</a></li>
       ...
    </ul>
  <h2>All about headings</h2>
   <!-- Text, images, other material making up the main content... --> 
            
Example 3: Headings show the organization of material within the main content

Note that in HTML 4.01 and XHTML 1.x, heading elements only mark the beginning of sections. Because there is no markup to associate a heading element with the section content explicitly, users will assume that the heading applies to all following content until the next heading element is encountered.

Example Code:

 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Cooking techniques</title>  
  </head>   
  <body>     
    <h1>Cooking techniques</h1>     
    <p>       
      ... some text here ...     
    </p>           
    <h2>Cooking with oil</h2> 
    <p> 
        ... text of the section ...     
    </p>           
    <h2>Cooking with butter</h2>       
    <p>
        ... text of the section ...     
    </p>   
  </body> 
</html>    

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that the content is divided into separate sections

  2. Check that each section on the page starts with a heading.

Expected Results
  • For 2.4.1 check #2 is true.

  • For 2.4.10 checks #1 and #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H70: Using frame elements to group blocks of repeated material

Applicability

HTML and XHTML documents that use frames

This technique relates to:

Description

The objective of this technique is to demonstrate how framesets can be used to group blocks of repeated material. Since most user agents and assistive technology provide a way to navigate from frame to frame, using frames to organize elements can provide a mechanism for easily bypassing blocks of repeated content. If the site uses framesets, organize the blocks of content into separate frames. Make certain that the repeated blocks of content appear in the same frame within the frameset of each Web page. In addition, each frame element must have a title attribute to describe the content of the frame. When frames are properly titled, users can use frame navigation to easily navigate between blocks of content.

This technique is appropriate when framesets are already used to organize the content of the page; other techniques are preferred for pages that are not already using framesets, because many people using assistive technology have trouble with frames . An advisory technique about using noframes is available in Success Criterion 1.1.1.

In HTML5 the frame element is marked as obsolete.

Examples

Example 1

The following example shows the use of two frames to organize content. The source of the first frame is the Web page, navigation.html, which contains the HTML for the navigation. This frame has a title attribute which identifies it as a navigation bar. The second frame contains the main content of the site as indicated by the source parameter of main.html and the title attribute, "Main News Content" which identifies its function.

Example Code:

<frameset cols="20%, *">
  <frame src="navigation.html" name="navbar" title="Navigation Bar" />
  <frame src="main.html" name="maincontent" title="Main News Content" />
  <noframes>
    <p>View <a href="noframe.html">no frame version</a>.</p>
  </noframes>
</frameset>   

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

If the Web page uses frames to organize content:

  1. Check if repeated blocks of content are organized into separate frames.

  2. Check that the frames with repeated content appear in the same location within each frameset.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H71: Providing a description for groups of form controls using fieldset and legend elements

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to provide a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.

Form controls can be grouped by enclosing them within the fieldset element. All controls within a given fieldset are then related. The first element inside the fieldset must be a legend element, which provides a label or description for the group. Authors should avoid nesting fieldsets unnecessarily, as this can lead to confusion.

Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. The individual label associated with each radio or checkbox control may not fully convey the group's descriptive context. In this situation, it is essential that they be grouped together semantically to facilitate being treated as a single control, as well as to provide an additional group level description. Often, user agents will present the value of the legend before the label of each control to provide this description, as well as to remind users that they are part of the same group.

It can also be useful to group other sets of controls less tightly related than radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address", thus providing a group level description for these controls. As a rule of thumb, it can be said that where a group of controls within a larger form requires an additional heading to provide a description specific to that particular group, the use of fieldset and legend elements is appropriate.

However, when a group of related radio buttons or checkboxes (even having values for a single named field) includes clear instructions and distinct selections (i.e. where the individual label associated with each particular control provides a sufficient description), the use of the fieldset and legend elements is not required. H44: Using label elements to associate text labels with form controls is sufficient in this case.

Authors sometimes avoid using the fieldset element because of the default display in the browser, which draws a border around the grouped controls. This visual grouping is also useful and authors should seriously consider retaining it (or some form of visual grouping). The visual effect can be modified in CSS by overriding the "border" property of the fieldset and the "position" property of the legend.

Examples

Example 1: A multiple choice test

This example shows a test item with one question and five possible answers. Each answer is represented by a radio button ( input type="radio"). The radio buttons are contained within a fieldset. The test question is tagged with the legend element.

Example Code:

<fieldset>
  <legend>The play <cite>Hamlet</cite> was written by:</legend>
  <input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
  <label for="shakesp">William Shakespeare</label><br />
  <input type="radio" id="kipling" name="hamlet" value="b">
  <label for="kipling">Rudyard Kipling</label><br />
  <input type="radio" id="gbshaw" name="hamlet" value="c">
  <label for="gbshaw">George Bernard Shaw</label><br />
  <input type="radio" id="hem" name="hamlet" value="d">
  <label for="hem">Ernest Hemingway</label><br />
  <input type="radio" id="dickens" name="hamlet" value="e">
  <label for="dickens">Charles Dickens</label>
</fieldset>   
Example 2: A set of checkboxes

The User Profile page for a Web site allows users to indicate their interests by selecting multiple checkboxes. Each checkbox ( input type="checkbox") has a label. The checkboxes are contained within a fieldset, and the legend element contains the prompt for the entire group of checkboxes.

Example Code:

<fieldset>
  <legend>I am interested in the following (check all that apply):</legend>
  <input type="checkbox" id="photo" name="interests" value="ph">
  <label for="photo">Photography</label><br />
  <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
  <label for="watercol">Watercolor</label><br />
  <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
  <label for="acrylic">Acrylic</label>
  …
</fieldset>    
Example 3: Radio buttons submitting to the same named field

This example requests the user to choose a single philosopher. Note that each field has the same "name" attribute, indicating these radio buttons are related (they all submit the same field), and should be grouped as shown. Also note that while the "name" attributes are the same, the "id" attributes must be unique.

Example Code:

<form action="http://example.com/vote" method="post">
  <fieldset>
    <legend>Your preferred philosopher</legend>
    <input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
    <label for="philosopher_socrates">Socrates</label>
    <input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
    <label for="philosopher_plato">Plato</label>
    <input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
    <label for="philosopher_aristotle">Aristotle</label>
  </fieldset>
  </form> 

Note: Groups of related checkboxes work in the same way, except the user is allowed to express more than one preference for the field.

Example 4: Logically related controls

In this example, form fields for residential and postal addresses are distinguished by the value of the legend in each fieldset grouping.

Example Code:

<form action="http://example.com/adduser" method="post">
   <fieldset>
     <legend>Residential Address</legend>
     <label for="raddress">Address: </label>
     <input type="text" id="raddress" name="raddress" />
     <label for="rzip">Postal/Zip Code: </label>
     <input type="text" id="rzip" name="rzip" />
     ...more residential address information...
   </fieldset>
   <fieldset>
     <legend>Postal Address</legend>
     <label for="paddress">Address: </label>
     <input type="text" id="paddress" name="paddress" />
     <label for="pzip">Postal/Zip Code: </label>
     <input type="text" id="pzip" name="pzip" />
     ...more postal address information...
   </fieldset>
</form>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For groups of related controls where the individual labels for each control do not provide a sufficient description, and an additional group level description is needed,

  1. Check that the group of logically related input or select elements are contained within fieldset elements.

  2. Check that each fieldset has a legend element that includes a description for that group.

Expected Results
  • All of the above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H73: Using the summary attribute of the table element to give an overview of data tables

Applicability

HTML 4.01, XHTML 1.x

This technique relates to:

Description

The objective of this technique is to provide a brief overview of how data has been organized into a table or a brief explanation of how to navigate the table. The summary attribute of the table element makes this information available to people who use screen readers; the information is not displayed visually.

The summary is useful when the table has a complex structure (for example, when there are several sets of row or column headers, or when there are multiple groups of columns or rows). The summary may also be helpful for simple data tables that contain many columns or rows of data.

The summary attribute may be used whether or not the table includes a caption element. If both are used, the summary should not duplicate the caption.

Note: In HTML5 the summary attribute is obsolete. Assistive technologies may or may not continue to support the attribute. Authors should consider alternatives and only use with caution.

Note: Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. However, if a layout table is used, then the summary attribute is not used or is null. The purpose of a layout table is simply to control the placement of content; the table itself is “transparent" to the user. A summary would “break" this transparency by calling attention to the table. A null summary (summary="") on layout tables is acceptable. See F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables for details.

Examples

Example 1: A data table with a summary but no caption

This example shows a bus schedule. The route number and direction are included in the summary along with information on how to use the schedule.

Example Code:

<table summary="Schedule for Route 7 going downtown. Service begins 
at 4:00 AM and ends at midnight. Intersections are listed in the top row. 
Find the intersection closest to your starting point or destination, then read 
down that column to find out what time the bus leaves that intersection.">
  <tr>
    <th scope="col">State & First</th>
    <th scope="col">State & Sixth</th>
    <th scope="col">State & Fifteenth</th>
    <th scope="col">Fifteenth & Morrison</th>
  </tr>
  <tr>
    <td>4:00</td>
    <td>4:05</td>
    <td>4:11</td>
    <td>4:19</td>
  </tr>
  …
</table>  
Example 2: A data table with both a summary and a caption

In this example both a summary attribute and a caption element are used. The caption identifies the bus route. The summary helps users who are blind understand how to use the schedule. Screen readers read the caption, followed by the summary.

Example Code:

<table summary="Intersections are listed in row 1. 
Find the intersection closest to your starting point 
or destination, then read down that column to find 
out what time the bus leaves that intersection.  
Service begins at 4:00 AM and ends at midnight.">
  <caption>Route 7 Downtown (Weekdays)</caption>
…
</table>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each data table:

  1. If a summary is present, check that the summary attribute describes the table's organization or explains how to use the table

  2. If both a summary attribute and a caption element are present for the data table, check that the summary does not duplicate the caption.

Expected Results
  • #1 and #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H74: Ensuring that opening and closing tags are used according to specification

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to avoid key errors that are known to cause problems for assistive technologies when they are trying to parse content which involve having opening and closing tags that are not used according to specification. These errors can be avoided by using the HTML or XHTML mechanism to specify the technology and technology version, and making sure the Web page does not have these types of errors in it. There are several validators that the developer can use: validation reports generally mention these types of errors. This technique deals only with errors related to incorrectly formed opening and closing tags. The document type declaration is not strictly necessary for this type of evaluation, but specifying the document type declaration makes it easier to use a validator.

Examples

Example 1: HTML

HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that all id attribute values are unique and that opening and closing tags are used according to the specification.

Note: The specification for which tags require closing elements has changed with the introduction of HTML5.

Example 2: XHTML

Like other other XML-based documents, XHTML documents reference a Document Type Definition (DTD) or other type of XML schema. The developer can use online or offline validators (including validation tools built into editors) to check that opening and closing tags are used according to the specification.

Example 3: Using test frameworks

When a Website generates HTML or XHTML dynamically instead of serving only static pages, a developer can use XHTMLUnit, XML Test Suite or a similar framework to test the generated XHTML code.

Resources

Resources are for information purposes only, no endorsement implied.

For other resources, see G134: Validating Web pages.

(none currently listed)

Tests

Procedure
  1. Check that there are closing tags for all elements with required closing tags.

  2. Check that there are no closing tags for all elements where closing tags are forbidden.

  3. Check that opening and closing tags for all elements are correctly nested.

Expected Results

Steps 1, 2, and 3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H75: Ensuring that Web pages are well-formed

Applicability

Any XML-based markup languages.

This technique relates to:

Description

The objective of this technique is to avoid key errors that are known to cause problems for assistive technologies when they are trying to parse contents. Well-formedness is checked by parsing the document with a conforming XML parser and checking if the validation report mentions well-formedness errors. Every conforming XML parser is required to check well-formedness and stop normal processing when a well-formedness error is found (a conforming XML parser does not need to support validation).

Examples

Example 1:

XML files include a document type declaration, a xsi:schemaLocation attribute or other type of reference to a schema. The developer can use off-line or online validators, an XML editor or an IDE with XML support (see Resources below) to check well-formedness.

Example 2:

When XML files do not include a document type declaration, a xsi:schemaLocation attribute or a processing instruction referencing a schema even though there is a schema for them, the relevant schema is specified by a command line instruction, a user dialog or a configuration file, and the XML files are checked against the schema.

Example 3:

When XML files do not include a document type declaration, a xsi:schemaLocation attribute or a processing instruction referencing a schema even though there is a schema for them, the namespace is dereferenced to retrieve a schema document or resource directory (Resource Directory Description Language: RDDL), and the XML files are checked against the schema.

Example 4:

When a Website generates XML dynamically instead of serving only static documents, a developer can use XMLUnit, XML Test Suite or a similar framework to test the generated XML code.

Resources

Resources are for information purposes only, no endorsement implied.

For other resources, see G134: Validating Web pages.

(none currently listed)

Tests

Procedure
  1. Load each file into a validating XML parser.

  2. Check that there are no well-formedness errors.

Expected Results

Step 2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H76: Using meta refresh to create an instant client-side redirect

Applicability

HTML and XHTML

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) ), but authors do not always have control over server-side technologies.

In HTML and XHTML, one can use the meta element with the value of the http-equiv attribute set to "Refresh" and the value of the content attribute set to "0" (meaning zero seconds), followed by the URI that the browser should request. It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. The page containing the redirect code should only contain information related to the redirect.

Examples

Example 1

Example Code:

 <html xmlns="http://www.w3.org/1999/xhtml">    
  <head>      
    <title>The Tudors</title>      
    <meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />    
  </head>    
  <body> 
    <p>This page has moved to a <a href="http://thetudors.example.com/">
      theTudors.example.com</a>.</p> 
  </body>  
</html>     

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Find all meta elements in the document.

  2. For each meta element, check if it contains the attribute http-equiv with value "refresh" (case-insensitive) and the content attribute with a number greater than 0 followed by ;'URL=anyURL' (where anyURL stands for the URI that should replace the current page).

Expected Results

Step 2 is false.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H77: Identifying the purpose of a link using link text combined with its enclosing list item

Applicability

All technologies that contain links.

This technique relates to:

Description

The objective of this technique is to identify the purpose of a link from the link and its list item context. The list item enclosing the link provides context for an otherwise unclear link when the list item is the nearest enclosing block-level ancestor element. 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

Example Code:

<ul>
  <li>
    Check out the video report for last year's 
    <a href="festival.htm">National Folk Festival</a>.
  </li>
  <li>
    <a href="listen.htm">Listen to the instruments</a>
  </li>
  <li>
    Guitar Man: George Golden talks about 
    <a href="mkguitars.htm">making guitars</a>.
  </li>
</ul>
Example 2: A list of video games for download

Example Code:

<ul>
  <li>
    <a href="tomb_raider.htm">Tomb Raider: Legend</a>
    <a href="tomb_raider_images.htm">See Images</a>
    <a href="tomb_raider.mpeg">(Download Demo)</a>
  </li>
  <li>
    <a href="fear_extraction.htm">F.E.A.R. Extraction Point</a>
    <a href="fear_extraction_images.htm">See Images</a>
    <a href="fear_extraction.mpeg">(Download Demo)</a>
  </li>
  <li>
    <a href="call_of_duty.htm">Call of Duty 2</a>
    <a href="call_of_duty_images.htm">See Images</a>
    <a href="call_of_duty.mpeg">(Download Demo)</a>
  </li>
  <li>
    <a href="Warhammer 40K.htm">Warhammer 40K</a>
    <a href="warhammer_40k_images.htm">See Images</a>
    <a href="Warhammer_40k.mpeg">(Download Demo)</a>
  </li>
</ul>   

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 list item.

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

Expected Results
  • The above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H78: Identifying the purpose of a link using link text combined with its enclosing paragraph

Applicability

All technologies that contain links.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H78.

Description

The objective of this technique is to identify the purpose of a link from the link in its paragraph context. The paragraph enclosing the link provides context for an otherwise unclear link when the paragraph is the nearest enclosing block-level ancestor element. 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

Announcements column on a Folk Festival Web page.

Example Code:

<h3>The final 15</h3>
<p>Coming soon to a town near you...the final 15 in the 
National Folk Festival lineup.
<a href="final15.html">[Read more...]</a>
</p>

<h3>Folk artists get awards</h3>
<p>Performers from the upcoming National Folk Festival receive 
 National Heritage Fellowships. 
 <a href="nheritage.html">[Read more...]</a>
</p>
…   

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

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

Expected Results
  • The above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells

Applicability

All technologies that contain links.

This technique relates to:

Description

The objective of this technique is to identify the purpose of a link from the link in its data table context. This context is the table cell enclosing the link and the cell's associated table header cells. The data table context provides the purpose for an otherwise unclear link when the table cell is the nearest enclosing block-level ancestor element. It lets a user distinguish this link from other 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 not sufficiently descriptive for people with disabilities, especially those with cognitive disabilities.

Examples

Example 1: A table of rental car choices

Example Code:

 <table>
<tr>
  <th></th>
  <th scope="col">Alamo</th>
  <th scope="col">Budget</th>
  <th scope="col">National</th>
  <th scope="col">Avis</th>
  <th scope="col">Hertz</th>
</tr>
<tr>
  <th scope="row">Economy cars</th>
  <td><a href="econ_ala.htm">$67/day</a></td>
  <td><a href="econ_bud.htm">$68/day</a></td>
  <td><a href="econ_nat.htm">$72/day</a></td>
  <td><a href="econ_av.htm">$74/day</a></td>
  <td><a href="econ_hz.htm">$74/day</a></td>
</tr>
<tr>
  <th scope="row">Compact cars</th>
  <td><a href="comp_ala.htm">$68/day</a></td>
  <td><a href="comp_bud.htm">$69/day</a></td>
  <td><a href="comp_nat.htm">$74/day</a></td>
  <td><a href="comp_av.htm">$76/day</a></td>
  <td><a href="comp_hz.htm">$76/day</a></td>
</tr>
<tr>
  <th scope="row">Mid-sized cars</th>
  <td><a href="mid_ala.htm">$79/day</a></td>
  <td><a href="mid_bud.htm">$80/day</a></td>
  <td><a href="mid_nat.htm">$83/day</a></td>
  <td><a href="mid_av.htm">$85/day</a></td>
  <td><a href="mid_hz.htm">$85/day</a></td>
</tr>
<tr>
  <th scope="row">Full-sized cars</th>
  <td><a href="full_ala.htm">$82/day</a></td>
  <td><a href="full_bud.htm">$83/day</a></td>
  <td><a href="full_nat.htm">$89/day</a></td>
  <td><a href="full_av.htm">$91/day</a></td>
  <td><a href="full_hz.htm">$91/day</a></td>
</tr>
</table>  

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 in a table cell.

  2. Check that text of the link combined with the text of the associated table header cells describes the purpose of the link.

Expected Results
  • The above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H80: Identifying the purpose of a link using link text combined with the preceding heading element

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H80.

Description

The objective of this technique is to describe the purpose of a link from the context provided by its heading context. The preceding heading 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: Whenever possible, provide link text that identifies the purpose of the link without needing additional context.

Examples

Example 1: Blocks of information on hotels

The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.

Example Code:

<h2><a href="royal_palm_hotel.html">Royal Palm Hotel</a></h2>
  <ul class="horizontal">
    <li><a href="royal_palm_hotel_map.html">Map</a></li>
    <li><a href="royal_palm_hotel_photos.html">Photos</a></li>
    <li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
    <li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
    <li><a href="royal_palm_hotel_book.html">Book now</a></li>
  </ul>

<h2><a href="hotel_three_rivers.html">Hotel Three Rivers</a></h2>
  <ul class="horizontal">
    <li><a href="hotel_three_rivers_map.html">Map</a></li>
    <li><a href="hotel_three_rivers_photos.html">Photos</a></li>
    <li><a href="hotel_three_rivers_directions.html">Directions</a></li>
    <li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
    <li><a href="hotel_three_rivers_book.html">Book now</a></li>
  </ul>     
Example 2: A document provided in three formats

Example Code:

<h2>Annual Report 2006-2007</h2>
<p> 
  <a href="annrep0607.html">(HTML)</a>&nbsp;
  <a href="annrep0607.pdf">(PDF)</a>&nbsp;
  <a href="annrep0607.rtf">(RTF)</a>
</p>       
Example 3: Newspaper Web site

Example Code:

<h2><a href="Stockmarket_05052007.htm>Stock market soars as bullishness prevails</a></h2>
<p>this week was a stellar week for the stock market as investing in gold rose 2%. 
<a href="Stockmarket_05052007.htm>More here</a></p>     

Resources

No resources available for this technique.

Tests

Procedure

For each link in the content that uses this technique:

  1. Find the heading element that precedes the link

  2. Check that the text of the link combined with the text of that heading describes the purpose of the link.

Expected Results
  • #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H81.

Description

The objective of this technique is to describe the purpose of a link in a nested list from the context provided by the list item under which the list is nested. This list item 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.

Because current assistive technologies do not include commands to query contextual information provided by parent list items, use of this technique requires users to navigate the list one item at a time. Therefore, this technique may not be appropriate for very long or deeply nested lists.

Note: Whenever possible, provide link text that identifies the purpose of the link without needing additional context.

Examples

Example 1: A document provided in three formats

Example Code:

<ul>
<li>Annual Report 2005-2006
  <ul> 
  <li><a href="annrep0506.html">(HTML)</a></li>
  <li><a href="annrep0506.pdf">(PDF)</a></li>
  <li><a href="annrep0506.rtf">(RTF)</a></li>
  </ul>
</li>
<li>Annual Report 2006-2007
  <ul> 
  <li><a href="annrep0607.html">(HTML)</a></li>
  <li><a href="annrep0607.pdf">(PDF)</a></li>
  <li><a href="annrep0607.rtf">(RTF)</a></li>
  </ul>
</li>
</ul> 
Example 2: Blocks of information on hotels

The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.

Example Code:

<ul>
<li><a href="royal_palm_hotel.html">Royal Palm Hotel</a>
  <ul class="horizontal">
    <li><a href="royal_palm_hotel_map.html">Map</a></li>
    <li><a href="royal_palm_hotel_photos.html">Photos</a></li>
    <li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
    <li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
    <li><a href="royal_palm_hotel_book.html">Book now</a></li>
  </ul>
</li>
<li><a href="hotel_three_rivers.html">Hotel Three Rivers</a>
  <ul class="horizontal">
    <li><a href="hotel_three_rivers_map.html">Map</a></li>
    <li><a href="hotel_three_rivers_photos.html">Photos</a></li>
    <li><a href="hotel_three_rivers_directions.html">Directions</a></li>
    <li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
    <li><a href="hotel_three_rivers_book.html">Book now</a></li>
  </ul>
</li>
</ul> 

Resources

No resources available for this technique.

Tests

Procedure

For each link in the content that uses this technique:

  1. Find the ul or ol element that contains the link

  2. Check that this list element (ul, ol) is a descendant of an li element

  3. Check that the text of the link combined with the text of that li element describes the purpose of the link.

Expected Results
  • The above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H83: Using the target attribute to open a new window on user request and indicating this in link text

Applicability

HTML5, HTML 4.01 Transitional, and XHTML 1.0 Transitional

This technique relates to:

Description

The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient users or be missed completely by some. In HTML5, HTML 4.01 Transitional, and XHTML 1.0 Transitional, the target attribute can be used to open a new window, instead of automatic pop-ups. (The target attribute is deleted from HTML 4.01 Strict and XHTML 1.0 Strict.) Note that not using the target allows the user to decide whether a new window should be opened or not. Use of the target attribute provides an unambiguously machine-readable indication that a new window will open. User agents can inform the user, and can also be configured not to open the new window. For those not using assistive technology, the indication would also be available from the link text.

Examples

Example 1

The following example illustrates the use of the target attribute in a link that indicates it will open in a new window.

Example Code:

<a href="help.html" target="_blank">Show Help (opens new window)</a>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Activate each link in the document to check if it opens a new window.

  2. For each link that opens a new window, check that it uses the target attribute.

  3. Check that the link text contains information indicating that the link will open in a new window.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H84: Using a button with a select element to perform an action

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to allow the user to control when an action is performed, rather than having the action occur as a side effect of choosing a value for the select element. The user may inspect the different values of the select element, or may accidentally choose the wrong value, without causing the action to occur. When the user is satisfied with their choice, they select the button to perform the action.

This is particularly important for users who are choosing the value of the select element via the keyboard, since navigating through the options of the select element changes the value of the control.

Examples

Example 1: A Calendar

A Web page lets the user choose any month of any year and display the calendar for that month. After the user has set the month and year, he displays the calendar by pressing the "Show" button. This example relies on client-side scripting to implement the action.

Example Code:


<label for="month">Month:</label>
<select name="month" id="month">
  <option value="1">January</option>
  <option value="2"> February</option>
  ...
  <option value="12">December</option>
</select> 
<label for="year">Year:</label>
<input type="text" name="year" id="year">
<input type="button" value="Show" onclick = "...">
Example 2: Choosing an action

A select element contains a list of possible actions. The action is not performed until the user presses the "Do it" button.

Example Code:


<form action="http://somesite.com/action" method="post">
  <label for="action">Options:</label>
  <select name="action" id="action">
    <option value="help">Help</option>
    <option value="reset">Reset</option>
    <option value="submit">Submit</option>
  </select> 
  <button type="submit" name="submit" value="submit">Do It </button>
</form>              

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each select element/button element combination:

  1. Check that focus (including keyboard focus) on an option in the select element does not result in any actions

  2. Check that selecting the button performs the action associated with the current select value

Expected Results
  • All checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H85: Using OPTGROUP to group OPTION elements inside a SELECT

Applicability

HTML and XHTML pages that collect user input.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H85.

Description

The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than simply delimiting the groups with "dummy" list entries. This allows user agents to collapse the options by group to support quicker skimming of the options, and to indicate in what group an option of interest is located. It also helps to visually break up long lists so that users can more easily locate the option(s) they are interested in.

In HTML, the select element is used to create both multi-select lists and combo boxes. The various allowed options are each indicated with option elements. To group options together, use the optgroup element, with the related option elements inside that element. Label the group with the "label" attribute so users will know what to expect inside the group.

The optgroup element should be directly inside the select element, and the option elements directly inside the optgroup. It is possible for a select element to contain both single option elements and optgroup groups, though authors should consider if this is in fact the desired intent when using this. It is not possible to nest the optgroup element, so only one level of grouping can be done within a select.

If grouping information is essential to understanding the list, authors may define option labels that can be understood even when the screen reader does not present the grouping information provided by optgroup.

Examples

Example 1

The following combo box collects data about favorite foods. Grouping by type allows users to select their preference more quickly.

Example Code:


<form action="http://example.com/prog/someprog" method="post">
    <label for="food">What is your favorite food?</label>
    <select id="food" name="food">
      <optgroup label="Fruits">
        <option value="1">Apples</option>
        <option value="3">Bananas</option>
        <option value="4">Peaches</option>
        <option value="5">...</option>
      </optgroup>
      <optgroup label="Vegetables">
        <option value="2">Carrots</option>
        <option value="6">Cucumbers</option>
       <option value="7">...</option>
     </optgroup>
     <optgroup label="Baked Goods">
       <option value="8">Apple Pie</option>
       <option value="9">Chocolate Cake</option>
       <option value="10">...</option>
     </optgroup>
   </select>
</form>              
Example 2

The following example shows how a multi-select box can make use of the optrgroup element.

Example Code:


<form action="http://example.com/prog/someprog" method="post">
    <label for="related_techniques"><strong>Related Techniques:</strong></label>
    <select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
  <optgroup label="General Techniques">
    <option value="G1">G1: Adding a link at the top of each page ... </option>
    <option value="G4">G4: Allowing the content to be paused and restarted ... </option>
    <option value="G5">G5: Allowing users to complete an activity without any time... </option>
    <option value="G8">G8: Creating an extended audio description for the ... </option>
    <option value="G9">G9: Creating captions for live synchronized media... </option>
    <option value="G10">G10: Creating components using a technology that ... </option>
  </optgroup>
  <optgroup label="HTML Techniques">
    <option value="H2">H2: Combining adjacent image and text links for the same ... </option>
    <option value="H4">H4: Creating a logical tab order through links, form ... </option>
    <option value="H24">H24: Providing text alternatives for the area ... </option>
  </optgroup>
  <optgroup label="CSS Techniques">
    <option value="C6">C6: Positioning content based on structural markup... </option>
    <option value="C7">C7: Using CSS to hide a portion of the link text... </option>
  </optgroup>
  <optgroup label="SMIL Techniques">
    <option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
    <option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
    <option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
  </optgroup>
  <optgroup label="ARIA Techniques">
    <option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
    <option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
    <option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
  </optgroup>
  <optgroup label="Common Failures">
    <option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
    <option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
    <option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images  ... </option>
    <option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
  </optgroup>
</select>
</form>              

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check the set of options within a selection list to see if there are groups of related options.

  2. If there are groups of related options, they should be grouped with optgroup.

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H86: Providing text alternatives for ASCII art, emoticons, and leetspeak

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H86.

Description

Before graphics became widely used on the internet, ASCII characters were often arranged to form pictures or graphs. Although ASCII art is not used frequently on the Web anymore, it must be remembered that, when it is used, it is very confusing to people who are blind and accessing the internet using screen readers. If it is used it should also have a text explanation of what the picture is. It is also suggested that there be a link to skip over the ASCII art (although this is not required).

Emoticons are very popular. They include ASCII characters that form facial expressions and other ways to communicate an emotion. They can be confusing for screen reader users. When possible it is better simply to use a word like "smile" instead of an emoticon. But if emoticons are used they should have a text alternative. In some contexts, blog and forum software for example, plug-ins are available that automatically convert ASCII characters used as emoticons into HTML images with text alternatives.

Leetspeak uses various combinations of characters, including numerals and special characters, to replace standard characters. Leet has become a part of Internet culture and slang. Leet is frequently used to beat text and spam filters. It is often incomprehensible to blind people using screen readers, and therefore requires a text alternative in order to conform to Success Criteria 1.1.1.

Note: Because support for this technique is limited, it is recommended that authors provide the text alternative in text.

Examples

Example 1

The following shows three options for providing alternatives for an emoticon representing "fright," which is made out of an equal sign followed by the number eight, a hyphen and the number zero.

Example Code:


=8-0 (fright)

<abbr title="fright">=8-0</abbr>

<img src="fright.gif" alt="fright"/>
             
Example 2

Here is ASCII art with an explanation of the picture preceding it. It includes a link to skip over the ASCII art. Skip ASCII example.

Example Code:


 Figure 1: ASCII art picture of a butterfly. 
 <a href="#skipbutterfly">Skip ASCII image</a>
                                 
                                                                LLLLLLLLLLL
                                                            __LLLLLLLLLLLLLL
                                                           LLLLLLLLLLLLLLLLL
                                                         _LLLLLLLLLLLLLLLLLL
                                                        LLLLLLLLLLLLLLLLLLLL
                                                      _LLLLLLLLLLLLLLLLLLLLL
                                                      LLLLLLLLLLLLLLLLLLLLLL
                                              L     _LLLLLLLLLLLLLLLLLLLLLLL
                                             LL     LLLLLL~~~LLLLLLLLLLLLLL
                                            _L    _LLLLL      LLLLLLLLLLLLL
                                            L~    LLL~        LLLLLLLLLLLLL
                                           LL   _LLL        _LL   LLLLLLLL
                                          LL    LL~         ~~     ~LLLLLL
                                          L   _LLL_LLLL___         _LLLLLL
                                         LL  LLLLLLLLLLLLLL      LLLLLLLL
                                         L  LLLLLLLLLLLLLLL        LLLLLL
                                        LL LLLLLLLLLLLLLLLL        LLLLL~
                  LLLLLLLL_______       L _LLLLLLLLLLLLLLLL     LLLLLLLL
                         ~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~       LLLLLL
                       ______________LLL  LLLLLLLLLLLLLL ______LLLLLLLLL_
                   LLLLLLLLLLLLLLLLLLLL  LLLLLLLL~~LLLLLLL~~~~~~   ~LLLLLL
             ___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____       _LLLLLL_
          LLLLLLLLLLL~~   LLLLLLLLLLLLLLL   LLLLLLLLLLLLLLLLLL     ~~~LLLLL
      __LLLLLLLLLLL     _LLLLLLLLLLLLLLLLL_  LLLLLLLLLLLLLLLLLL_       LLLLL
     LLLLLLLLLLL~       LLLLLLLLLLLLLLLLLLL   ~L ~~LLLLLLLLLLLLL      LLLLLL
   _LLLLLLLLLLLL       LLLLLLLLLLLLLLLLLLLLL_  LL      LLLLLLLLL   LLLLLLLLL
  LLLLLLLLLLLLL        LLLLLLLLLLLLL~LLLLLL~L   LL       ~~~~~       ~LLLLLL
 LLLLLLLLLLLLLLL__L    LLLLLLLLLLLL_LLLLLLL LL_  LL_            _     LLLLLL
LLLLLLLLLLLLLLLLL~     ~LLLLLLLL~~LLLLLLLL   ~L  ~LLLL          ~L   LLLLLL~
LLLLLLLLLLLLLLLL               _LLLLLLLLLL    LL  LLLLLLL___     LLLLLLLLLL
LLLLLLLLLLLLLLLL              LL~LLLLLLLL~     LL  LLLLLLLLLLLL   LLLLLLL~
LLLLLLLLLLLLLLLL_  __L       _L  LLLLLLLL      LLL_ LLLLLLLLLLLLLLLLLLLLL
 LLLLLLLLLLLLLLLLLLLL        L~  LLLLLLLL      LLLLLLL~LLLLLLLLLLLLLLLL~
  LLLLLLLLLLLLLLLLLLLL___L_ LL   LLLLLLL       LLLL     LLLLLLLLLLLLLL
   ~~LLLLLLLLLLLLLLLLLLLLLLLL     LLLLL~      LLLLL        ~~~~~~~~~
           LLLLLLLLLLLLLLLLLL_ _   LLL       _LLLLL
               ~~~~~~LLLLLLLLLL~             LLLLLL
                         LLLLL              _LLLLLL
                         LLLLL    L     L   LLLLLLL
                          LLLLL__LL    _L__LLLLLLLL
                          LLLLLLLLLL  LLLLLLLLLLLL
                           LLLLLLLLLLLLLLLLLLLLLL
                            ~LLLLLLLLLLLLLLLLL~~
                               LLLLLLLLLLLLL
                                 ~~~~~~~~~
<a name="skipbutterfly"></a>            
Example 3

The following is Leetspeak for "Austin Rocks".

Example Code:


<abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>             

Tests

Procedure
  1. Open the page in a common browser.

  2. Check to see that the content contains ASCII art, emoticons and/or leetspeak.

  3. Check that there is a text alternative immediately before or after all ASCII art, emoticons and/or Leetspeak.

Expected Results
  • Test procedure #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H88: Using HTML according to spec

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to use HTML and XHTML according to their respective specifications. Technology specifications define the meaning and proper handling of features of the technology. Using those features in the manner described by the specification ensures that user agents, including assistive technologies, will be able to present representations of the feature that are accurate to the author's intent and interoperable with each other.

At the time this technique was published, the appropriate versions of these technologies is HTML 4.01 and XHTML 1.0. HTML 4.01 is the latest mature version of HTML, which provides specific accessibility features and is widely supported by user agents. XHTML 1.0 provides the same features as HTML 4.01, except that it uses an XML structure, and has a more strict syntax than the HTML structure. Later versions of these technologies are not mature and / or are not widely supported by user agents at this time.

There are a few broad aspects to using HTML and XHTML according to their specification.

  1. Using only features that are defined in the specification HTML defines sets of elements, attributes, and attribute values that may be used on Web pages. These features have specific semantic meanings and are intended to be processed by user agents in particular ways. Sometimes, however, additional features come into common authoring practice. These are usually initially supported by only one user agent. When features not in the specification are used, many user agents may not support the feature for a while or ever. Furthermore, lacking standard specifications for the use of these features, different user agents may provide varying support. This impacts accessibility because assistive technologies, developed with fewer resources than mainstream user agents, may take a long time if ever to add useful support. Therefore, authors should avoid features not defined in HTML and XHTML to prevent unexpected accessibility problems.

  2. Using features in the manner prescribed by the specification The HTML specification provides specific guidance about how particular elements, attributes, and attribute values are to be processed and understood semantically. Sometimes, however, authors use features in a manner that is not supported by the specification, for example, using semantic elements to achieve visual effects without intending the underlying semantic message to be conveyed. This leads to confusion for user agents and assistive technologies that rely on correct semantic information to present a coherent representation of the page. It is important to use HTML features only as prescribed by the HTML specification.

  3. Making sure the content can be parsed HTML and XHTML also define how content should be encoded in order to be correctly processed by user agents. Rules about the structure of start and end tags, attributes and values, nesting of elements, etc. ensure that user agents will parse the content in a way to achieve the intended document representation. Following the structural rules in these specifications is an important part of using these technologies according to specification.

Resources

Resources are for information purposes only, no endorsement implied.

Refer to the resources section of G134: Validating Web pages.

Tests

Procedure

For each HTML or XHTML page:

  1. Check that the page uses only elements, attributes, and attribute values that are defined in the relevant specification.

  2. Check that elements, attributes, and values are used in the manner prescribed by the relevant specification.

  3. Check that the page can be parsed correctly, according to the rules of the relevant specification.

Note: Check #1 and #3 are most easily checked with page validation tools. Check #2 can be checked with the assistance of heuristic evaluation tools though manual judgment is usually required.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H89: Using the title attribute to provide context-sensitive help

Applicability

HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H89.

Description

The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a title attribute. The help may include format information or examples of input.

Note: Current user agents and assistive technologies do not always provide the information contained in the title attribute to users. Avoid using this technique in isolation until the title attribute has wide-spread support.

Examples

Example 1

A mapping application provides a form consisting of a label "Address:", an input box and a submit button with value "Find map". The input box has a title attribute value with an example of the address format the user should enter.

Example Code:


<label for="searchAddress">Address: </label>
<input id="searchAddress" type="text" size="30" value="" name="searchAddress" 
 title="Address example: 101 Collins St, Melbourne, Australia" />
             
Example 2

A form that allows users to pay their bill online requires the user to enter their account number. The input box associated with the "Account number" label has a title attribute providing information on locating the account number.

Example Code:


<label for="accNum1">Account number: </label>
<input id="accNum1" type="text" size="10" value="" title="Your account number 
 can be found in the top right-hand corner of your bill." />
             

Tests

Procedure
  1. Identify form controls that require text input.

  2. Check that each form control has an explicitly associated label

  3. Check that each form control has context-sensitive help provided in the title attribute.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H90: Indicating required form controls using label or legend

Applicability

HTML and XHTML controls that use external labels.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H90.

Description

The objective of this technique is to provide a clear indication that a specific form control in a Web application or form is required for successful data submission. A symbol or text indicating that the control is required is programmatically associated with the field by using the label element, or the legend for groups of controls associated via fieldset. If a symbol is used, the user is advised of its meaning before the first use.

Examples

Example 1: Using text to indicate required state

The text field in the example below has the explicit label of "First name (required):". The label element's for attribute matches the id attribute of the input element and the label text indicates that the control is required.

Example Code:


<label for="firstname">First name (required):</label> 
<input type="text" name="firstname" id="firstname" />

Note: Some authors abbreviate "required" to "req." but there is anecdotal evidence that suggests that this abbreviation is confusing.

Example 2: Using an asterisk to indicate required state

The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a abbr element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision.

Example Code:


CSS:
.req {font-size: 150%} 

HTML:

<p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label> 
<input type="text" name="firstname" id="firstname" />
Example 3: Using an image to indicate required state

The text field in the example below has an explicit label that includes an image to indicate the control is required. It is important that the image meaning is defined at the start of the form.

Example Code:


<p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label> 
<input type="text" name="firstname" id="firstname" />
...
Example 4: Indicating required state for groups of radio buttons or check box controls

Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the legend element instead of the label element.

Example Code:


<fieldset>
<legend>I am interested in the following (Required):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For each required form control, check that the required status is indicated in the form control's label or legend.

  2. For each indicator of required status that is not provided in text, check that the meaning of the indicator is explained before the form control that uses it.

Expected Results
  • All checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H91: Using HTML form controls and links

Applicability

HTML form controls and links

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for H91.

Description

The objective of this technique is to use standard HTML form controls and link elements to provide keyboard operation and assistive technology interoperability of interactive user interface elements.

User agents provide the keyboard operation of HTML form controls and links. In addition, the user agent maps the form controls and links to an accessibility API. Assistive technologies use the accessibility API to extract appropriate accessibility information, such as role, name, state, and value, and present them to users. The role is provided by the HTML element, and the name is provided by the text associated with that element. Elements for which values and states are appropriate also expose the values and states via multiple mechanisms.

In some cases, the text is already associated with the control through a required attribute. For example, submit buttons use the button element text or image 'alt' attribute as the name. In the case of form controls, label elements or 'title' attributes are used. The following table describes how the role, name, value, and state are determined for HTML links and form controls.

HTML element RoleName Value State
<a> link 'title' attribute, text within <a> element or 'alt' attribute if image link. Concatenated if both text and image 'alt' attribute are provided 'href' attribute
<button> push button text inside <button> element or 'title' attribute
<fieldset> grouping text inside <legend> element within fieldset element
<input type = "button", "submit", or "reset"> push button 'value' attribute
<input type = "image"> push button 'alt' attribute or 'title' attribute
<input type = "text"> editable text <label> element associated with it or 'title' attribute 'value' attribute
<input type = "password"> editable text <label> element associated with it or 'title' attribute value is purposefully hidden
<input type="file"> editable text <label> element associated with it or 'title' attribute 'value' attribute
<input type="checkbox"> checkbox <label> element associated with it or 'title' attribute 'checked' attribute
<input type="radio"> radio button <label> element associated with it or 'title' attribute 'checked' attribute
<select> list box <label> element associated with it or 'title' attribute <option> element with 'selected' attribute set to "selected"
<textarea> editable text <label> element associated with it or 'title' attribute text within <textarea> element

Examples

Example 1: Links

User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is "link" from the <a href>. Note that <a name> does not provide a role of "link". The value is the URI in the 'href' attribute.

Example 1a

In example 1a, the name is the text inside the link, in this case "Example Site".

Example Code:

<a href="www.example.com">Example Site</a>
                    
Example 1b

In example 1b of an image inside a link, the 'alt' attribute for the image provides the name. Some tools for viewing APIs, such as Microsoft Inspect Objects, will not surface this, but AT does.

Example Code:

<a href="www.example.com"><img src="example_logo.gif" alt="Example"></a>
                    
Example 1c

In example 1c, some assistive technology will not automatically insert a space character when concatenating the image's alt text and the text of the link. If the text should not be concatenated without a space, it is safest to insert a space between the image and the adjacent word so that words will not run together.

Example Code:

<a href="www.example.com"><img src="example_logo.gif" alt="Example"> Text</a>
Example 2: Buttons

There are several ways to create a button in HTML, and they all map to the "push button" role.

Example 2a

In example 2a, the text is contained in the button element, in this case "save", as the name. There is no value.

Example Code:

<button>Save</button>
                    
Example 2b

Example 2b uses the 'value' attribute, in this case "Save", "Submit", or "Reset" as the name.

Example Code:

<input type="button" value="Save" /> 
<input type="submit" value="Submit" />  
<input type="reset" value="Reset" />   
                    
Example 2c

Example 2c uses the 'alt' attribute, in this case "save", as the name.

Example Code:

<input type="image" src="save.gif" alt="save" /> 
                    
Example 2d

In example 2d, there is no 'alt' attribute so the 'title' attribute, in this case "save", is used as the name.

Example Code:

<input type="image" src="save.gif" title="save" />
                    
Example 2e

Example 2e clarifies how the user agent determines the name if the author specifies both the 'alt' and 'title' attributes of the input element. In this case, the user agent uses the 'alt' attribute ("Save") and ignores the 'title' attribute.

Example Code:

<input type="image" src="save.gif" alt="save" title="save the file" />
Example 3:
Example 3a

In example 3a, the input field has a role of "editable text". The label element is associated to the input element via the 'for' attribute which references the 'id' attribute of the input> element. The name comes from the label element, in this case, "Type of fruit". Its value comes from its value attribute, in this case "bananas".

Example Code:

<label for="text_1">Type of fruit</label>
<input id="text_1" type="text" value="bananas">
Example 3b

In example 3b, the input field has the same role as example 3a, but the value is the empty string and the field gets its name from the 'title' attribute.

Example Code:

<input id="text_1" type="text" title="Type of fruit">
Example 4: Checkbox

Example 4 has a role of "checkbox", from the 'type' attribute of the input element. The label element is associated with the input element via the 'for' attribute which refers to the 'id' attribute of the input element. The name comes from the label element, in this case "cheese". Its state can be "checked" or "unchecked" and comes from the 'checked' attribute. The state can be changed by the user's interaction with the control.

Example Code:

<label for="cb_1">Cheese</label> 
<input id="cb_1" type="checkbox" checked="checked">
                    
Example 5: Radio Buttons

Example 5 has a role of "radio button" from the 'type' attribute on the input element. Its name comes from the label element. The state can be "checked" or "unchecked" and comes from the 'checked' attribute. The state can be changed by the user.

Example Code:

<input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
<input type="radio" name="color" id="r3" /><label for="r3">Green</label>
                    
Example 6:
Example 6a

Example 6a has a role of "list box" from the select element. Its name is "Numbers" from the label element. Forgetting to give a name to the select is a common error. The value is the option element that has the 'selected' attribute present (with a value of "selected" in XHTML). In this case, the default value is "Two".

Example Code:

<label for="s1">Numbers</label>
<select id="s1" size="1">
 <option>One</option>
 <option selected="selected">Two</option>
 <option>Three</option>
</select>
                    
Example 6b

Example 6b has the same name, role, and value as the above, but sets the name with the 'title' attribute on the select element. This technique can be used when a visible label is not desirable.

Example Code:

<select id="s1" title="Numbers" size="1">
 <option>One</option>
 <option selected="selected">Two</option>
 <option>Three</option>
</select>
                    
Example 7: Textarea
Example 7a

Example 7a has a role of "editable text" from the textarea element. The name is "Type your speech here" from the label element. The value is the content inside the textarea element, in this case "Four score and seven years ago".

Example Code:

<label for="ta_1">Type your speech here</label>
<textarea id="ta_1" >Four score and seven years ago</textarea>
                    
Example 7b

Example 7b has the same role, the name is set using the 'title' attribute, and the value is the empty string.

Example Code:

<textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea>
                    
Example 8:
Radio Fieldset

The radio fieldset in example 8 has a role of "grouping". The name comes from the legend element.

Example Code:

<fieldset>
  <legend>Choose a Color:</legend> 
     <input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br /> 
     <input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br /> 
     <input id="green" type="radio" name="color" value="green" /><label for="green">Green</label> 
</fieldset>
                    

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Inspect the HTML source code.

  2. For each instance of links and form elements, check that the name, value, and state are specified as indicated in the table above.

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H93: Ensuring that id attributes are unique on a Web page

Applicability

All HTML pages

This technique relates to:

Description

The objective of this technique is to avoid key errors that are known to cause problems for assistive technologies when they are trying to parse content that has the same id attribute on different elements. These errors can be avoided by making sure the Web page does not have duplicate id values. This can be done manually or by using HTML's mechanism to specify the technology and technology version, and validating the document for this condition. There are several validators that the developer can use; validation reports generally mention this type of error. The document type declaration is not strictly necessary for this type of evaluation, but specifying the document type declaration makes it easier to use a validator.

Examples

Example 1: HTML Validators

HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that id attributes values are only used once on a page. The W3C validador, for example, will report ID "X already defined" when it encounters the second use of an id value.

Resources

Tests

Procedure
  1. Check that all id attribute values are unique on the web page.

Expected Results
  • Check 1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H94: Ensuring that elements do not contain duplicate attributes

Applicability

All HTML pages

This technique relates to:

Description

The objective of this technique is to avoid key errors that are known to cause problems for assistive technologies when they are trying to parse content that has duplicate attributes on the same element. This can be checked manually, or by using HTML's mechanism to specify the technology and technology version and validating the document for this condition. There are several validators that the developer can use; validation reports generally mention this type of error. The document type declaration is not strictly necessary for this type of evaluation, but specifying the document type declaration makes it easier to use a validator.

Examples

Example 1: HTML Validators

HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that attributes are only used once on an element. The W3C validador, for example, will report "duplicate specification of attribute X" when it encounters the second definition of the same attribute on an element.

Resources

Tests

Procedure
  1. Check that no attribute occurs more than once on any element

Expected Results
  • Check 1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H95: Using the track element to provide captions

Applicability

HTML5

This technique relates to:

Description

The objective of this technique is to use the HTML5 track element to specify a captions timed text track for a video element. Caption timed text tracks contain transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.

The src attribute of the track element is a URL that is the address of the text track data.

The kind attribute of the track element indicates the kind of information in the timed text. captions text tracks provide a text version of dialogue and other sounds important to understanding the video. Subtitles contain only the dialogue. If other audio information is important to understanding the video, a subtitle track will not be sufficient to meet the success criteria.

Note: Some regions use the term "subtitle" for any visible text representation of the audio track. An author may mark up a timed text track in the language of the audio track as kind=subtitles, instead of kind=captions, and may include additional relevant audio information. It is not best practice to use subtitles in this situation, since it may confuse users who are trying to find captions, but such a timed text track would meet the requirements of Success Criterion 1.2.2.

Examples

Example 1: Captions in one language

A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.

Example Code:


			 <video poster="myvideo.png" controls>
				 <source src="myvideo.mp4" srclang="en" type="video/mp4">
				 <track src="myvideo_en.vtt" kind="captions" srclang="en" label="English">
			  </video>
            
Example 2: Captions in multiple languages

A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.

Example Code:


			  <video poster="myvideo.png" controls>
				<source src="myvideo.mp4" srclang="en" type="video/mp4">
				<source src="myvideo.webm" srclang="fr" type="video/webm">
				<track src="myvideo_en.vtt" kind="captions" srclang="en" label="English">
				<track src="myvideo_fr.ttml" kind="captions" srclang="fr" label="French">
			  </video>            

Resources

Tests

Procedure

For each video element used to play a video:

  1. Check that the video contains a track element of kind captions in the language of the video.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H96: Using the track element to provide audio descriptions

Applicability

HTML5

This technique relates to:

Description

The objective of this technique is to use the HTML5 track element to specify a descriptions timed text track for a video element. Audio description timed text tracks contain textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable. The user agent makes the cues available to the user in a non-visual fashion, for instance, by synthesizing them into speech.

The src attribute of the track element is an URL providing the text track data.

The audio description cues must fit into the gaps available in the audio component of the media resource. If there is not enough time to synthesize the description text in the track cue's time interval, user agents may truncate the speech. This limits the amount of supplementary information that can be added.

User agents may also support extended audio descriptions by halting the video until the description has been completely synthesized, then restarting the video.

Examples

Example 1: Audio description in one language

A video element for a video in the English language. The audio descriptions are provided in the WebVTT format.

Example Code:


			 <video poster="myvideo.png" controls>
				<source src="myvideo.mp4" srclang="en" type="video/mp4">
				<track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English">
			  </video>
            
Example 2: Audio description in multiple languages

A video element for a video with both an English and French language source element, and with an English and a French audio description track using the WebVTT (vtt) file format.

Example Code:


			 <video poster="myvideo.png" controls>
				<source src="myvideo.mp4" srclang="en" type="video/mp4">
				<source src="myvideo.webm" srclang="fr" type="video/webm">
				<track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English">
				<track src="myvideo_fr.vtt" kind="descriptions" srclang="fr" label="French">
			  </video>            
Example 3: Captions in multiple languages

A video, "Google self-driving car". with an audio description track.

Example Code:


			<video controls tabindex="1">
				<source src="cdgQpa1pUUE.webm" type="video/webm">
				<source src="cdgQpa1pUUE.mp4" type="video/mp4">
				<track id="audesc" src="cdgQpa1pUUE.vtt" kind="descriptions" label="English descriptions" srclang="en-us"></track>
			</video>            

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each video element used to play a video:

  1. Check that the video contains a track element of kind descriptions in the language of the video.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


H97: Grouping related links using the nav element

Applicability

HTML5 documents that contain related links.

This technique relates to:

Description

The objective of this technique is to group navigation links using the HTML5 nav element. The nav element is one of several sectioning elements in HTML5. Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers. Using semantic structures allow custom style sheets to be used to change the presentation of groups of links while preserving their relationship. When the nav element is employed more than once on a page, distinguish the navigation groups by using an aria-label or aria-labelledby attribute.

Not all groups of links need to use the nav element for markup. For instance, links may be grouped in other structure such as lists or may use ARIA markup if they do not represent a discrete section of the page.

Examples

Example 1: Navigation links enclosed in a nav element

This example uses a nav element to group navigation links in an accessibility curriculum.

Example Code:


				 <nav>
				    <a href="../webaccessibility.html">Web Accessibility</a>
				    <a href="../docaccessibility.html">Document Accessibility</a>
					<a href="../mobileaccessibility.html">Mobile Accessibility</a>
				 </nav>
            
Example 2: Multiple nav elements

This example uses an nav element with an aria-label attribute to identify the navigation group when there is more than one nav element in a document.

Example Code:


			<nav aria-label="Site menu">
			  <ul>
				  <li>...a list of links site navigation link here ...</li>
			  </ul>
			</nav>
			...
			<article>
			  <nav aria-label="Related links">
				...a list of related links here ...
			  </nav>
			</article>          
Example 3: Generic multiple nav elements

The following example shows a best practice of situation where there are more than two navigation menus on the same page, and there is no existing text on the page that can be referenced as the label.

Example Code:


			<nav aria-label="primary">
				<a href="home.html">Home</a>
				<a href="about-us.html">About Us</a>
				<a href="products.html">Products</a>
			</nav>

			<nav aria-label="secondary">
				<a href="adverts.html">Our Advertisers</a>
				<a href="related.html">Related Links</a>
				<a href="subsidiaries.html">Subsidiaries</a>
			</nav>            

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that links that are visually grouped and represent a section of the page are enclosed in a nav element.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


3. CSS Techniques


C6: Positioning content based on structural markup

Applicability

All technologies that support CSS

This technique relates to:

Description

The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets while still maintaining a meaningful presentation when style sheets are not applied. Using the positioning properties of CSS2, content may be displayed at any position on the user's viewport. Using structural elements ensures that the meaning of the content can still be determined when styling is not available.

Examples

Example 1

In this example structural markup (definition lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to 0 to override the default behavior of user agents to display HTML definition lists with the DD element indented.

Here is the content to be displayed:

Example Code:


 <div class="box">
  <dl>
    <dt class="menu1">Products</dt>
    <dd class="item1">Telephones</dd>
    <dd class="item2">Computers</dd>
    <dd class="item3">Portable MP3 Players</dd>
    <dt class="menu2">Locations</dt>
    <dd class="item4">Idaho</dd>
    <dd class="item5">Wisconsin</dd>
    </dt>
  </dl>
 </div>

Here is the CSS which positions and styles the above elements:

Example Code:


 .item1 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item2 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .item3 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 9em;
 }
 .item4 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item5 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .menu1 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 0;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 .menu2 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 10em;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 #box {
   left: 5em;
   position: absolute;
   top: 5em;
 }

When style sheets are applied, the data are displayed in two columns of "Products" and "Locations." When the style sheets are not applied, the text appears in a definition list which maintains the structure and reading order.

Tests

Procedure

For content which uses CSS for positioning

  1. Remove the style information from the document or turn off use of style sheets in the user agent.

  2. Check that the structural relations and the meaning of the content are preserved.

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C7: Using CSS to hide a portion of the link text

Applicability

All technologies that support CSS .

This technique relates to:

Description

The objective of this technique is to supplement the link text by adding additional text that describes the unique function of the link and styling the additional text so that it is not rendered on the screen by user agents that support CSS. When information in the surrounding context is needed to interpret the displayed link text, this technique provides a complete description of the link's input function while permitting the less complete text to be displayed.

This technique works by creating a CSS selector to target text that is to be hidden. The rule set for the selector places the text to be hidden in a 1-pixel box with overflow hidden, and positions the text outside of the viewport. This ensures the text does not display on screen but remains accessible to assistive technologies such as screen readers and braille displays. Note that the technique does not use visibility:hidden or display:none properties, since these can have the unintentional effect of hiding the text from assistive technology in addition to preventing on-screen display.

Note 1: This technique to hide link text has been advocated by some screen reader users and corporate Web authors. It has proved effective on some Web sites. Other screen reader users and accessibility experts don't recommend this as a general technique because the results can be overly chatty and constrain the ability of the experienced screen reader user to control the verbosity. The working group believes the technique can be useful for Web pages that do not have repetitive content in the hidden text areas.

Note 2: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version and Understanding Conforming Alternate Versions for more information.

Examples

The following examples use the CSS selector and rule set below:

a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }
Example 1

This example describes a news site that has a series of short synopsis of stories followed by a link that says "full story". Hidden link text describes the purpose of the link.

Example Code:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> 
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text</title>
</head>
<body> 
<p>Washington has announced plans to stimulate economic growth.
  <a href="#"> <span>Washington stimulates economic growth </span>
  Full Story</a></p>
</body>
</html>
Example 2

This example describes a resource that has electronic books in different formats. The title of each book is followed by links that say "HTML" and "PDF." Hidden text describes the purpose of each link.

Example Code:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> 
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text </title>
</head>
<body>
<dl>
<dt>Winnie the Pooh </dt>
   <dd><a href="winnie_the_pooh.html">
      <span>Winnie the Pooh </span>HTML</a></dd>
   <dd><a href="winnie_the_pooh.pdf">
         <span>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
    <dd><a href="war_and_peace.html">
      <span>War and Peace </span>HTML</a></dd> 
    <dd><a href="war_and_peace.pdf">
      <span>War and Peace </span>PDF</a></dd>
</dl>
</body>
</html>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each anchor element using this technique:

  1. Check that an element has been defined that confines its display to a pixel and positions text outside the display with overflow hidden

  2. Check that the element of that class is included in the content of the anchor

  3. Check that the combined content of the anchor describes the purpose of the link

Expected Results
  • All checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C8: Using CSS letter-spacing to control spacing within a word

Applicability

All technologies that support CSS.

This technique relates to:

Description

The objective of this technique is to demonstrate how the visual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing. The CSS letter-spacing property helps developers control the amount of white space between characters. This is recommended over adding blank characters to control the spacing, since the blank characters can change the meaning and pronunciation of the word.

Examples

Example 1: Separating characters in a word

The following CSS would add the equivalent of a space between each character in a level-2 heading:

Example Code:

h2 {	letter-spacing: 1em; }

So for the markup:

Example Code:


<h2>Museum</h2>

the rendered result might look something like:

Example Code:


M u s e u m

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each word that appears to have non-standard spacing between characters:

  1. Check whether the CSS letter-spacing property was used to control spacing.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C9: Using CSS to include decorative images

Applicability

Any technology that can use CSS to include images.

This technique relates to:

Description

The objective of this technique is to provide a mechanism to add purely decorative images and images used for visual formatting to Web content without requiring additional markup within the content. This makes it possible for assistive technologies to ignore the non-text content. Some user agents can ignore or turn off CSS at the user's request, so that background images included with CSS simply "disappear" and do not interfere with display settings such as enlarged fonts or high contrast settings.

Background images can be included with the following CSS properties:

  • background,

  • background-image,

  • content, combined with the :before and :after pseudo-elements,

  • list-style-image.

Note: This technique is not appropriate for any image that conveys information or provides functionality, or for any image primarily intended to create a specific sensory experience.

Examples

Example 1: Background image for an HTML page

The stylesheet for a Web page specifies a background image for the whole page.

Example Code:

…
  <style type="text/css">
    body { background: #ffe url('/images/home-bg.jpg') repeat; }
  </style>
</head>
<body>
...
Example 2: Background image with CSS for image rollovers

The stylesheet for a Web page uses the CSS background property to create a decorative rollover effects when a user hovers the mouse pointer over a link.

Example Code:

a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
  text-decoration: none;
}
Example 3: Background images with CSS to create rounded corners on tabs or other elements

The styleseet for a Web page uses the CSS background property to create rounded corners on elements.

Example Code:

…
  <style type="text/css">
    div#theComments { width:600px; }
    div.aComment { background: url('images/middle.gif') repeat-y left top; 
    margin:0 0 30px 0; }
    div.aComment blockquote { background: url('images/top.gif') no-repeat left top; 
    margin:0; padding:8px 16px; }
    div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top; 
    margin:0; padding-top:30px; }
  </style>
</head>
<body>
  <div id="theComments">
    <div class="aComment">
      <blockquote>
        <p>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
      </blockquote>
      <div class="submitter">
        <cite><a href="http://example.com/">anonymous coward</a> from Elbonia</cite>
      </div>
    </div>
    <div class="aComment">
…
 </div>
</div>
…

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check for the presence of decorative images

  2. Check that they are included with CSS

Expected Results
  • If #1 is true, then #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C12: Using percent for font sizes

Applicability

CSS

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for C12.

Description

The objective of this technique is to specify text font size proportionally so that user agents can scale content effectively. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.

Examples

Example 1: Percent font sizes in CSS

This example defines the font size for the strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.

Example Code:


strong {font-size: 120%}

...

<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him, 
it is <strong>very</strong> important to let him configure the text size.  
…

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that the value of the CSS property that defines the font size is a percentage.

Expected Results
  • Check #1 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C13: Using named font sizes

Applicability

CSS

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for C13.

Description

The objective of this technique is to specify a named font size that expresses the relative font size desired. These values provide hints so that the user agent can choose a font-size relative to the inherited font-size.

Examples

Example 1: Named font sizes in CSS

This example selects a larger font size for strong elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.

Example Code:


strong {font-size: larger}

...

<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him, 
it is <strong>very</strong> important to let him configure the text size.  
…

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that the value of the CSS property that defines the font size is one of xx-small, xx-small, x-small, small, medium, large, x-large, xx-large, xsmaller, or larger.

Expected Results
  • Check #1 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C14: Using em units for font sizes

Applicability

CSS

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for C14.

Description

The objective of this technique is to specify text font size in em units so that user agents can scale content effectively. Since the em is a property of the font, it scales as the font changes size. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.

Examples

Example 1: Em font sizes in CSS

This example defines the font size for strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the strong words in this example will each be larger than their surrounding text.

Example Code:


strong {font-size: 1.6em}

...

<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him, 
it is <strong>very</strong> important to let him configure the text size.  </p>
…

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that the value of the CSS property that defines the font size is expressed in em units.

Expected Results
  • Check #1 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C15: Using CSS to change the presentation of a user interface component when it receives focus

Applicability

CSS, HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for C15.

Description

The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets to provide visual feedback when an interactive element has focus or when a user hovers over it using a pointing device. Highlighting the element that has focus or is hovered over can provide information such as the fact that the element is interactive or the scope of the interactive element.

Providing visual feedback may be possible through more than one mode. Usually, it is attained through using a mouse to hover over the element or a keyboard to tab to the element.

Examples

Example 1: Link elements

In this example, mouse and keyboard focus indicators have been applied to the link elements. CSS has been used to apply a background color when the link elements receive focus.

Here is the content to be displayed:

Example Code:


<ul id="mainnav">
  <li class="page_item">Home</li>
  <li class="page_item"><a href="/services">Services</a></li>
  <li class="page_item"><a href="/projects">Projects</a></li>
  <li class="page_item"><a href="/demos">Demos</a></li>
  <li class="page_item"><a href="/about-us">About us</a></li>
  <li class="page_item"><a href="/contact-us">Contact us</a></li>
  <li class="page_item"><a href="/links">Links</a></li>
</ul>

Here is the CSS that changes the background color for the above elements when they receive mouse or keyboard focus:

Example Code:


#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
  background-color: #DCFFFF;
  color:#000066;
}
Example 2: Highlighting elements that receive focus

In this example, the :focus pseudo-class is used to change the style applied to input fields when they receive focus by changing the background color.

Example Code:


<html>
  <head>
    <style type="text/css">
      input.text:focus {
        background-color: #7FFF00; 
        color: #000;
      }
      input[type=checkbox]:focus + label, input[type=radio]:focus + label {
        background-color: #FF6; 
        color: #000; 
      }
    </style>
  </head>
  <body>
    <form method="post" action="form.php">
      <p><label for="fname">Name: </label>
        <input class="text" type="text" name="fname" id="fname" />
      </p>
      <p>
        <input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
        <input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
      <p>
    </form>
  </body>
</html>

            

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each element able to attain focus:

  1. Using a mouse, hover over the element.

  2. Check that the background or border changes color.

  3. Move the mouse away from the object before attempting keyboard focus.

  4. Using a keyboard, tab to the element.

  5. Check that the background or border changes color.

  6. Check that the background or border changes in color are removed when the element loses focus.

Expected Results
  • Checks #2, #5 and #6 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C17: Scaling form elements which contain text

Applicability

(X)HTML, CSS

This technique relates to:

Description

The objective of this technique is to ensure text-based form controls resize when text size is changed in the user agent. This will allow users to enter text and read what they have entered in input boxes because the text is displayed at the size required by the user.

Text-based form controls include input boxes (text and textarea) as well as buttons.

Examples

Example 1: A Contact Form

A Contact Us form has some introductory information and then form controls for users to enter their first name, last name, telephone number and email address. All of the text and form controls have been implemented in a scalable way. This includes specifying a font size for the form controls themselves because the font size is not inherited in Internet Explorer.

The XHTML component:

Example Code:

<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
<label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
<label for="email">Email</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="Submit" id="Submit" />

The CSS component:

Example Code:

h1 { font-size: 2em; }
            p, label, input { font-size: 1em; }

Working example of this code: Example of resizing input with CSS.

Example 2: Radio button

This example works in IE with its text size feature. However, it doesn't scale in Firefox 2.0.

The XHTML component:

Example Code:

<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />

The CSS component:

Example Code:

input.geomsize {
width: 1.2em;
height: 1.2em;}

Tests

Procedure
  1. Enter some text into text-based form controls that receive user entered text.

  2. Increase the text size of the content by 200%.

  3. Check that the text in text-based form controls has increased by 200%.

Expected Results
  • #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C18: Using CSS margin and padding rules instead of spacer images for layout design

Applicability

All technologies that support CSS

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for C18.

Description

Web designers sometimes use spacer images (usually 1x1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', and the shorthand 'margin') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('padding-top', 'padding-right', 'padding-bottom', 'padding-left', and the shorthand 'padding') can be used on any element; they add space inside the element.

Examples

Example 1

The following example consists of two parts: the CSS code, which specifies a margin on all sides of the table, and padding for the table cells; and the HTML code for the table, which does not contain spacer images and is not nested inside another table.

Example Code:


              
              table { margin: .5em; border-collapse: collapse; } 
              td, th { padding: .4em; border: 1px solid #000; }
            
            ...
            
              <table summary="Titles, authors and publication dates of books in Web development category">
                <caption>Books in the category 'Web development'</caption>
                <thead>
                  <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Date</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>How to Think Straight About Web Standards</td>
                    <td>Andrew Stanovich</td>
                    <td>1 April 2007</td>
                  </tr>
                </tbody>
              </table>
            
            

Resources

Tests

No tests available for this technique.


C19: Specifying alignment either to the left OR right in CSS

Applicability

All technologies that support CSS

This technique relates to:

Description

This technique describes how to align blocks of text either left or right by setting the CSS text-align property.

Examples

Example 1

In the following example, text is aligned left. In the style sheet, define the class:

Example Code:

p.left {text-align: left}

In the content call the up the class.

Example Code:

<p class="left"> Lorem ipsum dolor sit …</p>
Example 2

In the following example, text is aligned right.

Example Code:

p.right {text-align: right}

In the content call the up the class.

Example Code:

<p class="right"> Lorem ipsum dolor sit …</p>

Tests

Procedure
  1. Check that the text is aligned either left or right.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized

Applicability

CSS

This technique relates to:

Description

The purpose of this technique is to ensure that CSS is used in a way that allows users to view content in such a way that line length can average 80 characters or less. This makes it possible for users with certain reading or vision disabilities that have trouble keeping their place when reading long lines of text to view and interact with the content more efficiently. This technique also allows for column width to grow wider as font sizes increase, which will reduce the possibility of clipping as the text size increases..

Note that this technique does not require authors to use CSS to limit the width of lines of text to less than 80 characters in the default view. Rather, the recommendation to use relative measurements in CSS layouts helps to ensure that authors do not set column widths in such a way that makes it impossible for users to view content with line lengths of 80 characters or less.

Examples

Example 1

In this example the div width is set in ems in the stylesheet.

Note: The CSS property max-width is not supported in versions of Internet Explorer 6 and below.

Example Code:

#main_content {max-width: 70em}

And the text block would be placed inside the div in the content

Example Code:


<div id="main_content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>
Example 2

In this example the div width is set in percent in the stylesheet

Example Code:

#main_content {width: 90%}

And the text block would be placed inside the div in the content

Example Code:


<div id="main_content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>

Resources

Tests

Procedure
  1. Test to see that the columns are defined in relative units.

  2. Check to see that line length can be set to 80 characters or less by resizing the browser window.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C21: Specifying line spacing in CSS

Applicability

All technologies that support CSS

This technique relates to:

Description

Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.

Examples

Example 1

Setting the element to 1.5 line height. In the style sheet set the characteristics of the element.

Example Code:

p { line-height: 150%; }

In the content the element will now be 1.5 line height, throughout the document.

Example Code:

<p> Lorem ipsum dolor sit …  </p>
Example 2

Setting a class to 1.5 line height (space-and-a-half line spacing). In the stylesheet, define the class.

Example Code:

p.tall {line-height:150%}

In the content, call up the class = "left".

Example Code:

<p class="tall"> Lorem ipsum dolor sit …  </p>
Example 3

Setting a class to double-spaced line height. In the stylesheet, define the class.

Example Code:

p.tall {line-height:200%}

In the content, call up the class = "right".

Example Code:

<p class="tall"> Lorem ipsum dolor sit …  </p>

Tests

Procedure
  1. Open content in a browser.

  2. Check that the spacing between lines in blocks of text is between 1.5 and 2.

Expected Results
  • Test Procedure #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C22: Using CSS to control visual presentation of text

Applicability

All technologies that support CSS.

This technique relates to:

Description

The objective of this technique is to demonstrate how CSS can be used to control the visual presentation of text. This will allow users to modify, via the user agent, the visual characteristics of the text to meet their requirement. The text characteristics include aspects such as size, color, font family and relative placement.

CSS benefits accessibility primarily by separating document structure from presentation. Style sheets were designed to allow precise control - outside of markup - of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc. By separating style from markup, authors can simplify and clean up the markup in their content, making it more accessible at the same time.

Text within images has several accessibility problems, including the inability to:

  • be scaled according to settings in the browser

  • be displayed in colors specified by settings in the browser or rules in user-defined style sheets

  • honor operating system settings, such as high contrast

It is better to use real text for the text portion of these elements, and a combination of semantic markup and style sheets to create the appropriate visual presentation. For this to work effectively, choose fonts that are likely to be available on the user's system and define fallback fonts for users who may not have the first font that is specified. Newer machines and user agents often smooth or anti-alias all text, so it is likely that your headings and buttons will look nice on these systems without resorting to images of text.

The following CSS properties are useful to style text and avoid the need for text in images:

  • The font-family property is used to display the code aspect in a monospace font family.

  • The text-align property is used to display the text to the right of the viewport.

  • The font-size property is used to display the text in a larger size.

  • The font-style property is used to display text in italics.

  • The font-weight property is used to set how thick or thin characters in text should be displayed.

  • The color property is used to display the color of text or text containers.

  • The line-height property is used to display the line height for a block of text.

  • The text-transform property is used to control the case of letters in text.

  • The letter-spacing property is used to control the spacing of letters in text.

  • The background-image property can be used to display text on a non-text background.

  • The first-line pseudo class can be used to modify the presentation of the first line in a block of text.

  • The :first-letter pseudo class can be used to modify the presentation of the first letter in a block of text.

  • The :before and :after pseudo classes can be used to insert decorative non-text content before or after blocks of text.

Examples

Example 1: Using CSS font-family to control the font family for text

The XHTML component:

Example Code:


<p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>

The CSS component:

Example Code:


code { font-family:"Courier New", Courier, monospace }
Example 2: Using CSS text-align to control the placement (alignment) of text

The XHTML component:

Example Code:


<p class="right">This text should be to the right of the viewport.</p>  

The CSS component:

Example Code:


.right { text-align: right; }
Example 3: Using CSS font-size to control the size of text

The XHTML component:

Example Code:


<p>09 <strong class="largersize">March</strong> 2008</p>  

The CSS component:

Example Code:


strong.largersize { font-size: 1.5em; }
Example 4: Using CSS color to control the color of text

Note: The style used in this example is not used to convey information, structure or relationships.

The XHTML component:

Example Code:


<p>09 <em class="highlight">March</em> 2008</p>  

The CSS component:

Example Code:


.highlight{ color: red; }
Example 5: Using CSS font-style to italicize text

Note: The style used in this example is not used to convey information, structure or relationships.

The XHTML component:

Example Code:


<p>The article is available in the <a href="http://www.example.com" class="featuredsite">Endocrinology 
Blog</a>.</p>

The CSS component:

Example Code:


.featuredsite{ font-style:italic; }
Example 6: Using CSS font-weight to control the font weight of the text

Note: The style used in this example is not used to convey information, structure or relationships.

The XHTML component:

Example Code:


<p>This deal is available <span class="highlight">now!</span></p> 

The CSS component:

Example Code:


.highlight { font-weight:bold; color:#990000; }
Example 7: Using CSS text-transform to control the case of text

Note: The style used in this example is not used to convey information, structure or relationships.

The XHTML component:

Example Code:


<p>09 <span class="caps">March</span> 2008</p>  

The CSS component:

Example Code:


.caps { text-transform:uppercase; }
Example 8: Using CSS line-height to control spacing between lines of text

The CSS line-height property is used to display the line height for the paragraph at twice the height of the font.

The XHTML component:

Example Code:


<p>Concern for man and his fate must always form the<br />  
chief interest of all technical endeavors. <br />
Never forget this in the  midst of your diagrams and equations. </p>

The CSS component:

Example Code:


p { line-height:2em; }

The CSS line-height property is used to display the line height for the text at less than the height of the font. The second line of text is positioned after the first line of text and visually appears as though the text is part of the first line but dropped a little.

The XHTML component:

Example Code:


<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>

The CSS component:

Example Code:


.overlap { line-height:0.2em;  }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }
Example 9: Using CSS letter-spacing to space text

The CSS letter-spacing property is used to display the letters farther apart in the heading.

The XHTML component:

Example Code:


<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>

The CSS component:

Example Code:


.overlap { line-height:0.2em;  }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }

The CSS letter-spacing property is used to display the letters closer together in the second line of text.

The XHTML component:

Example Code:


<h1 class="upper2">News</h1>

The CSS component:

Example Code:


.upper2 { text-transform:uppercase; letter-spacing:1em; }
Example 10: Using CSS background-image to layer text and images

The CSS font-style property is used to display the textual component of a banner and background-image property is used to display a picture behind the text.

The XHTML component:

Example Code:


<div id="banner"><span id="bannerstyle1">Welcome</span> 
<span id="bannerstyle2">to your local city council</span></div>

The CSS component:

Example Code:


#banner { 
  color:white; 
  background-image:url(banner-bg.gif); 
  background-repeat:no-repeat; 
  background-color:#003399; 
  width:29em; 
}

#bannerstyle1 { 
  text-transform:uppercase; 
  font-weight:bold; 
  font-size:2.5em;
}

#bannerstyle2 { 
  font-style:italic; 
  font-weight:bold; 
  letter-spacing:-0.1em;
  font-size:1.5em; 
}
Example 11: Using CSS first-line to control the presentation of the first line of text

The CSS :first-line pseudo class is used to display the first line of text in a larger, red font.

The XHTML component:

Example Code:


<p class="startline">Once upon a time...<br />
...in a land far, far away...  </p>  

The CSS component:

Example Code:


.startline:first-line { font-size:2em; color:#990000; }
Example 12: Using CSS first-letter to control the presentation of the first letter of text

The CSS :first-letter pseudo class is used to display the first letter in a larger font size, red and vertically aligned in the middle.

The XHTML component:

Example Code:


<p class="startletter">Once upon a time...</p>  

The CSS component:

Example Code:


.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check whether CSS properties were used to control the visual presentation of text

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C23: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content

Applicability

Pages that use CSS.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for C23.

Description

Some Web pages use colors to identify different groupings. The objective of this technique is to allow users to select specific color combinations for the text and background of the main content while retaining visual clues to the groupings and organization of the web page. When a user overrides the foreground and background colors of all the text on a page, visual clues to the grouping and organization of the Web page may be lost, making it much more difficult to understand and use.

When an author does not specify the colors of the text and background of the main content, it is possible to change the colors of those regions in the browser without the need to override the colors with a user style sheet. Specifying the text and background colors of secondary content means that the browser will not override those colors.

With this technique the author uses the default text color and background color of the main area. As a result the colors are completely determined by the user agent via the user's color preferences. The user can ensure that the color selection best meets his needs and provides the best reading experience.

Examples

Example 1

An HTML Web page uses CSS to specify the text and background colors of all secondary content such as navigation bars, menu bars, and the table of contents. Neither the text color nor background of the main content is specified. The user sets their own color preferences in the browser so that they view the main content in colors and contrasts that work well for them. The distinction between the separate sections of the page are still visually obvious.

Example 2

A music magazine has an article that is blue text on a white background. The site provides a link near the beginning of the page which assigns a different style sheet to the page. The new style sheet does not have any colors specified for the text or background.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Change the text, link and background colors in the browser settings so they are different from the default color and different from those specified in the secondary content.

    Note: Do not select the option that tells the browser to ignore the colors specified in the page.

  2. Check that the main content uses the new text, link and background colors.

  3. Check that the colors of the text, links and backgrounds in the secondary content has not changed.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C24: Using percentage values in CSS for container sizes

Applicability

Pages that use CSS.

This technique relates to:

Description

The objective of this technique is to enable users to increase the size of text without having to scroll horizontally to read that text. To use this technique, an author specifies the width of text containers using percent values.

Examples

Example 1

A newspaper has content in the middle of the window. The width of the container for the content is specified in page percentages, so that when a person with low vision increases the font size the text reflows inside the browser window at the new size and there is no need to scroll horizontally.

Tests

Procedure
  1. Check that all container widths are specified as percentage values.

  2. Increase the text size to 200%.

  3. Check to make sure that horizontal scrolling is not required to read any line of text.

  4. Check that all text is still visible on the page.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C25: Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors

Applicability

Pages that use CSS.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for C25.

Description

The intent of this technique is to specify borders and layout using CSS and leave text and background colors to render according to the user's browser and/or operating system settings (Please see above note in relation to Safari). This allows users to view the text in the colors they require while maintaining other aspects of the layout and page design such as columns of text, borders around sections or vertical lines between a menu and main content area. It will also prevent some display issues in some browsers when pages contain Javascript pop-up boxes or drop-down menus and have the colors overridden.

Borders and layout indicators help many people with cognitive disabilities, as does flexibility over the text and background colors. Sometimes these two needs are in conflict when the user has to over-ride the author's color selection of text and background in the browser and the browser also removes the borders and the intended layout. This can mean the page is displayed in a single column with one block of content below the other, which can result in unnecessary whitespace and long lines of text. It can also mean that pop-up boxes gain a transparent background, superimposing the text of the box on the text of the page, and drop-down menus either become transparent or gain a dark-grey background. When a Web author does not specify the colors of any text and background, while specifying border colors and layout, it is possible, in most popular browsers, to change the text and background colors without affecting the other (author-specified) CSS declarations.

Examples

Example 1

A Web page is designed using HTML. CSS is used to specify border colors around discrete areas of the page and to layout the content so that the menu floats to the left of the main content area. Neither the text color nor background is specified. The user sets their own colors in the browser. They can view the page in colors and contrasts that work well for them without disrupting the layout.

Tests

Procedure
  1. Open the Web page in a browser that allows users to change colors of HTML content.

  2. Change the text, link and background colors in the browser settings so they are different than those currently set in the browser.

    Note: Make sure that you do not select the option that tells the browser to ignore the colors specified in the page.

  3. Return to the page and check that it is displaying the page in the new text, link and background colors.

  4. Check that any borders are still displayed and that the layout is retained.

Expected Results
  • Checks #3 and Check #4 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C27: Making the DOM order match the visual order

Applicability

CSS used with HTML and XHTML

This technique relates to:

Description

The objective of this technique is to ensure that the order of content in the source code is the same as the visual presentation of the content. The order of content in the source code can be changed by the author to any number of visual presentations with CSS. Each order may be meaningful in itself but may cause confusion for assistive technology users. This could be due to the user switching off the author-specified presentation, by accessing the content directly from the source code (such as with a screen reader), or by interacting with the content with a keyboard. If a blind user, who reads the page with a screen reader that follows the source order, is working with a sighted user who reads the page in visual order, they may be confused when they encounter information in different orders. A user with low vision who uses a screen magnifier in combination with a screen reader may be confused when the reading order appears to skip around on the screen. A keyboard user may have trouble predicting where focus will go next when the source order does not match the visual order.

There may also be situations where the visually presented order is necessary to the overall understanding of the page, and if the source order is presented differently, it may be much more difficult to understand.

When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order.

Note: The tabindex attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A tabindex of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting tabindex values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML or XHTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order.

Examples

  • An online newspaper has placed a navigation bar visually in the top left corner of the page directly below its initial logo. In the source code, the navigation elements appear after the elements encoding the logo.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Visually examine the order of the content in the Web page as it is presented to the end user.

  2. Examine the elements in the DOM using a tool that allows you to see the DOM.

  3. Ensure that the the order of the content in the source code sections match the visual presentation of the content in the Web page. (e.g., for an English language page the order is from top to bottom and from left to right.) "

Expected Results
  • Step #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C28: Specifying the size of text containers using em units

Applicability

CSS

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for C28.

Description

The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in em units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings.

The width and/or height of text containers that have been specified using other units risk text cropping because it falls outside the container boundaries when the text size has been increased.

The containers generally control the placement of text within the Web page and can include layout elements, structural elements and form controls.

Examples

Example 1: Em units for sizes for layout container containing text

In this example, a div element, with id value of "nav_menu", is used to position the navigation menu along the left-hand side of the main content area of the Web page. The navigation menu consists of a list of text links, with id value of "nav_list." The text size for the navigation links and the width of the container are specified in em units.

Example Code:


#nav_menu { width: 20em; height: 100em }

#nav_list { font-size: 100%; }
Example 2: Em units for text-based form controls

In this example, input elements that contain text or accept text input by the user have been given the class name "form1." CSS rules are used to define the font size in percent units and width for these elements in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size).

Example Code:


input.form1 { font-size: 100%; width: 15em; }
Example 3: Em units in dropdown boxes

In this example, select elements have been given the class name "pick." CSS rules are used to define the font size in percent units and width in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped.

Example Code:


input.pick { font-size: 100%; width: 10em; }
Example 4: Em units for non-text-based form controls

In this example, input elements that define checkboxes or radio buttons have been given the class name "choose." CSS rules are used to define the width and height for these elements in em units. This will allow the form control to resize in response to changes in text size settings.

Example Code:


input.choose { width: 1.2em; height: 1.2em; }

Tests

Procedure
  • Identify containers that contain text or allow text input.

  • Check the container's width and/or height are specified in em units.

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C29: Using a style switcher to provide a conforming alternate version

Applicability

CSS used with client-side or server-side scripting.

This technique relates to:

Description

When some aspect of the default presentation of a Web page does not meet a Success Criterion, it is possible to meet that requirement using the "Alternate Version" clause in the conformance requirements (Conformance Requirement 1). For some requirements, invoking a style switcher via a link or control on the page that can adjust the presentation so that all aspects of the page conform at the level claimed allows authors to avoid having to provide multiple versions of the same information.

The objective of this technique is to demonstrate how CSS can be used in combination with scripting to provide conforming alternate versions of a Web page. In this technique, an author provides alternative views of the content by providing controls that adjust the CSS that is used to control the visual presentation of content. Controls provided within the Web page allow users to select or modify the presentation in a way that meets the success criterion at the level claimed. This makes it possible for different visual presentations to be selected by users in situations such as the following:

  • the user may not be able to adjust browser or operating system settings, due to a lack of familiarity or rights

  • the text is provided in a manner that does not respond to browser or operating system settings (such as text within an image)

  • the default presentation of the content does not include sufficient contrast for some users

For this technique to be used successfully, three things must be true.

  1. The link or control on the original page must itself meet the success criteria to be met via the alternate presentation. For example, if a style switcher is used to provide increased font sizes and the control is presented using a small font, users may not be able to activate the control and view the alternate presentation.

  2. The new page must contain all the same information and functionality as the original page.

  3. The new page must conform to all of the Success Criteria for the desired level of conformance. For example, an alternate stylesheet can not be used to meet one requirement if it causes a different requirement to no longer conform.

When using a style switcher, it is important to consider the following challenges and limitations:

  • The number and type of changes that a user can make is limited to the scope of the controls provided by the author of the Web page. A variety of presentation and preferences should be provided in order to address the needs of as wide an audience as possible. However, it is also important for authors to consider interactions between preferences and the complexity for users that might result from providing large numbers of options to users.

  • Maintaining the user's preference from one page to the next may be achieved by storing a cookie on the user's machine (see Resources section for more information) or by including their preferences in a profile saved on the Web server by passing a query string parameter, or by other means.

  • The technical method used to implement a style switcher may be subject to the support and availability of one or more technologies on the user's machine (for example, many client-side solutions require support for both JavaScript and CSS). Unless these technologies are relied upon for conformance, authors should consider using server-side technologies where client-side support and availability of technologies can not be assured. Alternatively, the use of techniques which ensure that content will transform gracefully when one or more of the technologies used are not available can be an effective way to enhance pages when support for these technologies is not relied upon for conformance.

Examples

Example 1: Using a JavaScript control to apply a different external CSS file

This example is of a page that provides links to change text and background colors for the page via JavaScript. The links should only be inserted if JavaScript is supported by and available on the user's system. Otherwise, selecting the links will not result in the desired changes. This can be achieved by using script to insert the links themselves (which means that the links would only be present when scripting is supported and available).

The following code shows the JavaScript-dependent color-change links and a snippet of other content in the Web page, the associated style sheet rules, and the JavaScript that changes the style sheet in use when a color-change link is selected.

The example applies only to the current page view. In a production environment, it would be advisable to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site.

The XHTML components:

Example Code:


In <head> section:

  <link href="main.css" rel="stylesheet" type="text/css" />
  <link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" />

In <body> section:

<div id="colorswitch">
<p>Change colors:</p>
  <ul class="inline">
    <li><a href="#" onClick="javascript:changeColors('altColors1.css');return false;" 
      id="altColors1">dark blue on white</a></li>
    <li><a href="#" onClick="javascript:changeColors('altColors2.css');return false;" 
      id="altColors2">yellow on black</a></li>
    <li><a href="#" onClick="javascript:changeColors('altColors3.css');return false;" 
      id="altColors3">black on pale yellow</a></li>
    <li><a href="#" onClick="javascript:changeColors('altColors4.css');return false;" 
      id="altColors4">black on white</a></li>
    <li><a href="#" onClick="javascript:changeColors('defaultColors.css');return false;" 
      id="default">Reset to default</a></li>
  </ul>
</div>
<div id="mainbody">
  <h1>Conference report</h1>
  <p>Last week's conference presented an impressive line-up of speakers...</p>
</div>

The CSS components:

Example Code:


In main.css:

body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }

#mainbody { 
    padding: 1em; 
}

#colorswitch {
    float: right; 
    width: 12em; 
    border: 1px #000066 solid; 
    padding:0 1em 1em 1em; margin:0;
}

#colorswitch p { 
    padding-top:.5em; 
    font-weight:bold;
}

In defaultColors.css:

body, p { 
    color:#000000; 
    background-color:#FFFFFF; 
}

h1, h2, h3 {
        color:#990000; 
        background-color:#FFFFFF;
}

In altColors1.css:

body, h1, h2, h3, p, a { 
    color:#000066; 
    background-color:#FFFFFF; 
}

In altColors2.css:

body, h1, h2, h3, p, a { 
    color:#FFFF33; 
       background-color:#000000; 
}

In altColors3.css:

body, h1, h2, h3, p, a { 
    color:#000000; 
    background-color:#FFFF99; 
}

In altColors4.css:

body, h1, h2, h3, p, a { 
    color:#000000; 
    background-color:#FFFFFF; 
}
  

The JavaScript components:

Example Code:


function changeColors (newCSS)
{
  document.getElementById('currentCSS').href = newCSS; 
}

A working example of this code, Using a JavaScript control to apply a different external CSS file, is available.

Example 2: Using a client-side JavaScript to change a CSS property

This example can be used for simple changes to a section of content and may be less practical for complex sites or pages. The example uses a client-side JavaScript to change the class name to visually present the user's color selection (from a defined set of options) as a background for highlighting specific content.

Note: The following code includes JavaScript calls within the XHTML code to aid understanding of the technique. However, the author is encouraged to use current best practice for including JavaScript (see resources for more information about Unobtrusive JavaScript and progressive enhancement).

The XHTML components:

Example Code:


<h1>Product comparison</h1>
<p>The products you selected to compare are listed below. 
Any differences between the products are highlighted and italicized.</p>
<p class="inlinePara">Change hightlight color: </p>
<ul class="inline">
  <li><a href="#" onClick="changeColor('hghltLightYellow');return false;" 
    class="hghltLightYellow">light yellow</a></li>
  <li><a href="#" onClick="changeColor('hghltBrightYellow');return false;" 
    class="hghltBrightYellow">bright yellow</a></li>
  <li><a href="#" onClick="changeColor('hghltLightBlue');return false;" 
    class="hghltLightBlue">light blue</a></li>
  <li><a href="#" onClick="changeColor('hghltBrightBlue');return false;" 
    class="hghltBrightBlue">bright blue</a></li>
  <li><a href="#" onClick="changeColor('hghltLightRed');return false;" 
    class="hghltLightRed">light red</a></li>
  <li><a href="#" onClick="changeColor('hghltDrkRed');return false;" 
    class="hghltDrkRed">dark red</a></li>
</ul>
<table width="400" border="1">
  <tr>
    <td> </td>
    <th scope="col">Product 1</th>
    <th scope="col">Product 2</th>
  </tr>
  <tr>
    <th scope="row">Aspect 1</th>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <th scope="row">Aspect 2</th>
    <td class="hghltLightYellow">Yes</td>
    <td class="hghltLightYellow">No</td>
  </tr>
  <tr>
    <th scope="row">Aspect 3</th>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
</table>

The CSS components:

Example Code:


body { color:#000000; background-color:#FFFFFF; }

.hghltLightYellow { color: #000000; background-color: #FFFF99; font-style:oblique; }
.hghltBrightYellow { color: #000000; background-color: #FFFF00; font-style:oblique; }
.hghltLightBlue { color: #000000; background-color: #33FFFF; font-style:oblique; }
.hghltBrightBlue { color: #FFFFFF; background-color: #0000FF; font-style:oblique; }
.hghltLightRed { color: #000000; background-color: #FF6266; font-style:oblique; }
.hghltDrkRed { color: #FFFFFF; background-color: #993300; font-style:oblique; }

.inlinePara {display:inline; }
.inline {display: inline; margin-left:0px; padding-left:0px; line-height:3em; }
.inline li { display:inline; }
.inline li a {padding: 0.5em 1em; border: 2px solid #000000; }

The JavaScript components:

Example Code:


function changeColor(hghltColor)
{
  // collects table data cells into an array
 
 var els = document.getElementsByTagName('td');

  // for each item in the array, look for a class name starting with "hghlt"
  // if found, change the class value to the current selection
  // note that this script assumes the  'td' class attribute is only used for highlighting

  for (var i=0; i<els.length; i++)
  {
    if (els[i].className.indexOf("hghlt") == 0) { els[i].className = hghltColor; }
  }
}

A working example of this code, Using a client-side JavaScript to change a CSS property, is available.

Example 3: Using PHP $_GET to apply a different external CSS file

This simple example uses PHP $_GET to assign one of two available external style sheets. Similar functionality could be achieved using a variety of PHP features. The example applies only to the current page view. In a production environment, it would be advisable to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site.

The following code is PHP, but a similar approach would work with a variety of server-side technologies.

The PHP and XHTML components:

Example Code:


At the beginning of the PHP page:

<?php
$thestyle = $_GET['set'];
if ($thestyle == "style1")
	{
	$thestyle = "style2";
	}
else
	{
	$thestyle = "style1";
	}
?>

In the <head> section:

   <link rel="stylesheet" type="text/css" media="screen" href="<?php echo($thestyle);?>.css" >

In <body> section:

<?php
if ($thestyle == "style1") {
	echo "<a href=\"index.php?set=style1\">Switch to Style Sheet Two</a>";
	}
else {
	echo "<a href=\"index.php?set=style2\">Switch to Style Sheet One</a>";
	}
?>

<div id="mainbody">
  <h1>Conference report</h1>
  <p>Last week's conference presented an impressive line-up of speakers...</p>
</div>

The CSS components:

Example Code:


In style1.css:

  body, p { color:#000000; background-color:#FFFFFF; }
  h1, h2, h3 {color:#990000; background-color:#FFFFFF; }

In style2.css:

  body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }

A working example of this code, Using PHP $_GET to apply a different external CSS file, is available.

Example 4: Using JSP to provide an alternative style sheet

The example below uses two files

  • a Java Server Page (JSP) with the form and the the form processing code, and

  • an include file with functions used by the previous page and in other pages use the same style.

The server-side code outputs a normal link element for the stylesheet that the user chooses and link elements with "alternate stylesheet" for the other styles. The code can thus be used as a fallback for the client-side code in the second example.

The JSP page with the form:

Example Code:


 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
 %><%@include file="_jsp/styleswitch.jsp"%><?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   <title>Change Style</title>
   <%
     String fStyle = "";
     String styleName = "style";
     String defaultStyle = "default";
     Cookie[] cookies = request.getCookies();
 
     // get style from post request parameters
     if (request.getMethod().equals("POST") && request.getParameter("styleSelect") != null) {
       fStyle = request.getParameter("styleSelect");
       // code that validates user input (security) not shown
       
       if (fStyle.equals("nostyle")) { // user prefers no author style
       } else { // user requests author style
         out.println(createStyleLinks(fStyle).toString());
       }
       
       storeStylePreferenceCookie(request, response, fStyle);
     } else if (request.getMethod().equals("GET")) { 
     // GET request; get style from cookie; else default style links
       // get style from cookie
       if (cookies != null) {
         // get style from cookies
         fStyle = getStyleFromCookies(cookies);
 
         if ( !fStyle.equals("NULL_STYLE") ) { // user requests author style
             out.println(createStyleLinks(fStyle).toString());
         } else { // no cookie for style; process request for style preference
           // default style links
           out.println(createStyleLinks(defaultStyle).toString());
         }
       } else { // GET request without cookies: default styles
         out.println(createStyleLinks(defaultStyle).toString());
       }//end else cookies
     }
   %>
 </head>
 <body id="home">
   <form action="_styleSwitch.jsp" method="post" id="styleswitchform" name="styleswitchform">
     <p><label for="styleSelect">Select style: </label>
       <select id="styleSelect" name="styleSelect">
         <option value="default">Default (shades of green)</option>
         <option value="wonb">White on black</option>
         <option value="bonw">Black on white</option>
       </select>
       <input type="submit" value="Change Style" />
     </p>
   </form>
 </body>
 </html>
 

The styleswitcher.jsp file included in the previous file:

Example Code:


 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%!
   /**
    * Get the links (link elements) to the CSS files based on cookies, ...
   */
   private String getStyleLinks(HttpServletRequest request) {
     String styleLinks = "";
     Cookie[] cookies = request.getCookies();
     String defaultStyle = "default";
     String tempStyle = "";
     // GET request; get style from cookie; else default style links
     // get style from cookie
     if (cookies != null) {
       // get style from cookies
       tempStyle = getStyleFromCookies(cookies);
 
       if ( tempStyle.equals("NULL_STYLE") ) { 
         // no cookie for style; process request for style preference
         // default style links
         styleLinks = createStyleLinks(defaultStyle).toString();
       } else { // user requests author style
         styleLinks = createStyleLinks(tempStyle).toString();
       }
     } else { // GET request without cookies: default styles
       styleLinks = createStyleLinks(defaultStyle).toString();
     }//end else cookies
     
     return styleLinks;
   }
 
   /**
    * Get style cookie from request
   */
   private String getStyleFromCookies( Cookie[] cookies ) {
     String fStyle = "NULL_STYLE";
     for (int i = 0; i < cookies.length; i++) {
       Cookie cookie = cookies[i];
       String name = cookie.getName();
       
       if ( name.equals("style") ) {
         fStyle = cookie.getValue();
         // code that validates cookie value (security) not shown
       }
     }
     return fStyle;
   }
 
   /**
    * Store the style preference in a persistent cookie
   */
   private void storeStylePreferenceCookie(HttpServletRequest request, 
     HttpServletResponse response, String theStyle) {
     final int ONE_YEAR = 60 * 60 * 24 * 365;
     Cookie styleCookie = new Cookie("style", theStyle);
     styleCookie.setMaxAge(ONE_YEAR);
     response.addCookie(styleCookie);
   }
 
   /**
    * Create the link elements for the stylesheets
   */
   private StringBuffer createStyleLinks(String prefStyle) {
     StringBuffer theStyleLinks = new StringBuffer();
     //two-dimensional array with identifiers (adding '.css' gives the name of the CSS file) 
     // and strings for the title attribute of the link element
    // the identifiers must correspond to the in the "value" attributes in the "option"
    // elements in the style switcher form
     String [] [] styles = {
       { "default", "Default style"},
       { "wonb", "White on black"},
       { "bonw", "Black on white"}
     };
 
     // loop over 2dim array: if styles[i][1] matches prefStyle, 
     // output as normal, else as alternate stylesheet
     for (int i = 0; i < styles.length; i++) {
       if ( styles[i][0].equals(prefStyle) ) { // output pref stylesheet as normal stylesheet
         theStyleLinks.append("<link rel=\"stylesheet\" href=\"_css/").append(styles[i][0])
           .append(".css\" title=\"").append(styles[i][1]).append("\" type=\"text/css\" />").append("\n");
       } else { // output other stylesheets as alternate stylesheets
         theStyleLinks.append("<link rel=\"alternate stylesheet\" href=\"_css/")
           .append(styles[i][0]).append(".css\" title=\"").append(styles[i][1])
           .append("\" type=\"text/css\" />").append("\n");
       }
     } // end for loop
 
     return theStyleLinks;
   }
 %>
 

Other JSP pages can use this code by means of the following include and scriptlet code:

Example Code:


 <%@include file="_jsp/styleswitch.jsp"%><% out.println(getStyleLinks(request)); %>
 

Resources

Resources are for information purposes only, no endorsement implied.

Using cookies

A user's selection can be made persistent across pages, and from one visit to another, by storing information on the user's computer via a cookie. This functionality requires cookies to be supported by and allowed on the user's computer. Cookies can be created, read, modified and erased by using client-side scripts, such as Javascript, or by server-side scripts, such as CGI scripts. Reliance on client-side technologies will require the support and availability of the technology on the user's computer in addition to supporting and allowing cookies.

Information on creating and using cookies can be found on the web. Here are some suggestions:

It is recommended that authors test for cookie support and provide an extra control if cookies are not supported. This extra control should include information about the persistence of the selection, such as "Apply selection to all pages". The message or page presented to the user in response to selecting the extra control provides information about the cookie requirement and their options for solving it. In the event that the user is unable to turn cookie support on, include a statement about what this will mean for them if they choose to continue to browse the site and provide information about how they can adjust their user agent to achieve similar results.

For example, "Your browser is not configured to accept cookies. On this site, cookies are required in order to apply your selected changes across all of the pages of the site. To find out how to enable cookies on your computer, visit How to Enable Cookies. Note that this may require administrative rights for the computer you are using. Without cookie support, your settings will not persist to include other pages on this site. We are endeavoring to provide this functionality without relying on your computer's capability. In the meantime, you will be able to select the change for each page that you visit."

Progressive Enhancement and Unobtrusive Javascript

Current best practice for implementing JavaScript in an HTML or XHTML page is to use it in a way that separates the behavior of content from its structure and presentation. The terms 'Progressive Enhancement' and 'Unobtrusive JavaScript' are often used to describe scripts that enhance or improve the functionality of a page, yet transform gracefully so that content continues to function even when JavaScript is not supported.

Here are some suggested starting points for more information:

Tests

Procedure
  1. Check that the Web page contains controls that allow users to select alternate presentations.

  2. Check that the control changes the presentation by modifying individual CSS style properties or by activating an alternate style sheet.

  3. Verify that the resulting page is a conforming alternate version for the original page.

Expected Results
  • All of the above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


C30: Using CSS to replace text with images of text and providing user interface controls to switch

Applicability

Any technology that supports CSS.

This technique relates to:

Description

The objective of this technique is to demonstrate how CSS can be used to replace structured HTML text with images of text in a way that makes it possible for users to view content according to their preferences. To use this technique, an author starts by creating an HTML page that uses semantic elements to mark up the structure of the page. The author then designs two or more stylesheets for that page. One stylesheet presents the HTML text as text and the second uses CSS features to replace some of the HTML text with images of text. Finally, through the use of server-side or client-side scripting, the author provides a control that allows the user to switch between the available views.

This technique can be used to meet Success Criterion 1.4.5 or 1.4.9 if a presentation that does not include images of text is available and as long as the user interface control that is provided to allow users to switch to an alternate presentation meets the relevant criteria. Where possible, authors should deliver the presentation that does not include images of text as the default presentation. In addition, the control used to switch should be located near the beginning of the page.

A variety of "image replacement" techniques have been developed to address a variety of user agent, configuration and compatibility with assistive technology issues (See resources for more information). While there are a variety of approaches authors may use to replace text, it is important to consider compatibility with assistive technology, whether the technique will work correctly if scripting, CSS, images (or combinations of these) are turned off. Since it can be difficult to find a single solution that works in all cases, this technique recommends the use of a control that allows users to switch to a presentation that does not include an image replacement technique.

Note: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version and Understanding Conforming Alternate Versions for more information.

Examples

Example 1

A design studio site uses a style switcher to allow users to view two presentations of their home page. For the default version, the heading text is replaced with images of text. A control on the page allows users to switch to a version that presents the headings as text.

The CSS component:

Example Code:

...
<div id="Header"> 
  <h1><span>Pufferfish Design Studio</span></h1> 
  <h2><span>Surprising Identity and Design Solutions</span></h2> 
  </div> 
...

The CSS for the presentation that includes images of text follows. Note that the CSS uses positioning to place the contents of the heading elements offscreen so that the text remains available to screen reader users.

Example Code:

...
#Header h1 {
	background-image: url(pufferfish-logo.png);
	height: 195px;
	width: 290px;
	background-repeat: no-repeat;
	margin-top: 0;
	position: absolute;
	}
#Header h1 span {
	position: absolute;
        left: -999em;
	}
#Header h2 {
	background-image: url(beauty.png);
	background-repeat: no-repeat;
	height: 234px;
	width: 33px;
	margin-left: 8px;
	position: absolute;
	margin-top: 250px;
	}
#Header h2 span {
	position: absolute;
        left: -999em;
	}
	

The CSS for the presentation that does not include images of text.

Example Code:

...
#Header h1 {
	font: normal 200%/100% Garamond, "Times New Roman", serif;
	margin-bottom: 0;
	color: #000099;
	background: #ffffff;
	}

#Header h2 {
	font: normal 160%/100% Garamond, "Times New Roman", serif;
	margin-bottom: 0;
	color: #336600;
	background: #ffffff;
	}

Resources

Tests

Procedure
  1. Check that the Web page includes a control that allows users to select an alternate presentation.

  2. Check that when the control is activated the resulting page includes text (programmatically determined text) wherever images of text had been used.

Expected Results
  • All of the above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


4. Client-side Scripting Techniques


SCR1: Allowing the user to extend the default time limit

Applicability

Time limits that are controlled by client-side scripting.

This technique relates to:

Description

The objective of this technique is to allow user to extend the default time limit by providing a mechanism to extend the time when scripts provide functionality that has default time limits. In order to allow the user to request a longer time limit, the script can provide a form (for example) allowing the user to enter a larger time limit or indicating that more time is needed. If the user is being warned that a time limit is about to expire (see SCR16: Providing a script that warns the user a time limit is about to expire), this form can be made available from the warning dialog. The user can extend the time limit to at least 10 times the default time limit, either by allowing the user to indicate how much additional time is needed or by repeatedly allowing the user to extend the time limit.

Examples

  • A Web page contains current stock market statistics and is set to refresh periodically. When the user is warned prior to refreshing the first time, the user is provided with an option to extend the time period between refreshes.

  • In an online chess game, each player is given a time limit for completing each move. When the player is warned that time is almost up for this move, the user is provided with an option to increase the time.

Resources

Resources are for information purposes only, no endorsement implied.

  1. PHPBuilder Time-out Info

Tests

Procedure
  1. On a Web page that uses scripts to enforce a time limit, wait until the time limit has expired.

  2. Determine if an option was provided to extend the time limit.

Expected Results
  • #2 is true and more time is provided to complete the interaction.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR2: Using redundant keyboard and mouse event handlers

Applicability

HTML and XHTML with scripting support.

This technique relates to:

Description

The objective of this technique is to demonstrate using device independent events to change a decorative image in response to a mouse or focus event. Use the onmouseover and onmouseout events to change a decorative image when the mouse moves on top of or away from an element on the page. Also, use the onfocus and onblur events to change the image when the element receives and loses focus.

The example below has a decorative image in front of an anchor element. When the user mouses over the anchor tag, the decorative image in front of the anchor is changed. When the mouse moves off of the anchor, the image is changed back to its original version. The same image change effect occurs when the user gives keyboard focus to the anchor element. When focus is received the image changes, when focus is lost the image is changed back. This is accomplished by attaching onmouseover, onmouseout, onfocus and onblur event handlers to the anchor element. The event handler is a JavaScript function called updateImage(), which changes the src attribute of the image. The updateImage() is called in response to the onmouseover, onmouseout, onfocus, and onblur events.

Each image is given a unique id. This unique id is passed to updateImage() along with a boolean value indicating which image is to be used: updateImage(imgId, isOver);. The boolean value of true is passed when the mouse is over the anchor element or it has focus. A false value is passed when the mouse moves off of the anchor element or it loses focus. The updateImage() function uses the image id to load the image and then changes the src attribue based on the boolean value. Note that since the image is for decorative purposes, it has a null alt attribute.

Note: It is best to use images that are similar in size and to specify the height and width attributes on the image element. This will prevent any changes to the layout of the page when the image is updated. This example uses images which are identical in size.

Examples

Example 1

Example Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Changing Image Source in a Device Independent Manner</title>
 <script type="text/javascript">
 /* This function will change the image src of an image element.
  * param imgId - the id of the image object to change
  * param isOver - true when mouse is over or object has focus,
  *                false when mouse move out or focus is lost
 */
 function updateImage(imgId, isOver) {
   var theImage = document.getElementById(imgId);
   if (theImage != null) { //could use a try/catch block for user agents supporting at least JavaScript 1.4
                           // These browsers support try/catch - NetScape 6, IE 5, Mozilla, Firefox
      if (isOver) {
        theImage.setAttribute("src","yellowplus.gif");
      }
      else {
        theImage.setAttribute("src","greyplus.gif");
      }
   }
 }
 </script>
 </head>
 <body>
 <p>Mouse over or tab to the links below and see the image change.</p>
 <a href="http://www.w3.org/wai" onmouseover="updateImage('wai', true);" onfocus="updateImage('wai', true);"
   onmouseout="updateImage('wai',false);" onblur="updateImage('wai',false);">
 <img src="greyplus.gif" border="0" alt="" id="wai">
   W3C Web Accessibility Initiative</a> &
 <a href="http://www.w3.org/International/" onmouseover="updateImage('i18n', true);" 
   onfocus="updateImage('i18n',true);" onmouseout="updateImage('i18n',false);"
   onblur="updateImage('i18n',false);">
   <img src="greyplus.gif" border="0" alt="" id="i18n">
   W3C Internationalization</a>
 </body>
 </html>

Tests

Procedure

Load the Web page and test the events using a mouse and via the keyboard.

  1. Check that the "standard" image is displayed as expected when the Web page is loaded.

  2. Using the Mouse

    1. Move the mouse over the element containing the event handlers (in this example it is an anchor element). Check that the image changes to the expected image.

    2. Move the mouse off of the element. Check that the image changes back to the "standard" image.

  3. Using the Keyboard

    1. Use the keyboard to set focus to the element containing the event handlers. Check that the image changes to the expected image.

    2. Use the keyboard to remove focus from the element (generally by moving focus to another element). Check that the image changes to the "standard" image.

  4. Verify that the layout of other elements on the page is not affected when the image is changed.

Expected Results
  • All of the steps for the above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR14: Using scripts to make nonessential alerts optional

Applicability

Scripting technologies which use scripting alerts for non-emergency communication.

This technique relates to:

Description

The objective of this technique is to display a dialog containing a message (alert) to the user. When the alert is displayed, it receives focus and the user must activate the OK button on the dialog to dismiss it. Since these alerts cause focus to change they may distract the user, especially when used for non-emergency information. Alerts for non-emergency purposes such as displaying a quote of the day, helpful usage tip, or count down to a particular event, are not presented unless the user enables them through an option provided in the Web page.

This technique assigns a global JavaScript variable to store the user preference for displaying alerts. The default value is false. A wrapper function is created to check the value of this variable before displaying an alert. All calls to display an alert are made to this wrapper function rather than calling the alert() function directly. Early in the page, a button is provided for the user to enable the display of alerts on the page. This technique works on a visit by visit basis. Each time the page is loaded, alerts will be disabled and the user must manually enable them. Alternatively, the author could use cookies to store user preferences across sessions.

Examples

Example 1

The script below will display a quote in an alert box every ten seconds, if the user selects the "Turn Alerts On" button. The user can turn the quotes off again by choosing "Turn Alerts Off".

Example Code:


<script type="text/javascript">
var bDoAlerts = false;  // global variable which specifies whether to 
                                       // display alerts or not
/* function to enable/disable alerts.
 * param boolean bOn - true to enable alerts, false to disable them.
*/
function modifyAlerts(isEnabled) {
   bDoAlerts = isEnabled;
}
/* wrapper function for displaying alerts.  Checks the value of bDoAlerts
*and only calls the alert() function when bDoAlerts is true.
*/
function doAlert(aMessage) {
    if (bDoAlerts) {
       alert(aMessage);
    }
}
// example usage - a loop to display famous quotes.
var gCounter = -1;  // global to store counter
// quotes variable would be initialized with famous quotations
var quotes = new Array("quote 1", "quote 2", "quote 3", "quote 4", "quote 5");
function showQuotes() {
   if (++gCounter &gt;= quotes.length) {
     gCounter = 0;
   }
   doAlert(quotes[gCounter]);
   setTimeout("showQuotes();", 10000);
}
showQuotes();
</script>

Within the body of the page, include a way to turn the alerts on and off. Below is one example:

Example Code:


<body>
<p>Press the button below to enable the display of famous quotes 
using an alert box<br />
<button id="enableBtn" type="button" onclick="modifyAlerts(true);">
Turn Alerts On</button><br />
<button id="disableBtn" type="button" onclick="modifyAlerts(false);">
Turn Alerts Off</button></p>

Working example of this code: Demonstration of Alerts.

Tests

Procedure

For a Web page that supports non-emergency interruptions using a JavaScript alert:

  1. Load the Web page and verify that no non-emergency alerts are displayed.

  2. Verify there is a mechanism to activate the non-emergency alerts.

  3. Activate the non-emergency alerts and verify that the alerts are displayed.

Expected Results
  • For a Web page that supports non-emergency interruptions using a JavaScript alert, checks 1, 2, and 3 above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR16: Providing a script that warns the user a time limit is about to expire

Applicability

Time limits exist that are controlled by script.

This technique relates to:

Description

The objective of this technique is to notify users that they are almost out of time to complete an interaction. When scripts provide functionality that has time limits, the script can include functionality to warn the user of imminent time limits and provide a mechanism to request more time. 20 seconds or more before the time limit occurs, the script provides a confirm dialog that states that a time limit is imminent and asks if the user needs more time. If the user answers "yes" then the time limit is reset. If the user answers "no" or does not respond, the time limit is allowed to expire.

This technique involves time limits set with the window.setTimeout() method. If, for example, the time limit is set to expire in 60 seconds, you can set the time limit for 40 seconds and provide the confirm dialog. When the confirm dialog appears, a new time limit is set for the remaining 20 seconds. Upon expiry of the "grace period time limit" the action that would have been taken at the expiry of the 60 second time limit in the original design is taken.

Examples

Example 1

A page of stock market quotes uses script to refresh the page every five minutes in order to ensure the latest statistics remain available. 20 seconds before the five minute period expires, a confirm dialog appears asking if the user needs more time before the page refreshes. This allows the user to be aware of the impending refresh and to avoid it if desired.

Example Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Stock Market Quotes</title>
<script type="text/javascript">
<!--
function timeControl() {
	// set timer for 4 min 40 sec, then ask user to confirm.
	setTimeout('userCheck()', 280000);
}
function userCheck() {
	// set page refresh for 20 sec
	var id=setTimeout('pageReload()', 20000);
	// If user selects "OK" the timer is reset 
	// else the page will refresh from the server.
	if (confirm("This page is set to refresh in 20 seconds. 
	Would you like more time?"))
	{
	clearTimeout(id);
	timeControl();
	}
}
function pageReload() {
	window.location.reload(true);
}
timeControl();
-->
</script>
</head>
<body>
<h1>Stock Market Quotes</h1>
...etc...
</body>
</html>

Tests

Procedure

On a Web page that has a time limit controlled by a script:

  1. load the page and start a timer that is 20 seconds less than the time limit.

  2. when the timer expires, check that a confirmation dialog is displayed warning of the impending time limit.

Expected Results
  • #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR18: Providing client-side validation and alert

Applicability

Content that validates user input.

This technique relates to:

Description

The objective of this technique is to validate user input as values are entered for each field, by means of client-side scripting. If errors are found, an alert dialog describes the nature of the error in text. Once the user dismisses the alert dialog, it is helpful if the script positions the keyboard focus on the field where the error occurred.

Examples

Example 1: Checking a single control with an event handler

The following script will check that a valid date has been entered in the form control.

Example Code:


<label for="date">Date:</label>
<input type="text" name="date" id="date" 
onchange="if(isNaN(Date.parse(this.value))) 
alert('This control is not a valid date. 
Please re-enter the value.');" />
Example 2: Checking multiple controls when the user submits the form

The following sample shows multiple controls in a form. The form element uses the onsubmit attribute which creates an event handler to execute the validation script when the user attempts to submit the form. If the validation is successful, the event returns true and the form submission proceeds; if the validation finds errors, it displays an error message and returns false to cancel the submit attempt so the user can fix the problems.

Note 1: This example demonstrates an alert for simplicity. A more helpful notification to the user would be to highlight the controls with problems and add information to the page about the nature of the errors and how to navigate to the controls that require data fixes.

Note 2: Although this example uses an onsubmit attribute on the form element for brevity, normal practice is to create a submit event listener when the page is loaded.

Script code:


function validate() {
	// initialize error message
	var msg = "";
	
	//validate name
	var pattern = /^[a-zA-Z\s]+$/;
	var el = document.getElementById("name");
	if (!pattern.test(el.value))  msg += "Name can only have letters and spaces. ";
	
	// validate number
	var pattern = /^[\d\-+\.\s]+$/;
	var el = document.getElementById("tel");
	if (!pattern.test(el.value))  msg += "Telephone number can only have digits and separators. ";
	
	if (msg != "") {
		alert(msg);
		return false;
	} else return true;
}

Form code:


<form action="multiple-controls.html" onsubmit="return validate()">
	<p>
		<label for="name">Name: </label>
		<input type="text" name="name" id="name" />
	</p>
	<p>
		<label for="tel">Telephone number: </label>
		<input type="text" name="tel" id="tel" />				
	</p>
	<p>
		<input type="submit" />
	</p>
</form>

This is demonstrated in the working example of checking multiple controls when the user submits the form.

Tests

Procedure

For form fields that require specific input:

  1. enter invalid data

  2. determine if an alert describing the error is provided.

Expected Results
  • #2 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR19: Using an onchange event on a select element without causing a change of context

Applicability

HTML and XHTML with support for scripting. This technique uses the try/catch construct of JavaScript 1.4.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SCR19.

Description

The objective of this technique is to demonstrate how to correctly use an onchange event with a select element to update other elements on the Web page. This technique will not cause a change of context. When there are one or more select elements on the Web page, an onchange event on one, can update the options in another select element on the Web page. All of the data required by the select elements is included within the Web page.

It is important to note that the select item which is modified is after the trigger select element in the reading order of the Web page. This ensures that assistive technologies will pick up the change and users will encounter the new data when the modified element receives focus. This technique relies on JavaScript support in the user agent.

Examples

Example 1

This example contains two select elements. When an item is selected in the first select, the choices in the other select are updated appropriately. The first select element contains a list of continents. The second select element will contain a partial list of countries located in the selected continent. There is an onchange event associated with the continent select. When the continent selection changes, the items in the country select are modified using JavaScript via the Document Object Model (DOM). All of the data required, the list of countries and continents, is included within the Web page.

Overview of the code below

  • countryLists array variable which contains the list of countries for each continent in the trigger select element.

  • countryChange() function which is called by the onchange event of the continent select element.

  • The XHTML code to create the select elements in the body of the Web page.

Example Code:


<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    <title>Dynamic Select Statements</title> 
<script type="text/javascript">
 //<![CDATA[ 
 // array of possible countries in the same order as they appear in the country selection list 
 var countryLists = new Array(4) 
 countryLists["empty"] = ["Select a Country"]; 
 countryLists["North America"] = ["Canada", "United States", "Mexico"]; 
 countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"]; 
 countryLists["Asia"] = ["Russia", "China", "Japan"]; 
 countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"]; 
 /* CountryChange() is called from the onchange event of a select element. 
 * param selectObj - the select object which fired the on change event. 
 */ 
 function countryChange(selectObj) { 
 // get the index of the selected option 
 var idx = selectObj.selectedIndex; 
 // get the value of the selected option 
 var which = selectObj.options[idx].value; 
 // use the selected option value to retrieve the list of items from the countryLists array 
 cList = countryLists[which]; 
 // get the country select element via its known id 
 var cSelect = document.getElementById("country"); 
 // remove the current options from the country select 
 var len=cSelect.options.length; 
 while (cSelect.options.length > 0) { 
 cSelect.remove(0); 
 } 
 var newOption; 
 // create new options 
 for (var i=0; i<cList.length; i++) { 
 newOption = document.createElement("option"); 
 newOption.value = cList[i];  // assumes option string and value are the same 
 newOption.text=cList[i]; 
 // add the new option 
 try { 
 cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
 } 
 catch (e) { 
 cSelect.appendChild(newOption); 
 } 
 } 
 } 
//]]>
</script>
</head>
<body>
  <noscript>This page requires JavaScript be available and enabled to function properly</noscript>
  <h1>Dynamic Select Statements</h1>
  <label for="continent">Select Continent</label>
  <select id="continent" onchange="countryChange(this);">
    <option value="empty">Select a Continent</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
    <option value="Asia">Asia</option>
    <option value="Europe">Europe</option>
  </select>
  <br/>
  <label for="country">Select a country</label>
  <select id="country">
    <option value="0">Select a country</option>
  </select>
</body>
 </html>

Here is a working example: Dynamic Select

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. Navigate to the trigger select element (in this example, the one to select continents) and change the value of the select.

  2. Navigate to the select element that is updated by the trigger (in this example, the one to select countries).

  3. Check that the matching option values are displayed in the other select element.

  4. Navigate to the trigger select element, navigate through the options but do not change the value.

  5. Check that the matching option values are still displayed in the associated element.

It is recommended that the select elements are tested with an assistive technology to verify that the changes to the associated element are recognized.

Expected Results
  • Step #3 and #5 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR20: Using both keyboard and other device-specific functions

Applicability

Applies to all content that uses Script to implement functionality.

This technique relates to:

Description

The objective of this technique is to illustrate the use of both keyboard-specific and mouse-specific events with code that has a scripting function associated with an event. Using both keyboard-specific and mouse-specific events together ensures that content can be operated by a wide range of devices. For example, a script may perform the same action when a keypress is detected that is performed when a mouse button is clicked. This technique goes beyond the Success Criterion requirement for keyboard access by including not only keyboard access but access using other devices as well.

In JavaScript, commonly used event handlers include, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Some mouse-specific functions have a logical corresponding keyboard-specific function (such as 'onmouseover' and 'onfocus'). A keyboard event handler should be provided that executes the same function as the mouse event handler.

The following table suggests keyboard event handlers to pair mouse event handlers.

Device Handler Correspondences
Use......with
mousedown keydown
mouseup keyup
click [1] keypress [2]
mouseover focus
mouseout blur

1 Although click is in principle a mouse event handler, most HTML and XHTML user agents also process this event when a native HTML control (e.g. a button or a link) is activated, regardless of whether it was activated with the mouse or the keyboard. In practice, therefore, it is not necessary to duplicate this event when adding handlers to natively focusable HTML elements. However, it is necessary when adding handlers to other events, such as in Example 2 below.

2 Since the keypress event handler reacts to any key, the event handler function should check first to ensure the Enter key was pressed before proceeding to handle the event. Otherwise, the event handler will run each time the user presses any key, even the tab key to leave the control, and this is usually not desirable.

Some mouse-specific functions (such as dblclick and mousemove) do not have a corresponding keyboard-specific function. This means that some functions may need to be implemented differently for each device (for example, including a series of buttons to execute, via keyboard, the equivalent mouse-specific functions implemented).

Examples

Example 1

In this example of an image link, the image is changed when the user positions the pointer over the image. To provide keyboard users with a similar experience, the image is also changed when the user tabs to it.

Example Code:


<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" 
onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')"> 
<img id="menu" src="menu_off.gif" alt="Menu" /> 
</a>
Example 2

This example shows a custom image control for which both the mouse and the keyboard can be used to activate the function. The mouse event onclick is duplicated by an appropriate keyboard event onkeypress. The tabindex attribute ensures that the keyboard will have a tab stop on the image. Note that in this example, the nextPage() function should check that the keyboard key pressed was Enter, otherwise it will respond to all keyboard actions while the image has focus, which is not the desired behavior.

Example Code:


<img onclick="nextPage();" onkeypress="nextPage();" tabindex="0" src="arrow.gif" 
alt="Go to next page"> 

Note: This example uses tabindex on an img element. Even though this is currently invalid, it is provided as a transitional technique to make this function work. Custom controls like this should also use WAI-ARIA to expose the role and state of the control.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Find all interactive functionality

  2. Check that all interactive functionality can be accessed using the keyboard alone

Expected Results
  • #2 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR21: Using functions of the Document Object Model (DOM) to add content to a page

Applicability

ECMAScript used inside HTML and XHTML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SCR21.

Description

The objective of this technique is to demonstrate how to use functions of the Document Object Model (DOM) to add content to a page instead of using document.write or object.innerHTML. The document.write() method does not work with XHTML when served with the correct MIME type (application/xhtml+xml), and the innerHTML property is not part of the DOM specification and thus should be avoided. If the DOM functions are used to add the content, user agents can access the DOM to retrieve the content. The createElement() function can be used to create elements within the DOM. The createTextNode() is used to create text associated with elements. The appendChild(), removeChild(), insertBefore() and replaceChild() functions are used to add and remove elements and nodes. Other DOM functions are used to assign attributes to the created elements.

Note: When adding focusable elements into the document, do not add tabindex attributes to explicitly set the tab order as this can cause problems when adding focusable elements into the middle of a document. Let the default tab order be assigned to the new element by not explicitly setting a tabindex attribute.

Examples

Example 1

This example demonstrates use of client-side scripting to validate a form. If errors are found appropriate error messages are displayed. The example uses the DOM functions to add error notification consisting of a title, a short paragraph explaining that an error has occurred, and a list of errors in an ordered list. The content of the title is written as a link so that it can be used to draw the user's attention to the error using the focus method. Each item in the list is also written as a link that places the focus onto the form field in error when the link is followed.

For simplicity, the example just validates two text fields, but can easily be extended to become a generic form handler. Client-side validation should not be the sole means of validation , and should be backed up with server-side validation. The benefit of client-side validation is that you can provide immediate feedback to the user to save them waiting for the errors to come back from the server, and it helps reduce unnecessary traffic to the server.

Here is the script that adds the event handlers to the form. If scripting is enabled, the validateNumbers() function will be called to perform client-side validation before the form is submitted to the server. If scripting is not enabled, the form will be immediately submitted to the server, so validation should also be implemented on the server.

Example Code:


window.onload = initialise;
function initialise()
{
  // Ensure we're working with a relatively standards compliant user agent
  if (!document.getElementById || !document.createElement || !document.createTextNode)
    return;

  // Add an event handler for the number form
  var objForm = document.getElementById('numberform');
  objForm.onsubmit= function(){return validateNumbers(this);};
}

Here is the validation function. Note the use of the createElement(), createTextNode(), and appendChild() DOM functions to create the error message elements.

Example Code:


function validateNumbers(objForm)
{
  // Test whether fields are valid
  var bFirst = isNumber(document.getElementById('num1').value);
  var bSecond = isNumber(document.getElementById('num2').value);
  // If not valid, display errors
  if (!bFirst || !bSecond)
  {
    var objExisting = document.getElementById('validationerrors');
    var objNew = document.createElement('div');
    var objTitle = document.createElement('h2');
    var objParagraph = document.createElement('p');
    var objList = document.createElement('ol');
    var objAnchor = document.createElement('a');
    var strID = 'firsterror';
    var strError;
    // The heading element will contain a link so that screen readers
    // can use it to place focus - the destination for the link is 
    // the first error contained in a list
    objAnchor.appendChild(document.createTextNode('Errors in Submission'));
    objAnchor.setAttribute('href', '#firsterror');
    objTitle.appendChild(objAnchor);
    objParagraph.appendChild(document.createTextNode('Please review the following'));
    objNew.setAttribute('id', 'validationerrors');
    objNew.appendChild(objTitle);
    objNew.appendChild(objParagraph);
    // Add each error found to the list of errors
    if (!bFirst)
    {
      strError = 'Please provide a numeric value for the first number';
      objList.appendChild(addError(strError, '#num1', objForm, strID));
      strID = '';
    }
    if (!bSecond)
    {
      strError = 'Please provide a numeric value for the second number';
      objList.appendChild(addError(strError, '#num2', objForm, strID));
      strID = '';
    }
    // Add the list to the error information
    objNew.appendChild(objList);
    // If there were existing errors, replace them with the new lot,
    // otherwise add the new errors to the start of the form
    if (objExisting)
      objExisting.parentNode.replaceChild(objNew, objExisting);
    else
    {
      var objPosition = objForm.firstChild;
      objForm.insertBefore(objNew, objPosition);
    }
    // Place focus on the anchor in the heading to alert
    // screen readers that the submission is in error
    objAnchor.focus();
    // Do not submit the form
    objForm.submitAllowed = false;
    return false;
  }
  return true;
}

// Function to validate a number
function isNumber(strValue)
{
  return (!isNaN(strValue) && strValue.replace(/^\s+|\s+$/, '') !== '');
} 

Below are the helper functions to create the error message and to set focus to the associated form field.

Example Code:


// Function to create a list item containing a link describing the error
// that points to the appropriate form field
function addError(strError, strFragment, objForm, strID)
{
  var objAnchor = document.createElement('a');
  var objListItem = document.createElement('li');
  objAnchor.appendChild(document.createTextNode(strError));
  objAnchor.setAttribute('href', strFragment);
  objAnchor.onclick = function(event){return focusFormField(this, event, objForm);};
  objAnchor.onkeypress = function(event){return focusFormField(this, event, objForm);};
  // If strID has a value, this is the first error in the list
  if (strID.length > 0)
    objAnchor.setAttribute('id', strID);
  objListItem.appendChild(objAnchor);
  return objListItem;
}

// Function to place focus to the form field in error
function focusFormField(objAnchor, objEvent, objForm)
{
  // Allow keyboard navigation over links
  if (objEvent && objEvent.type == 'keypress')
    if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
      return true;
  // set focus to the form control
  var strFormField = objAnchor.href.match(/[^#]\w*$/);
  objForm[strFormField].focus();
  return false;
}

Here is the HTML for the example form.

Example Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>ECMAScript Form Validation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<h1>Form Validation</h1>
<form id="numberform" method="post" action="form.php">
<fieldset>
<legend>Numeric Fields</legend>
<p>
<label for="num1">Enter first number</label>
<input type="text" size="20" name="num1" id="num1">
</p>
<p>
<label for="num2">Enter second number</label>
<input type="text" size="20" name="num2" id="num2">
</p>
</fieldset>
<p>
<input type="submit" name="submit" value="Submit Form">
</p>
</form>
</body>
</html>

This example is limited to client-side scripting, and should be backed up with server-side validation. The example is limited to the creation of error messages when client-side scripting is available.

Here is a link to a working example: Form Validation

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure

For pages that dynamically create new content:

  1. Examine the source code and check that the new content is not created using document.write(), innerHTML, outerHTML, innerText or outerText.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR22: Using scripts to control blinking and stop it in five seconds or less

Applicability

Technologies that support script-controlled blinking of content.

This technique relates to:

Description

The objective of this technique is to control blinking with script so it can be set to stop in less than five seconds by the script. Script is used to start the blinking effect of content, control the toggle between visible and hidden states, and also stop the effect at five seconds or less. The setTimeout() function can be used to toggle blinking content between visible and hidden states, and stop when the number of iterations by the time between them adds up to nearly five seconds.

Examples

Example 1

This example uses JavaScript to control blinking of some HTML and XHTML content. JavaScript creates the blinking effect by changing the visibility status of the content. It controls the start of the effect and stops it within five seconds.

Example Code:


...
<div id="blink1" class="highlight">New item!</div>
<script type="text/javascript">
<!--
// blink "on" state
function show()
{
	if (document.getElementById)
	document.getElementById("blink1").style.visibility = "visible";
}
// blink "off" state
function hide()
{
	if (document.getElementById)
	document.getElementById("blink1").style.visibility = "hidden";
}
// toggle "on" and "off" states every 450 ms to achieve a blink effect
// end after 4500 ms (less than five seconds)
for(var i=900; i < 4500; i=i+900)
{
	setTimeout("hide()",i);
	setTimeout("show()",i+450);
}
-->
</script>
...
            

Working example of this code: Using script to control blinking.

Tests

Procedure

For each instance of blinking content:

  1. Start a timer for 5 seconds at the start of the blink effect.

  2. When the timer expires, determine if the blinking has stopped.

Expected Results
  • For each instance of blinking content, #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR24: Using progressive enhancement to open new windows on user request

Applicability

HTML 4.01 and XHTML 1.0

This technique relates to:

Description

The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient or be missed completely by some users. If the document type does not allow the target attribute (it does not exist in HTML 4.01 Strict or XHTML 1.0 Strict) or if the developer prefers not to use it, new windows can be opened with ECMAScript. The example below demonstrates how to open new windows with script: it adds an event handler to a link (a element) and warns the user that the content will open in a new window.

Examples

Example 1:

Markup:

The script is included in the head of the document, and the link has an id that can be used as a hook by the script.

Example Code:


<script type="text/javascript" src="popup.js"></script>
…
<a href="help.html" id="newwin">Show Help</a

Script:

Example Code:

 
// Use traditional event model whilst support for event registration
// amongst browsers is poor.
window.onload = addHandlers;

function addHandlers()
{
  var objAnchor = document.getElementById('newwin');

  if (objAnchor)
  {
    objAnchor.firstChild.data = objAnchor.firstChild.data + ' (opens in a new window)';
    objAnchor.onclick = function(event){return launchWindow(this, event);}
    // UAAG requires that user agents handle events in a device-independent manner
    // but only some browsers do this, so add keyboard event to be sure
    objAnchor.onkeypress = function(event){return launchWindow(this, event);}
  }
}

function launchWindow(objAnchor, objEvent)
{
  var iKeyCode, bSuccess=false;

  // If the event is from a keyboard, we only want to open the
  // new window if the user requested the link (return or space)
  if (objEvent && objEvent.type == 'keypress')
  {
    if (objEvent.keyCode)
      iKeyCode = objEvent.keyCode;
    else if (objEvent.which)
      iKeyCode = objEvent.which;

    // If not carriage return or space, return true so that the user agent
    // continues to process the action
    if (iKeyCode != 13 && iKeyCode != 32)
      return true;
  }

  bSuccess = window.open(objAnchor.href);

  // If the window did not open, allow the browser to continue the default
  // action of opening in the same window
  if (!bSuccess)
    return true;

  // The window was opened, so stop the browser processing further
  return false;
}

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Activate each link in the document to check if it opens a new window.

  2. For each link that opens a new window, check that it uses script to accomplish each of the following:

    1. indicates that the link will open in a new window,

    2. uses device-independent event handlers, and

    3. allows the browser to open the content in the same window if a new window was not opened.

Expected Results
  • #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element

Applicability

HTML and XHTML, script

This technique relates to:

Description

The objective of this technique is to place inserted user interface elements into the Document Object Model (DOM) in such a way that the tab order and screen-reader reading order are set correctly by the default behavior of the user agent. This technique can be used for any user interface element that is hidden and shown, such as menus and dialogs.

The reading order in a screen-reader is based on the order of the HTML or XHTML elements in the Document Object Model, as is the default tab order. This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its onclick event. These elements are natively focusable, and their onclick event is device independent. Focus remains on the activated element and the new content, inserted after it, becomes the next thing in both the tab order and screen-reader reading order.

Note that this technique works for synchronous updates. For asynchronous updates (sometimes called AJAX), an additional technique is needed to inform the assistive technology that the asynchronous content has been inserted.

Examples

Example 1

This example creates a menu when a link is clicked and inserts it after the link. The onclick event of the link is used to call the ShowHide script, passing in an ID for the new menu as a parameter.

Example Code:

<a href="#" onclick="ShowHide('foo',this)">Toggle</a>

The ShowHide script creates a div containing the new menu, and inserts a link into it. The last line is the core of the script. It finds the parent of the element that triggered the script, and appends the div it created as a new child to it. This causes the new div to be in the DOM after the link. When the user hits tab, the focus will go to the first focusable item in the menu, the link we created.

Example Code:

function ShowHide(id,src)
{
	var el = document.getElementById(id);
	if (!el)
	{
		el = document.createElement("div");
		el.id = id;
		var link = document.createElement("a");
		link.href = "javascript:void(0)";
		link.appendChild(document.createTextNode("Content"));
		el.appendChild(link);
		src.parentElement.appendChild(el);
	}
	else
	{
		el.style.display = ('none' == el.style.display ? 'block' : 'none');
	}
}

CSS is used to make the div and link look like a menu.

Tests

Procedure
  1. Find all areas of the page that trigger dialogs that are not pop-up windows.

  2. Check that the dialogs are triggered from the click event of a button or a link.

  3. Using a tool that allows you to inspect the DOM generated by script, check that the dialog is next in the DOM.

Expected Results
  • #2 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR27: Reordering page sections using the Document Object Model

Applicability

HTML and XHTML, script

This technique relates to:

Description

The objective of this technique is to provide a mechanism for re-ordering component which is both highly usable and accessible. The two most common mechanisms for reordering are to send users to a set-up page where they can number components, or to allow them to drag and drop components to the desired location. The drag and drop method is much more usable, as it allows the user to arrange the items in place, one at a time, and get a feeling for the results. Unfortunately, drag and drop relies on the use of a mouse. This technique allows users to interact with a menu on the components to reorder them in place in a device independent way. It can be used in place of, or in conjunction with drag and drop reordering functionality.

The menu is a list of links using the device-independent onclick event to trigger scripts which re-order the content. The content is re-ordered in the Document Object Model (DOM), not just visually, so that it is in the correct order for all devices.

Examples

Example 1

This example does up and down reordering. This approach can also be used for two-dimensional reordering by adding left and right options.

The components in this example are list items in an unordered list. Unordered lists are a very good semantic model for sets of similar items, like these components. The menu approach can also be used for other types of groupings.

The modules are list items, and each module, in addition to content in div elements, contains a menu represented as a nested list.

Example Code:

<ul id="swapper">
    <li id="black">
        <div class="module">
            <div class="module_header">
                <!-- menu link -->
                <a href="#" onclick="ToggleMenu(event);">menu</a>
                <!-- menu -->
                <ul class="menu">
                    <li><a href="#" onclick="OnMenuClick(event)" 
                        onkeypress="OnMenuKeypress(event);">up</a></li>
                    <li><a href="#" onclick="OnMenuClick(event)" 
                        onkeypress="OnMenuKeypress(event);">down</a></li>
                </ul>
            </div>
            <div class="module_body">
                Text in the black module
            </div>
        </div>
    </li>
    ...
</ul>

Since we've covered the showing and hiding of menus in the simple tree samples, we'll focus here just on the code that swaps the modules. Once we harmonize the events and cancel the default link action, we go to work. First, we set a bunch of local variables for the elements with which we'll be working: the menu, the module to be reordered, the menuLink. Then, after checking the reorder direction, we try to grab the node to swap. If we find one, we then call swapNode() to swap our two modules, and PositionElement() to move the absolutely-positioned menu along with the module, and then set focus back on the menu item which launched the whole thing.

Example Code:

function MoveNode(evt,dir)
{
    HarmonizeEvent(evt);
    evt.preventDefault();

    var src = evt.target;
    var menu = src.parentNode.parentNode;
    var module = menu.parentNode.parentNode.parentNode;
    var menuLink = module.getElementsByTagName("a")[0];
    var swap = null;
    
    switch(dir)
    {
        case 'up':
        {
            swap = module.previousSibling;
            while (swap && swap.nodeType != 1)
            {
                swap = swap.previousSibling;
            }
            break;
        }
        case 'down':
        {
            swap = module.nextSibling;
            while (swap && swap.nodeType != 1)
            {
                swap = swap.nextSibling;
            }
            break;
        }
    }
    if (swap && swap.tagName == node.tagName)
    {
        module.swapNode(swap);
        PositionElement(menu,menuLink,false,true);
    }
    src.focus();
}

The CSS for the node swap is not much different than that of our previous tree samples, with some size and color adjustment for the modules and the small menu.

Example Code:

ul#swapper { margin:0px; padding:0px; list-item-style:none; }
ul#swapper li { padding:0; margin:1em; list-style:none; height:5em; width:15em; 
    border:1px solid black; }
ul#swapper li a { color:white; text-decoration:none; font-size:90%; }

ul#swapper li div.module_header { text-align:right; padding:0 0.2em; }
ul#swapper li div.module_body { padding:0.2em; }

ul#swapper ul.menu { padding:0; margin:0; list-style:none; background-color:#eeeeee; 
    height:auto; position:absolute; text-align:left; border:1px solid gray; display:none; }
ul#swapper ul.menu li { height:auto; border:none; margin:0; text-align:left; 
    font-weight:normal; width:5em; }
ul#swapper ul.menu li a { text-decoration:none; color:black; padding:0 0.1em; 
    display:block; width:100%; }

Tests

Procedure
  1. Find all components in the Web Unit which can be reordered via drag and drop.

  2. Check that there is also a mechanism to reorder them using menus build of lists of links.

  3. Check that the menus are contained within the reorderable items in the DOM.

  4. Check that scripts for reordering are triggered only from the onclick event of links.

  5. Check that items are reordered in the DOM, not only visually.

Expected Results
  • #2 through #5 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR28: Using an expandable and collapsible menu to bypass block of content

Applicability

Technologies that provide client side scripting.

This technique relates to:

Description

This technique allows users to skip repeated material by placing that material in a menu that can be expanded or collapsed under user control. The user can skip the repeated material by collapsing the menu. The user invokes a user interface control to hide or remove the elements of the menu. The resources section lists several techniques for menus, toolbars and trees, any of which can be used to provide a mechanism for skipping navigation.

Note: Similiar approaches can be implemented using server-side scripting and reloading a modified version of the Web page.

Examples

Example 1

The navigation links at top of a Web page are all entries in a menu implemented using HTML, CSS, and Javascript. When the navigation bar is expanded, the navigation links are available to the user. When the navigation bar is collapsed, the links are not available.

Example Code:


...

  <script type="text/javascript">
  function toggle(id){
    var n = document.getElementById(id);
    n.style.display =  (n.style.display != 'none' ? 'none' : '' );
  }
  </script>

...

  <a href="#" onclick="toggle('navbar')">Toggle Navigation Bar</a>

  <ul id="navbar">
  <li><a href="http://target1.html">Link 1</a></li>
  <li><a href="http://target2.html">Link 2</a></li>
  <li><a href="http://target3.html">Link 3</a></li>
  <li><a href="http://target4.html">Link 4</a></li>
  </ul>

...

Working example of this code: Toggle navigation bar with a link.

Example 2

The table of contents for a set of Web pages is repeated near the beginning of each Web page. A button at the beginning of the table of contents lets the user remove or restore it on the page.

Example Code:


...

   <script type="text/javascript">
  function toggle(id){
    var n = document.getElementById(id);
    n.style.display =  (n.style.display != 'none' ? 'none' : '' );
  }
  </script>

  ...

  <button onclick="return toggle('toc');">Toggle Table of Contents</button>
  <div id="toc">
    ...
  </div>

...

Working example of this code: Toggle table of contents with a button.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that some user interface control allows the repeated content to be expanded or collapsed.

  2. Check that when the content is expanded, it is included in the programmatically determined content at a logical place in the reading order.

  3. Check that when the content is collapsed, it is not part of the programmatically determined content.

Expected Results
  • All checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR29: Adding keyboard-accessible actions to static HTML elements

Applicability

HTML and XHTML, Script

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SCR29.

Description

The objective of this technique is to demonstrate how to provide keyboard access to a user interface control that is implemented by actions to static HTML elements such as div or span. This technique ensures that the element is focusable by setting the tabindex attribute, and it ensures that the action can be triggered from the keyboard by providing an onkeyup or onkeypress handler in addition to an onclick handler.

When the tabindex attribute has the value 0, the element can be focused via the keyboard and is included in the tab order of the document. When the tabindex attribute has the value -1, the element cannot be tabbed to, but focus can be set programmatically, using element.focus().

Because static HTML elements do not have actions associated with them, it is not possible to provide a backup implementation or explanation in environments in which scripting is not available. This technique should only be used in environments in which client-side scripting can be relied upon.

Note: Such user interface controls must still satisfy Success Criterion 4.1.2. Applying this technique without also providing role, name, and state information about the user interface control will results in Failure F59, Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML.

Examples

Example 1: Adding a JavaScript action to a div element

The div element on the page is given a unique id attribute and a tabindex attribute with value 0. A script uses the Document Object Model (DOM) to find the div element by its id and add the onclick handler and the onkeyup handler. The onkeyup handler will invoke the action when the Enter key is pressed. Note that the div element must be loaded into the DOM before it can be found and modified. This is usually accomplished by calling the script from the onload event of the body element. The script to add the event handlers will only execute if the user agent supports and has JavaScript enabled.

Example Code:


...
<script type="text/javascript">
 // this is the function to perform the action. This simple example toggles a message.
 function doSomething(event) {
   var msg=document.getElementById("message");
   msg.style.display = msg.style.display=="none" ? "" : "none";
   //return false from the function to make certain that the href of the link does not get invoked
   return false;
 }
 // this is the function to perform the action when the Enter key has been pressed.  
 function doSomethingOnEnter(event) {
   var key = 0;
   // Determine the key pressed, depending on whether window.event or the event object is in use
   if (window.event) {
     key = window.event.keyCode;
   } else if (event) {
     key = event.keyCode;
   }
   // Was the Enter key pressed?
   if (key == 13) {
     return doSomething(event);
   } 
   // The event has not been handled, so return true
   return true;
 }
 // This setUpActions() function must be called to set the onclick and onkeyup event handlers onto the existing 
 // div element. This function must be called after the div element with id="active" has been loaded into the DOM.
 // In this example the setUpActions() function is called from the onload event for the body element.
 function setUpActions() {
   // get the div object
   var active=document.getElementById("active");
   // assign the onclick handler to the object.
   // It is important to return false from the onclick handler to prevent the href attribute
   // from being followed after the function returns.
   active.onclick=doSomething;
   // assign the onkeyup handler to the object.
   active.onkeyup=doSomethingOnEnter;
 }
 </script>

 <body onload="setUpActions();">
 <p>Here is the link to modify with a javascript action:</p>
 <div>
  <span id="active" tabindex="0">Do Something</span>
 </div>
 <div id="message">Hello, world!</div>
...

Working example of this code: Creating Divs with Actions using JavaScript.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

In a user agent that supports Scripting:

  1. Click on the control with the mouse

  2. Check that the scripting action executes properly

  3. Check that it is possible to navigate to and give focus to the control via the keyboard

  4. Set keyboard focus to the control

  5. Check that pressing ENTER invokes the scripting action.

Expected Results
  • All of the checks are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR30: Using scripts to change the link text

Applicability

Client-side scripting used with HTML and XHTML

This technique relates to:

Description

The purpose of this technique is to allow users to choose to have additional information added to the text of links so that the links can be understood out of context.

Some users prefer to have links that are self-contained, where there is no need to explore the context of the link. Other users find including the context information in each link to be repetitive and to reduce their ability to use a site. Among users of assistive technology, the feedback to the working group on which is preferable has been divided. This technique allows users to pick the approach that works best for them.

A link is provided near the beginning of the page that will expand the link text of the links on the page so that no additional context is needed to understand the purpose of any link. It must always be possible to understand the purpose of the expansion link directly from its link text.

This technique expands the links only for the current page view. It is also possible, and in some cases would be advisable, to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site.

Examples

Example 1

This example uses Javascript to add contextual information directly to the text of a link. The link class is used to determine which additional text to add. When the "Expand Links" link is activated, each link on the page is tested to see whether additional text should be added.

Example Code:


...
<script type="text/javascript">
var expanded = false;
var linkContext = {
	"hist":" version of The History of the Web",
	"cook":" version of Cooking for Nerds"
};

function doExpand() {
	var links = document.links;
	
	for (link of links) {
		var cn = link.className;
		if (linkContext[cn]) {
			span = link.appendChild(document.createElement("span"));
			span.setAttribute("class", "linkexpansion");
			span.appendChild(document.createTextNode(linkContext[cn]));
		}
	}
	objUpdate = document.getElementById('expand');
	if (objUpdate)
	{
		objUpdate.childNodes[0].nodeValue = "Collapse links";
	}
	expanded = true;
}

function doCollapse() {
	objUpdate = document.getElementById('expand');
	var spans = document.getElementsByTagName("span");
	var span;

	// go backwards through the set as removing from the front changes indices
	// and messes up the process
	for (i = spans.length - 1; i >= 0; i--) {
		span = spans[i];
		if (span.getAttribute("class") == "linkexpansion")
			span.parentNode.removeChild(span);
	}
	if (objUpdate)
	{
		objUpdate.childNodes[0].nodeValue = "Expand links";
	}
	expanded = false;
}

function toggle() {
	if (expanded) doCollapse();
	else doExpand();
}
</script>

...

<h1>Books for download</h1>
<p><button id="expand" onclick="toggle();">Expand Links</button></p>
<ul>
	<li>The History of the Web: <a href="history.docx" class="hist">Word</a>, <a href="history.pdf" class="hist">PDF</a>, <a href="history.html" class="hist">HTML</a> </li>

	<li>Cooking for Nerds: <a href="history.docx" class="cook">Word</a>, <a href="history.pdf" class="cook">PDF</a>, <a href="history.html" class="cook">HTML</a> </li>
</ul>

...

Working example of this code: Providing link expansions on demand.

Tests

Procedure
  1. Check that there is a link near the beginning of the page to expand links

  2. Check that the link identified in step 1 can be identified from link text alone

  3. Find any links on the page that cannot be identified from link text alone

  4. Activate the control identified in step 1

  5. Check that the purpose of the links identified in step 3 can now be identified from link text alone

Expected Results
  • Checks #1, #2, and #5 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR31: Using script to change the background color or border of the element with focus

Applicability

HTML and XHTML, CSS, Script

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SCR31.

Description

This purpose of this technique is to allow the author to use JavaScript to apply CSS, in order to make the focus indicator more visible than it would ordinarily be. When an element receives focus, the background color or border is changed to make it visually distinct. When the element loses focus, it returns to its normal styling. This technique can be used on any HTML user agent that supports Script and CSS, regardless of whether it supports the :focus pseudoclass.

Examples

Example 1

In this example, when the link receives focus, its background turns yellow. When it loses focus, the yellow is removed. Note that if the link had a background color to begin with, you would use that color rather than "" in the script.

Example Code:


...
<script>
 function toggleFocus(el)
 {
  el.style.backgroundColor =  el.style.backgroundColor=="yellow" ? "inherit" : "yellow";
 }
</script>

...

<a href="example.html" onfocus="toggleFocus(this)" onblur="toggleFocus(this)">focus me</a>
...

Tests

Procedure
  1. Tab to each element in the page

  2. Check that the focus indicator is visible

Expected Results
  • Step #2 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR32: Providing client-side validation and adding error text via the DOM

Applicability

Script used with HTML or XHTML.

This technique relates to:

Description

The objective of this technique is to demonstrate the display of an error message when client side validation of a form field has failed. Anchor elements are used to display the error messages in a list and are inserted above the fields to be validated. Anchor elements are used in the error messages so that focus can be placed on the error message(s), drawing the user's attention to it. The href of the anchor elements contain an in-page link which references the fields where error(s) have been found.

In a deployed application, if Javascript is turned off, client side validation will not occur. Therefore, this technique would only be sufficient in situations where scripting is relied upon for conformance or when server side validation techniques are also used to catch any errors and return the page with information about the fields with errors.

Examples

Example 1

This example validates required fields as well as fields where a specific format is required. When an error is identified, the script inserts a list of error messages into the DOM and moves focus to them.

Screenshot showing the error messages for several fields that were not filled out correctly. Error messages appear as a list of links near the top of the form.

HTML and Javascript code

Here is the HTML for the example form:

Example Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Form Validation</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link href="css/validate.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="scripts/validate.js"/>
    </head>
    <body>

        <h1>Form Validation</h1>

        <p>The following form is validated before being submitted if scripting is available,
            otherwise the form is validated on the server. All fields are required, except those
            marked optional. If errors are found in the submission, the form is cancelled and 
            a list of errors is displayed at the top of the form.</p>

        <p> Please enter your details below. </p>

        <h2>Validating Form</h2>

        <form id="personalform" method="post" action="index.php">
            <div class="validationerrors"/>
            <fieldset>
                <legend>Personal Details</legend>
                <p>
                    <label for="forename">Please enter your forename</label>
                    <input type="text" size="20" name="forename" id="forename" class="string"
                        value=""/>
                </p>
                <p>
                    <label for="age">Please enter your age</label>
                    <input type="text" size="20" name="age" id="age" class="number" value=""/>
                </p>
                <p>
                    <label for="email">Please enter your email address</label>
                    <input type="text" size="20" name="email" id="email" class="email" value=""/>
                </p>
            </fieldset>
            <p>
                <input type="submit" name="signup" value="Sign up"/>
            </p>
        </form>
        <h2>Second Form</h2>
        <form id="secondform" method="post" action="index.php#focuspoint">
            <div class="validationerrors"/>
            <fieldset>
                <legend>Second Form Details</legend>
                <p>
                    <label for="suggestion">Enter a suggestion</label>
                    <input type="text" size="20" name="suggestion" id="suggestion" 
                      class="string" value=""/>
                </p>
                <p>
                    <label for="optemail">Please enter your email address (optional)</label>
                    <input type="text" size="20" name="optemail" id="optemail"
                        class="optional email" value=""/>
                </p>
                <p>
                    <label for="rating">Please rate this suggestion</label>
                    <input type="text" size="20" name="rating" id="rating" 
                      class="number" value=""/>
                </p>
                <p>
                    <label for="jibberish">Enter some jibberish (optional)</label>
                    <input type="text" size="20" name="jibberish" id="jibberish" value=""/>
                </p>

            </fieldset>
            <p>
                <input type="submit" name="submit" value="Add Suggestion"/>
            </p>
        </form>
    </body>
</html>                      

Here is the Javascript which performs the validation and inserts the error messages:

Example Code:


window.onload = initialise;

function initialise()
{
   var objForms = document.getElementsByTagName('form');
   var iCounter;

   // Attach an event handler for each form
   for (iCounter=0; iCounter<objForms.length; iCounter++)
   {
      objForms[iCounter].onsubmit = function(){return validateForm(this);};
   }
}


// Event handler for the form
function validateForm(objForm)
{
   var arClass = [];
   var iErrors = 0;
   var objField = objForm.getElementsByTagName('input');
   var objLabel = objForm.getElementsByTagName('label');
   var objList = document.createElement('ol');
   var objError, objExisting, objNew, objTitle, objParagraph, objAnchor, objPosition;
   var strLinkID, iFieldCounter, iClassCounter, iCounter;

   // Get the id or name of the form, to make a unique
   // fragment identifier
   if (objForm.id)
   {
      strLinkID = objForm.id + 'ErrorID';
   }
   else
   {
      strLinkID = objForm.name + 'ErrorID';
   }

   // Iterate through input form controls, looking for validation classes
   for (iFieldCounter=0; iFieldCounter<objField.length; iFieldCounter++)
   {
      // Get the class for the field, and look for the appropriate class
      arClass = objField[iFieldCounter].className.split(' ');
      for (iClassCounter=0; iClassCounter<arClass.length; iClassCounter++)
      {
         switch (arClass[iClassCounter])
         {
            case 'string':
               if (!isString(objField[iFieldCounter].value, arClass))
               {
                  if (iErrors === 0)
                  {
                     logError(objField[iFieldCounter], objLabel, objList, strLinkID);
                  }
                  else
                  {
                     logError(objField[iFieldCounter], objLabel, objList, '');
                  }
                  iErrors++;
               }
               break;
            case 'number':
               if (!isNumber(objField[iFieldCounter].value, arClass))
               {
                  if (iErrors === 0)
                  {
                     logError(objField[iFieldCounter], objLabel, objList, strLinkID);
                  }
                  else
                  {
                     logError(objField[iFieldCounter], objLabel, objList, '');
                  }
                  iErrors++;
               }
               break;

            case 'email' :
               if (!isEmail(objField[iFieldCounter].value, arClass))
               {
                  if (iErrors === 0)
                  {
                     logError(objField[iFieldCounter], objLabel, objList, strLinkID);
                  }
                  else
                  {
                     logError(objField[iFieldCounter], objLabel, objList, '');
                  }
                  iErrors++;
               }
               break;
         }
      }
   }

   if (iErrors > 0)
   {
      // If not valid, display error messages
      objError = objForm.getElementsByTagName('div');
      
      // Look for existing errors
      for (iCounter=0; iCounter<objError.length; iCounter++)
      {
         if (objError[iCounter].className == 'validationerrors')
         {
            objExisting = objError[iCounter];
         }
      }

      objNew = document.createElement('div');
      objTitle = document.createElement('h2');
      objParagraph = document.createElement('p');
      objAnchor = document.createElement('a');

      if (iErrors == 1)
      {
         objAnchor.appendChild(document.createTextNode('1 Error in Submission'));
      }
      else
      {
         objAnchor.appendChild(document.createTextNode(iErrors + ' Errors in Submission'));
      }
      objAnchor.href = '#' + strLinkID;
      objAnchor.className = 'submissionerror';

      objTitle.appendChild(objAnchor);
      objParagraph.appendChild(document.createTextNode('Please review the following'));
      objNew.className = 'validationerrors';

      objNew.appendChild(objTitle);
      objNew.appendChild(objParagraph);
      objNew.appendChild(objList);
      
      // If there were existing error, replace them with the new lot,
      // otherwise add the new errors to the start of the form
      if (objExisting)
      {
         objExisting.parentNode.replaceChild(objNew, objExisting);
      }
      else
      {
         objPosition = objForm.firstChild;
         objForm.insertBefore(objNew, objPosition);
      }

      // Allow for latency
      setTimeout(function() { objAnchor.focus(); }, 50);
      
      // Don't submit the form
      objForm.submitAllowed = false;
      return false;
   }

   // Submit the form
   return true;
}

// Function to add a link in a list item that points to problematic field control
function addError(objList, strError, strID, strErrorID)
{
   var objListItem = document.createElement('li');
   var objAnchor = document.createElement('a');
   
   // Fragment identifier to the form control
   objAnchor.href='#' + strID;

   // Make this the target for the error heading
   if (strErrorID.length > 0)
   {
      objAnchor.id = strErrorID;
   }

   // Use the label prompt for the error message
   objAnchor.appendChild(document.createTextNode(strError));
   // Add keyboard and mouse events to set focus to the form control
   objAnchor.onclick = function(event){return focusFormField(this, event);};
   objAnchor.onkeypress = function(event){return focusFormField(this, event);};
   objListItem.appendChild(objAnchor);
   objList.appendChild(objListItem);
}

function focusFormField(objAnchor, objEvent)
{
   var strFormField, objForm;

   // Allow keyboard navigation over links
   if (objEvent && objEvent.type == 'keypress')
   {
      if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
      {
         return true;
      }
   }

   // set focus to the form control
   strFormField = objAnchor.href.match(/[^#]\w*$/);
   objForm = getForm(strFormField);
   objForm[strFormField].focus();
   return false;
}

// Function to return the form element from a given form field name
function getForm(strField)
{
   var objElement = document.getElementById(strField);

   // Find the appropriate form
   do
   {
      objElement = objElement.parentNode;
   } while (!objElement.tagName.match(/form/i) && objElement.parentNode);

   return objElement;
}

// Function to log the error in a list
function logError(objField, objLabel, objList, strErrorID)
{
   var iCounter, strError;

   // Search the label for the error prompt
   for (iCounter=0; iCounter<objLabel.length; iCounter++)
   {
      if (objLabel[iCounter].htmlFor == objField.id)
      {
         strError = objLabel[iCounter].firstChild.nodeValue;
      }
   }

   addError(objList, strError, objField.id, strErrorID);
}

// Validation routines - add as required

function isString(strValue, arClass)
{
   var bValid = (typeof strValue == 'string' && strValue.replace(/^\s*|\s*$/g, '') 
     !== '' && isNaN(strValue));

   return checkOptional(bValid, strValue, arClass);
}

function isEmail(strValue, arClass)
{
   var objRE = /^[\w-\.\']{1,}\@([\da-zA-Z\-]{1,}\.){1,}[\da-zA-Z\-]{2,}$/;
   var bValid = objRE.test(strValue);

   return checkOptional(bValid, strValue, arClass);
}

function isNumber(strValue, arClass)
{
   var bValid = (!isNaN(strValue) && strValue.replace(/^\s*|\s*$/g, '') !== '');

   return checkOptional(bValid, strValue, arClass);
}

function checkOptional(bValid, strValue, arClass)
{
   var bOptional = false;
   var iCounter;

   // Check if optional
   for (iCounter=0; iCounter<arClass.length; iCounter++)
   {
      if (arClass[iCounter] == 'optional')
      {
         bOptional = true;
      }
   }

   if (bOptional && strValue.replace(/^\s*|\s*$/g, '') === '')
   {
      return true;
   }

   return bValid;
   }
   

Working example of this technique implemented using PHP, Javascript, CSS and XHTML: Form Validation Example.

Tests

Procedure

Create error messages using anchor tags and appropriate scripting via the technique above.

  1. Load the page.

  2. Enter a valid value in the field(s) associated with an error message and verify that no error messages are displayed.

  3. Enter an invalid value in the field(s) associated with an error message and verify that the correct error message for the field is displayed.

  4. Verify that the error messages receive focus.

  5. Enter a valid value in the field(s) associated with the displayed error message and verify that the error message is removed.

  6. Repeat for all fields with associated error messages created via anchor tags.

Note: It is recommended that you also run the above procedure using an assistive technology.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR33: Using script to scroll content, and providing a mechanism to pause it

Applicability

Technologies that support script-controlled scrolling of content.

This technique relates to:

Description

The objective of this technique is to provide a way for users to stop scrolling content when the scrolling is created by a script. Scrolling content can be difficult or impossible to read by users with low vision or with cognitive disabilities. The movement can also be distracting for some people making it difficult for them to concentrate on other parts of the Web page.

Examples

Example 1

In this example CSS and Javascript are used to visually present some text in a scrolling format. A link is included to pause the scrolling movement.

This implementation will display the full text and omit the link when Javascript or CSS are unsupported or inactive.

The following code is an amended version of webSemantic's Accessible Scroller (as at July 2008).

The XHTML component:

Example Code:


...
<div id="scroller">
<p id="tag">This text will scroll and a Pause/Scroll link will be present 
when Javascript and CSS are supported and active.</p>
</div>
...

The CSS component:

Example Code:


...
body {font:1em verdana,sans-serif; color:#000; margin:0}

/* position:relative and overflow:hidden are required */
#scroller { position:relative; overflow:hidden; width:15em; border:1px solid #008080; }

/* add formatting for the scrolling text */
#tag { margin:2px 0; }

/* #testP must also contain all text-sizing properties of #tag  */
#testP { visibility:hidden; position:absolute; white-space:nowrap; } 

/* used as a page top marker and to limit width */
#top { width:350px; margin:auto; }
...

The JavaScript component:

Example Code:


var speed=50        // speed of scroller
var step=3          // smoothness of movement
var StartActionText= "Scroll"  // Text for start link
var StopActionText = "Pause"   // Text for stop link

var x, scroll, divW, sText=""

function onclickIE(idAttr,handler,call){
  if ((document.all)&&(document.getElementById)){idAttr[handler]="Javascript:"+call}
}

function addLink(id,call,txt){
  var e=document.createElement('a')
  e.setAttribute('href',call)
  var linktext=document.createTextNode(txt)
  e.appendChild(linktext)
  document.getElementById(id).appendChild(e)
}

function getElementStyle() {
    var elem = document.getElementById('scroller');
    if (elem.currentStyle) {
        return elem.currentStyle.overflow;
    } else if (window.getComputedStyle) {
        var compStyle = window.getComputedStyle(elem, '');
        return compStyle.getPropertyValue("overflow");
    }
    return "";
}

function addControls(){
// test for CSS support first 
// test for the overlow property value set in style element or external file
if (getElementStyle()=="hidden") {
  var f=document.createElement('div');
  f.setAttribute('id','controls');
  document.getElementById('scroller').parentNode.appendChild(f);
  addLink('controls','Javascript:clickAction(0)',StopActionText);
  onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction(0)');
  document.getElementById('controls').style.display='block';
  }
}

function stopScroller(){clearTimeout(scroll)}

function setAction(callvalue,txt){
  var c=document.getElementById('controls')
  c.childNodes[0].setAttribute('href','Javascript:clickAction('+callvalue+')')
  onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction

('+callvalue+')')
  c.childNodes[0].firstChild.nodeValue=txt
}

function clickAction(no){
  switch(no) {
    case 0:
      stopScroller();
      setAction(1,StartActionText);
      break;
    case 1:
      startScroller();
      setAction(0,StopActionText);
  }
}

function startScroller(){
  document.getElementById('tag').style.whiteSpace='nowrap'
  var p=document.createElement('p')
  p.id='testP'
  p.style.fontSize='25%' //fix for mozilla. multiply by 4 before using
  x-=step
  if (document.getElementById('tag').className) p.className=document.getElementById

('tag').className
  p.appendChild(document.createTextNode(sText))
  document.body.appendChild(p)
  pw=p.offsetWidth
  document.body.removeChild(p)
  if (x<(pw*4)*-1){x=divW}
  document.getElementById('tag').style.left=x+'px'
  scroll=setTimeout('startScroller()',speed)
}

function initScroller(){
  if (document.getElementById && document.createElement && document.body.appendChild) {
    addControls();
    divW=document.getElementById('scroller').offsetWidth;
    x=divW;
    document.getElementById('tag').style.position='relative';
    document.getElementById('tag').style.left=divW+'px';
    var ss=document.getElementById('tag').childNodes;
    for (i=0;i<ss.length;i++) {sText+=ss[i].nodeValue+" "};
    scroll=setTimeout('startScroller()',speed);
  }
}

function addLoadEvent(func) {
  if (!document.getElementById | !document.getElementsByTagName) return
  var oldonload = window.onload
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload()
      func()
    }
  }
}

addLoadEvent(initScroller)

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that a mechanism is provided to pause the scrolling content.

  2. Use the pause mechanism to pause the scrolling content.

  3. Check that the scrolling has stopped and does not restart by itself.

  4. Check that a mechanism is provided to restart the paused content.

  5. Use the restart mechanism provided to restart the scrolling content.

  6. Check that the scrolling has resumed from the point where it was stopped.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR34: Calculating size and position in a way that scales with text size

Applicability

Client-side scripting.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SCR34.

Description

The objective of this technique is to calculate the size and position of elements in a way that will scale appropriately as the text size is scaled.

There are four properties in JavaScript that help determine the size and position of elements:

  • offsetHeight (the height of the element in pixels)

  • offsetWidth (the width of the element in pixels)

  • offsetLeft (the distance of the element from the left of its parent (offsetParent) in pixels)

  • offsetTop (the distance of the element from the top of its parent (offsetParent) in pixels)

Calculating the height and width using offsetHeight and offsetWidth is straightforward, but when calculating an object's left and top position as absolute values, we need to consider the parent element. The calculatePosition function below iterates through all of an element's parent nodes to give a final value. The function takes two parameters; objElement (the name of the element in question), and the offset property (offsetLeft or offsetTop):

Examples

Example 1

The Javascript function:

Example Code:


function calculatePosition(objElement, strOffset)
{
    var iOffset = 0;

    if (objElement.offsetParent)
    {
        do 
        {
            iOffset += objElement[strOffset];
            objElement = objElement.offsetParent;
        } while (objElement);
    }

    return iOffset;
}

The following example illustrates using the function above by aligning an object beneath a reference object, the same distance from the left:

Example Code:


// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');

objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop') + objReference.offsetHeight + 'px'; 

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Open a page that is designed to adjust container sizes as text size changes.

  2. Increase the text size up to 200% using the browser's text size adjustment (not the zoom feature).

  3. Examine the text to ensure the text container size is adjusted to accommodate the size of the text.

  4. Ensure that no text is "clipped" or has disappeared as a result of the increase in text size.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons

Applicability

Script used with HTML or XHTML.

This technique relates to:

Description

The objective of this technique is to demonstrate how to invoke a scripting function in a way that is keyboard accessible by attaching it to a keyboard-accessible control. In order to ensure that scripted actions can be invoked from the keyboard, they are associated with "natively actionable" HTML elements (links and buttons). The onclick event of these elements is device independent. While "onclick" sounds like it is tied to the mouse, the onclick event is actually mapped to the default action of a link or button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility API.

This technique relies on client-side scripting. However, it is beneficial to provide a backup implementation or explanation for environments in which scripting is not available. When using anchor elements to invoke a JavaScript action, a backup implementation or explanation is provided via the href attribute. When using buttons, it is provided via a form post.

Examples

Example 1

Link that runs a script and has no fallback for non-scripted browsers. This approach should only be used when script is relied upon as an Accessibility Supported Technology.

Even though we do not want to navigate from this link, we must use the href attribute on the a element in order to make this a true link and get the proper eventing. In this case, we're using "#" as the link target, but you could use anything. This link will never be navigated.

The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the page would refresh after the script ran.

Example Code:


<script> 
function doStuff()
 {
  //do stuff
    return false;
  }
</script>
<a href="#" onclick="return doStuff();">do stuff</a>
Example 2

Link that runs script, but navigates to another page when script is not available. This approach can be used to create sites that don't rely on script, if and only if the navigation target provides the same functionality as the script. This example is identical to the example 1, except that its href is now set to a real page, dostuff.htm. Dostuff.htm must provide the same functionality as the script.The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the browser would navigate to dostuff.htm after the script ran.

Example Code:


<script> 
function doStuff() 
 {  
  //do stuff  
  return false; 
 }
</script>
<a href="dostuff.htm" onclick="return doStuff();">do stuff</a>

A working example of this code is available. Refer to Creating Action Links using JavaScript.

Example 3

Button that runs a script and falls back to a form post for users without script. This approach can be used by sites that do not rely on script, if and only if the form post provides the same functionality as the script. The onsubmit="return false;" prevents the form from submitting.

Example Code:


<script>
  function doStuff()
 {
     //do stuff
 }
</script>
<form action="doStuff.aspx" onsubmit="return false;">
 <input type="submit" value="Do Stuff" onclick="doStuff();" />
</form>

A working example of this code is available. Refer to Creating Action Buttons using JavaScript.

Example 4

Button that runs a script, implemented with input type="image". Note that an alt attribute must be added to the input to provide a text equivalent for the image. This approach should only be used when script is relied upon.

Example Code:


<script>
  function doStuff()
  {
     //do stuff
   return false;
  }
</script>
<input  type="image"  src="stuff.gif"  alt="Do stuff"  onclick="return doStuff();" />
Example 5

Button that runs a script, implemented with input type="submit", input type="reset" or input type="button". This approach should only be used when script is relied upon.

Example Code:


<input type="submit" onclick="return doStuff();" value=”Do Stuff” />
Example 6

Button that runs a script, implemented with button/button. This is valuable when you want more control over the look of your button. In this particular example, the button contains both an icon and some text. This approach should only be used when script is relied upon.

Example Code:


<button onclick="return doStuff();">
 <img src="stuff.gif" alt="stuff icon">
 Do Stuff
</button>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For all script actions associated with a, button, or input elements:

  1. In a user agent that supports Scripting

    • Click on the control with the mouse.

    • Check that the scripting action executes properly.

    • If the control is an anchor element, check that the URI in the href attribute of the anchor element is not invoked.

    • Check that it is possible to navigate to and give focus to the control via the keyboard.

    • Set keyboard focus to the control.

    • Check that pressing ENTER invokes the scripting action.

    • If the control is an anchor element, check that the URI in the href attribute of the anchor element is not invoked.

  2. In a user agent that does not support Scripting

    • Click on the control with the mouse.

    • If the control is an anchor element, check that the URI in the href attribute of the anchor element is invoked.

    • Check that it is possible to navigate to and give focus to the control via the keyboard.

    • Set keyboard focus to the control.

    • If the control is an anchor element, check that pressing ENTER invokes the URI of the anchor element's href attribute.

Expected Results
  • All of the above checks are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR36: Providing a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or area

Applicability

Any technology that moves, blinks, or updates text and can create a static block of text.

This technique relates to:

Description

Some Web pages display scrolling text because there is limited space available. Scrolling the text in a small text window makes the content available for users who can read quickly enough, but causes problems for users who read more slowly or use assistive technology. This technique provides a mechanism to stop the movement and make the entire block of text available statically. The text may be made available in a separate window or in a (larger) section of the page. Users can then read the text at their own speed.

This technique does not apply when the text that is moving can not be displayed all at once on the screen (e.g., a long chat conversation).

Note: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version (CSS) and Understanding Conforming Alternate Versions for more information.

Examples

Example 1: Expanding Scrolling Text in Place

A large block of text is scrolled through a small marquee area of the page. A button lets the user stop the scrolling and display the entire block of text.

Note: This code example requires that both CSS and JavaScript be turned on and available.

The CSS component:

Example Code:

#scrollContainer {
        visibility: visible;
        overflow: hidden;
        top: 50px; left: 10px;
        background-color: darkblue;
      }
      .scrolling {
        position: absolute;
        width: 200px;
        height: 50px;
      }
      .notscrolling {
        width: 500px;
        margin:10px;
      }
      #scrollingText {
        top: 0px;
        color: white;
      }
      .scrolling #scrollingText {
        position: absolute;
      }
      </a>    

The script and HTML content:

Example Code:

<script type="text/javascript">

      var tid;
      function init() {
        var st = document.getElementById('scrollingText');
        st.style.top = '0px';
        initScrolling();
      }
      function initScrolling () {
        tid = setInterval('scrollText()', 300);
      }
      function scrollText () {
        var st = document.getElementById('scrollingText');
        if (parseInt(st.style.top) > (st.offsetHeight*(-1) + 8)) {
          st.style.top = (parseInt(st.style.top) - 5) + 'px';
        } else {
          var sc = document.getElementById('scrollContainer');
          st.style.top = parseInt(sc.offsetHeight) + 8 + 'px';
        }
      }
      function toggle() {
        var scr = document.getElementById('scrollContainer');
        if (scr.className == 'scrolling') {
          scr.className = 'notscrolling';
          clearInterval(tid);
           document.getElementById('scrollButton').value="Shrink";
        } else {
          scr.className = 'scrolling';
          initScrolling();
          document.getElementById('scrollButton').value="Expand";
        }
      }
  <input type="button" id="scrollButton" value="Expand" onclick="toggle()" />
  <div id="scrollContainer" class="scrolling">
    <div id="scrollingText" class="on">
    .... Text to be scrolled ...
    </div>
  </div>
...

Working example of this code: Expanding Scrolling Text in Place.

Tests

No tests available for this technique.


SCR37: Creating Custom Dialogs in a Device Independent Way

Applicability

HTML and XHTML used with script.

This technique relates to:

Description

Site designers often want to create dialogs that do not use the pop-up windows supplied by the browser. This is typically accomplished by enclosing the dialog contents in a div and placing the div above the page content using z-order and absolute positioning in CSS.

To be accessible, these dialogs must follow a few simple rules.

  1. Trigger the script that launches the dialog from the onclick event of a link or button.

  2. Place the dialog div into the Document Object Model (DOM) immediately after the element that triggered it. The triggering element will maintain focus, and inserting the dialog content after that element will make the content inside the dialog next in the screen-reader reading order and next in the tab order. The dialog can still be absolutely positioned to be elsewhere on the page visually. This can be done either by creating the dialog in the HTML and hiding it with CSS, as in the example below, or by inserting it immediately after the triggering element with script.

  3. Ensure that the HTML inside the dialog div meets the same accessibility standard as other content.

It is also nice, but not always necessary, to make the launching link toggle the dialog open and closed, and to close the dialog when the keyboard focus leaves it.

Examples

Example 1: An options button that opens a dialog

The HTML for this example includes a triggering Element, in this case a button, and a div that acts as the frame for the dialog.

The triggering element is a button and the script is triggered from the onclick event. This sends the appropriate events to the operating system so that assistive technology is aware of the change in the DOM.

In this example, the Submit and Reset buttons inside the dialog simply hide the div.

Example Code:

...
<button onclick="TogglePopup(event,true)"
	name="pop0001">Options</button>

<div class="popover" id="pop0001">
  <h3>Edit Sort Information</h3>
  <form action="default.htm" onsubmit="this.parentNode.style.display='none'; return false;" onreset="this.parentNode.style.display='none'; return false;">
    <fieldset>
      <legend>Sort Order</legend> 
      <input type="radio" name="order" id="order_alpha" /><label for="order_alpha">Alphabetical</label>
      <input type="radio" name="order" id="order_default" checked="true" /><label for="order_default">Default</label>
    </fieldset>
<div class="buttons">
  <input type="submit" value="OK" />
  <input type="reset" value="Cancel" />
</div>
</form>

</div>
...

The div, heading and form elements are styled with CSS to look like a dialog.

Example Code:

...
a { color:blue; }
a.clickPopup img { border:none; width:0; }

div.popover { position:absolute; display:none; border:1px outset; background-color:beige; font-size:80%; background-color:#eeeeee; color:black; }
div.popover h3 { margin:0; padding:0.1em 0.5em; background-color:navy; color:white; }
#pop0001 { width:20em; }
#pop0001 form { margin:0; padding:0.5em; }
#pop0001 fieldset { margin-bottom:0.3em; padding-bottom:0.5em; }
#pop0001 input, #pop0001 label { vertical-align:middle; }
#pop0001 div.buttons { text-align:right; }
#pop0001 div.buttons input { width:6em; }
...

The script toggles the display of the popup div, showing it and hiding it.

Example Code:

...
function TogglePopup(evt,show)
{
	HarmonizeEvent(evt);
	var src = evt.target;
	if ("click" == evt.type)
	{
		evt.returnValue = false;
	}
	var popID = src.getAttribute("name");
	if (popID)
	{
		var popup = document.getElementById(popID);
		if (popup)
		{
			if (true == show)
			{
				popup.style.display = "block";
			}
			else if (false == show)
			{
				popup.style.display = "none";
			}
			else
			{
				popup.style.display = "block" == popup.style.display ? "none" : "block";
			}
			if ("block" == popup.style.display)
			{
				//window.alert(document.documentElement.scrollHeight);
				popup.style.top = ((document.documentElement.offsetHeight - popup.offsetHeight) / 2 ) + 'px';
				popup.style.left = ((document.documentElement.offsetWidth - popup.offsetWidth) / 2) + 'px';
			}
		}
	}
}

function SubmitForm(elem)
{ 
	elem.parentNode.style.display='none'; 
	return false;
}

function ResetForm(elem)
{ 
	elem.parentNode.style.display='none'; 
	return false;
}
...

A working example, an options button that opens a dialog, is available.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Find all areas of the page that trigger dialogs that are not pop-up windows.

  2. Check that the dialogs can be opened by tabbing to the area and hitting enter.

  3. Check that, once opened, the dialog is next in the tab order.

  4. Check that the dialogs are triggered from the click event of a button or a link.

  5. Using a tool that allows you to inspect the DOM generated by script, check that the dialog is next in the DOM.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SCR38: Creating a conforming alternate version for a web page designed with progressive enhancement

Applicability

HTML with scripting.

This technique relates to:

Description

This objective of this technique is to offer a conforming alternate version for a web page designed with progressive enhancement. The technique demonstrates how to use a scripting technique to accomplish this by:

  1. Storing the initial pre-enhanced version of the web page so that it can act as a "conforming alternate version" for any later enhanced versions of the content; and

  2. Inserting a mechanism into all enhanced versions of the web page which allows a user to revert the content back to the stored pre-enhanced Alternate Version.

Web pages designed with progressive enhancement detect features in the web-enabled accessing device (size, capability and software) to allow those supported web technologies to be applied in layers on top of an HTML foundation. The basic content and functionality of such a web page are available through the HTML foundation to anyone using a more simple web-enabled accessing device, whilst enhanced versions of the page are created to suit the different features in more advanced accessing devices.

The current guidance for web pages delivered in alternate versions reads: "Note 4: Alternate versions may be provided to accommodate different technology environments or user groups. Each version should be as conformant as possible. One version would need to be fully conformant in order to meet conformance requirement 1." With regard to web pages designed with progressive enhancement this leaves the problem of which version to select as the one fully conformant version - all whilst trying to ensure that no set of users is disadvantaged by that choice.

One solution to this challenge is to select the pre-enhanced version of the web page (e.g. the DOM state created solely from the HTML in the source code in the absence of support for scripts, styles or non-HTML plugins) as the "fully conformant version", due to its broad reach, with regard to support, across all the possible web-enabled devices accessing the content.

Note: This technique removes all scripts, styles, and plugins, but it is important to state that this is not required for conformance with WCAG 2.0. An author could use a similar technique, but retain a reduced set of styles and scripts in the “pre-enhanced” version.

While this technique offers a way to base conformance claims on a single version, authors should continue to work to ensure that each enhanced version of the web page is as conformant as possible.

Examples

Example 1: Using JavaScript

The example uses JavaScript in the "accToggle.js" file to store the initial pre-enhanced version of the web page, created solely from the HTML in the source code, so that it can act as a "conforming alternate version" for any later enhanced versions of the web page; and inserts a toggle link into all enhanced versions of the web page which allows a user to revert the web page back to the stored pre-enhanced "Conforming Alternate Version". Note: The "sayhello.js" file is simply there as an example payload external file, and is to be replaced by any other external scripts which are desired.

The script in the acctoggle.js file stores the pre-enhanced version - assigning the version the url postfix #accessible. Clicking the "WCAG 2.0 conforming alternate version" link (inserted as the first child of the body element in any enhanced versions) changes the url to include the postfix "#accessible" which then resets the html located in the body element and the head element to pre-enhanced code. The pre-enhanced state can be reached from the link, or directly from a url typed into the browser. In addition, a link is inserted into the pre-enhanced "Conforming Alternate Version" which allows the user to re-enhance the web page (something which can also be done using the web browser's back button).

acctoggle.js source code:

window.onload = function(event) {

    // store pre-enhanced element content
    var initialHead = document.head.innerHTML;
    var initialBody = document.body.innerHTML;
    var initialURL = location.href;
    
    var runOnce = function() {
        // payload you want to run per page call - e.g. Google Analytics code
    }
    
    var setup = function() {
        // create conforming alternate version link

        var toggleEnhanced = document.querySelector("#toggle_enhanced");
        if (toggleEnhanced) {
            toggleEnhanced.outerHTML = "";
        }
        
        var nel = document.createElement("a");
        nel.id = "acctoggle";
        nel.setAttribute("href", "#accessible");
        nel.innerHTML = "WCAG 2.0 conforming alternate version";
        document.body.insertBefore(nel, document.body.firstChild);
        
        // payload
        var s = document.createElement("SCRIPT");
        s.setAttribute("src", "sayhello.js");
        document.querySelector("HEAD").appendChild(s);   
       }
    
    setup();
    runOnce();
    
    window.onpopstate = function(event) {
        if (location.href.indexOf("#accessible") != -1) {
            // revert element contents to pre-enhanced version
            document.head.innerHTML = initialHead;
            document.body.innerHTML = initialBody;
            
            // create enhanced version link
            var el = document.createElement("a");
            el.id = "toggle_enhanced";
            el.setAttribute("href", "");
            el.innerHTML = "Enhanced version";
            var back = function(e) {
                 e.preventDefault();
                 window.history.back();
            }
            el.addEventListener("click", back, false);
            document.body.insertBefore(el, document.body.firstChild);
        }
        if (location.href == initialURL) {
            setup();
        }
    };
}
		 

HTML web page source code:

<!DOCTYPE html>
  <html lang="en">
    <head>
        <title>Evaluera Ltd</title>
        <meta charset="UTF-8" />
        <script src="accSwitch.js"></script>
    </head>
    <body> 
        <h1>Test Page</h1>
        <p>Say: <span id="change">Goodbye</span></p>
    </body>
</html>			
		 

sayhello.js source code

var change = document.querySelector("#change");
         change.innerText = "Hello";			
		 
Example 2: Using EnhanceJS - A Javascript framework designed to improve the application of Progressive Enhancement

EnhanceJS is an open source JavaScript framework "designed to improve the application of Progressive Enhancement by first testing browser capabilities for key Javascript and CSS support before applying advanced styles and scripts to the page". In addition, the default EnhanceJS script automatically creates a toggle link in any post-enhanced versions of the page which allows a user to return the web page to its pre-enhanced state (in EnhanceJS with default settings this is called the "low bandwidth version"). The setting have been changed in EnhanceJS to indicate that the pre-enhanced state is to be considered the "WCAG 2.0 conforming alternate version", rather than the "low bandwidth version".

HTML Component:

<!DOCTYPE html>
<html lang="en">
    <head>
    <script type="text/javascript" src="enhance.js"></script>
    <script type="text/javascript">
        // Run capabilities test
        enhance({
            loadStyles: [
                "example.css"
            ], 
            loadScripts: [
                "example.js"
            ],
            // text shown in enhanced mode
            forceFailText: "WCAG 2.0 conforming alternate version",
            // text shown in accessible mode
            forcePassText: "Enhanced version"
        });
    </script>
    </head>
    ....

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check enhanced versions of the web page contain a link to the "Conforming Alternate Version".

  2. Check that the alternate version is a conforming alternate version of the original page and that it conforms to WCAG 2.0 at the claimed conformance level.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


5. Server-side Scripting Techniques


SVR1: Implementing automatic redirects on the server side instead of on the client side

Applicability

Server-side technologies, including server-side scripting languages and server configuration files with URLs or URL patterns for redirects.

This technique relates to:

Description

The objective of this technique is to avoid confusion that may be caused when two new pages are loaded in quick succession because one page (the one requested by the user) redirects to another. Some user agents support the use of the HTML meta element to redirect the user to another page after a specified number of seconds. This makes a page inaccessible to some users, especially users with screen readers. Server-side technologies provide methods to implement redirects in a way that does not confuse users. A server-side script or configuration file can cause the server to send an appropriate HTTP response with a status code in the 3xx range and a Location header with another URL. When the browser receives this response, the location bar changes and the browser makes a request with the new URL.

Examples

Example 1: JSP/Servlets

In Java Servlets or JavaServer Pages (JSP), developers can use HttpServletResponse.sendRedirect(String url).

Example Code:


…
public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
…
  response.sendRedirect("/newUserLogin.do");
}

This sends a response with a 302 status code ("Found") and a Location header with the new URL to the user agent. It is also possible to set another status code with response.sendError(int code, String message) with one of the constants defined in the interface javax.servlet.http.HttpServletResponse as status code.

Example Code:


…
public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
…
  response.sendError(response.SC_MOVED_PERMANENTLY, "/newUserLogin.do");
}

If an application uses HttpServletResponse.encodeURL(String url) for URL rewriting because the application depends on sessions, the method HttpServletResponse.encodeRedirectURL(String url) should be used instead of HttpServletResponse.sendRedirect(String url). It is also possible to rewrite a URL with HttpServletResponse.encodeURL(String url) and then pass this URL to HttpServletResponse.sendRedirect(String url).

Example 2: ASP

In Active Server Page (ASP) with VBScript, developers can use Response.Redirect.

Example Code:


  Response.Redirect "newUserLogin.asp"

or

Example Code:


Response.Redirect("newUserLogin.asp")

The code below is a more complete example with a specific HTTP status code.

Example Code:


Response.Clear
Response.Status = 301
Response.AddHeader "Location", "newUserLogin.asp"
Response.Flush
Response.End
Example 3: PHP

In PHP, developers can send a raw HTTP header with the header method. The code below sends a 301 status code and a new location. If the status is not explicitly set, the redirect response sends an HTTP status code 302.

Example Code:


 <?php
header("HTTP/1.1 301 Moved Permanently);
header("Location: http://www.example.com/newUserLogin.php");
?>
Example 4: Apache

Developers can configure the Apache Web server to handle redirects, as in the following example.

Example Code:


redirect 301 /oldUserLogin.jsp http://www.example.com/newUserLogin.do

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

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

  2. For each link or programmatic reference to a URI in the set of Web pages being evaluated, 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 to a URI in the set of Web pages being evaluated, check if the referenced URI does not cause a redirect OR causes a server-side redirect without a time-out.

Expected Results
  • Step 2 is false AND step 3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SVR2: Using .htaccess to ensure that the only way to access non-conforming content is from conforming content

Applicability

Content residing on a Web server that supports .htaccess (typically Apache) where a conforming version of content is provided as an alternative to a non-conforming version.

This technique relates to:

Description

The objective of this technique is to ensure that users can always access an accessible version of the content when non-conforming versions are also available. Whenever content is provided in a format that does not conform to WCAG, the site as a whole can still conform if alternate versions of the inaccessible content are provided. Conformance Requirement 4 requires that alternate versions can be derived from the nonconforming content or from its URI.

Since it is not always possible to provide an accessible link from within non-conforming content, this technique describes how authors can use Apache's Module "mod_access" to ensure that non-conforming content can only be accessed from URIs that serve as alternate versions to the non-conforming content or from pages that include links to both the non-conforming version and the alternative version.

Examples

Example 1

The following .htaccess file uses Apache's mod_redirect module to redirect requests for "inaccessible.html" to "accessible.html" unless the request comes from "accessible.html".

Example Code:


# If the request for inaccessible content comes from a file 
# called accessible.html, then set an environment variable that 
# allows the inaccessible version to be displayed.
SetEnvIf Referer .*(accessible.html)$ let_me_in
<FilesMatch ^(inaccessible.html)$>
    Order Deny,Allow
    Deny from all
    Allow from env=let_me_in
</FilesMatch>

# If the request comes from anyplace but accessible.html, then 
# redirect the error condition to a location where the accessible 
# version resides
ErrorDocument 403 /example_directory/accessible.html
Example 2

This example assumes a directory structure where documents are available in multiple formats. One of the formats does not meet WCAG at the level claimed and uses the file extension "jna" (Just Not Accessible). All of these files are stored in a folder called "jna" with an .htaccess file which ensures that any direct request for a file with the .jna extension from pages where inaccessible versions are not already available is redirected to an index page that lists all of the available formats.

Example Code:


# If the request for inaccessible content comes from a file at 
# http://example.com/documents/index.html, then set an environment 
# variable that allows the inaccessible version to be displayed.
SetEnvIf Referer ^http://example.com/documents/index.html$ let_me_in
<FilesMatch ^(.*\.jna)$>
    Order Deny,Allow
    Deny from all
    Allow from env=let_me_in
</FilesMatch>

# If the request comes from anyplace but http://example.com/documents/index.html, then 
# redirect the error condition to a location where a link the accessible 
# version resides
ErrorDocument 403 http://example.com/documents/index.html

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Identify pages that do not conform to WCAG at the conformance Level claimed where accessible alternatives are served based on the use of .htaccess files.

  2. Visit the URI of the non-conforming content.

  3. Verify that the resulting page is one of the following:

    1. a conforming alternate version for the non-conforming content

    2. a page that includes a link to both the conforming alternate version and the non-conforming content

Expected Results
  • Check #3.1 or #3.2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SVR3: Using HTTP referer to ensure that the only way to access non-conforming content is from conforming content

Applicability

Content created using server-side scripting where a conforming version of content is provided as an alternative to a non-conforming version based on HTTP Referer.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SVR3.

Description

The objective of this technique is to ensure that users can obtain an accessible version of content where both non-conforming and conforming versions are provided.

Conformance Requirement 1 allows non-conforming pages to be included within the scope of conformance as long as they have a "conforming alternate version". It is not always possible for authors to include accessibility supported links to conforming content from within non-conforming content. Therefore, authors may need to rely on the use of Server Side Scripting technologies (ex. PHP, ASP, JSP) to ensure that the non-conforming version can only be reached from a conforming page.

This technique describes how to use information provided by the HTTP referer to ensure that non-conforming content can only be reached from a conforming page. The HTTP referer header is set by the user agent and contains the URI of the page (if any) which referred the user agent to the non-conforming page.

To implement this technique, an author identifies the URI for the conforming version of the content, for each non-conforming page. When a request for the non-conforming version of a page is received, the server compares the value of the HTTP referer header against the URI of the conforming version to determine whether the link to the non-conforming version came from the conforming version. The non-conforming version is only served if the HTTP referer matches the URI of the non-conforming version. Otherwise, the user is redirected to the conforming version of the content. Note that when comparing the URI in the HTTP referer header, non-relevant variations in the URI, such as in the query and target, should be taken into account.

Examples

Example 1: Interactive demonstrations of physical processes

An online physics course uses a proprietary modeling language to provide interactive demonstrations of physical processes. The user agent for the modeling language is not compatible with assistive technology. The site includes a script that uses the HTTP referer to ensure that unless users attempt to access the interactive demonstration from a page that contains a conforming description of the process and models, the server redirects the request to a conforming page which contains a link to the non-conforming version. Students may choose to access the non-conforming, interactive version, but those who do not are still able to learn about the process.

Example 2: Using Http referer in PHP

The following example illustrates how this technique can be used in PHP. It includes two files, conforming.php and non-conforming.php which work together to ensure that the only way to access non-conforming content is from conforming content.

conforming.php:

Example Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<title>Conforming Content</title>
    	</head>
	<body>
		<h1>This is a conforming page</h1>
		<p>From here, you can visit the <a href="non-conforming.php">non-conforming 
		page</a>. </p>
	</body>
</html>
    				

non-conforming.php:

Example Code:


<?php 
// if the request comes from a file that contains the string "conforming.php" then render the page
	if(stristr($_SERVER['HTTP_REFERER'], "conforming.php")) {
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Non-Conforming Content</title>
	</head>
	<body>
		<h1>This is a non-conforming page</h1>
		<p>Because you came from <?php echo $_SERVER['HTTP_REFERER']; ?>, you are 
			able to view the content on this page. </p>
	</body>
</html>
<?php
}
// if the referring page is not conforming.php, then redirect the user to the conforming version
else  {
header("Location: conforming.php");
}
?>					
    				

A working example, Conforming content, is available.

Tests

Procedure

Where WCAG-conforming alternatives are provided for non-conforming content:

  1. Identify pages that do not conform to WCAG at the conformance Level claimed where accessible alternatives are served based on HTTP Referrer.

  2. Visit the URI of the non-conforming content.

  3. Verify that the resulting page is one of the following:

    1. a conforming alternate version for the non-conforming content

    2. a page that includes a link to both the conforming alternate version and the non-conforming content

Expected Results
  • Check #3.1 or #3.2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SVR4: Allowing users to provide preferences for the display of conforming alternate versions

Applicability

Content created using server-side scripting to store preferences.

This technique relates to:

Description

The objective of this technique is to provide a mechanism for users to select a preference for an alternate conforming version of a Web page.

Providing preferences to allow users to view conforming alternate versions can be accomplished in several ways. One common method is to provide a link which triggers a server-side process that sets a session or persistent cookie that the Web server uses to modify the page or redirect the user to the alternate version. Other methods include providing user-specific choices that are stored as part of the user's login information for a system where users sign in to access a Web page or service.

Users requiring an alternate version will need the mechanism provided in the non-conforming page to be accessible in order to find and use it. The mechanism itself should conform to the accessibility level being claimed.

Examples

Example 1: Setting a session or persistent cookie to store a user preference

A Web site offers a link to a "preferences" page on pages within the site. On this page, there is an option to view an alternate version of the site. There may be various aspects of the page that are affected, or the user may be opting to view an entirely alternate version of the site. The preference may be to display a version of the site where video included on the site displays captioning, or it may be offered because the primary site contains accessibility conformance issues that are addressed only via the alternative.

A Web page author may choose to handle this preference via a cookie, which may be handled via a server-side scripting language such as PHP.

The preferences page may be offered as follows:

Example Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Site Preferences</title>
  </head>
  <body>
      <h1>Site Preferences</h1>
      <form id="form1" name="site_prefs" method="post" action="pref.php">
          <fieldset>
              <legend>Which version of the site do you want to view?</legend>
              <input type="radio" name="site_pref" id="site_pref_reg" value="reg" />
              <label for="site_pref_reg">Main version of site</label>
              <input type="radio" name="site_pref" id="site_pref_axx" value="axx" />
              <label for="site_pref_axx">Accessibility-conforming version</label>
          </fieldset> 
      </form>
  </body>
  </html>

The form is submitted to the pref.php file for processing. A cookie is set, and in this simple example the user's browser is directed to the site home page.

pref.php:

Example Code:

<?php
    if(isset($site_pref)) {
        setcookie("site_pref",$site_pref, time() + (86400 * 30)); //set for 30 days
        header("location: http://www.example.com"); //redirects to home page
    }
?>

The home page starts with code that implements the user's preference.

index.php:

Example Code:

<?
if(isset($site_pref)) {
	if($site_pref="axx") {
	header("location: ./accessible/index.php");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...

For a login-based system, the preference is stored in the user's database record and referred to by the server-side script generating the pages for the user to view.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Change a preference for how pages on the site are displayed.

  2. Check that the preference itself or a link to that page where it can be set can be reached from each non-conforming page.

  3. Check that Web pages are displayed according to the selected preference.

  4. Check that when the preference(s) are set, the Web page conforms as claimed.

  5. Verify that the resulting page is a conforming alternate version for the original page.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SVR5: Specifying the default language in the HTTP header

Applicability

Server-side technologies, including server-side scripting languages and server configuration files for setting HTTP headers.

This technique relates to:

Description

The objective of this technique is to provide information on the primary language or languages in a Web Page, in order to identify the audience of the content. The Content-Language HTTP header can contain a list of one or more language codes, which can be used for language negotiation between a user agent and a server. If the language preferences in a user agent are set correctly, language negotiation can help the user to find a language version of the content that suits his/her preferences.

Note that the Content-Language HTTP header does not serve to identify the language used for processing the content. The content processing language can be identified by means of other techniques, such as the attributes lang and xml:lang in markup languages.

This technique ensures that the primary language of the document, as specified for example in the lang or xml:lang attribute, is listed in the Content-Language HTTP header.

Examples

Example 1: Setting content language in Java Servlet and JSP

In Java Servlet or JavaServer Pages (JSP), developers can use response.setHeader("Content-Language", lang), in which "lang" stands for a language tag (for example, "en" for English):

Example Code:

…
public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException 
{
…
  response.setHeader("Content-Language", "en");
  PrintWriter out = response.getWriter();
…
}
Example 2: Setting content language in PHP

In PHP, developers can send a raw HTTP header with the header method. The following example sets the language to French:

Example Code:

<?php  header('Content-language: fr');  …  ?>  

Resources

Resources are for information purposes only, no endorsement implied.

W3C Internationalization FAQ: HTTP and meta for language information

Declaring metadata about the language(s) of the intended audience in Authoring HTML: Language declarations - W3C Working Group Note 3 June 2014.

RFC 7321 3.1.3.2. Content-Language

header in the PHP Manual.

Tests

Procedure
  1. Use a Live HTTP Header viewer to find the value of the "Content-Language" header.

  2. Check that this value matches the default language of the Web page.

Expected Results
  • Step #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


6. SMIL Techniques


SM1: Adding extended audio description in SMIL 1.0

Applicability

Applies whenever SMIL 1.0 player is available

This technique relates to:

Description

The purpose of this technique is to allow there to be more audio description than will fit into the gaps in the dialogue of the audio-visual material.

With SMIL 1.0 there is no easy way to do this but it can be done by breaking the audio and video files up into a series of files that are played sequentially. Additional audio description is then played while the audio-visual program is frozen. The last frame of the video file is frozen so that it remains on screen while the audio file plays out.

The effect is that the video appears to play through from end to end but freezes in places while a longer audio description is provided. It then continues automatically when the audio description is complete.

To turn the extended audio description on and off one could use script to switch back and forth between two SMIL scripts, one with and one without the extended audio description lines. Or script could be used to add or remove the extended audio description lines from the SMIL file so that the film clips would just play sequentially.

If scripting is not available then two versions of the video could be provided, one with and one without extended audio descriptions.

Examples

Example 1: SMIL 1.0 Video with audio descriptions that pause the main media in 4 locations to allow extended audio description

Example Code:

   
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
xmlns="http://www.w3.org/TR/REC-smil" qt:time-slider="true">
  <head>
    <layout>
      <root-layout background-color="black" height="266" width="320"/>
      <region id="videoregion" background-color="black" top="26" left="0" 
      height="144" width="320"/>
    </layout>
  </head>
  <body>
  <par>
   <seq>
     <par>
       <video src="video.rm" region="videoregion" clip-begin="0s" clip-end="5.4" 
       dur="8.7" fill="freeze" alt="videoalt"/>   
       <audio src="no1.wav" begin="5.4" alt="audio alt"/>
     </par>
     <par>
       <video src="video.rm" region="videoregion" clip-begin="5.4" clip-end="24.1" 
       dur="20.3" fill="freeze" alt="videoalt"/>
       <audio src="no2.wav" begin="18.7" alt="audio alt"/>
     </par>
     <par>
       <video src="video.rm" region="videoregion" clip-begin="24.1" clip-end="29.6" 
       dur="7.7" fill="freeze" alt="videoalt"/>
       <audio src="no3.wav" begin="5.5" alt="audio alt"/>
     </par>
     <par>
       <video src="video.rm" region="videoregion" clip-begin="29.6" clip-end="34.5" 
       dur="5.7" fill="freeze" alt="videoalt"/>
       <audio src="no4.wav" begin="4.9" alt="audio alt"/>
     </par>
     <par>
       <video src="video.rm" region="videoregion" clip-begin="77.4" alt="video alt"/>
     </par>
   </seq>
  </par>
</body>
</smil>

The markup above is broken into five <par> segments. In each, there is a <video> and an <audio> tag (the last <par> has no <audio> tag intentionally). The convention with extended audio descriptions is that the main media pauses during the description. The way to make this happen in SMIL 1.0 is to set a "clip-begin" and "clip-end" which dictate the start and end of the video clip, and to set a duration for the clip that is longer than what is defined by the "clip-begin" and "clip-end". The fill="freeze" holds the last frame of the video during the extended description. The <audio> tag has a "begin" attribute with a value that is equal to the "clip-end" value of the preceding <video> tag.

To determine the values for "clip-begin," "clip-end", and "dur", find the start and end time of the portion of the video being described, and find out the total length of the extended audio description. The "clip-begin" and "clip-end" define their own values, but the "dur" value is the sum of the length of the extended description and the clip defined by the "clip-begin" and "clip-end". In the first <par>, the video clip starts at 0 seconds, ends at 5.4 seconds, and the description length is 3.3 seconds, so the "dur" value is 5.4s + 3.3s = 8.7s.

Resources

Tests

Procedure
  1. Play file with extended audio descriptions

  2. Play file with audio description

  3. Check whether video freezes in places and plays extended audio description

Expected Results
  • #3 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SM2: Adding extended audio description in SMIL 2.0

Applicability

Applies whenever SMIL 2.0 player is available

This technique relates to:

Description

The purpose of this technique is to allow there to be more audio description than will fit into the gaps in the dialogue of the audio-visual material.

With SMIL 2.0 it is possible to specify that particular audio files be played at particular times, and that the program be frozen (paused) while the audio file is being played.

The effect is that the video appears to play through from end to end but freezes in places while a longer audio description is provided. It then continues automatically when the audio description is complete.

To turn the extended audio description on and off one could use script to switch back and forth between two SMIL scripts, one with and one without the extended audio description lines. Or script could be used to add or remove the extended audio description lines from the SMIL file so that the film clips would just play uninterrupted.

If scripting is not available then two versions of the SMIL file could be provided, one with and one without extended audio description.

Examples

Example 1: Video with extended audio description.

Example Code:


<smil xmlns="http://www.w3.org/2001/SMIL20/Language"> 
<head> 
<layout> 
<root-layout backgroundColor="black" height="266" width="320"/> 
<region id="video" backgroundColor="black" top="26" left="0" 
height="144" width="320"/> 
</layout> 
</head> 
<body>	 
<excl> 
<priorityClass peers="pause"> 
<video src="movie.rm" region="video" title="video" alt="video" /> 
<audio src="desc1.rm" begin="12.85s" alt="Description 1" /> 
<audio src="desc2.rm" begin="33.71s" alt="Description 2" /> 
<audio src="desc3.rm" begin="42.65s" alt="Description 3" /> 
<audio src="desc4.rm" begin="59.80s" alt="Description 4" /> 
</priorityClass> 
</excl> 
</body> 
     </smil> 

Resources

Tests

Procedure
  1. Play file with extended audio description

  2. Check whether video freezes in places and plays extended audio description

Expected Results
  • #2 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SM6: Providing audio description in SMIL 1.0

Applicability

Applies whenever SMIL 1.0 player is available

This technique relates to:

Description

The objective of this technique is to provide a way for people who are blind or otherwise have trouble seeing the video in audio-visual material to be able to access the material. With this technique a description of the video is provided via audio description that will fit into the gaps in the dialogue in the audio-visual material.

Examples

Example 1: SMIL 1.0 audio description sample for QuickTime player

Example Code:

   
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
  xmlns="http://www.w3.org/TR/REC-smil" qt:time-slider="true">
  <head>
    <layout>
      <root-layout background-color="black" height="266" width="320"/>
      <region id="videoregion" background-color="black" top="26" left="0" 
      height="144" width="320"/>
    </layout>
  </head>
  <body>
    <par>
      <video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
      alt="Sales Demo"/>
      <audio dur="0:01:20.00" src="salesdemo_ad.mp3" 
      alt="Sales Demo Audio Description"/>
    </par>
  </body>
</smil> 
Example 2: SMIL 1.0 audio description sample for RealTime player

Example Code:

 
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/TR/REC-smil">
  <head>
    <layout>
      <root-layout background-color="black" height="266" width="320"/>
      <region id="videoregion" background-color="black" top="26" left="0" 
      height="144" width="320"/>
    </layout>
  </head>
  <body>
    <par>
      <video src="salesdemo.mov" region="videoregion" title="Sales Demo" 
      alt="Sales Demo"/>
      <audio src="salesdemo_ad.mp3" title="audio description" 
      alt="Sales Demo Audio Description"/>
    </par>
  </body>
</smil>

Resources

Tests

Procedure
  1. Find method for turning on audio description from content/player (unless it is always played by default)

  2. Play file with audio description

  3. Check whether audio description is played

Expected Results
  • #3 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SM7: Providing audio description in SMIL 2.0

Applicability

Applies whenever SMIL 2.0 player is available

This technique relates to:

Description

The objective of this technique is to provide a way for people who are blind or otherwise have trouble seeing the video in audio-visual material to be able to access the material. With this technique a description of the video is provided via audio description that will fit into the gaps in the dialogue in the audio-visual material.

Examples

Example 1: SMIL 2.0 audio description sample for RealMedia player

Example Code:


<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
  <head>
    <layout>
      <root-layout backgroundColor="black" height="266" width="320"/>
      <region id="video" backgroundColor="black" top="26" left="0" 
      height="144" width="320"/>
    </layout>
  </head>
  <body>
    <par>
      <video src="salesdemo.mpg" region="video" title="Sales Demo" 
      alt="Sales Demo"/>
      <audio src="salesdemo_ad.mp3" begin="33.71s" title="audio description" 
      alt="Sales Demo Audio Description"/>
    </par>
  </body>
</smil>

The example shows a <par> segment containing an <audio> and a <video> tag. The audio stream is not started immediately.

Resources

Tests

Procedure
  1. Find method for turning on audio description from content/player (unless it is always played by default)

  2. Play file with audio description

  3. Check whether audio description is played

Expected Results
  • #3 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SM11: Providing captions through synchronized text streams in SMIL 1.0

Applicability

Applies to SMIL 1.0

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SM11.

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 available in a text stream that is displayed in a caption area.

With SMIL 1.0, separate regions can be defined for the video and the captions. The captions and video playback are synchronized, with the caption text displayed in one region of the screen, while the corresponding video is displayed in another region.

Examples

Example 1: SMIL 1.0 caption sample for Quickime player

Example Code:

 
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
  xmlns="http://www.w3.org/TR/REC-smil" qt:time-slider="true">
  <head>
    <layout>
      <root-layout width="320" height="300" background-color="black"/>
      <region top="0" width="320" height="240" left="0" background-color="black" 
      id="videoregion"/>
      <region top="240" width="320" height="60" left="0" background-color="black" 
      id="textregion"/>
    </layout>
  </head>
  <body>
    <par>
      <video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
      alt="Sales Demo"/>
      <textstream dur="0:01:20.00" region="textregion" src="salesdemo_cc.txt" 
      alt="Sales Demo Captions"/>
    </par>
  </body>
</smil> 
Example 2: SMIL 1.0 caption sample for RealMedia player

Example Code:

 
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/TR/REC-smil">
  <head>
    <layout>
      <root-layout background-color="black" height="310" width="330"/>
      <region id="video" background-color="black" top="5" left="5" 
      height="240" width="320"/>
      <region id="captions" background-color="black" top="250" 
      height="60" left="5" width="320"/>
    </layout>
  </head>
  <body>
    <par>
      <video src="salesdemo.mpg" region="video" title="Sales Demo" 
      alt="Sales Demo"/>
      <textstream src="salesdemo_cc.rt" region="captions" 
      system-captions="on" title="captions" 
      alt="Sales Demo Captions"/>
    </par>
  </body>
</smil>

The example shows a <par> segment containing a <video> and a <code><![CDATA[<textstream> tag. The system-captions attribute indicates that the textstream should be displayed when the user's player setting for captions indicates the preference for captions to be displayed. The <layout> section defines the regions used for the video and the captions.

Example 3: SMIL 1.0 caption sample with internal text streams

Example Code:


<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/TR/REC-smil">
  <head>
    <layout>
      <root-layout background-color="black" height="310" width="330"/>
      <region id="video" background-color="black" top="5" left="5" 
      height="240" width="320"/>
      <region id="captions" background-color="black" top="250" 
      height="60" left="5" width="320"/>
    </layout>
  </head>
  <body>
    <par>
      <video src="salesdemo.mpg" region="video" title="Sales Demo" 
      alt="Sales Demo"/>
      <text src="data:,This%20is%20inline%20text." region="captions" begin="0s" 
      dur="3" alt="Sales Demo Captions">
        <param name="charset" value="iso-8859-1"/>
        <param name="fontFace" value="System"/>
        <param name="fontColor" value="yellow"/>
        <param name="backgroundColor" value="blue"/>
      </text>
    </par>
  </body>
</smil>

This example shows a <text> element that includes synchronized text streams within the SMIL file.

Resources

Tests

Procedure
  1. Enabled caption preference in player, if present

  2. Play file with captions

  3. Check whether captions are displayed

Expected Results
  • #3 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SM12: Providing captions through synchronized text streams in SMIL 2.0

Applicability

Applies to SMIL 2.0

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SM12.

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 available in a text stream that is displayed in a caption area.

With SMIL 2.0, separate regions can be defined for the video and the captions. The captions and video playback are synchronized, with the caption text displayed in one region of the screen, and the corresponding video displayed in another region.

Examples

Example 1: SMIL 2.0 caption sample for RealMedia player

Example Code:


<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
  <head>
    <layout>
      <root-layout backgroundColor="black" height="310" width="330"/>
      <region id="video" backgroundColor="black" top="5" left="5" 
      height="240" width="320"/>
      <region id="captions" backgroundColor="black" top="250" 
      height="60" left="5" width="320"/>
    </layout>
  </head>
  <body>
    <par>
      <video src="salesdemo.mpg" region="video" title="Sales Demo"
      alt="Sales Demo"/>
      <textstream src="salesdemo_cc.rt" region="captions" systemCaptions="on" 
      title="captions" alt="Sales Demo Captions"/>
    </par>
  </body>
</smil>

The example shows a <par> segment containing a <video> and a <textstream> tag. The systemCaptions attribute indicates that the textstream should be displayed when the user's player setting for captions indicates the preference for captions to be displayed. The <layout> section defines the regions used for the video and the captions.

Example 2: SMIL 2.0 caption sample with internal text streams for RealMedia player

Example Code:

 
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
  <head>
    <layout>
      <root-layout backgroundColor="black" height="310" width="330"/>
      <region id="video" backgroundColor="black" top="5" left="5" 
      height="240" width="320"/>
      <region id="captions" backgroundColor="black" top="250" 
      height="60" left="5" width="320"/>
    </layout>
  </head>
  <body>
    <par>
      <video src="salesdemo.mpg" region="video" title="Sales Demo" 
      alt="Sales Demo"/>
      <text src="data:,This%20is%20inline%20text." region="captions" 
      begin="0s" dur="3">
        <param name="charset" value="iso-8859-1"/>
        <param name="fontFace" value="System"/>
        <param name="fontColor" value="yellow"/>
        <param name="backgroundColor" value="blue"/>
      </text>
      <text src="data:,This%20is%20a%20second%20text." 
      region="captions" begin="3s" dur="3">
        <param name="charset" value="iso-8859-1"/>
        <param name="fontFace" value="System"/>
        <param name="fontColor" value="yellow"/>
        <param name="backgroundColor" value="blue"/>
      </text>
    </par>
  </body>
</smil>

This example shows a <text> element that includes synchronized text streams within the SMIL file.

Resources

Tests

Procedure
  1. Enabled caption preference in player, if present

  2. Play file with captions

  3. Check whether captions are displayed

Expected Results
  • #3 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SM13: Providing sign language interpretation through synchronized video streams in SMIL 1.0

Applicability

Applies whenever SMIL 1.0 player is available

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 available in a sign-language interpretation video that is displayed in a caption area.

With SMIL 1.0, separate regions can be defined for the two videos. The two video playbacks are synchronized, with the content video displayed in one region of the screen, while the corresponding sign-language interpretation video is displayed in another region.

Examples

Example 1: SMIL 1.0 sign-language interpretation sample for QuickTime player

Example Code:

 
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
  xmlns="http://www.w3.org/TR/REC-smil" qt:time-slider="true">
  <head>
    <layout>
      <root-layout width="320" height="300" background-color="black"/>
      <region top="0" width="320" height="240" left="0" background-color="black" 
      id="videoregion"/>
      <region top="240" width="320" height="60" left="0" background-color="black" 
      id="signingregion"/>
    </layout>
  </head>
  <body>
    <par>
      <video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
      alt="Sales Demo"/>
      <video dur="0:01:20.00" region="signingregion" system-captions="on" 
      src="salesdemo_si.mov" alt="Sales Demo Sign Language Interpretation"/>
    </par>
  </body>
</smil>
Example 2: SMIL 1.0 sign-language sample for RealMedia player:

Example Code:

 
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/TR/REC-smil">
  <head>
    <layout>
      <root-layout background-color="black" height="310" width="330"/>
      <region top="0" width="320" height="240" left="0" background-color="black"
       id="videoregion"/>
      <region top="240" width="320" height="60" left="0" background-color="black" 
      id="signingregion"/>
    </layout>
  </head>
  <body>
    <par>
      <video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
      alt="Sales Demo"/>
      <video dur="0:01:20.00" region="signingregion" system-captions="on" 
      src="salesdemo_si.mov" alt="Sales Demo Sign Language Interpretation"/>
    </par>
  </body>
</smil>

The example shows a <par> segment containing two <video> tags. The system-captions attribute indicates that the sign language video should be displayed when the user's player setting for captions indicates the preference for captions to be displayed. The <layout> section defines the regions used for the main video and the sign language interpretation video.

Resources

Tests

Procedure
  1. Enable control in content or player to turn on sign language interpretation (unless it is always shown)

  2. Play file with sign-language interpretation

  3. Check whether sign language interpretation is displayed

Expected Results
  • #3 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SM14: Providing sign language interpretation through synchronized video streams in SMIL 2.0

Applicability

SMIL 2.0

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 available in a sign-language interpretation video that is displayed in a caption area.

With SMIL 2.0, separate regions can be defined for the two videos. The two video playbacks are synchronized, with the content video displayed in one region of the screen, while the corresponding sign-language interpretation video is displayed in another region.

Examples

Example 1: SMIL 2.0 sign-language video sample for RealMedia player

Example Code:


<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
  <head>
    <layout>
      <root-layout backgroundColor="black" height="310" width="330"/>
      <region id="video" backgroundColor="black" top="5" left="5" 
      height="240" width="320"/>
      <region id="signing" backgroundColor="black" top="250" 
      height="60" left="5" width="320"/>
    </layout>
  </head>
  <body>
    <par>
      <video src="salesdemo.mpg" region="video" title="Sales Demo" 
      alt="Sales Demo"/>
      <video src="salesdemo_signing.mpg" 
      region="signing" systemCaptions="on" 
      title="sign language interpretation" 
      alt="Sales Demo Sign Language Interpretation"/>
    </par>
  </body>
</smil>

The example shows a <par> segment containing two <video> tags. The systemCaptions attribute indicates that the sign language video should be displayed when the user's player setting for captions indicates the preference for captions to be displayed. The <layout> section defines the regions used for the main video and the sign language interpretation video.

Resources

Tests

Procedure
  1. Enable control in content or player to turn on sign language interpretation (unless it is always shown)

  2. Play file with sign-language interpretation

  3. Check whether sign language interpretation is displayed

Expected Results
  • #3 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


7. Plain Text Techniques


T1: Using standard text formatting conventions for paragraphs

Applicability

Plain text documents. Not applicable to technologies that contain markup.

This technique relates to:

Description

The objective of this technique is to recognize a paragraph in a plain text document. A paragraph is a coherent block of text, such as a group of related sentences that develop a single topic or a coherent part of a larger topic.

The beginning of a paragraph is indicated by

  • the beginning of the content, that is, the paragraph is the first content in the document, or

  • exactly one blank line preceding the paragraph text

The end of a paragraph is indicated by

  • the end of the content, that is, the paragraph is the last content in the document, or

  • one or more blank lines following the paragraph text

A blank line contains zero or more non-printing characters, such as space or tab, followed by a new line.

Examples

Example 1

Two paragraphs. Each starts and ends with a blank line.

Example Code:


						
This is the first sentence in this
paragraph. Paragraphs may be long
or short.
   
    In this paragraph the first line is
indented. Indented and non-indented
sentences are allowed. White space within
the paragraph lines is ignored in
defining paragraphs. Only completely blank
lines are significant.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

For each paragraph:

  1. Check that the paragraph is preceded by exactly one blank line, or that the paragraph is the first content in the Web page

  2. Check that the paragraph is followed by at least one blank line, or that the paragraph is the last content in the Web page.

  3. Check that no paragraph contains any blank lines

Expected Results
  • All checks above are all true for each paragraph.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


T2: Using standard text formatting conventions for lists

Applicability

Plain text documents. Not applicable to technologies that contain markup.

This technique relates to:

Description

The objective of this technique is to use text formatting conventions to create simple lists of related items. Hierarchical lists or nested lists cannot be represented using this technique and should be represented using a different technology.

A list is a sequence of list items. A list item is a paragraph that begins with a label. For unordered lists, asterisks, dashes, and bullet characters may be used as the label, but the same label characters must be used for all the items in a list. For ordered lists, the label may be alphabetic or numeric, and may be terminated by a period or a right parenthesis. The labels must be in ascending order, that is,

  • numbers must be in numeric order,

  • alphabetic labels must be in alphabetical order or in numeric order when interpreted as Roman numerals.

Examples

Example 1: Unordered list

Example Code:


						
- unordered list item
 
- unordered list item
 
- unordered list item

Example 2: Numeric ordered list

Example Code:


						
1. Ordered list item
 
2. Ordered list item
 
3. Ordered list item

Example 3: Roman numeral ordered list

Example Code:


						
i.   Ordered list item
 
ii.  Ordered list item
 
iii. Ordered list item
 
iv.  Ordered list item

Example 4: Alphabetic ordered list

Example Code:


						
A) Ordered list item
 
B) Ordered list item
 
C) Ordered list item

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

For each list in the text content

  1. Check that each list item is a paragraph that starts with a label

  2. Check that the list contains no lines that are not list items

  3. Check that all list items in a list use the same style label

  4. Check that the labels in ordered lists are in sequential order

  5. Check that the labels in each unordered list are the same

Expected Results
  • All checks above are all true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


T3: Using standard text formatting conventions for headings

Applicability

Plain text documents. Not applicable to technologies that contain markup.

This technique relates to:

Description

The objective of this technique is to use text formatting conventions to convey the structure of the content. Headings are used to locate and label sections of a text document, showing the organization of the document.

The beginning of a heading is indicated by

  • two blank lines preceding the heading

The end of a heading is indicated by

  • a blank line following the heading

A blank line contains any number of non-printing characters, such as space or tab, followed by a new line.

The programmatic identification of the Heading is the two blank lines preceding it and one blank line succeeding it. Text documents are necessarily void of underlying structure and so structure must be indicated in the programmatic layout for screen readers. This programmatic layout will enable screen readers to voice blank lines twice before the text that will be considered as a heading. A screen magnifier user would decipher headings by visually identifying the space before it (or their technology may have Screen reader capabilities that can identify the spaces).

Examples

Example 1

A paragraph is followed by two blank lines, then a heading, then one blank line, then another paragraph:

Example Code:


						
...this is the end of paragraph 1.


The Text of the Heading

This is the beginning of paragraph 2.


Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

For each heading in the content:

  1. Check that each heading is preceded by two blank lines

  2. Check that each heading is followed by a blank line

  3. Check that no heading contains any blank lines

Expected Results
  • All of the checks above are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


8. ARIA Techniques

WAI-ARIA Technology Notes

To improve accessibility, WAI-ARIA provides Web developers with the option to add the following semantic information to Web pages and rich Internet widgets which are then exposed to the browser:

  • Roles to describe the type of widget presented, such as "menu", "treeitem", "slider" and "progressbar."

  • Roles to describe the structure of the Web page, such as headings, regions, search areas and navigation areas.

  • Properties to describe the state widgets are in, such as "checked" for a check box, "haspopup" for a menu that renders a sub-menu or other popup and "expanded/collapsed" for a tree node.

  • Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates. Assistive technologies may present critical updates as soon as they are rendered. However, incidental updates are presented only after completing the current task. For example, a screen reader informs a user of an incidental update only after it finishes reading the current paragraph.

  • Properties for drag-and-drop that describe drag sources and drop targets

  • A method to provide keyboard navigation for rich internet widgets.

The combination of these features and the structural information conveyed by the DOM structure allow authors to produce an interoperable solution to assistive technologies. (Source: WAI-ARIA Overview)

User Agent Support for WAI-ARIA

User Agent support for WAI-ARIA varies, but overall support for WAI-ARIA is improving. Browsers which support WAI-ARIA map WAI-ARIA roles and properties to platform accessibility APIs.

  • Firefox 1.5 and Firefox 2.0 partially supports WAI-ARIA, however it requires the use of namespaces, and doesn't support the use of Liveregions.

  • Firefox 3+ contains better support for WAI-ARIA, including Liveregions.

  • IE8 partially supports WAI-ARIA.

  • JAWS 8 and Window-Eyes 5.5+ partially support WAI-ARIA.

  • Jaws 10+ supports WAI-ARIA.

  • FireVox, a self-voicing extension to Firefox, also supports WAI-ARIA via direct DOM access.

  • NVDA partially supports WAI-ARIA.

Accessibility Support for WAI-ARIA

Using technologies in an Accessibility Supported way is required for conformance claims. Read more about Accessibility Support. The WCAG Working Group plans to review which WAI-ARIA techniques are sufficient when Accessible Rich Internet Application specifications reach W3C Recommendation status. Refer to WAI-ARIA Overview for the latest information on the status of WAI-ARIA.


ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA1. Also see WAI-ARIA Technology Notes.

Description

The purpose of this technique is to demonstrate how to use the WAI-ARIA aria-describedby property to provide programmatically determined, descriptive information about a user interface element. The aria-describedby property may be used to attach descriptive information to one or more elements through the use of an id reference list. The id reference list contains one or more unique element ids.

Refer to Supporting ARIA in XHTML and HTML 4.01 for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages.

Note: The aria-describedby property is not designed to reference descriptions on an external resource — since it is an ID, it must reference an element in the same DOM document.

Examples

Example 1: Using aria-describedby property to describe a Close button's action

A button that functions as a 'close' button on a dialog is described elsewhere in the document. The aria-describedby property is used to associate the description with the link.

<button aria-label="Close" aria-describedby="descriptionClose"
    onclick="myDialog.close()">X</button>

...

<div id="descriptionClose">Closing this window will discard any information entered and
return you back to the main page</div>

Working example: Example 1

Example 2: Using aria-describedby to associate instructions with form fields

Sample form field using aria-describedby to associate instructions with form fields while there is a form label.

<form>
<label for="fname">First name</label>
<input name="" type="text" id="fname" aria-describedby="int2">
<p id="int2">A bit of instructions for this field linked with aria-describedby. </p>
</form>
Example 3: Using aria-describedby property to provide more detailed information about the button
<p><span id="fontDesc">Select the font faces and sizes to be used on this page</span>
 <button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc">Fonts</button>
</p>
<p><span id="colorDesc">Select the colors to be used on this page</span>
 <button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc">Colors</button>
</p>
<p><span id="customDesc">Customize the layout and styles used on this page</span>
 <button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc">Customize</button>
</p>
Example 4: Using aria-describedby to associate tooltips with form fields

The following code snippet shows how to use aria-describedby and the onfocus="tooltipShow() function to display the tooltip when focus is placed on an element.

<html lang="en-us">
<head>
   <title>inline: Tooltip Example 1</title>
   <link rel="stylesheet" href="css/tooltip1_inline.css" type="text/css">
   <script type="text/javascript" src="js/tooltip1_inline.js"></script>
   <script type="text/javascript" src="../js/widgets_inline.js"></script>
   <script type="text/javascript" src="../js/globals.js"></script>
   <link rel="icon" href="http://www.cites.uiuc.edu/favicon.ico" type="image/x-icon">
   <link rel="shortcut icon" href="http://www.cites.uiuc.edu/favicon.ico" type="image/x-icon">
</head>
   ...

<body onload="initApp()">

<div id="container">

<h1>Tooltip Example 1</h1>
<h2>Create Account</h2>
<div class="text">
<label for="first">First Name:</label>

<input type="text" id="first" name="first" size="20"
      onmouseover="tooltipShow(event, this, 'tp1');"
      onfocus="tooltipShow(event, this, 'tp1');"
      aria-describedby="tp1"
      aria-required="false"/>

<div id="tp1" role="tooltip" aria-hidden="true">Your first name is optional. </div>
</div>
Example 5: XHTML

This example is coded in XHTML with a MIME type of application/xhtml+xml. This MIME type is not supported in all user agents. The aria-describedby property is added directly into the XHTML markup, and no additional scripting is needed.

Example Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Demonstration of aria-describedby property</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
  float:left;
  width:400px;
}
.right {
  width:100px;
  text-align:right;
}
</style>
</head>
<body>
<p>The buttons on this page use the Accessible Rich Internet Applications aria-describedby property
to provide more detailed information about the button action</p>
<div class="form">
<p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
<span class="right"><button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc">
Fonts </button></span></p>
<p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
<span class="right"><button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc">
Colors </button></span></p>
<p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
<span class="right"><button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc">
Customize </button></span></p>
</div>
</body>
</html>
Example 6: HTML

This example uses scripting to add an aria-describedby property to buttons on a page. The example creates a buttonIds array variable to hold the ids of the elements that contain description text. The setDescribedBy() function is called from the onload event of the window object.

The setDescribedBy() function loops through all of the button elements and calls setAttribute() on each button element to set the aria-describedby property. Each button's aria-describedby property is set to the id of the element containing its descriptive text.

Using a user agent and/or assistive technology which supports WAI-ARIA, the description will be provided when the user interface controls receive focus.

Example Code:

<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Demonstration of aria-describedby property</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
  float:left;
  width:400px;
}
.right {
  width:100px;
  text-align:right;
}
</style>
<script type="text/javascript">
//<![CDATA[

// array entries for each button on the page that associates the button id
// with the id of the element containing the text which describes the button
var buttonIds = new Array();
buttonIds["fontB"]= "fontDesc";
buttonIds["colorB"] = "colorDesc";
buttonIds["customB"] = "customDesc";

// function that is run after the page has loaded to set the aria-describedBy
// property on each of the elements referenced by the array of id values
function setDescribedBy(){
  if (buttonIds){
    var buttons = document.getElementsByTagName("button");
    if (buttons){
      var buttonId;
      for(var i=0; i<buttons.length; i++){
        buttonId = buttons[i].id;
        if (buttonId && buttonIds[buttonId]){
          buttons[i].setAttribute("aria-describedby", buttonIds[buttonId]);
        }
      }
    }
  }
}

// simulated action function - currently just displays an alert
function doAction(theAction){
  alert("Perform the " + theAction + " action");
}

window.onload=setDescribedBy;

//]]>
</script>
</head>
<body>
<p>The buttons on this page use the Accessible Rich Internet Applications
aria-describedby property to provide more detailed information
about the button action.
</p>
<div class="form">
<p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
  <span class="right"><button id="fontB" onclick="doAction('Fonts');"> Fonts </button></span>
</p>
<p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
  <span class="right"><button id="colorB" onclick="doAction('Colors');"> Colors </button></span>
</p>
<p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
  <span class="right"><button id="customB" onclick="doAction('Customize');"> Customize </button></span>
</p>
</div>
</body>

Resources

Tests

Procedure
  1. Check that there is a user interface control having an aria-describedby attribute that references one or more elements via unique id.

  2. Check that the referenced element or elements provide additional information about the user interface control.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA2: Identifying a required field with the aria-required property

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA2. Also see WAI-ARIA Technology Notes.

Description

The objective of this technique is to provide programmatic indication that a form field (which shown through presentation to be required) is mandatory for successful submission of a form.

The fact that the element is required is often visually presented (via a text or non-text symbol, or text indicating input is required or color / styling) but this is not programmatically determinable as part of the field's name.

The WAI-ARIA aria-required property indicates that user input is required before submission. The aria-required property can have values of "true" or "false". For example, if a user must fill in an address field, then aria-required is set to "true".

Note 1: Note: Use of aria-required="true" might be beneficial even when an asterisk or other text symbol is programmatically associated with the field as it may reinforce its required property for some assistive technology users.

Note 2: The fact that the element is required is often visually presented (such as a sign or symbol after the control). Using the aria-required property in addition to the visual presentation makes it much easier for user agents to pass on this important information to the user in a user agent-specific manner. Refer to Supporting ARIA in XHTML and HTML 4.01 for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages.

Examples

Example 1:

The required property is indicated by an asterisk placed next to the label element:


<form action="#" method="post"  id="login1" onsubmit="return errorCheck1()">
  <p>Note: [*]denotes mandatory field</p>
  <p>
    <label for="usrname">Login name: </label>
    <input type="text" name="usrname" id="usrname" aria-required="true"/>[*]
  </p>
  <p>
    <label for="pwd">Password</label>
    <input type="password" name="pwd" id="pwd" size="12" aria-required="true" />[*]
  </p>
  <p>
    <input type="submit" value="Login" id="next_btn" name="next_btn"/>
  </p>

</form>		
Example 2:

The required property is indicated by the word "required" placed next to the label element:


<form action="#" method="post" id="step1" onsubmit="return errorCheck2()">
  <p>
    <label for="fname">First name: </label>
    <input type="text" id="fname" aria-required="true" />
    [required]
  </p>
  <p>
    <label for="mname">Middle name: </label>
    <input type="text" id="mname" />
  </p>
  <p>
    <label for="lname">Last name: </label>
    <input type="text" id="lname" aria-required="true" />
    [required]
  </p>
  <p>
    <label for="email">Email address: </label>
    <input type="text" id="email" aria-required="true" />
    [required]
  </p>
  <p>
    <label for="zip_post">Zip / Postal code: </label>
    <input type="text" id="zip_post" size="6" aria-required="true" />
    [required]
  </p>
  <p>
    <input type="submit" value="Next Step" id="step_btn" name="step_btn" />
  </p>
</form> 
Example 3:

Required fields are indicated by a red border around the fields and a star icon rendered via CSS using content:before. This example also uses custom radio buttons with role=radio but the script to make the span actually work like radio buttons is not included in this example. The CSS properties are available below the form.


<form action="#" method="post" id="alerts1">
  <label for="acctnum" data-required="true">Account Number</label>
  <input size="12" type="text" id="acctnum"
      aria-required="true" name="acctnum" />

 <p id="radio_label" data-required="true">Please send an alert when balance exceeds $3,000.</p>

 <ul  id="rg" role="radiogroup" aria-required="true" aria-labelledby="radio_label">
    <li id="rb1" role="radio">Yes</li>
    <li id="rb2" role="radio">No</li>
 </ul>
</form>
 

Related CSS style definition for this example:


[aria-required=true] {
  border: red thin solid;
}
[data-required=true]:after {
  content: url('/iconStar.gif');
}
 
Example 4: A required text input field in XHTML

The following example shows an XHTML document using the aria-required property to indicate that a form field must be submitted. The mandatory nature of the field is also indicated in the label as a fallback for user agents that do not support WAI-ARIA.

Example Code:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
    For Accessible Adaptable Applications//EN"
  "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
          xml:lang="en">
  <head>
    <title>Required Input</title>
  </head>
  <body>
    <h1>Required Input</h1>
    <p>The following form input field must be completed by the user
    before the form can be submitted.</p>
    <form action="http://example.com/submit">
      <p>
        <label for="test">Test (required)</label>
        <input name="ariaexample" id="example" aria-required="true" aria-label="Test"/>
      </p>
      <p>
        <input type="submit" value="Submit" />
      </p>
    </form>
  </body>
</html>
		
Example 5: Adding aria-required property via script

This example uses scripting to add the aria-required property to a form element. The required property is assigned using the setAttribute() API.

The array variable, requiredIds, is created with the ids of the elements which need to be marked as required. The setRequired() function is called from the onload event of the window object.

The setRequired() function loops through all of the ids provided, retrieves the element and assigns the aria-required property of true using the setAttribute() function.

When this page is accessed using Firefox 3.0 or later and a screen reader that supports WAI-ARIA, the screen reader will speak "required" when reading the label for the input fields.

Example Code:

<head>
 <script type="text/javascript">
 //<![CDATA[

 // array or ids on the required fields on this page
 var requiredIds = new Array( "firstName", "lastName");

 // function that is run after the page has loaded to set the aria-required property on each of the
 //elements in requiredIds array of id values
 function setRequired(){
 	if (requiredIds){
 		var field;
 		for (var i = 0; i< requiredIds.length; i++){
 			field = document.getElementById(requiredIds[i]);
 			field.setAttribute("aria-required", "true");
 		}
 	}
 }
 window.onload=setRequired;
//]]>
 </script>
 </head>
 <body>
 <p>Please enter the following data.  Required fields have been programmatically identified
 as required and  marked with an asterisk (*) following the field label.</p>
 <form action="submit.php">
 <p>
 <label for="firstName">First Name *: </label><input type="text" name="firstName"
    id="firstName" value="" />
 <label for="lastName">Last Name *: </label><input type="text" name="lastName"
    id="lastName"  value="" />
 </p>
 </form>
 </body>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each control which is shown via presentation to be required.

  1. Check whether the aria-required attribute is present:

  2. Check whether the value of the aria-required attribute is the correct required state of the user interface component.

Expected Results
  • Checks #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA4: Using a WAI-ARIA role to expose the role of a user interface component

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA4. Also see WAI-ARIA Technology Notes.

Description

The objective of this technique is to define the role of an element using the role attribute with one of the non-abstract values defined in the WAI-ARIA Definition of Roles. The WAI-ARIA specification provides an informative description of each role, how it relates to other roles, and the states and properties for each role. When rich internet applications define new user interface widgets, exposing the roles enables users to understand the widget and how to interact with it.

Examples

Example 1: A simple toolbar

The WAI-ARIA Authoring Practices document demonstrates a toolbar containing three buttons. The div element has a role of "toolbar", and the img elements have "button" roles:


    <div role="toolbar"
      tabindex="0" 
      id="customToolbar" 
      onkeydown="return optionKeyEvent(event);"
      onkeypress="return optionKeyEvent(event);"
      onclick="return optionClickEvent(event);"
      onblur="hideFocus()"
      onfocus="showFocus()"
      > 
      <img src="img/btn1.gif" 
           role="button" 
           tabindex="-1" 
           alt="Home" 
           id="b1" 
           title="Home">
      <img src="img/btn2.gif" 
           role="button" 
           tabindex="-1" 
           alt="Refresh" 
           id="b2" 
           title="Refresh">
     <img src="img/btn3.gif" 
           role="button" 
           tabindex="-1" 
           alt="Help" 
           id="b3" 
           title="Help"> 
 </div>  
                        

The Authoring Practices Toolbar Pattern provides a working example of a toolbar..

Example 2: A Tree Widget

The WAI-ARIA Authoring Practices demonstrates a tree widget. Note the use of the roles "tree", "treeitem", and "group" to identify the tree and its structure. Here is a simplified excerpt from the code:


<ul role="tree" tabindex="0">
  <li role="treeitem">Birds</li>
  <li role="treeitem">Cats
    <ul role="group">
      <li role="treeitem">Siamese</li>
      <li role="treeitem">Tabby</li>
    </ul>
  </li>
  <li role="treeitem">Dogs
    <ul role="group">
      <li role="treeitem">Small Breeds
        <ul role="group">
          <li role="treeitem">Chihuahua</li>
          <li role="treeitem">Italian Greyhound</li>
          <li role="treeitem">Japanese Chin</li>
        </ul>
      </li>
      <li role="treeitem">Medium Breeds
        <ul role="group">
          <li role="treeitem">Beagle</li>
          <li role="treeitem">Cocker Spaniel</li>
          <li role="treeitem">Pit Bull</li>
        </ul>
      </li>
      <li role="treeitem">Large Breeds
        <ul role="group">
          <li role="treeitem">Afghan</li>
          <li role="treeitem">Great Dane</li>
          <li role="treeitem">Mastiff</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

The Authoring Practices Tree View Pattern provides a working example of a tree.

Resources

(none currently listed)

Tests

Procedure

For a user interface component using the role attribute:

  1. Check that the value of the role attribute is one of the non-abstract roles from the values defined in the WAI-ARIA specification.

  2. Check that the characteristics of the user interface component are described by the role.

Expected Results
  • #1 and #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA5. Also see WAI-ARIA Technology Notes.

Description

The objective of this technique is to use WAI-ARIA state and property attributes to expose the state, properties and values of a user interface component so that they can be read and set by assistive technology, and so that assistive technology is notified of changes to these values. The WAI-ARIA specification provides a normative description of each attribute, and the role of the user interface elements that they support. When rich internet applications define new user interface widgets, exposing the state and property attributes enables users to understand the widget and how to interact with it.

Examples

Example 1: A toggle button

A widget with role button acts as a toggle button when it implements the attribute aria-pressed. When aria-pressed is true, the button is in a "pressed" state. When aria-pressed is false, it is not pressed. If the attribute is not present, the button is a simple command button.

The following snippet from The Open Ajax Accessibility Examples, Example 38, shows WAI-ARIA mark-up for a toggle button that selects bold text:


  <li id="bold1"  
    class="toggleButton"
    role="button"
    tabindex="0"
    aria-pressed="false"
    aria-labelledby="bold_label"
    aria-controls="text1">
    <img src="http://www.oaa-accessibility.org/media/examples/images/button-bold.png" alt="bold text" align="middle">
</li>

The li element has a role of "button" and an "aria-pressed" attribute. The following excerpt from the Javascript for this example updates the value of the "aria-pressed" attribute:

                   
                             /**
   * togglePressed() toggles the aria-pressed atribute between true or false
   *
   * @param ( id object) button to be operated on
   *
   * @return N/A
   */
  function togglePressed(id) {
  
    // reverse the aria-pressed state
    if ($(id).attr('aria-pressed') == 'true') {
      $(id).attr('aria-pressed', 'false');
    }
    else {
      $(id).attr('aria-pressed', 'true');
    }
  }
                            

This button is available as part of the working example of Example 38 - Toolbar using inline images for visual state, on the OpenAjax Alliance site.

Example 2: A slider

A widget with role slider lets a user select a value from within a given range. The slider represents the current value and the range of possible values via the size of the slider and the position of the handle. These properties of the slider are represented by the attributes aria-valuemin, aria-valuemax, and aria-valuenow.

The following snippet from The Open Ajax Accessibility Examples, Example 32, shows WAI-ARIA mark-up for a slider created in Javascript. Note that the javascript sets the attributes aria-valuemin, aria-valuemax, and aria-valuenow:

   var handle = '<img id="' + id + '" class="' + (this.vert == true ? 'v':'h') +'sliderHandle" ' +
    'src="http://www.oaa-accessibility.org/media/examples/images/slider_' + (this.vert == true ? 'v':'h') + '.png" ' + 'role="slider" ' +
    'aria-valuemin="' + this.min +
    '" aria-valuemax="' + this.max +
    '" aria-valuenow="' + (val == undefined ? this.min : val) +
           '" aria-labelledby="' + label +
           '" aria-controls="' + controls + '" tabindex="0"></img>';

The following excerpt from the Javascript for this example updates the value of the "aria-valuenow" attribute when the value of the slider handle is changed:

 slider.prototype.positionHandle = function($handle, val) {
    ...
   // Set the aria-valuenow position of the handle
  $handle.attr('aria-valuenow', val);
   ...
  }

This slider is available as part of the working example of Example 32 - Slider, on the OpenAjax Alliance site.

Resources

Tests

Procedure

The WAI-ARIA specification, Section 5.3, Categorization of Roles defines the required and inherited states and properties for each role.

For a user interface component using the WAI-ARIA role attribute:

  1. Check that the required states and properties for the role are present.

  2. Check that no WAI-ARIA states or properties that are neither required, supported, nor inherited are present.

  3. Check that the state and property values are updated to reflect the current state when the user interface component changes state.

Expected Results
  • #1, #2, and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA6: Using aria-label to provide labels for objects

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA6. Also see WAI-ARIA Technology Notes.

Description

The purpose of this technique is to provide a label for objects that can be read by assistive technology. The aria-label attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.

Authors should be aware that aria-label may be disregarded by assistive technologies in situations where aria-labelledby is used for the same object. For more information on the naming hierarchy please consult the ARIA specification and the accessible name and description calculation in the HTML to Platform Accessibility APIs Implementation Guide. Authors should be aware that use of aria-label will override any native naming such as alt on images or label associated with a form field using the for attribute.

Examples

Example 1: Distinguishing navigation landmarks

The following example shows how aria-label could be used to distinguish two navigation landmarks in a HTML4 and XHTML 1.0 document, where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.

<div role="navigation" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div>
Example 2: Identifying region landmarks

The following example shows how a generic "region" landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label.

<div role="region" aria-label="weather portlet"> 
...
</div>
Example 3: Providing a label for Math

Below is an example of a MathML function, using the math role, appropriate label, and MathML rendering:

<div role="math" aria-label="6 divided by 4 equals 1.5">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mfrac>
      <mn>6</mn>
      <mn>4</mn>
    </mfrac>
    <mo>=</mo>
    <mn>1.5</mn>
  </math>
</div>

Resources

Tests

Procedure

For each element where a aria-label attribute is present.

  1. Examine whether the text description accurately labels the object or provides a description of its purpose or provides equivalent information.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA7: Using aria-labelledby for link purpose

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA7. Also see WAI-ARIA Technology Notes.

Description

With the aria-labelledby attribute, authors can use a visible text element on the page as a label for a focusable element (a form control or a link). For example, a "read more..." link could be associated with the text of the heading of the preceding section to make the purpose of the link unambiguous (see example 1).

When associating text to a focusable element with the help of aria-labelledby, the target text element is given an ID which is referenced in the value of the aria-labelledby attribute of the focusable element.

It is also possible to use several text elements on the page as a label for a focusable element. Each of the text elements used must be given a unique ID which is referenced as a string of IDs (IDREF) in the value of the aria-labelledby attribute. The label text should then be concatenated following the order of IDs in the value of the aria-labelledby attribute.

When applied on links, aria-labelledby can be used to identify the purpose of a link that may be readily apparent for sighted users, but less obvious for screen reader users.

The specified behavior of aria-labelledby is that the associated label text is announced instead of the link text (not in addition to the link text). When the link text itself should be included in the label text, the ID of the link should be referenced as well in the string of IDs forming the value of the aria-labelledby attribute.

For more information on the naming hierarchy please consult the ARIA specification and the accessible name and description calculation for links in the HTML to Platform Accessibility APIs Implementation Guide.

Examples

Example 1: Providing additional information for links

This example will mean that the link text as shown on screen is then used as the start of the accessible name for the link. Popular screen readers like JAWS and NVDA will announce this as: "Read more ...Storms hit east coast" and will display that same text in the links list which is very useful for screen reader users who may browse by links.

<h2 id="headline">Storms hit east coast</h2>

<p>Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
<a id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a></p>
Example 2: Concatenating link text from multiple sources

There may be cases where an author will placed a tag around a section of code that will be referenced.

Note: The use of tabindex="-1" on the span element is not meant to support focusing by scripts - here, it merely serves to ensure that some browsers (IE9, IE10) will include the span element in the accessibility tree, thus making it available for reference by aria-labelledby. For more details see Accessible HTML Elements.

<p>Download <span id="report-title" tabindex="-1">2012 Sales Report</span>:
<a aria-labelledby="report-title pdf" href="#" id="pdf">PDF</a> |
<a aria-labelledby="report-title doc" href="#" id="doc">Word</a> |
<a aria-labelledby="report-title ppt" href="#" id="ppt">Powerpoint</a></p>

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure

For each link that has an aria-labelledby attribute:

  1. Check that each ID in the value of the aria-labelledby attribute matches an ID of a text element used as part of the link purpose.

  2. Check that the combined value of the text referenced by the one or more ID's in the aria-labelledby attribute properly describes the purpose of the link element.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA8: Using aria-label for link purpose

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA8. Also see WAI-ARIA Technology Notes.

Description

The objective of this technique is to describe the purpose of a link using the aria-label attribute. The aria-label attribute provides a way to place a descriptive text label on an object, such as a link, when there are no elements visible on the page that describe the object. If descriptive elements are visible on the page, the aria-labelledby attribute should be used instead of aria-label. Providing a descriptive text label lets a user distinguish the link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. In some assistive technologies the aria-label value will show in the list of links instead of the actual link text.

Per the WAI-ARIA specification and the HTML to Platform Accessibility APIs Implementation Guide, the aria-label text will override the text supplied within the link. As such the text supplied will be used instead of the link text by AT. Due to this it is recommended to start the text used in aria-label with the text used within the link. This will allow consistent communication between users.

Examples

Example 1: Describing the purpose of a link in HTML using aria-label.

In some situations, designers may choose to lessen the visual appearance of links on a page by using shorter, repeated link text such as "read more". These situations provide a good use case for aria-label in that the simpler, non-descriptive "read more" text on the page can be replaced with a more descriptive label of the link. The words 'read more' are repeated in the aria-label (which replaces the original anchor text of "[Read more...]") to allow consistent communication between users.

 <h4>Neighborhood News</h4>
 <p>Seminole tax hike:  Seminole city managers are proposing a 75% increase in 
 property taxes for the coming fiscal year.
 <a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>
 </p> 

 <p>Baby Mayor:  Seminole voters elect the city's youngest mayor ever by voting in 3 year
 old Willy "Dusty" Williams in yesterday's mayoral election.
 <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a>
 </p>

Resources

Tests

Procedure

For link elements that use aria-label:

  1. Check that the value of the aria-label attribute properly describes the purpose of the link element.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA9: Using aria-labelledby to concatenate a label from several text nodes

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA9. Also see WAI-ARIA Technology Notes.

Description

The aria-labelledby property can be used to label all visual objects. Applied to inputs, the aria-labelledby property can be used to label native inputs as well as non-native elements, such as custom text inputs constructed with div contenteditable="true".

One particular use of aria-labelledby is for text inputs in situations where a meaningful label should consist of more than one label string.

Authors assign unique ids to the label strings to be concatenated as the label for the input element. The value of the aria-labelledby attribute is then a space-separated list of all ids in the order in which the label strings referenced should be read by screen readers. Supporting user agents will concatenate the label strings referenced and read them as one continuous label of the input.

The concatenation of label strings can be useful for different reasons. In example 1, an input is nested within the context of a full sentence. The desired screen reader output is "Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20". Since the id of the text input is included in the string of ids referenced by aria-labelledby, the value of the input is included in the concatenated label at the right position.

Another application of aria-labelledby is when there is no space to provide a visible label next to the input, or when using native labels would create unnecessary redundancy. Here, the use aria-labelledby makes it possible to associate visible elements on the page as label for such inputs. This is demonstrated in example 2 where table column and row headings are concatenated into labels for the text input elements inside the table.

Note: The ARIA accessible name and description calculation specifies that the string specified in aria-labelledby should replace rather than add to the content of the element that carries the property. So adding the aria-labelledby property to a native label should replace the text content inside that label unless the label itself is referenced as part of the sequence of ids in aria-labelledby.

Examples

Example 1: A time-out input field with concatenated label

A text input allows users to extend the default time before a time-out occurs.

The string "Extend time-out to" is contained in a native label element and is associated with the input with the input by id="timeout-duration" . This label is associated with this input using the for/id association only on user agents that don't support ARIA. On user agents that support ARIA, the for/id association is ignored and the label for the input is provided only by aria-labelledby, per the accessible name and description calculation in the HTML to Platform Accessibility APIs Implementation Guide.

The aria-labelledby attribute on the text input references three elements: (1) the span containing the native label, (2) the text input containing the default text '20' (recall that this input is not labelled with the for/id associated label text), and (3) the string 'minutes' contained in a span. These elements should be concatenated to provide the full label for the text input

Note: The use of tabindex="-1" on the span element is not meant to support focusing by scripts - here, it merely serves to ensure that some browsers (IE9, IE10) will include the span element in the accessibility tree, thus making it available for reference by aria-labelledby. For more details see Accessible HTML Elements

<form>
<p><span id="timeout-label" tabindex="-1"><label for="timeout-duration">Extend time-out to</label></span>
<input type="text" size="3" id="timeout-duration" value="20" 
    aria-labelledby="timeout-label timeout-duration timeout-unit">
<span id="timeout-unit" tabindex="-1"> minutes</span></p>
</form>

Working example, Time-out input field with concatenated label, adapted from Easy ARIA tip #2: aria-labelledby and aria-describedby, an example put together by Marco Zehe.

Example 2: A simple data table with text inputs

A simple data table containing text inputs. The input labels are concatenated through aria-labelledby referencing the respective column and row headers.

<table>
	<tr>
		<td></td>
		<th id="tpayer">Taxpayer</th>
		<th id="sp">Spouse</th>
	</tr>

	<tr>
		<th id="gross">W2 Gross</th>
		<td><input type="text" size="20" aria-labelledby="tpayer gross" /></td>
		<td><input type="text" size="20" aria-labelledby="sp gross" /></td>
	</tr>
	
	<tr>
		<th id="div">Dividends</th>
		<td><input type="text" size="20" aria-labelledby="tpayer div" /></td>
		<td><input type="text" size="20" aria-labelledby="sp div" /></td>
	</tr>
</table>

Working example, Using aria-labelledby for simple table with text inputs, based on an example by Jim Thatcher.

Example 3: A conference workshop booking table

A conference workshop booking table with two parallel tracks allows users to select the workshop they want to attend. When tabbing through the checkbox inputs in the table, the track (1 or 2), the title, and the speaker of the workshop followed by the adjacent checkbox label "Attend" are provided as concatenated label for the checkboxes via aria-labelledby.

Some browser / screen reader combinations (e.g. Mozilla Firefox and NVDA) will in addition speak the relevant table cell headers.

<h1>Dinosaur Conference workshops timetable Thursday, 14.  & Friday, 15. March 2013</h1>
<table>
<caption>Dinosaur Conference workshop booking table</caption>
<tbody><tr>
	<td rowspan="2"></td>
	<th colspan="2" scope="colgroup">Thursday</th>
	<th colspan="2" scope="colgroup">Friday</th>
</tr>

<tr>
	<th scope="col" id="am1">9 to 12 AM</th>
	<th scope="col" id="pm1">2 to 5 PM</th>
	<th scope="col" id="am2">9 to 12 AM</th>
	<th scope="col" id="pm2">2 to 5 PM</th>
</tr>

<tr>
	<th id="track1" scope="row">track 1</th>
	<td>
		<h2 id="title-TM1">The Paleozoic era </h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att">
                <label id="TM1-att" for="TM1">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-TA1">The Mesozoic era overview</h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TA1" aria-labelledby="title-TA1 track1 am2 TA1-att">
                <label id="TA1-att" for="TA1">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-FM1">The Triassic period, rise of the dinosaurs</h2>
		<p>1 place left</p>
		<p><input type="checkbox" id="FM1" aria-labelledby="title-FM1 track1 pm1 FM1-att">
                <label id="FM1-att" for="FM1">Attend</label></p>

	</td>
	
	<td>
		<h2 id="title-FA1">The Jurassic period</h2>
		<p>11 places left</p>
		<p><input type="checkbox" id="FA1" aria-labelledby="title-FA1 track1 pm2 FA1-att">
                <label id="FA1-att" for="FA1">Attend</label></p>
	</td>
</tr>


<tr>
	<th id="track2" scope="row">track 2</th>
	<td>
		<h2 id="title-TM2">The Cretaceous period</h2>
		<p>18 places left</p>
		<p><input type="checkbox" id="TM2" aria-labelledby="title-TM2 track2 am1 TM2-att">
                <label id="TM2-att" for="TM2">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-TA2">The end of the dinosaurs</h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TA2" aria-labelledby="title-TA2 track2 am2 TA2-att">
                <label id="TA2-att" for="TA2">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-FM2">First discoveries of dinosaurs</h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="FM2" aria-labelledby="title-FM2 track2 pm1 FM2-att">
                <label id="FM2-att" for="FM2">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-FA2">Emerging scholarship</h2>
		<p>19 places left</p>
		<p><input type="checkbox" id="FA2" aria-labelledby="title-FA2 track2 pm2 FA2-att">
                <label id="FA2-att" for="FA2">Attend</label></p>
	</td>
</tr>
</tbody>
</table>

Working example: Conference workshop booking timetable.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For inputs that use aria-labelledby:

  1. Check that ids referenced in aria-labelledby are unique and match the ids of the text nodes that together provide the label

  2. Check that the concatenated content of elements referenced by aria-labelledby is descriptive for the purpose or function of the element labeled

Expected Results
  • #1 and #2 are true.

    If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA10: Using aria-labelledby to provide a text alternative for non-text content

Applicability

This technique applies to HTML with Accessible Rich Internet Applications (WAI-ARIA).

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA10. Also see WAI-ARIA Technology Notes.

Description

The purpose of this technique is to provide a short description for an element that can be read by assistive technologies (AT) by using the aria-labelledby attribute. The aria-labelledby attribute associates an element with text that is visible elsewhere on the page by using an ID reference value that matches the ID attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the aria-labelledby attribute as the text alternative for the element with the attribute.

Examples

Example 1: Providing a short description for a complex graphic

This example shows how to use the aria-labelledby attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.

<div role="img" aria-labelledby="star_id">
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="emptystar.png" alt=""/>
</div>

<div id="star_id">4 of 5</div>

Working example: Providing a short description for a complex graphic.

Resources

Tests

Procedure
  1. Examine each element where the aria-labelledby attribute is present and the element does not support the alt attribute.

  2. Check whether the value of the aria-labelledby attribute is the id of an element on the web page.

  3. Determine that the text of the element identified by the aria-labelledby attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.

Expected Results
  • #2 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA11: Using ARIA landmarks to identify regions of a page

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA11. Also see WAI-ARIA Technology Notes.

Description

The purpose of this technique is to provide programmatic access to sections of a web page. Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page.

They also provide an easy way for users of assistive technology to skip over blocks of content that are repeated on multiple pages and notify them of programmatic structure of a page. For instance, if there is a common navigation menu found on every page, landmark roles (or "landmarks") can be used to skip over it and navigate from section to section. This will save assistive technology users and keyboard users the trouble and time of tabbing through a large amount of content to find what they are really after, much like a traditional "skip links" mechanism. (Refer to User Agent Notes above for specifics of AT support). A blind user who may be familiar with a news site's menu, and is only interested in getting to the top story could easily navigate to the "main" landmark, and bypass dozens of menu links. In another circumstance, a user who is blind may want to quickly find a navigation menu, and can do so by jumping to the navigation landmark.

Landmarks also can help sighted keyboard-only users navigate to sections of a page using a browser plugin.

Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute is the name of the landmark. These role values are listed below:

  • banner: A region that contains the prime heading or internal title of a page.

  • complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.

  • contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements.

  • form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.

  • main: Main content in a document. In almost all cases a page will have only one role="main".

  • navigation: A collection of links suitable for use when navigating the document or related documents.

  • search: The search tool of a Web document.

  • application: A region declared as a web application, as opposed to a web document. (note: The role of application should only be used with caution because it gives a signal to screen reading software to turn off normal web navigation controls. Simple widgets should generally not be given the application role, nor should an entire web page be given the application role, unless it is not to be used at all like a web page, and not without much user testing with assistive technology.)

There are cases when a particular landmark role could be used more than once on a page, such as on primary and secondary navigation menus. In these cases, identical roles should be disambiguated from each other using a valid technique for labelling regions (see examples below).

Landmarks should supplement native semantic markup such as HTML headings, lists and other structural markup. Landmarks are interpretable by WAI-ARIA-aware assistive technologies and are not exposed by browsers directly to users.

It is a best practice to include ALL content on the page in landmarks, so that screen reader users who rely on them to navigate from section to section do not lose track of content.

Examples

Example 1: Simple landmarks

The following example shows how landmarks might be added to an HTML4 or XHTML 1.0 document:

<div id="header" role="banner">A banner image and introductory title</div>
<div id="sitelookup" role="search">....</div>
<div id="nav" role="navigation">...a list of links here ... </div>
<div id="content" role="main"> ... Ottawa is the capital of Canada ...</div>
<div id="rightsideadvert" role="complementary">....an advertisement here...</div>
<div id="footer" role="contentinfo">(c)The Freedom Company, 123 Freedom Way, Helpville, USA</div>
Example 2: Multiple landmarks of the same type and aria-labelledby

The following example shows a best practice of how landmarks might be added to an HTML4 or XHTML 1.0 document in situations where there are more than two of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a Web page, each instance may have a unique label specified using aria-labelledby:

<div id="leftnav" role="navigaton" aria-labelledby="leftnavheading">
<h2 id="leftnavheading">Institutional Links</h2>
<ul><li>...a list of links here ...</li> </ul></div>
<div id="rightnav" role="navigation" aria-labelledby="rightnavheading">
<h2 id="rightnavheading">Related topics</h2>
<ul><li>...a list of links here ...</li></ul></div>
Example 3: Multiple landmarks of the same type and aria-label

The following example shows a best practice of how landmarks might be added to an HTML4 or XHTML 1.0 document in situations where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.

<div id="leftnav" role="navigaton" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div id="rightnav" role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div>
Example 4: Search form

The following example shows a search form with a "search" landmark. The search role typically goes on the form field or a div surrounding the search form.

<form role="search">
<label for="s6">search</label><input id="s6" type="text" size="20">
...
</form> 

Resources

Tests

Procedure
  1. Examine each element with a landmark role.

  2. Examine whether the landmark role attribute is applied to the section of the page that corresponds with that role. (i.e., the "navigation" role is applied to a navigation section, the "main" role is applied to where the main content begins.)

Expected Results
  • #1 and #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA12: Using role=heading to identify headings

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA12. Also see WAI-ARIA Technology Notes.

Description

The purpose of this technique is to provide a way for Assistive Technologies (AT) to identify a piece of content as a heading. Applying role="heading" to an element causes an AT (like a screen reader) to treat it as though it were a heading.

If there is more than one heading on the page and the heading hierarchy is defined through the visual presentation, the aria-level attribute should be used to indicate the hierarchical level of the heading.

When possible, use native heading mark-up directly. For example, it is preferable to use h1 rather than using <div role="heading" aria-level="1">. However, the use of the heading role, instead of heading mark-up, may be necessary. For example, when retrofitting a legacy site where scripts depend on the existing element hierarchy.

The use of the heading role and nesting levels is discussed in WAI-ARIA Authoring Practices 1.1.

Examples

Example 1: Simple headings

This example demonstrates how to implement simple headings using role="heading" when retrofitting a legacy site where scripts depend on the existing element hierarchy or the level is unknown. For example, web content which is syndicated from various sources may be constructed without knowledge of what the final presentation will be.

<div role="heading">Global News items</div>
... a list of global news with editorial comment....

<div role="heading">Local News items</div>
... a list of local news, with editorial comment ...
Example 2: Additional heading levels

This example demonstrates how to implement a level 7 heading using role="heading" and the aria-level attribute. Since HTML only supports headings through level 6, there is no native element to provide these semantics.

...
<h5>Fruit Trees</h5>
...
<h6>Apples</h6>
<p>Apples grow on trees in areas known as orchards...</p>
...
<div role="heading" aria-level="7">Jonagold/div>
<p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p>

Resources

Tests

Procedure
  1. Examine each element with the attribute role="heading".

  2. Determine whether the content of the element is appropriate as a heading.

  3. If the element has an aria-level attribute, determine whether the value is the appropriate hierarchical level.

Expected Results
  • #2 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA13: Using aria-labelledby to name regions and landmarks

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA13. Also see WAI-ARIA Technology Notes.

Description

The purpose of this technique is to provide names for regions of a page that can be read by assistive technology. The aria-labelledby attribute provides a way to associate an section of the page marked up as a region or landmarks with text that is on the page that labels it.

Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page.

Like aria-describedby, aria-labelledby can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.

Examples

Example 1: Identify a landmark with on-page text

Below is an example of aria-labelledby used on a complementary Landmark. The region of the document to which the heading pertains could be marked with the aria-labelledby property containing the value of the id for the header.

<p role="complementary" aria-labelledby="hdr1">
 <h1 id="hdr1">
    Top News Stories
 </h1>
</p>
Example 2: Identification for Application landmarks

The following code snippet for application landmarks with static prose. If you have a regional landmark of type application and static descriptive text is available, then on the application landmark, include an aria-describedby reference to associate the application and the static text as shown here:

<div role="application" aria-labelledby="p123" aria-describedby="info">
<h1 id="p123">Calendar<h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
....
</div>

Resources

Tests

Procedure
  1. Examine each element with attribute role=region or with a landmark role, where an aria-labelledby attribute is also present.

  2. Check that the value of the aria-labelledby attribute is the id of an element on the page.

  3. Check that the text of the element with that id accurately labels the section of the page.

Expected Results
  • #2 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA14. Also see WAI-ARIA Technology Notes.

Description

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up divs (light boxes) to indicate the control for closing the div.

In some situations, elements can be given the attribute aria-label to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.

In other situations, elements can be given the attribute aria-label to provide an accessible name when the native HTML labeling element is not supported by the control - for example, when a div set to contentEditable is used instead of native form elements such as input type="text" or textarea in order to provide a richer text editing experience.

Examples

Example 1: A close button (X) in a pop-up box

On a page, a link displays a pop-up box (a div) with additional information. The 'close' element is implemented as a button containing merely the letter 'x'. The property aria-label="close" is used to provide an accessible name to the button.

<div id="box">
   This is a pop-up box.
   <button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button">X</button>				
</div>

Working example: Close button example.

Example 2: A phone number with multiple fields
<div role="group" aria-labelledby="groupLabel">
  <span id="groupLabel>Work Phone</span>
  +<input type="number" aria-label="country code">
  <input type="number" aria-label="area code">
  <input type="number" aria-label="subscriber number">
</div>

Resources

Tests

Procedure

For elements that use aria-label:

  1. Check that the value of the aria-label attribute properly describes the purpose of an element where user input is required

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA15: Using aria-describedby to provide descriptions of images

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA15. Also see WAI-ARIA Technology Notes.

Description

The objective of this technique is to provide descriptions of images when a short text alternative does not adequately convey the function or information provided in the object.

A feature of WAI-ARIA is the ability to associate descriptive text with a section, drawing, form element, picture, and so on using the aria-describedby property. This is similar to the longdesc attribute in that both are useful for providing additional information to help users understand complex images. Like longdesc, descriptive text provided using aria-describedby is separate from the short name provided using the alt attribute in HTML. Unlike longdesc, aria-describedby cannot reference descriptions outside of the page containing the image. An advantage of providing long descriptions using content from the same page as the image is that the alternative is available to all, including sighted people who do not have assistive technology. It is worth noting that as of the time of writing (October 2013) some assistive technologies read aria-describedby content immediately after an image's alt attribute information without user activation - whereas most implementations of longdesc require the user to take explicit action to read the additional description.

Like aria-labelledby, aria-describedby can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.

Examples

Example 1: Describing an image

The following example shows how aria-describedby can be applied to an image to provide a long description, where that text description is on the same page as the image.

<img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1">
<p id="p1">This painting dates back to 1730 and is oil on canvas. It was created by 
Jean-Guy Millome, and represents ...</p>

Resources

Tests

Procedure
  1. Examine each image element where a aria-describedby attribute is present.

  2. Examine whether the aria-describedby attribute programatically associates an element with its text description, via the id attribute on the element where the text to be used as the description is found.

  3. Examine whether the combined text equivalent and associated text description accurately describe or provide the equivalent purpose to the object.

Expected Results
  • #1, #2, and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA16: Using aria-labelledby to provide a name for user interface controls

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA16. Also see WAI-ARIA Technology Notes.

Description

The purpose of this technique is to provide names for user interface controls that can be read by assistive technology. WAI-ARIA provides a way to associate text with a section, drawing, form element, picture, and so on, using the aria-labelledby property. This techniques uses the aria-labelledby attribute to associate a user interface control, such as a form field, with text on the page that labels it.

Like aria-describedby, aria-labelledby can accept multiple ids to point to other elements of the page using a space separated list. This capability makes aria-labelledby especially useful in situations where sighted users use information from the surrounding context to identify a control. Using aria-labelledby to concatenate a label from several text nodes contains more examples of situations where names are created from several other text elements on the page.

While the function of aria-labelledby appears similar to the native HTML label element, there are some differences:

  • aria-labelledby can reference more than one text element; label can only reference one.

  • aria-labelledby can be used for a variety of elements while the label element can only be used on form elements.

  • Clicking on a label focuses the associated form field. This does not occur with aria-labelledby. If this behaviour is required then use label or implement this functionality using scripting.

Note that as of December 2013, label has better support than aria-labelledby, especially in older browsers and assistive technologies.

Examples

Example 1: Labelling a simple text field

The following is an example of aria-labelledby used on a simple text field to provide a label in a situation where there is no text available for a dedicated label but there is other text on the page that can be used to accurately label the control.

<input name="searchtxt" type="text" aria-labelledby="searchbtn">
<input name="searchbtn" id="searchbtn" type="submit" value="Search">
Example 2: Labelling a slider

Below is an example of aria-labelledby used to provide a label for a slider control. In this case the label text is selected from within a longer adjacent text string. Please note that this example is simplified to show only the labeling relationship; authors implementing custom controls also need to ensure that controls meet other success criteria.

<p>Please select the <span id="mysldr-lbl">number of days for your trip</span></p>
<div id="mysldr" role="slider" aria-labelledby="mysldr-lbl"></div>
Example 3: A label from multiple sources

The following example of aria-labelledby with multiple references uses the label element. For additional detail on concatenating multiple sources of information into a label with aria-labelledby, please view the technique Using ARIA labelledby to concatenate a label from several text nodes.

<label id="l1" for="f3">Notify me</label>
<select name="amt" id="f3" aria-labelledby="l1 f3 l2">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<span id="l2" tabindex="-1">days in advance</span>

Note: The use of the label element is included for a number of reasons. If the user clicks on the text of the label element, the corresponding form field will receive focus, which makes the clicking target larger for people with dexterity problems. Also the label element will always be exposed via the accessibility API. A span could have been used (but if so, it should receive a tabindex="-1" so that it will be exposed via the accessibility API in all versions of Internet Explorer). However, a span would lose the advantage of the larger clickable region.

Resources

Tests

Procedure

For each user interface control element where an aria-labelledby attribute is present:

  1. Check that the value of the aria-labelledby attribute is the id of an element or a space separated list of ids on the web page.

  2. Check that the text of the referenced element or elements accurately labels the user interface control.

Expected Results
  • #1 and #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA17: Using grouping roles to identify related form controls

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA17. Also see WAI-ARIA Technology Notes.

Description

The objective of this technique is to mark up a set of related controls within a form as a group. Any label associated with the group also serves as a common label or qualifier for individual controls in the group. Assistive technologies can indicate the start and end of the group and the group’s label as one navigates into and out of the group. This is a viable alternative for grouping form controls programmatically when the user interface’s design makes it difficult to employ the fieldset-legend technique (H71).

For a group of radio buttons, one could also use role="radiogroup" instead of role="group".

The group can be labeled using aria-labelledby.

This technique is not meant for wrapping all controls on a form within a single container with role="group".

Examples

Example 1: Social Security Number

Social security number fields which are 9 digits long and broken up into 3 segments can be grouped using role="group".

<div role="group" aria-labelledby="ssn1">
   <span id="ssn1">Social Security#</span> 
   <span style="color: #D90D0D;"> * </span>
   <input size="3" type="text" aria-required="true" title="First 3 digits" />-
   <input size="2" type="text" aria-required="true" title="Next 2 digits" />-
   <input size="4" type="text" aria-required="true" title="Last 4 digits" />
</div>

Working example: Multiple part field groups.

Example 2: Identifying radio groups

This example demonstrates use role=radiogroup. Note also that the radio buttons are custom controls with role=radio. (But the script to make the span actually work like radio buttons is not included in this example. ) One may optionally employ CSS to place a border around groups of such fields to visually reinforce the group relationship. The CSS properties are available below the form.

<h3>Set Alerts for your Account</h3>
  <div role="radiogroup" aria-labelledby="alert1">
    <p id="alert1">Send an alert when balance exceeds $ 3,000</p>
    <div>
      <span role="radio" aria-labelledby="a1r1" name="a1radio"></span>
      <span id="a1r1">Yes</span>
    </div>
    <div>
      <span role="radio" aria-labelledby="a1r2" name="a1radio"></span>
      <span id="a1r2">No</span>
    </div>
  </div>
  <div role="radiogroup" aria-labelledby="alert2">
    <p id="alert2">Send an alert when a charge exceeds $ 250</p>
    <div>
      <span role="radio" aria-labelledby="a2r1" name="a2radio"></span>
      <span id="a2r1">Yes</span>
    </div>
    <div>
      <span role="radio" aria-labelledby="a2r2" name="a2radio"></span>
      <span id="a2r2">No</span>
    </div>
  </div>
  <p><input type="submit" value="Continue" id="continue_btn" name="continue_btn" /></p>

Related CSS Style Definition to place a border around the group of fields :

div[role=radiogroup] {
  border: black thin solid;
} 

Working example: using grouping roles to identify related form controls.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For groups of related controls where the individual labels for each control do not provide a sufficient description, and an additional group level description is needed:

  1. Check that the group of logically related input or select elements are contained within an element with role=group.

  2. Check that this group has an accessible name defined using aria-label or aria-labelledby.

Expected Results
  • #1 and #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA18: Using aria-alertdialog to Identify Errors

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA18. Also see WAI-ARIA Technology Notes.

Description

The purpose of this technique is to alert people that an input error has occured. Using role="alertdialog" creates a notification. This notification should be modal with the following characteristics:

  • aria-label or aria-labelledby attribute gives the alertdialog an accessible name.

  • aria-describedby provides a reference to the text of the alert.

  • The alertdialog contains at least one focusable control, and the focus should move to that control when the alertdialog opens.

  • The tab order is constrained within the alertdialog whilst it is open.

  • When the dialog is dismissed, the focus moves back to the position it had before the dialog opened, if possible.

Note that the alertdialog should not be present in a way that it will be accessed by AT until it is needed. One way to do this is not to include it in the static HTML and instead to insert it into the DOM via script when the error condition is triggered. The insertion would correspond to the following HTML sample.

Examples

Example 1: Alert dialog

This example shows how a notification using role="alertdialog" can be used to notify someone they have entered invalid information.

<div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText">
<h1 id="alertHeading">Error</h1>
<div id="alertText">Employee's Birth Date is after their hire date. Please verify the birth date and hire date.</div>
<button>Save and Continue</button>
<button>Return to page and correct error</button>
</div>

Working example: Alert dialog.

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. Trigger the error that causes the alertdialog to appear.

  2. Determine that the alertdialog contains at least one focusable control, and the focus moves to that control when the alertdialog opens.

  3. Determine that the tab order is constrained within the alertdialog while it is open, and when the dialog is dismissed, the focus moves back to the position it had before the dialog opene, if possible.

  4. Examine the element with role="alertdialog" applied.

  5. Determine that either the aria-label or aria-labelledby attribute has been correctly used to give the alertdialog an accessible name.

  6. Determine that the contents of the alertdialog identifies the input error.

  7. Determine whether contents of the alertdialog suggests how to fix the error.

Expected Results
  • Checks 2, 3, 5 and 6 are true. For SC 3.3.3, Check 7 is also true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA19: Using ARIA role=alert or Live Regions to Identify Errors

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA19. Also see WAI-ARIA Technology Notes.

Description

The purpose of this technique is to notify Assistive Technologies (AT) when an input error occurs. The aria-live attribute makes it possible for an AT (such as a screen reader) to be notified when error messages are injected into a Live Region container. The content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed.

There are also a number of special case live region roles which can be used instead of applying live region properties directly.

Examples

Example 1: Injecting error messages into a container with role=alert already present in the DOM

The following example uses role=alert which is equivalent to using aria-live=assertive.

In the example there is an empty error message container element with aria-atomic=true and an aria-live property or alert role present in the DOM on page load. The error container must be present in the DOM on page load for the error message to be spoken by most screen readers. aria-atomic=true is necessary to make Voiceover on iOS read the error messages after more than one invalid submission.

jQuery is used to test if the inputs are empty on submit and inject error messages into the live region containers if so. Each time a new submit is attempted the previous error messages are removed from the container and new error messages injected.

<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(e) {
	$('#signup').submit(function() {
		$('#errors').html('');
		if ($('#first').val() === '') {
			$('#errors').append('<p>Please enter your first name.</p>');
		}
		if ($('#last').val() === '') {
			$('#errors').append('<p>Please enter your last name.</p>');
		} 
		if ($('#email').val() === '') {
			$('#errors').append('<p>Please enter your email address.</p>');
		} 
		return false;
	});
});
</script>

<form name="signup" id="signup" method="post" action="">
  <p id="errors" role="alert" aria-atomic="true"></p>
  <p>
    <label for="first">First Name (required)</label><br>
    <input type="text" name="first" id="first">
  </p>
  <p>
    <label for="last">Last Name (required)</label><br>
    <input type="text" name="last" id="last">
  </p>
  <p>
    <label for="email">Email (required)</label><br>
    <input type="text" name="email" id="email">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit">
  </p>
</form>

Working example: Using role=alert to identify errors.

Resources

(none currently listed)

Tests

Procedure
  1. Determine that an empty error container role=alert or aria-live=assertive attribute is present in the DOM at page load.

  2. Trigger the error that causes the content in the live region to appear or update.

  3. Determine that the error message was injected into the already present error container.

Expected Results
  • #1 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA20: Using the region role to identify a region of the page

Applicability

Technologies that support Accessible Rich Internet Applications.

This technique relates to:

Description

This technique demonstrates how to assign a generic region role to a section of a page so that user agents and assistive technologies may be able to programmatically identify it. The region role demarcates a segment of the page that contains content of significance so that it is more readily discoverable and navigable. The generic region should be used when the section cannot be marked up using a standard document landmark role (see ARIA11: Using ARIA landmarks to identify regions of a page (ARIA) ).

It is important to name regions, because they are generic grouping elements and users will need some way to tell which region they are in. Regions can be named using aria-labelledby, aria-label, or another technique. Doing so helps to better expose content and information relationships on the page. The role of region should be used prudently, because if overused they can make the page overly verbose for screen reader users.

Examples

Example 1: Region on a news website

A section on the home page of a news website that contains a poll that changes every week is marked up with role="region". The h3 text above the form is referenced as the region's name using aria-labelledby.


<div role="region" aria-labelledby="pollhead">
<h3 id="pollhead">This week's Poll</h3>
<form method="post" action="#">
  <fieldset>
    <legend>Do you believe the tax code needs to be overhauled?</legend>
    <input type="radio" id="r1" name="poll" />
    <label for="r1">No, it's fine the way it is</label>
    <input type="radio" id="r2" name="poll" />
    <label for="r2">Yes, the wealthy need to pay more</label>
    <input type="radio" id="r3" name="poll" />
    <label for="r3">Yes, we need to close corporate loopholes</label>
    <input type="radio" id="r4" name="poll" />
    <label for="r4">Changes should be made across the board</label>
  </fieldset>
</form>
<a href="results.php">See Poll Results</a>
</div>			
            
Example 2: Identifying a region on a banking site

A user can expand links on a bank website after logging in to see details of term deposit accounts. The details are within a span marked up with region role. The heading for the region has role=heading and is included in the aria-labelledby that names the region.


<ol>
	<li><a id="l1" href="#" aria-expanded="false" title="Show details" aria-controls="block1" >John Henry's Account</a><img src="images/panel_expand.gif" alt="" />
		 <div id="block1" class="nowHidden" tabindex="-1" aria-labelledby="l1 cd1" role="region"><span id="cd1" role="heading" aria-level="3">Certificate of  Deposit:</span>
		 <table>
			 <tr><th scope="row">Account:</th> <td>25163522</td></tr>
			 <tr><th scope="row">Start date:</th> <td>February 1, 2014</td></tr>
			 <tr><th scope="row">Maturity date:</th><td>February 1, 2016</td></tr>
			 <tr><th scope="row">Deposit Amount:</th> <td>$ 3,000.00</td></tr>
			 <tr><th scope="row">Maturity Amount:</th> <td>$ 3,072.43</td></tr>
		 </table>
		 </div>
	 </li>
 </ol>
            
Example 3: Identifying a portlet with a generic region

This example shows how a generic region landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label.

Example Code:


<div role="region" aria-label="weather portlet"> 
	...
</div>            

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each section marked up with role="region":

  1. Examine the content and ensure that it is important enough to have an independent landmark

  2. Ensure that a standard landmark role is not appropriate for this content

  3. Check that the region has a programmatically determined name

Expected Results
  • Checks #1-3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


ARIA21: Using Aria-Invalid to Indicate An Error Field

This technique relates to:

Description

This technique demonstrates how aria-invalid may be employed to specifically identify fields that have failed validation. Its use is most suitable when:

  • The error description does not programmatically identify the failed fields

  • The failed fields are identified in a manner that is not available to some users - for example by using an error-icon rendered visually by some technique that does not rely on color such as a visual cue like a border.

Note: One of the above two situations may be true for a field which has programmatically associated label and / or instructions that conveys data format, a data range, or the required property.

While it is always preferable to programmatically associate specific error description with the failed field, the page's design or the framework employed may sometimes constrain the author's ability to do so. In these cases, authors may programmatically set aria-invalid to "true" on the fields that have failed validation. This is interpretable mainly by assistive technologies (like screen readers / screen magnifiers) employed by users who are vision impaired. When a field has aria-invalid set to “true”, VoiceOver in Safari announces “invalid data” when the field gets focus; JAWS and NVDA notify the error as an “invalid entry”.

This ARIA attribute has to be set / turned on programmatically. It should not be set to “true” before input validation is performed or the form is submitted. Setting aria-invalid to “false” is the same as not placing the attribute for the form control at all. Quite understandably, nothing is conveyed by assistive technology to users in this case.

When visible text is used to programmatically identify a failed field and / or convey how the error can be corrected, setting aria-invalid to "true" is not required from a strict compliance standpoint but may still provide helpful information for users.

Examples

Example 1: Using aria-invalid on required fields

The aria-invalid attribute is used on required fields that have no input. A message above the form conveys that form submission has failed due to this.

A portion of the jQuery code and the HTML form markup follow:


<code>
<script>
...
...
		if ($('#first').val() === '') {
			$('#first').attr("aria-invalid", "true");
$("label[for='first']").addClass('failed');
		}
		if ($('#last').val() === '') {
			$('#last').attr("aria-invalid", "true");
$("label[for='last']").addClass('failed');
		} 
		if ($('#email').val() === '') {
			$('#email').attr("aria-invalid", "true");
$("label[for='email']").addClass('failed');
		} 
...
...
</script>
<style type="text/css">
label.failed {
	border: red thin solid;
}
</style>
<form name="signup" id="signup" method="post" action="#">
 <p>
    <label for="first">First Name (required)</label><br>
    <input type="text" name="first" id="first">
  </p>
  <p>
    <label for="last">Last Name (required)</label><br>
    <input type="text" name="last" id="last">
  </p>
  <p>
    <label for="email">Email (required)</label><br>
    <input type="text" name="email" id="email">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit">
  </p>
</form>
</code>            

Live example.

Example 2: Identifying errors in data format

Aria-invalid and aria-describedby are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using aria-describedby, and aria-invalid makes it easier to programmatically find fields with errors.

Below is the rendered HTML code for the email address field in Example 1: When an invalid email address is entered by the user such as "samexample.com" (instead of sam@example.com), the HTML code is:


<div class="control">
<p><label for="email">Email address: [*]</label> 
<input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_1" /></p> 
<span class="errtext" id="err_1">Error: Incorrect data</span></div>
            

And when no data is entered in the email field, the HTML code is:


<div class="control">
<p><label for="email">Email address: [*]</label> 
<input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_2" /></p>
<span class="errtext" id="err_2">
 Error: Input data missing</span>
</div>            

jQuery code: jQuery is used to add aria-invalid or aria-describedby attributes as well as the class attribute and append the error text. This is the code that inserts aria-invalid and class="error" but does not associate the error text "incorrect data" with the control programmatically:


$(errFld).attr("aria-invalid", "true").attr("class", "error");
// Suffix error text: 
$(errFld).parent().append('<span class="errtext">Error: Incorrect data</span>');
            

CSS Code:


input.error {
   border: red thin solid;}
span.errtext {
	margin-bottom: 1em; 	padding: .25em 1.4em .25em .25em;
	border: red thin solid; 	background-color: #EEEEFF;
	background-image:url('images/iconError.gif');
	background-repeat:no-repeat; 	background-position:right;	
}
            

Live example.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each form control that relies on aria-invalid to convey a validation failure:

  1. Check that aria-invalid is not set to true when a validation failure does not exist.

  2. Check that aria-invalid is set to true when a validation failure does exist.

  3. Check that the programmatically associated labels / programmatically associated instructional text for the field provide enough information to understand the error.

Expected Results
  • Checks #1-3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


9. Flash Techniques

Flash Technology Notes

Adobe Flash Player is a cross-platform browser plug-in. Authors creating content for display by the Flash Player may choose to do so for a variety of factors, including video support, authoring preference, vector-based graphics capabilities, or to take advantage of available components. The motivation of the author notwithstanding, it is equally important to ensure that content playing in the Flash Player meets the accessibility criteria in WCAG 2.0 as it is for other web content.

User Agent Support for Flash

The Flash Player provides a combination of built-in support for accessibility and capabilities that authors and authoring tools can take advantage of in order to enable support for accessible content. Flash authors may use any of a few tools for authoring accessible Flash content, including but not limited to:

  • Flash MX, MX2004, 8, CS3, CS4, CS5

  • Flex 1.5 and newer

  • Flex Builder 2, Flex Builder 3, Flash Builder 4

  • Flash Catalyst 4

  • Other tools, including Adobe Presenter and Adobe Captivate

For blind, low-vision, and other assistive technology users the Flash Player introduced support for an accessibility API in 2001 with Flash Player 6. Flash accessibility support for assistive technology relies on the Microsoft Active Accessibility (MSAA) interface and a Flash Player-specific interface to properly convey information about Flash content for assistive technologies. Support for assistive technologies is provided for users viewing content using combinations of:

  • Microsoft Internet Explorer 6 or later, in combination with Flash Player 6 or newer on Windows.

  • Mozilla Firefox 3 or later, in combination with Flash Player 9 or later on Windows.

Assistive technology support for MSAA is provided in several assistive technologies, including but not limited to:

  • JAWS (4.5 and newer)

  • Window-Eyes (4.2 and newer)

  • NVDA

  • ZoomText (8 and newer)

Flash Accessibility Support

Flash Player also supports keyboard access for users who are unable to use a mouse. Keyboard support is best within the ActiveX version of the player used in Internet Explorer, but techniques to provide support within Mozilla Firefox are also available. Flash authors can control the tab order of content within published Flash content, as is demonstrated in the WCAG 2.0 techniques for Flash.

Flash Player is often used to display video, and it provides support for text tracks which can be used to provide closed captions or subtitles in any language, and it also supports multiple tracks of audio, thereby enabling support for video description, and it supports multiple video tracks, enabling the delivery of sign language interpretation for audio-visual content.

The Flash Player does not currently support high-contrast mode or text resizing via the Windows operating system. However, Flash authors may take advantage of Flash's support for Cascading Stylesheets (CSS), other built-in style support, or Flash's display filter features to offer alternative views of a Flash-based interface with larger text, alternative fonts, or alternative or high-contrast color schemes.

Flash accessibility support for assistive technology relies on use in Windows operating systems, using Internet Explorer 6 or later (with Flash Player 6 or later) or Mozilla Firefox 3 or later (with Flash Player 9 or later).

For additional general information about the Flash Player, visit the Flash Player FAQ.

Special Considerations for WCAG 2.0 Compliance


FLASH1: Setting the name property for a non-text object

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH1. Also see Flash Technology Notes.

Description

The objective of this technique is to show how non-text objects in Flash can be marked so that they can be read by assistive technology.

The Flash Player supports text alternatives to non-text objects using the name property in the accessibility object, which can be defined in ActionScript or within Flash authoring tools.

When an object contains words that are important to understanding the content, the name property should include those words. This will allow the name property to play the same function on the page as the object. Note that it does not necessarily describe the visual characteristics of the object itself but must convey the same meaning as the object.

Examples

Example 1: Applying a textual alternative for a symbol (graphic, button or movieclip)

The Flash Professional authoring tool's Accessibility panel lets authors provide accessibility information to assistive technology and set accessibility options for individual Flash objects or entire Flash applications.

  1. For a text alternative to be applied to a non-text object, it must be saved as a symbol in the movie's library. Note: Flash does not support text alternatives for graphic symbols. Instead, the graphic must be converted to or stored in a movie clip or button symbol.

  2. Bring up the Accessibility panel by selecting "Window > Other Panels > Accessibility" in the application menu, or through the shortcut ALT + F11. Ensure that the 'Make object accessible' checkbox is checked.

  3. Select the non-text instance on the movie stage, the fields in the Accessibility panel become editable.

  4. Enter a meaningful text alternative in the 'name' field, properly describing the purpose of the symbol.

The Accessibility panel in the Flash authoring environment.

Example 2: Applying textual alternatives programmatically in ActionScript 2.0

To manage an object's text equivalent programmatically using ActionScript 2, the _accProps object must be used. This references an object containing accessibility related properties set for the object. The code example below shows a simple example of how the _accProps object is used to set an objects name in ActionScript.

Example Code:

// 'print_btn' is an instance placed on the movie's main timeline
_root.print_btn._accProps = new Object();
_root.print_btn._accProps.name = "Print";
Example 3: Applying textual alternatives programmatically in ActionScript 3.0

To manage an object's text equivalents programmatically using ActionScript 3, the AccessibilityProperties object and name property must be used. The code example below shows a simple example of how the name property is used to set an objects name in ActionScript.

Example Code:

// 'print_btn' is an instance placed on the movie's main timeline
print_btn.accessibilityProperties = new AccessibilityProperties();
print_btn.accessibilityProperties.name = "Print";

Tests

Procedure
  1. Publish the SWF file

  2. Open the SWF file in Internet Explorer 6 or higher (using Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9 or higher)

  3. Use a tool which is capable of showing an object's name text alternative, such as ACTF aDesigner 1.0 to open the Flash movie.

  4. In the GUI summary panel, loop over each object which is contained by the Flash movie and ensure the object that was provided a name has a proper name attribute appearing in the tool's display.

  5. Authors may also test with a screen reader, by reading the Flash content and listening to hear that the equivalent text is read when tabbing to the non-text object (if it is tabbable) or hearing the alternative text read when reading the content line-by-line.

  6. All non-text objects have text equivalents that can serve the same purpose and convey the same information as the non-text object

Expected Results

Check #6 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH2: Setting the description property for a non-text object in Flash

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH2. Also see Flash Technology Notes.

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.

The Flash Player supports long text alternatives to non-text objects, which can be defined in ActionScript or within Flash authoring tools using the description property, as indicated in the examples below.

Examples

Example 1: Applying a Description for a symbol (graphic, button or movieclip)

The Flash Professional authoring tool's Accessibility panel lets authors provide accessibility information to assistive technology and set accessibility options for individual Flash objects or entire Flash applications.

  1. For a text alternative to be applied to a non-text object, it must be saved as a symbol in the movie's library. Note: Flash does not support text alternatives for graphic symbols. Instead, the graphic must be converted to or stored in a movie clip or button symbol.

  2. Bring up the Accessibility panel by selecting "Window > Other Panels > Accessibility" in the application menu, or through the shortcut ALT + F11. Ensure that the 'Make object accessible' checkbox is checked.

  3. Select the non-text instance on the movie stage, the fields in the Accessibility panel become editable.

  4. Enter a description describing the non-text object's contents concisely. For example, a diagram could have a 'name' identifying what information the diagram conveys, while the 'Description' field lists this information in full detail. Alternatively, for an animation which is part of an instructional movie about car repairs the name could be: 'how to replace a flat tire', while the long description describes each step of the process in greater detail.

Important: Only use the 'Description' field if a short text alternative is not sufficient to describe the objects purpose. Otherwise, leave the 'Description' field empty.

The Accessibility panel in the Flash authoring environment.

Example 2: Applying Description programmatically in ActionScript 2.0

To manage an object's text equivalents programmatically using ActionScript, the _accProps object must be used. This references an object containing accessibility related properties set for the object. The code example below shows a simple example of how the _accProps object is used to set an objects name and description in ActionScript.

A chart showing sales for October has a short text alternative of "October sales chart". The long description would provide more information, as shown in the code below.

Example Code:

// 'chart_mc' is an instance placed on the movie's main timeline
_root.chart_mc._accProps = new Object();
_root.chart_mc._accProps.name = "October Sales Chart";
_root.chart_mc._accProps.description = "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 3: Applying Description programmatically in ActionScript 3.0

To manage an object's text equivalents programmatically using ActionScript, the AccessibilityProperties object must be used. The code example below shows a simple example of how the AccessibilityProperties object used to set an objects name and description in ActionScript.

A chart showing sales for October has a short text alternative of "October sales chart". The long description would provide more information, as shown in the code below.

Example Code:

// 'chart_mc' is an instance placed on the movie's main timeline
chart_mc.accessibilityProperties = new AccessibilityProperties();
chart_mc.accessibilityProperties.name = "October Sales Chart";
chart_mc.accessibilityProperties.description = "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.";

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Publish the SWF file

  2. Open the SWF file in Internet Explorer 6 or higher (using Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9 or higher)

  3. Use a tool which is capable of showing an object's long description, such as ACTF aDesigner 1.0 to open the Flash movie.

  4. In the GUI summary panel, loop over each object which is contained by the Flash movie and ensure the object that was provided a description has a proper description value appearing in the tool's display.

  5. Authors may also test with a screen reader, by reading the Flash content and listening to hear that the description is read when tabbing to the non-text object (if it is tabbable) or hearing the alternative text read when reading the content line-by-line.

  6. All non-text objects have text equivalents that can serve the same purpose and convey the same information as the non-text object.

Expected Results

#6 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH3: Marking objects in Flash so that they can be ignored by AT

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH3. Also see Flash Technology Notes.

Description

The purpose of this technique is to show how images can be marked so that they can be ignored by Assistive Technology.

The Flash Player supports the ability for authors to control which graphics appear to assistive technologies using the silent property of the accessibility object, as indicated in the examples below.

Examples

Example 1: Hiding a graphic in the Flash Professional authoring tool

The Flash Professional authoring tool's Accessibility panel lets authors provide accessibility information to assistive technology and set accessibility options for individual Flash objects or entire Flash applications.

  1. To apply changes to accessibility properties for a graphic, it must be saved as a symbol in the movie's library. Note: Flash does not support text alternatives for graphic symbols. Instead, the graphic must be converted to or stored in a movie clip or button symbol.

  2. Bring up the Accessibility panel by selecting "Window > Other Panels > Accessibility" in the application menu, or through the shortcut ALT + F11.

  3. Select the graphic object

  4. If the 'Make object accessible' checkbox in the Accessibility control panel is checked, uncheck this option to remove the graphic from the accessiblity information conveyed to assistive technologies.

Example 2: Applying textual alternatives programmatically in ActionScript 2.0

To manage an object's text equivalents programmatically using ActionScript, the _accProps property must be used. This references an object containing accessibility related properties set for the object. The code example below shows a simple example of how the _accProps property is used to remove an object from the accessibility information for the movie using ActionScript.

Example Code:

// 'decorative_mc' is an instance placed on the movie's main timeline
_root.decorative_mc._accProps = new Object();
_root.decorative_mc._accProps.silent = true; 

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Publish the SWF file

  2. Open the SWF file in Internet Explorer 6 or higher (using Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9 or higher)

  3. Use a tool which is capable of showing an object's accessibility information, such as ACTF aDesigner 1.0 to open the Flash movie.

  4. In the GUI summary panel, loop over each object which is contained by the Flash movie and ensure the object that was designed to be hidden does not appear in the tool's display.

  5. Authors may also test with a screen reader, by reading the Flash content and listening to hear that object is not mentioned when the page is read.

  6. Non-text objects that are coded to be hidden from assistive technologies are not available to assistive technology.

Expected Results

Check #6 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH4: Providing submit buttons in Flash

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH4. Also see Flash Technology Notes.

Description

The objective of this technique is to use submit buttons to allow users to take actions that cause changes of context rather than allowing changes in context to occur when the value or state of a non-submit button control is modified. The intended use of a submit button in this technique is to generate an HTTP request that submits data entered in a form or to perform an action that triggers a change in context, so it is an appropriate control to use to initiate this change.

Examples

Example 1: ActionScript 3 combobox with submit button

This is a basic ActionScript 3 example of a combobox component with a submit button to redirect the user to a different resource.

Example Code:

import fl.accessibility.ComboBoxAccImpl;
import flash.net.navigateToURL;
import flash.net.URLRequest;
ComboBoxAccImpl.enableAccessibility();
state_submit.addEventListener(MouseEvent.CLICK, submitHandler);
function submitHandler(e) {
  var url: URLRequest = new URLRequest("http://www.wikipedia.org/wiki/" + 
    state_combo.selectedLabel);
  navigateToURL(url, "_self");
}
Example 2: ActionScript 2 combobox with submit button

This is a basic ActionScript 2 example of a combobox component with a submit button to redirect the user to a different resource - the same example as in example 1 except in ActionScript 2:

Example Code:

import fl.accessibility.ComboBoxAccImpl;
ComboBoxAccImpl.enableAccessibility();
state_submit.addEventListener("click", submitHandler);
function submitHandler(e) {
  getURL("http://www.wikipedia.org/wiki/" + state_combo.selectedLabel, "_self");
}

Tests

Procedure
  1. Find all interactive control instances (that are not submit buttons) in the flash movie that can initiate a change of context, e.g. a combobox, radio button or checkbox.

  2. For each instance, confirm that the event handler(s) responsible for the change of context are not associated with the controls themselves, but with a separate button instead.

Expected Results

#2 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH5: Combining adjacent image and text buttons for the same resource

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH5. Also see Flash Technology Notes.

Description

The objective of this technique is to avoid unnecessary duplication that occurs when adjacent text and iconic versions of a button are contained in a Flash movie.

Many kinds of buttons have both a text and iconic button adjacent to each other. Often the text and the icon button are rendered in separate buttons, in part to create a slight visual separation from each other. Although the sighted user can see this slight visual separation, a blind or low vision user may not be able to recognize the separation, and be confused by the redundant buttons. To avoid this, some authors omit specifying the accessible name for the image, but this would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical button. The preferred method to address this is to put the text and image together in one button symbol instance, and provide a single accessible name for the button to eliminate duplication of text.

Examples

The following examples are for a situation where a button instance comprised of both an image and text is on the stage. The combined button in this example uses the instance name 'flashLink1'.

To create the combined button in Flash Professional:

  1. Add a graphic object and text to the stage

  2. Select both objects

  3. Select 'New Symbol' from the Insert menu or hit Ctrl+F8 to create a new button object

  4. Click on the button object on the stage and enter an instance name in the Properties panel.

  5. Continue under example 1, 2, or 3 below.

screen shot showing the combined button with an instance name 'flashLink1'

Example 1: Using the Accessibility panel to specify the accessible name

The Accessibility panel is used to specify the accessible name (which in this case is the same as the visual text).

screen shot showing use of the Accessibility control panel to provide a name for the combined button

Example 2: Using ActionScript to specify the accessible name

ActionScript 3 can be used instead of the Accessibility control panel to define the accessibility name for the combined button, as follows:

Example Code:

// 'flashLink1' is an instance placed on the movie's main timeline
flashLink1.accessibilityProperties = new AccessibilityProperties();
flashLink1.accessibilityProperties.name = "Learn more about Flash";

ActionScript 2 can be used instead of the Accessibility control panel to define the accessibility name for the combined button, as follows

Example Code:

// 'flashLink1' is an instance placed on the movie's main timeline
flashLink1._accProps = new Object();
flashLink1._accProps.name = "Learn more about Flash";

Tests

Procedure
  1. Publish the SWF file

  2. Open the SWF file in Internet Explorer 6 or higher (using Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9 or higher)

  3. Use a tool which is capable of showing an object's name text alternative, such as ACTF aDesigner 1.0 to open the Flash movie.

  4. If you are using ACTF aDesigner 1.0, use the GUI Summary panel to check each image button in the Flash movie and ensure that there is no separate, redundant text control adjacent to the image that performs the same action.

Expected Results

#4 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH6: Creating accessible hotspots using invisible buttons

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH6. Also see Flash Technology Notes.

Description

The objective of this technique is to provide text alternatives that serve the same purpose as the clickable hotspots of an image. Each hotspot serves as a clickable region for a part of the image which can trigger an action (such as opening a web page corresponding to the hotspot). The hotspots are implemented as invisible Flash buttons, which are each given an accessible name that describes the hotspot's target.

Examples

Example 1: Graphic with accessible clickable regions
  1. Add the original graphic that needs to have clickable hotspots to the stage.

  2. For each hotspot, do the following:

    1. Create a new button symbol by choosing "New Symbol" from the Flash Professional 'Insert' menu or by using the Ctrl + F8 shortcut.

    2. Inside the button symbol, create a shape that matches the clickable surface.

    3. Place the newly created button on top of the original graphic.

    4. Open the button's properties panel, and choose "Alpha" from the "Style" dropdown list under "Color Effect". Change the value of the "Alpha" slider that appears to zero so that the button becomes invisible.

    5. Using the Accessibility panel, specify a value for the "tabindex" field to give the button a logical position in the tab order.

    6. Using the Accessibility panel, specify an accessible name that describes the purpose of the hotspot.

adding the graphic to the Flash authoring stage

making a button invisible using the Properties panel

setting the button's name using the Accessibility panel

Tests

Procedure

Find all images with hotspots. For each hotspot, confirm that:

  1. The hotspot is implemented as an invisible button

  2. The hotspot is provided with an accessible name, either through the Accessibility panel or through ActionScript

Expected Results
  • #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH7: Using scripting to change control labels

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH7. Also see Flash Technology Notes.

Description

The purpose of this technique is to allow users to choose to have additional information added to the label of a button or other control so that it can be understood out of context.

Some users prefer to have control labels that are self-contained, where there is no need to explore the context of the control. Other users find including the context information in each button to be repetitive and to reduce their ability to use a site. Among users of assistive technology, the feedback to the working group on which is preferable has been divided. This technique allows users to pick the approach that works best for them.

A control is provided near the beginning of the page that will expand the labels for controls on the page so that no additional context is needed to understand the purpose of those controls. It must always be possible to understand purpose of the control directly from its label.

This technique expands the control labels only for the current page view. It is also possible, and in some cases would be advisable, to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site.

Examples

Example 1: Using ActionScript to add contextual information directly to the label of a button

This example uses ActionScript to add contextual information directly to the label of a button. When the "Expand Button Labels" button is toggled, each button on the page has its label property modified.

Example Code:

import fl.accessibility.ButtonAccImpl;
ButtonAccImpl.enableAccessibility();
btn1.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(e) {
  btn2.label = btn1.selected? "PDF version of 2010 brochure": "PDF";
  btn2.width = btn1.selected? 200: 100;
  btn3.label = btn1.selected? "Text version of 2010 brochure": "Text";
  btn3.width = btn1.selected? 200: 100;
  btn4.label = btn1.selected? "Word version of 2010 brochure": "Word";
  btn4.width = btn1.selected? 200: 100;
}

Tests

Procedure

When a Flash Movie contains content with context dependent labels, confirm that a separate toggle control is provided that allows the user to expand the labels so that they are no longer context dependent.

Expected Results

The above is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH8: Adding a group name to the accessible name of a form control

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH8. Also see Flash Technology Notes.

Description

The objective of this technique is to provide a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.

In Flash, when related form controls are grouped, this grouping can be indicated by adding the group's name to each form control's accessible name.

Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. Because they are multiple controls, it is particularly important that they be grouped semantically so they can be more easily treated as a single control. Often, user agents will present the value of the legend before the label of each control, to remind users that they are part of the same group.

It can also be useful to group other sets of controls that are not as tightly related as sets of radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address".

Examples

Example 1: Adding a group name to the accessible name of radio buttons

This example shows how the group name for radio buttons in a group can be made accessible by adding it to each button's accessible name:

  1. Add radio button components to the stage:

  2. Enter each button's label using its label property

  3. Add the visual group label to the left or above the buttons added in step 1

  4. Select each radio button. In the Accessibility panel, add the group name to the "Name" field;

Flash will concatenate the group name with each button's individual name, such as "gender male".

This approach is illustrated in the screenshot below:

Using the Accessibility panel to add a group name to a form control

Note: To make the radio buttons in this example accessible, the following two lines need to be added to the movie's script: import fl.accessibility.RadioButtonAccImpl; RadioButtonAccImpl.enableAccessibility();

For an illustration of this approach, see the working version of Adding a group name to the accessible name of radio buttons. The source of Adding a group name to the accessible name of radio buttons is available.

Example 2: Programmatically adding a group name with the accessible name of radio buttons

The code example below shows a basic proof of concept of a class that automatically places a set of form controls inside a fieldset like rectangle, including a legend. For each added control an AccessibilityProperties object is created, and its name property is set to a combination of the legend text and the actual form control label.

Example Code:


package wcagSamples {
  import flash.display. *;
  import flash.text. *;
  import fl.controls. *
  import flash.accessibility. *;
  import fl.accessibility. *;
  
  
  /**
  *  Basic example that demonstrates how to simulate a fieldset, as provided
  *  in HTML. The FieldSet class takes a group of controls and places them 
  *  inside a fieldset rectangle with the legend text at the top. For each form 
  *  control, the legend text is prepended to the control's accessible name
  *
  *  Note: This is only a proof of concept, not a fully functional class
  *
  *  @langversion 3.0
  *  @playerversion Flash 10
  *
  */
  public class FieldSet extends Sprite {
    private var legend: String;
    private var bBox: Shape;
    private var currentY: int = 20;
    
    public static var LABEL_OFFSET_X: int = 20;
    public static var CONTROL_OFFSET_X: int = 110;
    
    /**
    *  CONSTRUCTOR
    *  Legend specifies the FieldSet's legend text, items is an array 
    *  describing the controls to be added to the FieldSet
    */
    
    public function FieldSet(legend: String, items: Array) {
      // enable accessibility for components used in this example
      RadioButtonAccImpl.enableAccessibility();
      CheckBoxAccImpl.enableAccessibility();
      
      //create FieldSet rectangle and legend
      legend = legend;
      bBox = new Shape();
      bBox.graphics.lineStyle(1);
      bBox.graphics.drawRect(10, 10, 300, 250);
      bBox.graphics.beginFill(0x0000FF, 1);
      addChild(bBox);
      
      var fieldSetLegend: TextField = new TextField();
      fieldSetLegend.text = legend;
      fieldSetLegend.x = 20;
      fieldSetLegend.y = 3;
      fieldSetLegend.background = true;
      fieldSetLegend.backgroundColor = 0xFFFFFF;
      fieldSetLegend.border = true;
      fieldSetLegend.borderColor = 0x000000;
      fieldSetLegend.autoSize = TextFieldAutoSize.LEFT;
      addChild(fieldSetLegend);
      
      // add controls
      for (var i = 0; i < items.length; i++) {
        processItem(items[i]);
      }
    }
    
    /**
    * Adds the control to the Fieldset and sets its accessible name. A 
    * control is represented as an array, containing the following values:
    * [0] : A string describing the component type 
    *   (can be "TextInput", TextArea", Checkbox" or "RadioGroup").
    * [1] : The label used to identify the control
    * [2] : If [0] is "RadioGroup", then [2] needs to contain an array of the 
    *    labels for each individual radio button. if [0] is "CheckBox", then 
    *    [1] can either be empty or a question (e.g. "Do you smoke?"), and 
    *    [2] the CheckBox label (e.g. "Yes").
    *
    */
    function processItem(item: Array) {
      if (item.length < 2)
      return;
      currentY += 30;
      var newControl;
      //create visual label
      var lbl: Label;
      lbl = new Label();
      lbl.text = item[1] + ": ";
      lbl.x = FieldSet.LABEL_OFFSET_X;
      lbl.y = currentY;
      lbl.width = FieldSet.CONTROL_OFFSET_X;
      lbl.autoSize = TextFieldAutoSize.RIGHT;
      lbl.wordWrap = true;
      addChild(lbl);
      
      switch (item[0]) {
        case "TextInput":
        case "TextArea":
        newControl = item[0] == "TextInput"? new TextInput(): new TextArea();
        newControl.x = FieldSet.CONTROL_OFFSET_X;
        //concatenate accessible name, combining legend and label
        setAccName(newControl, legend + " " + item[1]);
        break;
        case "CheckBox":
        newControl = new CheckBox();
        newControl.label = item[2];
        newControl.x = FieldSet.CONTROL_OFFSET_X;
        setAccName(newControl, legend + " " + item[1] + " " + item[2]);
        break;
        case "RadioGroup":
        if (item[2] && item[2].length > 0) {
          var radioGroup: RadioButtonGroup = new RadioButtonGroup(item[0]);
          var newBtn: RadioButton;;
          for (var i = 0; i < item[2].length; i++) {
            newBtn = new RadioButton();
            // concatenate the legend, the group label, and the button label
            setAccName(newBtn, legend + " " + item[1] + " " + item[2][i]);
            newBtn.label = item[2][i];
            newBtn.group = radioGroup;
            newBtn.x = FieldSet.CONTROL_OFFSET_X;
            newBtn.y = currentY;
            addChild(newBtn);
            if (i < item[2].length - 1)
            currentY += 30;
          }
        }
        break;
      }
      
      if (newControl) {
        newControl.y = currentY;
        addChild(newControl);
      }
    }
    
    /**
    * Creates an AccessibilityProperties object for an object and sets its name property
    */
    public function setAccName(obj, accName) {
      var accProps: AccessibilityProperties = new AccessibilityProperties();
      accProps.name = accName;
      obj.accessibilityProperties = accProps;
    }
  }
}

This example class can be initialized as follows:

Example Code:

var myFieldSet = new FieldSet("Personal Details",  // the legend 
  [["TextInput", "Name"],                          // text field
  ["RadioGroup", "Gender", ["Male", "Female"]],    // radio button group
  ["CheckBox", "Do you smoke", "yes"],             // checkbox
  ["TextArea", "Comments"],                        // text area
]);
addChild(myFieldSet);

For an illustration of this approach, see the working version of Programmatically adding a group name with the accessible name of radio buttons. The source of Programmatically adding a group name with the accessible name of radio buttons is available.

Note: Adobe Flex allows you to perform this type of behavior by using the <form>, <formitem> and <formheading> elements

Tests

Procedure

When a Flash Movie contains grouped form controls, confirm that either :

  • The group's name is included in the Accessibility panel's "name" field for each control.

  • Each control has an AccessibilityProperties.name property, which contains both the group's name and the control's label text

Expected Results
  • One of the above is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH9: Applying captions to prerecorded synchronized media

Applicability

Adobe Flash-based Content

  • Adobe Flash CS3 and later

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH9. Also see Flash Technology Notes.

Description

The objective of this technique is to provide an option for people who have hearing impairments or otherwise have trouble hearing the sound and dialogue in synchronized media to be able to choose to view captions as an alternative to audio information. With this technique all of the dialogue and important sounds are provided as text in a fashion that allows the text to be hidden unless the user requests it. As a result they are visible only when needed. This can be achieved using the FLVPlayback and FLVPlaybackCaptioning components. Note: when using FLVPlayback skins the closed caption button is accessible by default, but if implementing custom skins authors need to test to verify that the button is accessible.

Examples

Example 1: Adding a timed text caption file to Flash
  1. Use an external tool (such as Magpie or a simple text editor) to create a timed Text captions xml file. Stop and play the video content, and for each relevant part of audio information (including speech, important background noises and event sounds) include the start and end time code as well as the textual alternative. Tools like Magpie have advanced features to make this process easier, whereas a text editor requires you to read the timecodes from your media player and include them in the XML as illustrated in the sample captions document below

  2. In Flash, create a new instance of the FLVPlayback component on your stage, and set its contentPath value to your flv video file using the 'Component inspector' or 'Parameters' panel.

  3. Set the 'Skin' parameter to use a skin which includes the CC (closed captions) button.

  4. From the components list also create an instance of the FLVPlayback captioning component. In the 'Component inspector' panel set its 'Source' parameter to the name of your timed text xml file. The captions will automatically placed at the bottom of the player's frame.

Example Code:

<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
  xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head>
    <styling>
      <style id="defaultSpeaker" tts:backgroundColor="black"
        tts:color="white" tts:fontFamily="SansSerif" tts:fontSize="12"
        tts:fontStyle="normal" tts:fontWeight="normal"
        tts:textAlign="left" tts:textDecoration="none"/>
      <style id="defaultCaption" tts:backgroundColor="black"
        tts:color="white" tts:fontFamily="Arial" tts:fontSize="12"
        tts:fontStyle="normal" tts:fontWeight="normal"
        tts:textAlign="center" tts:textDecoration="none"/>
    </styling>
  </head>
  <body id="thebody" style="defaultCaption">
    <div xml:lang="en">
      <p begin="0:00:00.20" end="0:00:02.20">If there were nothing in
        our universe</p>
      <p begin="0:00:02.20" end="0:00:05.65">the fabric of space-time
        would be flat.</p>
      <p begin="0:00:05.65" end="0:00:08.88">But add a mass, and
        dimples form within it.</p>
      <p begin="0:00:16.61" end="0:00:19.84">Smaller objects that
        approach that large mass</p>
      <p begin="0:00:19.84" end="0:00:23.41">will follow the curve in
        space-time around it.</p>
      <p begin="0:00:32.64" end="0:00:36.84">Our nearest star, the
        sun, has formed such a dimple</p>
      <p begin="0:00:36.84" end="0:00:38.00">and our tiny planet
        Earth</p>
      <p begin="0:00:38.00" end="0:00:41.50">goes along for the ride
        in the curve of its dimple</p>
      <p begin="0:00:41.50" end="0:00:43.80">staying in orbit around
        the sun.</p>
      <p begin="0:00:45.67" end="0:01:55.00"/>
    </div>
  </body>
</tt>

Resources

Tests

Procedure

Watch all video content displayed by your Flash movie. Ensure that:

  1. Captions are available for all audio content, either turned on by default or as a user preference.

  2. The captions properly describe all audio information contained in the video.

Expected Results
  • #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH10: Indicating required form controls in Flash

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH10. Also see Flash Technology Notes.

Description

The objective of this technique is to provide a clear indication that a specific form control in a Web application or form is required for successful data submission. The word "required" is added to the form control's accessible name, and a visual indicator is placed next to the label.

Examples

Example 1: Adding the word "required" to the control's accessible name

This example shows how to use the Accessibility panel to indicate a field as being 'required' to users:

  1. Visually, place asterisk character or some other indication adjacent to the form control's label.

  2. Use the Accessibility panel to combine the word "required" with the control's label in the "Name" field.

This approach is illustrated in the screenshot below:

Using the Accessibility panel to indicate a form control as being   required

This is demonstrated in the working example of Adding the word "required" to the control's accessible name. The source of Adding the word "required" to the control's accessible name is available.

Tests

Procedure

For each required form control within a Flash movie, confirm that:

  • The required state is indicated visually

  • The required state is indicated textually using the 'Name' field in the Accessibility panel

Expected Results
  • Each of the above is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH11: Providing a longer text description of an object

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH11. Also see Flash Technology Notes.

Description

The objective of this technique is to a provide longer, more detailed textual information for an image than would be suitable for the image's accessible name. An accessible button is provided adjacent to the image that displays a new panel containing the image's long description text.

Examples

Example 1: Making a hidden description visible on request

In this example, an image containing statistical data is shown. The image is provided a short textual alternative ("Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities"). Below the image, the user can click a button that will overlay a long textual description of the statistical information itself. When the button is clicked, the following actions are taken:

  • The MovieClip containing the long text description is made visible, and its AccessibilityProperties.silent property is set to false to make it visible to assistive technology. Its contents are placed in the tab order.

  • The original image and button are temporarily hidden from assistive technology and the tab order.

The image and descriptive text were taken from a previously published HTML example for long image descriptions on WebAIM.org

The results for this technique are shown in the working version of Making a hidden description visible on request. The source of Making a hidden description visible on request is available.

Example Code:

import flash.accessibility. *;
import fl.accessibility.ButtonAccImpl;
import flash.system.Capabilities;

ButtonAccImpl.enableAccessibility();

//set accessibility properties
graph_mc.accessibilityProperties = new AccessibilityProperties();
graph_mc.accessibilityProperties.name = "Graph of percentage of total U.S. \ 
  noninsitutionalized population age 16-64 declaring one or more disabilities";
longDescBtn.accessibilityProperties = new AccessibilityProperties();
longDesc_mc.accessibilityProperties = new AccessibilityProperties();
longDesc_mc.accessibilityProperties.forceSimple = false;
hideLongDesc();

//set click handlers for button
longDescBtn.addEventListener("click", function () {
  showLongDesc()
});
longDesc_mc.longDescCloseBtn.addEventListener("click", function () {
  hideLongDesc()
});

function showLongDesc() {
  // hide the original content from screen readers
  graph_mc.accessibilityProperties.silent = true;
  graph_mc.tabEnabled = false;
  graph_mc.alpha = 0.2;
  longDescBtn.enabled = false;
  longDescBtn.accessibilityProperties.silent = true;
  longDesc_mc.accessibilityProperties.silent = false;
  // make the long description panel visible, both visually and to screen readers
  longDesc_mc.visible = true;
  longDesc_mc.tabEnabled = true;
  longDesc_mc.longDescTitle.stage.focus = longDesc_mc.longDescTitle;
  if (Capabilities.hasAccessibility)
  Accessibility.updateProperties();
}

function hideLongDesc() {
  //do the opposite to what showLongDesc does
  graph_mc.accessibilityProperties.silent = false;
  graph_mc.tabEnabled = true;
  graph_mc.alpha = 1;
  longDescBtn.enabled = true;
  longDescBtn.accessibilityProperties.silent = false;
  longDesc_mc.visible = false;
  longDesc_mc.accessibilityProperties.silent = true;
  longDesc_mc.tabEnabled = false;
  longDescBtn.stage.focus = longDescBtn;
  if (Capabilities.hasAccessibility)
  Accessibility.updateProperties();
}

Tests

Procedure

When a Flash movie contains images that require long descriptions, confirm that a longer description is made available through a separate button.

Expected Results
  • The above is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH12: Providing client-side validation and adding error text via the accessible description

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH12. Also see Flash Technology Notes.

Description

The objective of this technique is to validate user input as values are entered for each field, by means of client-side scripting. If errors are found, a description is added to the controls that have invalid data. Visually, the description will be placed adjacent to the control. Additionally, the error message text is added to the control's accessible description so that it is readable by assistive technology when the control receives focus.

Examples

Example 1: Validating a text field

In this example, a sample form is shown with two text fields ('name' and 'zip code'). Both fields are required. When the form's submit button is pressed, the values of the text fields will be validated. If a textfield contains an invalid value, an _accProps object is created for the textfield, and its description property is set the error message.

Note: Instead of using the accessible description, the error text can also be added to the accessible name (_accProps.name), which is supported by a wider range of assistive technology than the _accProps.description property.

ActionScript 2.0 Code

Example Code:

import flash.accessibility. *;
import mx.accessibilty.ButtonAccImpl;
import mx.controls.Alert;
import mx.accessibility.AlertAccImpl;

AlertAccImpl.enableAccessibility();
ButtonAccImpl.enableAccessibility;

resetTextFieldAccNames();
Accessibility.updateProperties();

submit_btn.addEventListener("click", handleClick);
function handleClick(e) {
  //reset values
  resetTextFieldAccNames();
  resetTextFieldAccDescriptions();
  resetErrorLabels();
  //perform validation
  var errors =[];
  if (name_txt.text == '')
    errors.push([name_txt, "You must enter your name", name_error_lbl]);
  if (zipcode_txt.text == '')
    errors.push([zipcode_txt, "You must enter your zip code", zipcode_error_lbl]);
  else if (zipcode_txt.text.length != 5 || isNaN(zipcode_txt.text))
    errors.push([zipcode_txt, "Zip code must be 5 digits", zipcode_error_lbl]);
  
  //add validation error messages, if any
  var field, errorMsg, errorLabel;
  if (errors.length > 0) {
    //loop over encountered errors
    for (var i = 0; i < errors.length; i++) {
      field = errors[i][0];
      errorMsg = errors[i][1];
      errorLabel = errors[i][2];
      
      updateAccDescription(field, "Warning: " + errorMsg);
      errorLabel.text = errorMsg;
    }
  } else {
    Alert.show("Form field values were entered correctly");
  }
  Accessibility.updateProperties();
}

function updateAccName(obj, newName: String) {
  if (! obj._accProps)
  obj._accProps = new Object();
  obj._accProps.name = newName;
}

function updateAccDescription(obj, newDescription: String) {
  if (! obj._accProps)
  obj._accProps = new Object();
  obj._accProps.description = newDescription;
}

function getAccName(obj) {
  return obj._accProps? obj._accProps.name: "";
}

function resetTextFieldAccNames() {
  updateAccName(name_txt, "name, required");
  updateAccName(zipcode_txt, "zip code, required");
}

function resetTextFieldAccDescriptions() {
  updateAccDescription(name_txt, "");
  updateAccDesciption(zipcode_txt, "");
}

function resetErrorLabels() {
  name_error_lbl.text = "";
  zipcode_error_lbl.text = "";
}

This approach is demonstrated in working version of Validating a text field. The source of Validating a text field is available.

Tests

Procedure

When a Flash movie provides interactive forms that can be submitted, confirm that:

  1. The validation warnings are placed next to the control visually.

  2. The validation warnings are added to the accessible name or description of each control.

Expected Results
  • #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH13: Using HTML language attributes to specify language in Flash content

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH13. Also see Flash Technology Notes.

Description

The objective of this technique is to identify the default language of the Flash content by providing the lang and/or xml:lang attribute on the HTML or object elements for the page containing the Flash. The embedded Flash content will inherit the language specified. If the entire web page uses the same language, the lang and/or xml:lang attribute can be placed on the page's HTML element, as described in H57: Using language attributes on the html element.

Since Flash inherits the language from the HTML or object element, all text within the Flash content is expected to be in that inherited language. This means that it is possible to have a Flash object in the French language on a page that is primarily in another language, or to have a page with multiple Flash objects, each in a different language. It is not possible, however, to indicate changes in the human language of content within a single Flash object using this technique.

Examples

Example 1: Using the language of the page as whole in the embedded Flash

This example defined the content of the entire web page to be in the French language. The Flash content will inherit the specified language from the HTML container.

Example Code:

<?xml version="1.0" encoding="UTF-8"?>
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=iso-8859-1"
      http-equiv="Content-Type"/>
    <title>Flash Languages Examples - French</title>
    <script src="swfobject.js" type="text/javascript"/>
    <script type="text/javascript">
    swfobject.registerObject("myMovie", "9.0.115", "expressInstall.swf");
</script>
  </head>
  <body>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      height="420" id="myMovie" width="780">
      <param name="movie" value="myMovie.swf"/>
      <!--[if !IE]>-->
      <object data="languages.swf" height="420"
        type="application/x-shockwave-flash" width="780">
        <!--<![endif]-->
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
  </body>
</html>
Example 2: Applying a language just to the embedded Flash

This example defines the content of a Flash movie to be in the French language. The Flash movie is embedded using SWFObject's static publishing method. This means that there are two nested object elements, the outer to target Internet Explorer, the Inner to target other browsers. For this reason the lang and xml:lang attributes must be added twice.

Example Code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  height="420" id="myMovie" lang="fr" width="780" xml:lang="fr">
  <param name="movie" value="myMovie.swf"/>
  <!--[if !IE]>-->
  <object data="languages.swf" height="420" lang="fr"
    type="application/x-shockwave-flash" width="780" xml:lang="fr">
    <!--<![endif]-->
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Examine the html element and the object element of the HTML document containing the reference to the SWF.

  2. Check that the human language of the Flash content is the same as the inherited language for the object element as specified in HTML 4.01, Inheritance of language codes

  3. Check that the value of the lang attribute conforms to BCP 47: Tags for the Identification of Languages or its successor and reflects the primary language used by the Flash content.

  4. Check that no changes in human language occur within the Flash content

Expected Results
  • For Success Criterion 3.1.1: Checks 1-3 are all true.

  • For Success Criterion 3.1.2: Checks 1-4 are all true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH14: Using redundant keyboard and mouse event handlers in Flash

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH14. Also see Flash Technology Notes.

Description

The objective of this technique is to demonstrate how to provide device independence by providing equivalent event handlers in response to a mouse or focus event. Supporting both mouse and keyboard events ensures that users will be able to perceive the same information, regardless of the input device they used. If the event changes the state of the control, it may be important to change the descriptive name of the control in the event handlers.

Examples

Example 1: Updating button text with multiple event handlers

In this example, a group of buttons is assigned the same event handlers for the flash.events.FocusEvent.FOCUS_IN and flash.events.MouseEvent.MOUSE_OVER events. When a button receives focus or is hovered over using a mouse, text describing the button will be updated.

Example Code:

import fl.accessibility.ButtonAccImpl;
import fl.controls.Button;
import flash.accessibility. *
import flash.events.FocusEvent;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;

ButtonAccImpl.enableAccessibility();
var states: Object = {
  "Alabama": "Alabama is a state located in the southeastern region of the \
    United States of America.",
  "California": "California is the most populous state in the United States",
  "New York": "New York is a state in the Mid-Atlantic and Northeastern \
    regions of the United States"
};

var buttons: Array =[];
var button: Button;
var accProps: AccessibilityProperties;
var count = 0;
for (var i in states) {
  button = new Button();
  button.label = i;
  button.addEventListener(MouseEvent.CLICK, clickHandler);
  button.addEventListener(MouseEvent.MOUSE_OVER, highlightHandler);
  button.addEventListener(MouseEvent.MOUSE_OUT, unHighlightHandler);
  button.addEventListener(FocusEvent.FOCUS_IN, highlightHandler);
  button.addEventListener(FocusEvent.FOCUS_OUT, unHighlightHandler);
  accProps = new AccessibilityProperties();
  accProps.description = states[i];
  button.accessibilityProperties = accProps;
  addChild(button);
  button.x = 30
  button.y = 30 + count * 30;
  buttons[i] = button;
  count++;
}

function highlightHandler(e) {
  descText.text = states[e.target.label];
}

function unHighlightHandler(e) {
  descText.text = "";
}


function clickHandler(e) {
  var url: URLRequest = new URLRequest("http://www.wikipedia.org/wiki/" + e.target.label);
  navigateToURL(url, "_self");
}

Note: To improve accessibility for screen reader users, the descriptive text is also attached to the buttons themselves as an accessible description. Also note that for button components, the MouseEvent.CLICK event will fire on mouse clicks as well as when the Enter key is pressed.

This technique is illustrated in the working version of Updating button text with multiple event handlers. The source of Updating button text with multiple event handlers is available.

Tests

Procedure

For all scripted event handlers in a Flash Movie,

  1. Confirm that event handlers are assigned for both mouse and keyboard events

Expected Results
  • The above is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH15: Using the tabIndex property to specify a logical reading order and a logical tab order in Flash

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH15. Also see Flash Technology Notes.

Description

The objective of this technique is to control the Flash Movie's reading order and tab order by assigning tabIndex values to its elements.

The tab order is the order in which objects receive input focus when users press the Tab key. The tab order does not necessarily contain the same elements as the reading order does, as the reading order can also contain elements that are not focusable. However, both the reading order and tab order can be controlled using tab index values.

Flash Player uses a default tab index order from left to right and top to bottom.

To create a custom reading order, assign a tab index value to every instance on the stage, either through ActionScript or through the Accessibility panel. Create a tabIndex value for every accessible object, not just the focusable objects. For example, dynamic text must have tab indexes, even though a user cannot tab to dynamic text.

You can create a custom tab-order index in the Accessibility panel for keyboard navigation for the following objects:

  • Dynamic text

  • Input text

  • Buttons

  • Movie clips, including compiled movie clips

  • Components

  • Screens

Tab focus occurs in numerical order, starting from the lowest index number. After tab focus reaches the highest tab index, focus returns to the lowest index number. When you move tab-indexed objects that are user-defined in your document, or to another document, Flash retains the index attributes. Check for and resolve index conflicts (for example, two different objects on the Stage with the same tab-index number). If two or more objects have the same tab index in any given frame, Flash follows the order in which the objects were placed on the Stage.

To add a tabIndex value using the Accessibility panel, perform the following steps for every accessible object on the stage:

  1. Select the element by clicking on it.

  2. In the Accessibility panel, enter a numeric value in the "Tab index" field. The value must be a positive integer (up to 65535) that reflects the order in which the selected object should be read. Elements with higher tab index values will be read after elements with lower values. If two or more objects have the same tab index in any given frame, Flash follows the order in which the objects were placed on the Stage.

  3. To visualize the currently defined tab order, select View > Show Tab Order. Tab index numbers for individual objects appear in the upper-left corner of the object.

Note: You can also use ActionScript code to create a tab-order index for keyboard navigation.

These steps are illustrated in the screenshots below

visualizing the tab order

Setting a tab index value in the Accessibility panel

Note: Flash Player no longer requires that you add all of the objects in a FLA file to a list of tab index values. Even if you do not specify a tab index for all objects, a screen reader reads each object correctly.

Examples

Example 1: Using tabIndex to navigate a column structure

This example contains dynamic TextField instances that are grouped into columns. To ensure the reading order follows the column structure. The TextField instances are given a tab index value that corresponds to their textual content (for example, the TextField containing the text "Sample Text 3" has a tabindex value of 3. Additionally, a single TextField is added that has no tabindex value set. This field contains the text "Not in tab order". Even though this field is visually placed between sample text 2 and 3, it is placed at the end of the custom tab order because it is not assigned a tabindex value.

The results can be found in the working version of Using tabindex to navigate a column structure. The source of Using tabindex to navigate a column structure is available.

Example 2: Controlling tab order in a two-column layout

This example contains a Flash based form that is laid out over two columns. To make the tab order follow the column structure, each form control is assigned a tab index value in the Accessibility panel.

The results are shown in the working version of Controlling tab order in a two-column layout. The source of Controlling tab order in a two-column layout is available.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Use a screen reader to navigate through the Flash movie, one element at a time.

  2. Check that the order in which the screen reader announces the content, matches the logical visual order.

  3. When focus has been placed inside the Flash movie, press the Tab key repeatedly to traverse its contents by keyboard.

  4. Verify that all interactive and focusable elements are reachable by keyboard, in a logical order.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH16: Making actions keyboard accessible by using the click event on standard components

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH16. Also see Flash Technology Notes.

Description

The objective of this technique is to demonstrate how to invoke a scripting function in a way that is keyboard accessible by attaching it to keyboard-accessible, standard Flash components provided by the Adobe Flash Professional authoring tool. In order to ensure that scripted actions can be invoked from the keyboard, they are associated with standard Flash components such as the Button component. The click event of these components is device independent. While the "CLICK" event is a mouse event, it is actually mapped to the default action of a button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits the space key, and when the element is triggered via the accessibility API.

Examples

Example 1: Click event on a button

This example shows a button that uses the MouseEvent.CLICK event to change its label. This event will fire both on mouse click and when the space key is pressed

Example Code:

import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;

ButtonAccImpl.enableAccessibility();

var testBtn = new Button();
testBtn.label = "click me";
testBtn.addEventListener(MouseEvent.CLICK, clickHandler, false);
addChild(testBtn);
testBtn.x = testBtn.y = 10;

function clickHandler(e) {
  e.target.label = "Thanks";
}

This approach is demonstrated in the working version of click event on a button. The source of click event on a button is available.

Example 2: Pending example

Tests

Procedure

When a Flash Movie contains interactive controls, confirm that:

  1. Standard Flash components are used for the controls

  2. The controls use the "click" event

Expected Results
  • #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH17: Providing keyboard access to a Flash object and avoiding a keyboard trap

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH17. Also see Flash Technology Notes.

Description

The objective of this technique is to allow keyboard focus to move to and from Flash content embedded in a web page. In browsers other than Internet Explorer, there is a problem related to keyboard accessibility of embedded Flash content. The problem is that, while both the Flash content and the HTML content around it may be keyboard accessible, many browsers do not support moving keyboard focus between the Flash content and HTML content without using a mouse. Once focus is placed inside the Flash content, a keyboard user will be trapped there. Similarly, when focus is placed somewhere else on the HTML content (outside the Flash content), it will be impossible to move focus into the content. This technique is designed to let the Flash author address this issue and provide support for moving focus between the Flash content and the HTML content via the keyboard.

This issue has been around for a long time, and is related to the way browsers implement embedded plug-ins. Until this problem is fixed, it is up to the Flash developer to come up with a work around. This technique is one of those workarounds. The approach behind this technique is the following:

  • Two 'neighbor' focusable HTML objects are identified for each Flash content in the document (one before and one after the content). These elements can be any HTML elements that are part of the web page's tab order (such as links and form controls).

  • The Flash content object itself is added to the document tab order as well, making it possible to tab into the content.

  • Inside the Flash content, the Flash Player maintains its own tab order. Normally, when the start or end of the Flash tab order is reached (when tabbing through the content), focus will wrap to the beginning or end of the content's tab order, and it will not be possible to (shift) tab out of it. With this technique however, when a 'focus wrap' is detected focus will instead be moved to the neighboring element in the HTML tab order (allowing a keyboard user to 'break out' of the Flash tab order).

When the SWFFocus class is imported into a Flash project, the following will happen:

  • A JavaScript <script> tag will be generated and added to the HTML document containing the Flash content. This JavaScript code will:

    • Set a tabIndex value of "0" on the <object> element of each Flash content found in the page. This causes the Flash objects to become part of the tab order.

    • Optionally, create a hidden anchor element before and after the Flash content, which is used by the SWFFocus class to move focus out of the Flash content back into the HTML page. Alternatively, the developer can specify existing focusable HTML elements as adjacent tab stops for the Flash content.

    • Set event handlers for the Flash content object, so that when it receives focus, the SWFFocus class is notified to manage the content's internal tab order.

  • The SWFFocus class monitors changes in focus within the Flash content. When a focus wrap is detected in the content, a JavaScript function will be called to instead move focus back to the neighboring HTML content.

As indicated above, there are two ways in which this technique can be used:

  1. Letting the SWFFocus class generate neighboring focusable elements in the HTML tab order for each Flash content (demonstrated in example 1 below)

    By default, the SWFFocus class will create a hidden link element before and after an embedded Flash content. These elements are needed as 'anchor' to move focus to when (shift) tabbing out of the Flash content. This approach is the easiest to implement, as it does not require any additional work by the developer. The downside is that the hidden links will clutter the HTML tab order with meaningless elements (although these elements are only used as tab stops when tabbing _out of_ the Flash content, not when tabbing _into_ it). Because of this, it is recommended to use the following approach instead:

  2. Explicitly identifying focusable HTML elements that come before and after the a Flash content in the HTML tab order (demonstrated in example 2 below)

    With this approach, the developer can use ID values to identify the elements that come before and after the Flash content in the HTML tab order. This is done by setting special class names on the Flash content's <object> element. This is the preferred approach, as it does not cause an unnecessary cluttering of the tab order. However, it does require more work and awareness by the developer (who has to manually set ID values). Also, in some scenarios there simply may not be a next or previous focusable element for a Flash content.

Examples

The two examples below are shown in the working example of Preventing a keyboard trap in Flash content. The example html file has two Flash contents embedded in it. The first Flash content is embedded with the approach described in example 1. The second example is embedded with the approach described in example 2. The source of Preventing a keyboard trap in Flash content is available. The source zip file contains the SWFFocus class.

Note: To run the example from a local drive (as opposed to running it from a web server), the local directory needs to be added to Flash Player's security settings.

Example 1: Using automatically generated links

In this example, the SWFFocus class is used without explicitly identifying focusable HTML elements. This will cause SWFFocus to dynamically insert hidden links before and after the Flash content.

Loading the Flash Content

The Flash object in this example is added using SWFObject's dynamic publishing method, which means that the object tag is created dynamically by JavaScript in a way that the browser supports. While this is the recommended approach, it is not a requirement for using this technique. The SWFFocus class will also work when the object tag is hardcoded into the HTML document.

The sample code below shows how to load the content dynamically with SWFObject.

HTML and Javascript Code Sample for Example 1

Example Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Keyboard Trap Fix Example</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <script src="swfobject_2_1.js" type="text/javascript"/>
    <script type="text/javascript">
      var flashvars = {};
      var params = {};
      params.scale = "noscale";
      var attributes = {};
      attributes.id = "FlashSample1SWF";
      attributes.name = "FlashSample1SWF";
      swfobject.embedSWF("keyboard_trap_fix_custom_as3.swf", "flashSample1", \
          "150", "200", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
  </head>
  <body>
    <p>The following Flash content automatically generates invisible
      links before and after the flash content, allowing keyboard focus
      to move out of the Flash content.</p>
    <div id="flashSample1">
      <a href="http://www.adobe.com/go/getflashplayer">
        <img alt="Get Adobe Flash player"
          src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
        />
      </a>
    </div>
  </body>
</html>
Importing and Initializing the SWFFocus class in Flash

The SWFFocus class needs to be added to a Flash or Flex project's source path. The easiest way to achieve this is to import the SWFFocus.swc into Library path for your project or to copy the com/swffocus/SWFFocus.as file (including the nested directory structure) to the project's root directory.

When the SWFFocus class is added to the content's source path, it needs to be initialized with the following code:

Example Code:

import com.adobe.swffocus.SWFFocus;
SWFFocus.init(stage);

The code for the class itself can be found in the source files.

Example 2: Explicitly identifying existing focusable html element

For a large part, this technique is the same as example 1 :

  • The dynamic loading approach by SWFObject is used to load the Flash content

  • The SWFFocus class needs to be added to the content's sourcepath and initialized in the Flash content

For more details about these steps, see example 1.

In this case however, special class names are added to the Flash content object. These class names indicate the ID values of the elements previous and next of the content in the HTML tab order. The class names are:

  • 'swfPref-<previous ID>', where '<previous element>' should be the ID value of the previous element in the tab order.

  • 'swfNext-<next ID>', where '<next element>' should be the ID value of the next element in the tab order.

For example, the HTML code could look like this (notice the added class names on the object tag):

Example Code:

<a href="http://www.lipsum.com/" id="focus1">test 1</a>
<object class="swfPrev-focus1 swfNext-focus2"
  data="keyboard_trap_fix_as3.swf" tabindex="0"
  type="application/x-shockwave-flash"/>
<a href="http://www.lipsum.com/" id="focus2">test 2</a>

Since this example uses SWFObject's dynamic loading, the class names will have to be specified as attribute when SWFObject is initialized. This is demonstrated in the code example below.

HTML and Javascript Code Sample for Example 2

Example Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Keyboard Trap Fix Example </title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <script src="swfobject_2_1.js" type="text/javascript"/>

    <script type="text/javascript">
      var flashvars = {};
      var params = {};
      params.scale = "noscale";
      var attributes = {};
      attributes.id = "FlashSample2SWF";
      attributes.name = "FlashSample2SWF";
      attributes["class"] = "swfPrev-focus1 swfNext-focus2";
      swfobject.embedSWF("keyboard_trap_fix_as3.swf", "flashSample1", "150", 
        "200", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
    </script>
  </head>
  <body>
    <a href="http://www.lipsum.com/" id="focus1">lorem</a>
    <p>The following Flash content uses existing links in the document
      to move focus to when (shift) tabbing out of the Flash content.
      The existing links are defined by placing special classnames on
      the Flash object.</p>
    <div id="flashSample2">
      <a href="http://www.adobe.com/go/getflashplayer">
        <img alt="Get Adobe Flash player"
          src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
        />
      </a>
    </div>
    <a href="http://www.lipsum.com/">lorem</a>
  </body>
</html>

Note: this example assumes that the focusable HTML elements exist and have an ID value at the time SWFObject is called to insert the Flash content. However, in some situations it is also possible that these elements do not yet exist when the Flash content is created, or that the elements will be deleted dynamically at a later point. If this happens, it is possible to reassign ID values for previous and next focusable elements. To do this, call the SWFsetFocusIds() method on the Flash content object, like so:

Example Code:

var o = document.getElementById("FlashSample1SWF");
o.SWFsetFocusIds('prevId', 'nextId');

From that point on the updated IDs will be used to move focus to when tabbing out of the Flash content.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For a Flash content on a web page:

  1. If possible, confirm that the source of the Flash content imports and initializes the SWFFocus class

  2. Press the tab key to move through tabbable items on the page

  3. Confirm that it is possible to tab into the Flash content

  4. Continue tabbing and confirm that it is possible to tab out of the flash content

Expected Results
  • Checks 3 and 4 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH18: Providing a control to turn off sounds that play automatically in Flash

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH18. Also see Flash Technology Notes.

Description

The intent of this technique is to allow a user to turn off sounds that start automatically when a Flash movie loads. The control to turn off the sounds should be located near the beginning of the page to allow the control to be easily and quickly discovered by users . This is useful for those who utilize assistive technologies (such as screen readers, screen magnifiers, switch mechanisms, etc.) and those who may not (such as those with cognitive, learning and language disabilities).

In this technique, an author includes a control that makes it possible for users to turn off any sounds that are played automatically. For maximum accessibility, the control can be added to the HTML document rather than to the Flash movie. The HTML control will communicate with the Flash movie through the ExternalInterface class. This means that the user can control the sound playback without having to interact with Flash content. If this is not practical, the control can be provided within the Flash content, provided that the control is keyboard operable, located early in the tab and reading order, and clearly labeled to indicate that it will turn off the sounds that are playing.

Examples

Example 1: Providing a button in the Flash to stop sound

This example demonstrates the addition of a button within the Flash movie to allow the user to stop sounds from playing. A class called SoundHandler is created which automatically starts playing an mp3 file when the movie loads.

Example Code:

package wcagSamples {
  import flash.display.Sprite;
  import flash.net.URLRequest;
  import flash.media.Sound;
  import flash.media.SoundChannel;
  
  import fl.controls.Button;
  import fl.accessibility.ButtonAccImpl;
  
  import flash.events.MouseEvent;
  public class SoundHandler extends Sprite {
    private var snd: Sound = new Sound();
    private var button: Button = new Button();
    private var req: URLRequest = new URLRequest("http://av.adobe.com/podcast\
      /csbu_dev_podcast_epi_2.mp3");
    private var channel: SoundChannel = new SoundChannel();
    
    public function SoundHandler() {
      ButtonAccImpl.enableAccessibility();
      button.label = "Stop Sound";
      button.x = 10;
      button.y = 10;
      button.addEventListener(MouseEvent.CLICK, clickHandler);
      this.addChild(button);
      snd.load(req);
      channel = snd.play();
    }
    private function clickHandler(e: MouseEvent): void {
      if (button.label == "Stop Sound") {
        button.label = "Start Sound";
        channel.stop();
      } else {
        channel = snd.play();
        button.label = "Stop Sound";
      }
    }
  }
}
Example 2: Providing a button in the HTML before the Flash object to stop sound

A class called SoundHandler is created which automatically starts playing an mp3 file when the movie loads. An HTML button is placed in the HTML document containing the Flash movie. When the button is clicked the action is communicated between the HTML page and the Flash movie via the Flash Player JavaScript API, resulting in the toggleSound method being called on the SoundHandler class.

ActionScript 3.0 code for Example 2

Example Code:

package wcagSamples {
  import flash.display.Sprite;
  import flash.external.ExternalInterface;
  import flash.net.URLRequest;
  import flash.media.Sound;
  import flash.media.SoundChannel;
  
  import flash.events.MouseEvent;
  public class SoundHandler extends Sprite {
    private var snd: Sound = new Sound();
    private var soundOn: Boolean = true;
    private var req: URLRequest = new URLRequest("http://av.adobe.com/podcast/\
      csbu_dev_podcast_epi_2.mp3");
    private var channel: SoundChannel = new SoundChannel();
    
    public function SoundHandler() {
      if (ExternalInterface.available)
      ExternalInterface.addCallback("toggleSound", this.toggleSound);
      snd.load(req);
      channel = snd.play();
    }
    
    private function toggleSound(enable: Boolean): void {
      if (! enable) {
        channel.stop();
        soundOn = true;
      } else {
        channel = snd.play();
        soundOn = true
      }
    }
  }
}
HTML code for Example 2

Example Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <title>Flash Sound Toggle example</title>
    <script src="swfobject.js" type="text/javascript"/>
    <script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }
    
    swfobject.embedSWF("html_control_to_toggle_audio_as3.swf", 
      "flashPlaceHolder", "0", "0", "8");
    function init() {
            var soundOn = true;
            $("soundToggle").onclick = function(event){
                soundOn = !soundOn;
                $("flashPlaceHolder").toggleSound(soundOn);
                event.target.value = soundOn ? "Stop Sound" : "Start Sound";
            };
    }
    window.onload = init;
</script>

  </head>
  <body id="header">
    <h1>Flash Automatic Sound Demo</h1>
    <p>This page contains a Flash movie that automatically starts
      playing sound. Use the button below to stop or start the
      sound</p>
    <input id="soundToggle" type="button" value="Stop Sound"/>
    <p id="flashPlaceHolder">Flash needs to be installed for this
      example to work</p>
  </body>
</html>

Tests

Procedure

For Flash movies that automatically start playing sound after loading:

  1. Confirm that an HTML control that conforms to WCAG 2.0 is placed at the beginning of the document's tab order

  2. If there is no HTML-based control, confirm that an accessible control is placed at the beginning of the Flash movie's tab order.

  3. Activate the HTML or Flash-based control

  4. Verify that audio playback stops

Expected Results
  • Check #1 or #2 is true, and #4 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH19: Providing a script that warns the user a time limit is about to expire and provides a way to extend it

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH19. Also see Flash Technology Notes.

Description

The objective of this technique is to notify users that they are almost out of time to complete an interaction. When scripts provide functionality that has time limits, the script can include functionality to warn the user of imminent time limits and provide a mechanism to request more time. 20 seconds or more before the time limit occurs, the script provides a confirm dialog that states that a time limit is imminent and asks if the user needs more time. If the user answers "yes" then the time limit is reset. If the user answers "no" or does not respond, the time limit is allowed to expire.

This technique involves time limits set with the setTimeout() method. If, for example, the time limit should be 60 seconds, you can set the time limit for 40 seconds (20 seconds less than the desired timeout) and show a confirm dialog. The confirm dialog sets a new timeout for the remaining 20 seconds. If the user requests more time, a new timeout is set. However, if the 20-second "grace period time limit" expires (meaning 60 seconds have now elapsed), the action appropriate for the expiry of the 60 second time limit in the original design is taken.

Examples

Example 1: Using ActionScript to offer a time limit extension before the timeout expires

This is a basic AS2 example of a time limit that can be extended by the user. An alert is shown after 40 seconds of inactivity, warning that the session is about to expire. The user is given 20 seconds to press the space bar or click on the "Yes" button. Note that the 40 second duration would be insufficient for most tasks and is artificially short for ease of demonstration.

Example Code:

import mx.controls.Alert;
import flash.accessibility.Accessibility;

mx.accessibility.AlertAccImpl.enableAccessibility();

var sessionTimeout;
var sessionNotificationTimeout;
var timeLimit: Number = 60000;
var sessionAlert: Alert;
resetTimeout();

testField.addEventListener("change", resetTimeout);

function resetTimeout() {
  clearTimeout(sessionTimeout);
  clearTimeout(sessionNotificationTimeout);
  sessionTimeout = setTimeout(endSession, timeLimit);
  sessionNotificationTimeout = setTimeout(showTimeoutAlert, timeLimit - 20000);
}

function showTimeoutAlert() {
  sessionAlert = Alert.show("Click the YES button to extend your session",
  "Your login session is about to expire, do you need more time?",
  Alert.YES | Alert.NO, null, handleAlertClick);
}

function endSession() {
  sessionAlert.deletePopUp();
  Alert.show("please log in again",
  "Your session has expired");
}

function handleAlertClick(e) {
  if (e && e.detail && e.detail == Alert.YES)
  resetTimeout();
}

Tests

Procedure
  1. load the page and start a timer that is 20 seconds less than the time limit.

  2. when the timer expires, check that a confirmation dialog is displayed warning of the impending time limit and allows the user to extend the limit within 20 seconds.

Expected Results

Check #2 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH20: Reskinning Flash components to provide highly visible focus indication

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH20. Also see Flash Technology Notes.

Description

The purpose of this technique is to allow the author to use ActionScript and component skins to apply a strong visual indication when a component receives focus. In this particular technique, both the component's background color and border will change. When the component loses focus, it returns to its normal styling.

The visual highlights will be applied by switching some of the component's skin parts. The Standard Flash components each have their own set of skins that make up the component's visual appearance. Each part is represented by a MovieClip which can be edited or replaced in order to customize how the component looks. The most relevant skin for this technique is the focusRectSkin skin, which is shared by all components. By default this skin applies a subtle visual highlight when the component receives focus.

This technique can be applied through the following steps:

  1. Create a customized version of focusRectSkin.

  2. Use scripting to associate the component with the customized skin.

There are two ways to customize a skin:

  1. Duplicating Existing Skin

    With this approach you create a copy of the existing focusRect skin for modification. You will manually have to apply the skin for each individual component instance (as indicated in step 5 below).

    1. Drag the components you want to style to the stage. This will ensure the appropriate component related skins are added to the movie's library.

    2. Open the Library panel, and navigate to the "Component Assets > Shared" folder.

    3. Right-click (or Ctrl-click on a Mac) on the focusRectSkin MovieClip, and choose "Duplicate" from the context menu.

    4. Edit the visual border in the skin's MovieClip. For example, the focus rectangle can be made thicker to stand out more (This step is illustrated in the screenshot below this list).

    5. Using ActionScript, associate form component instances with your customized version of focusRectSkin. This can be achieved using the setStyle method.

    editing a duplicate of focusRectSkin

  2. Modifying Existing Skin

    With this approach, the original focusRect skin is modified. This means that the changes you make will be applied to the visual focus indication of _every_ focusable component.

    1. Drag the components you want to style to the stage. This will ensure the appropriate component related skins are added to the movie's library.

    2. Open the Library panel, and navigate to the "Component Assets > Shared" folder.

    3. Open the focusRectSkin MovieClip for editing by double clicking on it.

    4. Edit the visual border in the skin's MovieClip. For example, the focus rectangle can be made thicker to stand out more.

    Note: With this approach you will override the existing skin. If you don't want this, follow the "Duplicate Existing Skin" approach instead.

The focusRect skin applies to all focusable Flash components. If you want to modify other highlights (for example highlights that occur when hovering over a component with the mouse), you will have to edit component specific skins individually. For example, to edit the mouseover highlights for the checkbox component, you will have to modify or duplicate both Checkbox_overIcon and Checkbox_selectedOverIcon. Similarly, for the Button component you will have to modify the Button_over skin.

Also, keep in mind that the existing skins are automatically applied on certain events (focus, mouseover, etc.). It is however also possible to manually switch a skin at a moment of your own choosing (e.g. to indicate invalid content for a text field). this can also be achieved this by calling the setStyle method.

Examples

Example 1: A thick blue border to indicate focus

The code below shows an example where form component instances are associated with a modified version of the focusRectSkin MovieClip. The result is that the components receive a thick blue border rather than the default thin border Flash provides. The code makes a reference to a modified skin called Focus_custom, which has been added to the movie's library in advance.

Note that the custom version of focusRectSkin also sets a transparent yellow background to increase the visual highlight further. Components such as Buttons and checkboxes will show this background, but TextInput components will not. To ensure the yellow background will still be applied to the TextInput instance, the following workaround is applied:

  1. A duplicate version of the TextInput "normal" skin (which can be found in the library at "Component Asssets > TextInputSkins > TextInput_upSkin") is created and edited to show a yellow background.

  2. FocusIn, FocusOut, MouseOver and MouseOut handlers are assigned to the TextInput instance, which temporarily swap the default "normal" skin with the custom "normal" skin while the component is focused or hovered over.

Additionally, the button_over skin is duplicated and modified to change the default mouseover highlights for the button component instance. The checkbox_overIcon and checkbox_selectedOverIcon skins are directly modified, which means those changes will be applied to all checkbox instances.

The result of this technique can be found in the working version of A thick blue border to indicate focus.

Code for Example 1 (ActionScript 3.0)

Example Code:

package wcagSamples {
  import fl.accessibility.ButtonAccImpl;
  import fl.accessibility.CheckBoxAccImpl;
  import fl.controls.CheckBox;
  import fl.controls.Button;
  import fl.controls.Label;
  import fl.controls.TextInput;
  import flash.display.Sprite;
  import flash.events.FocusEvent;
  import flash.events.MouseEvent;
  
  public class FocusStyler extends Sprite {
    public function FocusStyler() {
      ButtonAccImpl.enableAccessibility()
      CheckBoxAccImpl.enableAccessibility()
      
      var lbl1: Label = new Label();
      lbl1.text = "name";
      lbl1.x = lbl1.y = 20;
      addChild(lbl1);
      
      var txt1: TextInput = new TextInput();
      txt1.x = 60;
      txt1.y = 20;
      txt1.width = 200;
      txt1.addEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
      txt1.addEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
      txt1.addEventListener(MouseEvent.MOUSE_OVER, handleFocusIn);
      txt1.addEventListener(MouseEvent.MOUSE_OUT, handleFocusOut);
      txt1.setStyle("focusRectSkin", "focus_custom");
      addChild(txt1);
      
      var chk1: CheckBox = new CheckBox();
      chk1.label = "Check Me";
      chk1.x = 60;
      chk1.y = 70;
      chk1.setStyle("focusRectSkin", "focus_custom");
      addChild(chk1);
      
      var btn1: Button = new Button();
      btn1.label = "Click Me";
      btn1.x = 60;
      btn1.y = 110;
      btn1.setStyle("focusRectSkin", "focus_custom");
      btn1.setStyle("overSkin", "Button_over_custom");
      addChild(btn1);
    }
    
    private function handleFocusIn(event) {
      event.currentTarget.setStyle("upSkin", "TextInput_upSkin_custom");
    }
    
    private function handleFocusOut(event) {
      event.currentTarget.setStyle("upSkin", "TextInput_upSkin");
    }
  }
}

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

When a Flash movie contains focusable components, confirm that:

  1. The visual highlight is applied by modifying the component's skins

  2. A visual highlight is shown when the components receive focus

Expected Results
  • #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH21: Using the DataGrid component to associate column headers with cells

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH21. Also see Flash Technology Notes.

Description

The intent of this Technique is to ensure that information and relationships that are implied visually by data tables are also made available programmatically. Specifically, the association between table column headers and their corresponding cells must be exposed to assistive technology. In Flash, the DataGrid component can be used to achieve this. When accessibility is enabled for the DataGrid component, Flash will automatically prepend the column name in front of each cell value when exposing the grid row's accessible name to assistive technology. For example, the row in the screenshot below would be announced by a screen reader as "Row 6 of 13 Name Patty Crawford Bats L Throws L Year Jr Home Whittier, CA".

Note: The DataGrid component in Flash only supports column headings, not row headings.

screenshot of highlighted row in grid component

Examples

Example 1: A statistical data table

In this example, statistical data is used as data provider for a dynamically created DataGrid component. The lines import fl.accessibility.DataGridAccImpl; DataGridAccImpl.enableAccessibility(); are required to enable accessibility for the Datagrid Component.

Example Code:

import fl.accessibility.DataGridAccImpl;
DataGridAccImpl.enableAccessibility();

import fl.data.DataProvider;
bldRosterGrid(aDg);
var aRoster: Array = new Array();
aRoster = [ {
  Name: "Wilma Carter", Bats: "R", Throws: "R", Year: "So", Home: "Redlands, CA"}, {
  Name: "Sue Pennypacker", Bats: "L", Throws: "R", Year: "Fr", Home: "Athens, GA"}, {
  Name: "Jill Smithfield", Bats: "R", Throws: "L", Year: "Sr", Home: "Spokane, WA"}, {
  Name: "Shirley Goth", Bats: "R", Throws: "R", Year: "Sr", Home: "Carson, NV"}, {
  Name: "Jennifer Dunbar", Bats: "R", Throws: "R", Year: "Fr", Home: "Seaside, CA"}, {
  Name: "Patty Crawford", Bats: "L", Throws: "L", Year: "Jr", Home: "Whittier, CA"}, {
  Name: "Angelina Davis", Bats: "R", Throws: "R", Year: "So", Home: "Odessa, TX"}, {
  Name: "Maria Santiago", Bats: "L", Throws: "L", Year: "Sr", Home: "Tacoma, WA"}, {
  Name: "Debbie Ferguson", Bats: "R", Throws: "R", Year: "Jr", Home: "Bend, OR"}, {
  Name: "Karen Bronson", Bats: "R", Throws: "R", Year: "Sr", Home: "Billings, MO"}, {
  Name: "Sylvia Munson", Bats: "R", Throws: "R", Year: "Jr", Home: "Pasadena, CA"}, {
  Name: "Carla Gomez", Bats: "R", Throws: "L", Year: "Sr", Home: "Corona, CA"}, {
  Name: "Betty Kay", Bats: "R", Throws: "R", Year: "Fr", Home: "Palo Alto, CA"}
];
aDg.dataProvider = new DataProvider(aRoster);
aDg.rowCount = aDg.length;

function bldRosterGrid(dg: DataGrid) {
  dg.setSize(400, 300);
  dg.columns =[ "Name", "Bats", "Throws", "Year", "Home"];
  dg.columns[0].width = 120;
  dg.columns[1].width = 50;
  dg.columns[2].width = 50;
  dg.columns[3].width = 40;
  dg.columns[4].width = 120;
  dg.move(50, 50);
};

Tests

Procedure

For Flash content that contains tabular data:

  1. Open the SWF file in Internet Explorer 6 or higher (using Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9 or higher)

  2. Use a tool which is capable of showing an object's accessibility name, such as ACTF aDesigner 1.0 to open the Flash movie.

  3. In the GUI summary panel, inspect the accessibility name for the DataGrid rows and cells to ensure that the heading data is presented in conjunction with the data cell data.

  4. Authors may also test with a screen reader, by reading the Flash content and listening to hear that the heading and data cell data are read when reading the DataGrid.

  5. Authors may also verify in the Flash authoring tool that the DataGrid component is used to structure the data and that the DataGrid has been made accessible using the DataGridAccImpl.enableAccessibility method.

Expected Results
  • Check 3, 4, or 5 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH22: Adding keyboard-accessible actions to static elements

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH22. Also see Flash Technology Notes.

Description

The objective of this technique is to demonstrate how to provide keyboard access to a Flash MovieClip that is not keyboard accessible by default. This technique ensures that the element is focusable by setting the tabEnabled property, and it ensures that the action can be triggered from the keyboard by providing a keydown handler in addition to a click handler.

Examples

Example 1: MovieClip used as a button

In this example, a custom MovieClip is used as a button. To make it keyboard accessible, the MovieClip is placed in the tab order using the tabEnabled. Additionally, redundant event handlers are added so that the custom button responds to both a mouse click and a space bar keypress. Finally, the custom button is provided an accessible name using the MovieClip's AccessibilityProperties object. This makes the button's label perceivable by assistive technology.

This result can be viewed in the working version of MovieClip used as a button. The source of MovieClip used as a button is available.

Note: Using a generic MovieClip is generally not recommended, since the custom button will be perceived as a focusable graphic rather than a button. Instead, a better approach would be to use the standard Flash Button component, or create a new symbol with a type of "button".

Example Code:

import flash.accessibility. *
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;

testMC.tabEnabled = true;
updateAccName(testMC);
testMC.addEventListener(MouseEvent.CLICK, clickHandler, false);
testMC.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

updateAccName(testMC);

function clickHandler(e) {
  testMC.labelText.text = "THANKS";
  updateAccName(testMC);
}

function keyDownHandler(e) {
  if (e.keyCode == 32)
  clickHandler(e);
}

function updateAccName(mc: MovieClip) {
  if (! mc.accessibilityProperties)
  mc.accessibilityProperties = new AccessibilityProperties();
  mc.accessibilityProperties.name = mc.labelText.text;
  Accessibility.updateProperties();
}

Tests

Procedure

When a Flash Movie contains generic MovieClip instances that are used as interactive controls, confirm that:

  1. The MovieClip instance has its tabEnabled property set to true

  2. The MovieClip instance has event handlers for both mouse and keyboard events

Expected Results
  • #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH23: Adding summary information to a DataGrid

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH23. Also see Flash Technology Notes.

Description

The objective of this technique is to provide a brief overview of how data has been organized into a DataGrid or a brief explanation of how to navigate the grid.

As Flash does not provide a summary attribute, this descriptive text will be added to the DataGrid's accessible desription instead. This approach will make the summary information available to people who use screen readers; the information is not displayed visually.

The summary is useful when the table has a complex structure (for example, when there are several sets of row or column headers, or when there are multiple groups of columns or rows). The summary may also be helpful for simple data tables that contain many columns or rows of data.

Examples

Example 1: Adding a summary to a DataGrid in the Accessibility control panel

This is an example of a DataGrid being added to the stage in Flash Professional from the Components panel. The description field is used in the Accessibility control panel in Flash to serve as the summary information for the DataGrid.

  1. Create a new Flash file (.fla) or open an existing one to put a DataGrid into.

  2. Open the Flash components panel from the Window menu

  3. Drag a DataGrid component onto the stage and position as desired.

  4. Select the DataGrid component and add the summary information to the description field for DataGrid, using the Accessibility control panel.

Example 2: Adding a summary to a DataGrid with ActionScript 3

This is a basic AS3 example of a DataGrid component that has summary text added as its accessible description.

Example Code:

import fl.accessibility.DataGridAccImpl;
import fl.controls.DataGrid;
import fl.controls.Label;
import fl.data.DataProvider;
import flash.accessibility.Accessibility;
import flash.accessibility.AccessibilityProperties;
import flash.system.Capabilities;

DataGridAccImpl.enableAccessibility();

createGrid();

//set the summary text as accessible description
var accProps: AccessibilityProperties = new AccessibilityProperties();
accProps.description = "The first column shows the player's name," +
  "the second and third column shows the player's gaming statistics." +
  "the fourth column shows the player's year as FR (Freshman), JR (junior) or SO (Sophomore)." +
  "The fifth column shows the player's home city and state";
aDg.accessibilityProperties = accProps;
if (Capabilities.hasAccessibility)
Accessibility.updateProperties();

function createGrid() {
  
  //create and add the components
  var aDg: DataGrid = new DataGrid();
  addChild(aDg);
  aDg.move(50, 50);
  bldRosterGrid(aDg);
  
  var aRoster: Array = new Array();
  aRoster =[ {
    Name: "Wilma Carter", Bats: "R", Throws: "R", Year: "So", Home: "Redlands, CA"
  }, {
    Name: "Sue Pennypacker", Bats: "L", Throws: "R", Year: "Fr", Home: "Athens, GA"
  }, {
    Name: "Jill Smithfield", Bats: "R", Throws: "L", Year: "Sr", Home: "Spokane, WA"
  }, {
    Name: "Betty Kay", Bats: "R", Throws: "R", Year: "Fr", Home: "Palo Alto, CA"
  },];
  aDg.dataProvider = new DataProvider(aRoster);
  aDg.rowCount = aDg.length;
}

function bldRosterGrid(dg: DataGrid) {
  dg.setSize(400, 300);
  dg.columns =[ "Name", "Bats", "Throws", "Year", "Home"];
  dg.columns[0].width = 120;
  dg.columns[1].width = 50;
  dg.columns[2].width = 50;
  dg.columns[3].width = 40;
  dg.columns[4].width = 120;
};

Tests

Procedure

If the Flash movie contains a DataGrid component, confirm that summary text has been added to it through the corresponding accessible description property.

Expected Results

The above is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH24: Allowing the user to extend the default time limit

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH24. Also see Flash Technology Notes.

Description

The objective of this technique is to allow the user to extend the default time limit by providing a mechanism to extend the time when scripts provide functionality that has default time limits. In order to allow the user to request a longer time limit, the script can provide a form (for example) allowing the user to enter a larger time limit or indicating that more time is needed.

Examples

Example 1: Changing timeout with a dropdown list

This is a basic AS2 example where the timeout duration can be changed by the user through a dropdown list. In this example there is a combobox with the instance name sessionLimitDuration.

Example Code:

import mx.controls.Alert;
import mx.accessibility.AlertAccImpl;
import mx.accessibility.ComboBoxAccImpl;

ComboBoxAccImpl.enableAccessibility();
AlertAccImpl.enableAccessibility();

var sessionTimeout;
var sessionNotificationTimeout;
var timeLimit: Number;
var sessionAlert: Alert;

adjustTimeoutDuration();
// reset the timeout when interaction occurs
testField.addEventListener("change", resetTimeout);

//
//update limit duration when the combobox value changes
//
sessionLimitDuration.addEventListener("change", adjustTimeoutDuration);

function adjustTimeoutDuration(e) {
  timeLimit = sessionLimitDuration.value * 1000;
  resetTimeout();
  timeoutDescription.text = "A session timeout will be simulated after " + 
    sessionLimitDuration.selectedLabel + " without interaction in the form field below."
}

function resetTimeout() {
  clearTimeout(sessionTimeout);
  sessionTimeout = setTimeout(endSession, timeLimit);
}

function endSession() {
  sessionAlert.deletePopUp();
  Alert.show("please log in again",
  "Your session has expired");
}

For a demonstration, see the working version of Changing timeout with a dropdown list. The source of Changing timeout with a dropdown list is available. Please note that the session times are purposefully short for demonstration purposes, developers will want to provide durations that are sufficient to meet the requirements of Success Criterion 2.2.1 (Timing Adjustable) .

Tests

Procedure

For Flash content that include a time limit:

  1. Check that there is a control to adjust the time limit near the top of the page that allows the user to adjust the time to at least ten times longer than the default.

  2. Verify that the default time limit for the page is long enough that a user can easily navigate to the control even if they are 10 times slower than most users.

Expected Results

The above is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH25: Labeling a form control by setting its accessible name

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH25. Also see Flash Technology Notes.

Description

The objective of this technique is to provide an accessible name to the built in form components provided by Flash. Some components, such as radio buttons, checkboxes and buttons, have their own label property. For other components, the developer needs to specify the component's label text as accessible name. This can be either be achieved through the Accessibility panel (for components placed on the stage during authoring) or through scripting (for components that are dynamically created at runtime).

ActionScript 2

In ActionScript 2 the accessible name needs to be set on a component's _accProps property. This property must be an object. If the property has not been set yet, the developer needs to create a custom object and assign it to the _accProps property. The object itself can have several accessibility related properties, one of them being _accProps.name, which specifies the accessible name. When an _accProps property is updated, the developer must call Accessibility.UpdateProperties() for the changes to take effect. Before calling Accessibility.UpdateProperties(), it is recommended to check the System.capabilities.hasAccessibility flag. this will prevent an error on environments that do not support MSAA.

ActionScript 2 provides the following accessible components:

  • SimpleButton

  • CheckBox

  • RadioButton

  • Label

  • TextInput

  • TextArea

  • ComboBox

  • ListBox

  • Window

  • Alert

  • DataGrid

ActionScript 3

In ActionScript 3 the accessible name needs to be set on a component's accessibilityProperties property. This property must be an an instance of flash.accessibility.AccessibilityProperties. If the property has not been set yet, the developer needs to create the a new AccessibilityProperties instance and assign it to the accessibilityProperties property. The object itself can have several accessibility related properties, one of them being accessibilityProperties.name which specifies the accessible name. When an accessibilityProperties property is updated, the developer must call flash.accessibility.Accessibility.UpdateProperties() for the changes to take effect. Before calling Accessibility.UpdateProperties(), it is recommended to check the flash.system.capabilities.hasAccessibility flag. this will prevent an error on environments that do not support MSAA.

ActionScript 3 provides the following accessible components.

  • Button

  • CheckBox

  • ComboBox

  • List

  • RadioButton

  • TileList

Examples

Example 1: Setting a component's accessible name using the Accessibility panel

To add and label a component control, follow these steps:

  1. From the 'Components' panel, drag the component on to the stage, or use scripting to create a new instance.

  2. With the newly created component instance selected, enter its label text in the Accessibility Panel's Name field.

Example 2: Setting the accessible name through ActionScript 2.0

The code example below shows how a ListBox component is created and assigned an accessible name.

Example Code:

mx.accessibility.ListAccImpl.enableAccessibility();

this.createClassObject(mx.controls.List, "my_list", 1);
my_list.addItem({label: "R. Davis", data: 1});
my_list.addItem({label: "V. Mann", data: 2});
my_list.addItem({label: "L. Heart", data: 3});
my_list.addItem({label: "P. Hill", data: dt4});
my_list.addItem({label: "D. Gribble", data: 5});
my_list.move(10, 10);

if (System.capabilities.hasAccessibility) {
  my_list._accProps = new Object();
  my_list._accProps.name = "Staff Members";
  Accessibility.updateProperties();
}
Example 3: Setting the accessible name through ActionScript 3.0

The code example below shows how a ListBox component is created and assigned an accessible name.

Example Code:

import fl.controls.List;
import fl.accessibility.ListAccImpl;
import flash.system.Capabilities;
import flash.accessibility.*;

ListAccImpl.enableAccessibility();
var my_list:List = new List();
my_list.addItem({label:"R. Davis", data:1});
my_list.addItem({label:"V. Mann", data:2});
my_list.addItem({label:"L. Heart", data:3});
my_list.addItem({label:"P. Hill", data:4});
my_list.addItem({label:"D. Gribble", data:5});
my_list.x = my_list.y = 10;

if (Capabilities.hasAccessibility) {
  var accProps:AccessibilityProperties = new AccessibilityProperties();
  accProps.name = "Staff Members";
  my_list.accessibilityProperties = accProps;
  Accessibility.updateProperties();
}
addChild(my_list);

Tests

Procedure

For Flash movies that contain form components, confirm that either:

  1. The selected component's label text is specified in the Accessibility Panel's "name" field.

  2. In ActionScript 2.0: Scripting is used to dynamically set the component's _accProps.name property

  3. In ActionScript 3.0: Scripting is used to dynamically set the component's accessibilityProperties.name property

Expected Results

One of the above is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH26: Applying audio descriptions to Flash video

Applicability

  • Flash CS3 and higher

  • ActionScript 3.0 and higher

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH26. Also see Flash Technology Notes.

Description

The objective of this technique is to provide a way for people who are blind or otherwise have trouble seeing the video in audio-visual material to be able to access the material. With this technique a description of the video is provided via audio description that will fit into the gaps in the dialogue in the audio-visual material.

Examples

Example 1: Playing descriptions when cue points are reached

In this example, the FLVPlayback component is used to create a video player. A custom class called "AudioDescriptions" is added to manage the playback of extended audio descriptions. This class provides event listeners to listen for cue points in the media that have been identified by the audio description provider. When these cuepoints are reached, an mp3 file containing the corresponding description will start playing. The recorded descriptions have been timed to fit with in the gaps in the movie's dialog.

By default, audio descriptions will be enabled. A button (which must itself be accessible to meet other success criteria) is provided below the video player that allows the user to turn audio descriptions on or off.

Example Code:

package {
  import fl.video. *;
  import flash.events. *;
  import flash.media.Sound;
  import flash.media.SoundChannel;
  import flash.net.URLRequest;
  import flash.display.Sprite;
  
  public class AudioDescriptions extends Sprite {
    private var channel: SoundChannel = new SoundChannel;
    private var myPlayer: FLVPlayback;
    private var _enabled: Boolean = true;
    private var _toggleBtn: Button;
    private var snd: Sound = new Sound();
    public function AudioDescriptions() {
      // point myPlayer to the FLVPlayback component instance on the stage, 
      // which should be loaded with a valid video source.
      myPlayer = my_FLVPlybk;
      // add cue points. When any of these are reached, the 
      // MetadataEvent.CUE_POINT event will fire
      myPlayer.addASCuePoint(8.35, "ASpt1");
      myPlayer.addASCuePoint(23.23, "ASpt2");
      
      enable();
      
      enable_AD_btn.addEventListener(MouseEvent.CLICK, handleBtnClick);
    }
    
    private function handleBtnClick(e) {
      _enabled = ! _enabled;
      if (! _enabled) {
        disable();
        enable_AD_btn.label = "Enable Audio Descriptions";
      } else {
        enable();
        enable_AD_btn.label = "Disable Audio Descriptions";
      }
    }
    
    public function enable() {
      // set up an event handler which will be called each time a cue point is reached
      myPlayer.addEventListener(MetadataEvent.CUE_POINT, cp_listener);
    }
    
    public function disable() {
      // remove the event handler called each time a cue point is reached, so 
      // that audio description is disabled.
      myPlayer.removeEventListener(MetadataEvent.CUE_POINT, cp_listener);
    }
    
    private function cp_listener(eventObject: MetadataEvent): void {
      snd = new Sound();
      //recreate sound object as it can only load one mp3 file
      //check to see which cue point was reached
      switch (eventObject.info.name) {
        case "ASpt1":
        snd.load(new URLRequest("sphere.mp3"));
        //create a new Sound object, and load the appropriate mp3
        channel = snd.play();
        // play the audio description, and assign it to the SoundChannel object
        break;
        case "ASpt2":
        snd.load(new URLRequest("transfrm.mp3"));
        channel = snd.play();
        break;
      }
    }
  }
}
Example 2: Providing an additional audio track for descriptions

Audio description can also be provided via an additional audio track that is the same length and plays simultaneously as the primary media, but that only includes sound for the segments when audio description needs to be played and silence at other times. A Flash author can provide a toggle to turn this additional audio track on or off, based on the listener's preference. When the additional track is enabled, there are two parallel audio tracks, one being the primary audio, and the second being the one containing only audio description. It is still necessary to ensure that the audio description and primary audio do not overlap in ways that make comprehension difficult. This method will achieve the same result as the method used in Example 1, but may be chosen because of the type of audio description files that are provided to the Flash author.

Tests

Procedure

When Flash content contains video with an audio soundtrack, confirm that:

  1. Audio descriptions have been made available using separate sound files.

  2. A button is provided that allows users to enable or disable the audio descriptions

Expected Results
  • #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH27: Providing button labels that describe the purpose of a button

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH27. Also see Flash Technology Notes.

Description

The objective of this technique is to describe the purpose of a button by providing descriptive text as the button's accessible name. The description lets a user distinguish this button from other buttons in the Flash movie and helps the user determine whether to activate the button. An empty string is not sufficient as a button's accessible name.

For buttons with text labels, the label text will be used as a buttons accessible name. If a button is image based and does not have a text label, the button's accessible name will have to be set separately using the Accessibility panel or through scripting.

Examples

Example 1: Using the label property to describe the button's purpose

Example Code:

import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;

ButtonAccImpl.enableAccessibility();

var myButton:Button = new Button();
myButton.label = "View Items in Cart";
Example 2: Using scripting to set the accessible name for an image button using Actionscript 3.0

In this example, the button's label property is deliberately set to an empty string. To be perceivable to assistive technology, the button's accessibilityProperties.name property is set.

Example Code:

import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;
import flash.accessibility.*;
import flash.system.Capabilities;
ButtonAccImpl.enableAccessibility();

var soundIsMuted = false;
var myButton:Button = new Button();
myButton.setStyle("icon", unmuted);
myButton.label = "";
myButton.x = myButton.y = 10;
myButton.width = myButton.height = 50;
updateAccName(myButton, "mute sound");
myButton.setStyle("icon", unmuted);
myButton.addEventListener(MouseEvent.CLICK, handleBtnClick);
addChild(myButton);

function handleBtnClick(e) {
  soundIsMuted = !soundIsMuted;
  myButton.setStyle("icon", soundIsMuted ? muted : unmuted);
  updateAccName(myButton, soundIsMuted ? "unmute sound" : "mute sound");
}

function updateAccName(obj, newName:String) {
  if (!obj.accessibilityProperties)
    obj.accessibilityProperties = new AccessibilityProperties();
  obj.accessibilityProperties.name = newName;
  if (Capabilities.hasAccessibility)
    Accessibility.updateProperties();
}

Tests

Procedure

For each button in the Flash movie that uses this technique:

  1. Check that the button's label text correctly describes the button's purpose

  2. If a button does not have a text label, confirm that descriptive text has been added as the button's accessible name.

  3. If a button contains both label text and an accessible name, confirm that the combination of the two makes sense as a description for the button's purpose.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH28. Also see Flash Technology Notes.

Description

ASCII characters, emoticons, and leetspeek are sometimes used and present accessibility challenges since the meaning is conveyed through the visual appearance of groupings of individual characters.

In Flash, such groupings of characters can be made accessible by wrapping them in a MovieClip, and providing an accessible name. It is crucial that the forceSimple property for the MovieClip is set to true also. This will hide the actual ASCII characters from assistive technology.

Examples

Example 1: Providing a text alternative for ASCII art in the Accessibility control panel

This example contains words written in ASCII art using leetspeek (the text says "WCAG 2 rulez"). To make this text accessible, the following steps are followed:

  1. Place the ASCII characters in a MovieClip instance

  2. Select the MovieClip instance containing the text, and make the following changes in the Accessibility panel:

    • Add a meaningful text alternative for the ASCII art, without leetspeak (such as "WCAG 2 RULEZ").

    • Uncheck the "Make child objects accessible" checkbox, so that the ASCII characters will not be read by screen readers

These steps are ilustrated in the screenshot below:

Adding text alternative for ASCII art using the Accessibility panel

Example 2: Providing a text alternative for ASCII art using ActionScript

This example is the same as example 1, except using ActionScript instead of the Accessibility control panel in the Flash Professional authoring tool.

  1. Place the ASCII characters in a MovieClip instance

  2. Provide an instance name for the MovieClip instance (e.g. myASCII)

  3. Set the accessible name for the MovieClip and set the forceSimple property to true to hide the text inside the MovieClip.

Example Code:

// 'myASCII' is a MovieClip instance placed on the movie's main timeline
myASCII.accessibilityProperties = new AccessibilityProperties();
myASCII.accessibilityProperties.name = "WCAG 2 Rulez";
myASCII.accessibilityProperties.forceSimple = true;

Tests

Procedure
  1. Publish the SWF file

  2. Use a tool which is capable of showing an object's name to open the Flash movie.

  3. Locate the ASCII grouping, leet speak, or emoticon and verify in the tool that the accessibility name represents the same information.

  4. Authors may also test with a screen reader, by reading the Flash content and listening to hear that the equivalent text is read when tabbing to the non-text object (if it is tabbable) or hearing the alternative text read when reading the content line-by-line.

Expected Results
  • #3 or #4 above is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH29: Setting the label property for form components

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH29. Also see Flash Technology Notes.

Description

The objective of this technique is to explicitly associate a form component with its label text by setting the component's label property. Setting this property will visually place a label next to the component, and exposes the label text to assistive technology.

Components that support the label property are:

For other components, the label text has to placed adjacent to the form component manually. For these components, the label text can be associated with the form component using one of these approaches:

Examples

In order for these form controls to be accessible to assistive technology, the following lines of code will have to be added once to the movie's script:

When the Button component is used:

import fl.accessibility.ButtonAccImpl; ButtonAccImpl.enableAccessibility();

When the RadioButton component is used:

import fl.accessibility.RadioButtonAccImpl; RadioButtonAccImpl.enableAccessibility();

When the CheckBox component is used:

import fl.accessibility.CheckBoxAccImpl; CheckBoxAccImpl.enableAccessibility();

Example 1: Setting the label using the Component Inspector panel
  1. Add the Button, CheckBox or RadioButton component to the movie by dragging it on the the stage from the 'Components' panel.

  2. With the component selected, open the 'Component Inspector' panel by selecting it in the 'Window' menu or using the Shift + F7 shortcut.

  3. In the Component Inspector, under the 'Parameters' tab, enter the label text for the 'label' parameter.

The screenshot below illustrates this technique.

Setting a component's label in the Component Inspector Panel

Example 2: Setting the label on a Button, CheckBox and RadioButton component using ActionScript 3.0

Example Code:

import fl.accessibility.ButtonAccImpl
import fl.accessibility.CheckBoxAccImpl
import fl.accessibility.RadioButtonAccImpl
import fl.controls.Button;
import fl.controls.CheckBox;
import fl.controls.RadioButton;

ButtonAccImpl.enableAccessibility();
var myButton: Button = new Button();
myButton.label = "Submit Details";
myButton.x = 10;
myButton.y = 10
addChild(myButton);

CheckBoxAccImpl.enableAccessibility();
var myCheckBox: CheckBox = new CheckBox();
myCheckBox.label = "notify me";
myCheckBox.x = 10;
myCheckBox.y = 40
addChild(myCheckBox);

RadioButtonAccImpl.enableAccessibility();
var myRadioButton: RadioButton = new RadioButton();
myRadioButton.label = "Male";
myRadioButton.x = 10;
myRadioButton.y = 60;
addChild(myRadioButton);

Tests

Procedure

When the Button, CheckBox or RadioButton components are used:

  1. confirm that labels describing the purpose of the button have been provided through the component's label label property.

Expected Results
  1. #1 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH30: Specifying accessible names for image buttons

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH30. Also see Flash Technology Notes.

Description

For image based Button components the accessible name needs to be set to provide a functional label. This label indicates the button's function, but does not attempt to describe the image. The label is especially important if there are multiple buttons on the page that each lead to different results.

The accessible name for a button may need to be updated if the button changes during the use of the Flash movie.

Examples

Example 1: Accessible name for a simple image button

In this example, an icon based button is given an accessible name through scripting. When the button is clicked a web page is opened.

Example Code:

//provide text equivalent for image button
this.check_btn.accessibilityProperties = new AccessibilityProperties();
this.check_btn.accessibilityProperties.name = "Check page validation";

//set up event listener and function to navigate to URL

this.check_btn.addEventListener(MouseEvent.CLICK, onClickHandler);

function onClickHandler(e: MouseEvent): void {
  var btn = e.target;
  var url: String = "http://validator.w3.org";
  var request: URLRequest = new URLRequest(url);
  navigateToURL(request, '_blank');
}
Example 2: Accessible name for a dynamic image button

Example Code:

import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;

ButtonAccImpl.enableAccessibility();

var soundIsMuted = false;
var myButton: Button = new Button();
myButton.label = "";
myButton.x = myButton.y = 10;
myButton.width = myButton.height = 50;
updateAccName(myButton, "mute sound");
myButton.setStyle("icon", unmuted);
myButton.addEventListener(MouseEvent.CLICK, handleBtnClick);
addChild(myButton);

function handleBtnClick(e) {
  soundIsMuted = ! soundIsMuted;
  myButton.setStyle("icon", soundIsMuted? muted: unmuted);
  updateAccName(myButton, soundIsMuted? "unmute sound": "mute sound");
}

function updateAccName(obj, newName: String) {
  if (! obj.accessibilityProperties)
  obj.accessibilityProperties = new AccessibilityProperties();
  obj.accessibilityProperties.name = newName;
  if (Capabilities.hasAccessibility)
  Accessibility.updateProperties();
}

Tests

Procedure

When a Flash Movie contains image based buttons, confirm that:

  1. An accessible name is provided for the button that describes the button's action

  2. If the button's action changes (for example when it is clicked) the accessible name changes correspondingly

Expected Results
  • #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH31: Specifying caption text for a DataGrid

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH31. Also see Flash Technology Notes.

Description

The objective of this technique is to programmatically associate captions for DataGrids where captions are provided in the presentation. Normally, the caption for a table is a table identifier and acts like a title or heading for the table.

Flash does not have a caption element for the DataGrid component, but the same effect can be achieved through the following approach:

  1. Place a label component or textfield above the DataGrid, containing the grid's caption text.

  2. Duplicate the caption text and add it as the grid's accessible name. This can either be achieved by setting a value to the grid's "name" field in the Accessibility panel or by setting the grid's AccessibilityProperties.name property.

Examples

Example 1: Associating a label with a DataGrid

This is an example of a DataGrid being added to the stage in Flash Professional from the Components panel. A label element is also added from the Components panel to contain the caption text and the caption text is used in the Accessibility control panel in Flash to serve as the accessibility name for the DataGrid.

  • Create a new Flash file (.fla) or open an existing one to put a DataGrid into.

  • Open the Flash components panel from the Window menu

  • Drag a DataGrid component onto the stage and position as desired.

  • Drag a label component onto the stage and position as desired.

  • Add text to the label component.

  • Select the DataGrid component and add the same text as is used in the label component to the name field for DataGrid, using the Accessibility control panel.

Example 2: Associating a caption with a DataGrid using ActiveScript 3

This is a basic AS3 example of a DataGrid generated through scripting. Additionally a label element is created, containing the caption text, and the caption text is added to the grid as an accessible name.

Example Code:

import fl.accessibility.DataGridAccImpl;
import fl.controls.DataGrid;
import fl.controls.Label;
import fl.data.DataProvider;
import flash.accessibility.Accessibility;
import flash.accessibility.AccessibilityProperties;
import flash.system.Capabilities;

// enable accessibility for the DataGrid
DataGridAccImpl.enableAccessibility();

createGrid();

// set the data grid caption text
var gridCaptionText: String = "Game Results";
gridCaption.text = gridCaptionText;
//add the caption text as the DataGrid's accessible name
var accProps: AccessibilityProperties = new AccessibilityProperties();
accProps.name = gridCaptionText;
aDg.accessibilityProperties = accProps;
if (Capabilities.hasAccessibility)
Accessibility.updateProperties();

function createGrid() {
  
  //create and add the components
  var aDg: DataGrid = new DataGrid();
  var gridCaption: Label = new Label();
  addChild(aDg);
  addChild(gridCaption);
  aDg.move(50, 50);
  gridCaption.move(50, 20);
  
  var captionFormat: TextFormat = new TextFormat();
  captionFormat.size = 24;
  gridCaption.setStyle("textFormat", captionFormat);
  gridCaption.width = 300;
  gridCaption.height = 100;
  bldRosterGrid(aDg);
  //prepare the data
  var aRoster: Array = new Array();
  aRoster =[ 
    {Name: "Wilma Carter", Bats: "R", Throws: "R", Year: "So", Home: "Redlands, CA"},
    {Name: "Sylvia Munson", Bats: "R", Throws: "R", Year: "Jr", Home: "Pasadena, CA"}, 
    {Name: "Carla Gomez", Bats: "R", Throws: "L", Year: "Sr", Home: "Corona, CA"}, 
    {Name: "Betty Kay", Bats: "R", Throws: "R", Year: "Fr", Home: "Palo Alto, CA"},
  ];
  aDg.dataProvider = new DataProvider(aRoster);
  aDg.rowCount = aDg.length;
};

function bldRosterGrid(dg: DataGrid) {
  dg.setSize(400, 300);
  dg.columns =[ "Name", "Bats", "Throws", "Year", "Home"];
  dg.columns[0].width = 120;
  dg.columns[1].width = 50;
  dg.columns[2].width = 50;
  dg.columns[3].width = 40;
  dg.columns[4].width = 120;
};

Notes on this code sample:

Tests

Procedure
  1. Check whether the Flash movie contains a DataGrid component.

  2. Confirm that each DataGrid's caption text has been added to the component as an accessible name.

Expected Results

Step 2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH32: Using auto labeling to associate text labels with form controls

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH32. Also see Flash Technology Notes.

Description

Except for the CheckBox and RadioButton component, the built in Flash components are not automatically provided an associated label. For these components, label text has to be placed adjacent to their control manually, using the Label component. If the 'auto-label' feature is enabled in the Accessibility panel, then the Flash Player will automatically associate the label text for the TextInput and TextArea components. This means that for these components, it is not necessary to duplicate the label text for the control using the Accessibility panel. The auto label feature is enabled by default.

Additionally, the auto label feature will enable the Flash Player to automatically add text contained by Button symbols as the symbol's accessible name. This will only work if the Button symbol only consists of one layer, containing the text label.

Note: Since auto-labeling associates labels without human intervention the accuracy of the association should be verified. For more predictable results authors are encouraged to explicitly add labels to all controls.

To auto labeling, perform the following steps:

  1. Ensure that the textual descriptions for each form control within the flash application are placed adjacent to the control itself. Text eligible to be used for auto-labeling must not be set to be hidden from assistive technology.

  2. Select the movie stage, and open the Accessibility panel.

  3. Ensure that the 'Auto Label' option is checked. This will automatically associate labels with their TextInput and TextArea controls, and add text inside custom button symbols as their accessible name.

  4. If the auto label behavior is inappropriate to your Flash content, uncheck the 'Auto label' option, and ensure that each control receives a meaningful 'name' value in the Accessibility panel.

  5. To disable auto labeling for a particular object but not the whole movie, convert the text to the 'dynamic text' type using the 'Property inspector'. Then select it, and uncheck its 'Make object accessible' option in the Accessibility panel.

Note: As an alternative to using the Accessibility panel, the auto label feature can also be turned off by setting the AccessibilityProperties.noAutoLabel to true for the stage object.

Examples

Example 1: Using the "Auto Label" option in the Accessibility panel

This example shows two TextInput components, a TextArea component and a custom button symbol instance. For the TextInput components, a separate label element has been placed to the left of the control. For the TextArea component, the label has been placed above the control. For the custom button, the label text is placed inside the button symbol. Because the "Auto Label" option is enabled in the Accessibility panel, all these controls will be provided an accessible name based on their label.

The screenshot below illustrates the example: Using the Auto Label feature in the Flash Authoring Environment

The results of this technique can be viewed in the working version of Using the "Auto Label" option in the Accessibility panel. The source of Using the "Auto Label" option in the Accessibility panel is available.

Tests

Procedure

If a Flash form contains TextInput or TextArea components, or custom button symbols with text labels, confirm that:

  1. The Auto Label option is enabled in the movie's Accessibility panel

  2. Use a screen reader or MSAA checker to ensure that the label text is indeed exposed as the control's accessible name

Expected Results
  • #1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH33: Using relative values for Flash object dimensions

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH33. Also see Flash Technology Notes.

Description

The objective of this technique is to specify the width and/or height of an embedded Flash object using relative units such as em values. The size of the Flash object is allowed to expand to fill the size of its container (a parent element) by setting the movie width and height to 100%. The container's width and height is set with relative units. This will allow user agents that support text resizing to resize the Flash object in line with changes in text size settings. When the Flash object's dimensions are adjusted its contents will be scaled, making it easier to read for low vision users.

Note: This technique is not necessary to support users who use zoom functionality in their browsers.

Examples

Example 1: Scaling text while keeping a minimum size

In this example, a Flash object is loaded into an HTML document using SWFObject's dynamic publishing method. The Flash object's container element is given a class name of "flashPlaceHolder". This class name is then targeted using CSS to set its width and height using relative em values. When the user increases or decreases the browser's text size, the Flash object will scale accordingly. To ensure that the object does not become too small when text size is decreased, the min-width and min-height properties are set to the default dimensions.

Example Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <title>Flash Resize example</title>
    <script src="swfobject/swfobject.js" type="text/javascript"/>
    <script type="text/javascript">
    swfobject.embedSWF("scale_movie_dimensions_on_text_resize_as3.swf", 
    "flashPlaceHolder", "100%", "100%", "8")      
</script>

    <style type="text/css">
  #flashPlaceHolder {
    width: 20em;
    height: 15em;
    min-width: 320px;
    min-height: 240px;
  }
</style>
  </head>
  <body id="header">
    <h1>Flash Resize Demonstration</h1>
    <p>When the browser's text size is changed, the Flash movie will be
      resized accordingly.</p>
    <p id="flashPlaceHolder">Flash needs to be installed for this
      example to work</p>
  </body>
</html>

Tests

Procedure
  1. Open a web page containing an embedded flash object

  2. View the HTML to confirm that the width and height dimensions for the object containing the Flash object are specified using relative units such as em or percent (%).

Expected Results
  • Check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH34: Turning off sounds that play automatically when an assistive technology is detected

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH34. Also see Flash Technology Notes.

Description

The intent of this technique is to prevent sounds from playing when the Flash movie loads. This is useful for those who utilize assistive technologies (such as screen readers, screen magnifiers, switch mechanisms, etc.) and those who may not (such as those with cognitive, learning and language disabilities). By default, the sound will be played automatically. When a screen reader such as JAWS is detected however, the sound will have to be started manually.

To perform screen reader detection, Flash provides the flash.accessibility.Accessibility.active property. If this property is set to true, it means that the Flash player has detected running assistive technology. Based on this flag, the Flash developer can choose to run different functionality.

Note 1: The Flash Player requires some time to detect active assistive technology and set the Accessibility.active property. To get accurate results, do not check for this property immediately on the first frame of the movie. Instead, perform the check 5 frames in or based on a timed event.

Note 2: Not every screen reader will be detected using this mechanism. In general, the property will be set to true when any MSAA client is running.

Note 3: Other assistive technology tools, including screen magnifiers, or tools not used as assistive technologies may also utilize MSAA in ways that result in Accessibility.active being set to true.

Examples

Example 1: A SoundHandler class

A class called SoundHandler is created which automatically starts playing an MP3 file only when Accessibility.active is set to false. Note that this example also checks the flash.system.Capabilities.hasAccessibility property. This property does not check whether a screen reader is running, but instead indicates whether the Flash Player is running in an environment that supports MSAA (which basically means the Windows operating system).

Example Code:

package wcagSamples {
  import flash.accessibility.Accessibility;
  import flash.display.Sprite;
  import flash.net.URLRequest;
  import flash.media.Sound;
  import flash.media.SoundChannel;
  import flash.system.Capabilities;
  import fl.controls.Button;
  import fl.accessibility.ButtonAccImpl;
  import fl.controls.Label;
  import flash.events.MouseEvent;
  
  public class SoundHandler extends Sprite {
    private var snd: Sound = new Sound();
    private var button: Button = new Button();
    private var req: URLRequest = new URLRequest(
      "http://av.adobe.com/podcast/csbu_dev_podcast_epi_2.mp3");
    private var channel: SoundChannel = new SoundChannel();
    private var statusLbl: Label = new Label();
    public function SoundHandler() {
      snd.load(req);
      ButtonAccImpl.enableAccessibility();
      button.x = 10;
      button.y = 10;
      statusLbl.autoSize = "left";
      statusLbl.x = 10;
      statusLbl.y = 40;
      addChild(statusLbl);
      button.addEventListener(MouseEvent.CLICK, clickHandler);
      this.addChild(button);
      if (! Capabilities.hasAccessibility || ! Accessibility.active) {
        channel = snd.play();
        button.label = "Stop Sound";
        statusLbl.text = "No Assistive technology detected. \
          Sound will play automatically";
      } else {
        button.label = "Start Sound";
        statusLbl.text = "Assistive technology detected. \
          Sound will not play automatically";
      }
    }
    private function clickHandler(e: MouseEvent): void {
      if (button.label == "Stop Sound") {
        button.label = "Start Sound";
        channel.stop();
      } else {
        channel = snd.play();
        button.label = "Stop Sound";
      }
    }
  }
}

This technique can be viewed in the working version of A SoundHandler class. The source of A SoundHandler class is available.

Resources

Tests

Procedure
  1. Start a screen reader that supports MSAA.

  2. Open a page containing a Flash movie that starts playing audio automatically when a screen reader is not running

  3. Confirm that the audio is stopped.

Expected Results
  1. #3 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH35: Using script to scroll Flash content, and providing a mechanism to pause it

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH35. Also see Flash Technology Notes.

Description

The objective of this technique is to provide a way for users to stop scrolling content when the scrolling is created by a script. Scrolling content can be difficult or impossible to read by users with low vision or with cognitive disabilities. The movement can also be distracting for some people making it difficult for them to concentrate on other parts of the Web page.

Examples

Example 1: A toggle button to pause and resume scrolling

In this example, text scrolls from left to right. A toggle button is provided that allows the user to pause and resume the scrolling behavior. Additionally, a checkbox is provided which can be used to slow down the scrolling speed.

Note: Users may prefer a greater variety of scrolling speed options than are offered in this example. Developers might choose to provide several speed choices with a slider or drop down list control in order to accomplish this.

Example Code:

import fl.accessibility.ButtonAccImpl;
import fl.accessibility.CheckBoxAccImpl;

ButtonAccImpl.enableAccessibility();
CheckBoxAccImpl.enableAccessibility();

var scrollInterval: int;
var intervalLength: int = 15;

var expandedViewer: MovieClip = exampleScroller.expandedViewer;
var scrollText: MovieClip = exampleScroller.scrollText;
var scrollViewer: MovieClip = exampleScroller.scrollViewer;

var scrollingPaused: Boolean = true;

scrollStopper.addEventListener(MouseEvent.CLICK, handleBtnClick, false);
slowDown_chk.addEventListener(MouseEvent.CLICK, handleChkClick, false);

function handleBtnClick(e) {
  toggleScroll(false);
  e.target.label = scrollingPaused? "Resume Scrolling": "Stop Scrolling";
}

//slow down scrolling speed
function handleChkClick(e) {
  intervalLength = e.target.selected? 50: 15;
  if (! scrollingPaused) {
    clearTimeout(scrollInterval);
    toggleScroll(true);
  }
}

//pause or resume scrolling
function toggleScroll(noToggle: Boolean) {
  if (noToggle || scrollingPaused)
  scrollInterval = setInterval(moveText, intervalLength); else
  clearTimeout(scrollInterval);
  if (! noToggle)
  scrollingPaused = ! scrollingPaused;
}

function moveText() {
  if (scrollText.x + scrollText.width < scrollViewer.x)
  scrollText.x = scrollViewer.x + scrollViewer.width;
  scrollText.x -= 1;
}

//initiate scrolling
toggleScroll(false);

Tests

Procedure

When a Flash Movie contains scrolling content:

  1. Confirm that a button is provided that allows users to pause and resume the scrolling behavior

  2. Confirm that pressing the button stops the scrolling

  3. Confirm that pressing the button again restarts the scrolling

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


FLASH36: Using scripts to control blinking and stop it in five seconds or less

Applicability

  • Adobe Flash Professional version MX and higher

  • Adobe Flex

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for FLASH36. Also see Flash Technology Notes.

Description

The objective of this technique is to control blinking with script so it can be set to stop in less than five seconds by the script. The ActionScript setTimeout() method is used to stop the MovieClip's blinking behavior in less than 5 seconds.

Examples

Example 1: Stopping blinking after a timeout

In this example a MovieClip (blinkingTextMC) uses its timeline to generate a blinking effect. Before 5 seconds has passed, the MovieClip's gotoAndStop() method is called, which stops the blinking effect.

Example Code:

setTimeout(stopBlinking, 4500);
function stopBlinking() {
  var blinkingTextMC = getChildByName('blinkingTextMC');
  blinkingTextMC.gotoAndStop(1);
}

Tests

Procedure

For each instance of blinking content:

  1. Start a timer for 5 seconds at the start of the blink effect.

  2. When the timer expires, determine if the blinking has stopped.

Expected Results
  • For each instance of blinking content, #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


10. Silverlight Techniques

Silverlight Technology Notes

Microsoft Silverlight is a development platform for applications. To learn more about Silverlight and how Microsoft defines and markets the Silverlight technology, see What Is Silverlight? document on microsoft.com.

Once an application author produces a Silverlight application, the most common way to deploy that application is to present the Silverlight content using a browser plug-in that end users have installed on their computers. The Silverlight plug-in is instantiated within an HTML page as an <object> or <embed> tag. <object> tag attributes reference Silverlight's unique classid, and/or its MIME type, thus invoking a plug-in instance within the browser host's HTML content. Users request the Silverlight-containing page as a URL, and the surrounding HTML plus the Silverlight content is viewed within a browser host such as Firefox, Internet Explorer, Google Chrome, or Safari. There are other means by which Silverlight-developed content can be deployed that are NOT viewed in the plug-in or hosted by HTML; this is discussed in the upcoming section "Browser Host Platform Considerations".

The content that is displayed within the Silverlight content area is specified as the "source" parameter, within the Silverlight object/embed tag. The "source" parameter value references a URI for a package. The package is typically served by the same server that served the HTML (and the package itself is typically requested through http: or https: protocol). The package always contains an application manifest, and a managed code compiled DLL. The package might also contain other content, for example media files or image files that the application consumes as resources. The compiled DLL typically contains two types of information within its compiled structure: CLR runtime code that handles dynamic operations of the application such as startup logic, business rules, event handlers, and further resources. The resources inside the DLL are primarily UI definitions in a markup format/language called XAML.

Silverlight provides a combination of built-in support for accessibility and capabilities that authors and authoring tools can take advantage of in order to enable support for accessible content. Tools and related technologies that are related to this include:

  • Microsoft Visual Studio 2010 (or Microsoft Visual Studio 2008 if still developing for version 3 of the Silverlight runtime) – Silverlight authors can use Express versions if their development needs are fairly basic

  • Microsoft Expression products, in particular Microsoft Expression Blend

  • Silverlight Tools – a separate package for Visual Studio that should be installed for effective Silverlight application development

  • Developer tools that are specifically for verification of information presented to either the UIA or MSAA accessibility frameworks.

Accessibility Frameworks

Silverlight support for assistive technologies is based on implementing Silverlight for Microsoft UI Automation (often abbreviated as UIA). In the UIA accessibility framework, Silverlight is implemented as a UI Automation server. This means that Silverlight provides information about the application itself and its current content through the framework. Any subscriber to the operating system's automation can consume that information as a UI Automation client. One such client role is typically implemented by assistive technologies, most notably by screen readers. By acting as a UI Automation client, an assistive technology can programmatically determine many aspects of Silverlight content and content structure. In addition, UIA has APIs that can change the content in a predictable way that maintains security boundaries between applications. Reading information from Silverlight through the UIA accessibility framework requires no extra work on the part of a given assistive technology, presuming that the assistive technology has already implemented UIA. All information that Silverlight reports to UIA comes through the common property set, and a fixed set of possible user interactions is programmatically accessible through a discoverable set of automation patterns and techniques.

As an example of how UI Automation might provide information to an assistive technology, consider the following scenario:

  1. A Silverlight application author produces an application that follows all Microsoft-documented best practices for providing accessibility information, either by specific programming actions or by relying on a known set of Silverlight default behaviors (many of these actions/behaviors are also described as Silverlight WCAG techniques).

  2. A user views a Web page that contains Silverlight content, using a browser host that loads the HTML, and using an operating system such as Microsoft Windows (XP, Vista or Windows 7) that supports UI Automation.

  3. An assistive technology that is already running on the user's system loads the UIA representation of all Web content loaded by the browser. Part of that representation is an automation element that represents the Silverlight plug-in. The plug-in content area itself is focusable in the browser host's HTML rendering and representation model.

  4. The user navigates elements in the Silverlight application area, either by using the TAB sequence, or by using navigation techniques implemented by a particular assistive technology.

  5. By forwarding information that is pertinent to either the navigated-to element or the application in general, the accessibility framework provides the assistive technology with the information from Silverlight application. As a specific example, a screen reader might read the name and role of the currently focused control element such as a Silverlight TextBox. In addition, the assistive technology can provide means to enter data or otherwise interact with elements of that application, if that element reports to UIA that it supports such interaction.

A good introductory topic on UI Automation is available on MSDN.

UI Automation supersedes Microsoft Active Accessibility (MSAA), an earlier Microsoft accessibility framework. UI Automation provides built-in bridging support for MSAA, such that assistive technologies that are implemented as clients for MSAA rather than UIA receive the expected interface hooks for IAccessible and can call methods of the MSAA interfaces. Also, applications that provide MSAA/ IAccessible are readable to a UIA-client assistive technology through similar bridging.

Whether implemented as clients for UI Automation or for MSAA, support for assistive technologies is provided for users viewing content using combinations of:

  • Microsoft Internet Explorer 6 or later, in combination with Microsoft Silverlight on Windows.

  • Mozilla Firefox 3 or later, in combination with Microsoft Silverlight on Windows.

  • Google Chrome 4 or later, in combination with Microsoft Silverlight on Windows

Screen reader assistive technology support for either MSAA or UIA is provided in several assistive technologies, including but not limited to:

  • JAWS

  • Windows-Eyes

  • NVDA

  • Microsoft Narrator

The exact level of support to assistive technologies will partially depend on whether that assistive technology is implemented as a UIA client or an MSAA client. This can vary depending on specific version releases of the assistive technology. In general, the UIA architecture is capable of reporting a richer information set to clients than is MSAA. This is because UIA has a larger number of properties available, and also because UIA has the patterns concept to support class extension whereas MSAA does not (class extension is a key concept in Silverlight programming).

Silverlight uses UI Automation support as a general system that addresses parts or entireties of many WCAG criteria at a system/platform level, rather than requiring each Silverlight author to build the entirety of such support as an individually coded feature of a Silverlight application. The following is a list of criteria where UI Automation support in Silverlight is necessary to apply the Silverlight WCAG techniques, and the application must be on a client and platform that also supports UIA (or MSAA):

The following is a list of criteria where UIA Automation support in Silverlight is helpful but not necessary:

Further notes on Name Role Value

Success Criterion 4.1.2 (Name Role Value) directly influenced the design of both the Microsoft UI Automation accessibility framework and its MSAA predecessor. Many aspects of providing name, role and value are built-in to the Silverlight UIA support, and that information can be programmatically determined by assistive technologies that are programmed as UI Automation clients.

Name

In most cases, the name of the control is used to identify that control to users, as well as providing a programmatic identifier. In UI Automation programming, any entity that can have a name is represented as an AutomationElement, and its name is determined by reading the value of the AutomationElementInformation.Name property. There is an intermediate "Current" property, so an example usage is something like:

string AName = anAutomationElement.Current.Name;

Name is the most common UI Automation property that is consumed by assistive technologies. Application authors in general that rely on UI Automation (and Silverlight application authors in particular) typically provide strings for Name that can inform users of the purpose that the element serves in the application. For example, if an application provides a button that can be activated, the Name reported to UI Automation could best describe its purpose by using a Name string something like "Submit form". While there is some crossover here with the concept of Value, what is notable about Name is that it is controlled only by the application rather than typical means of user input that would alter the data of Value.

Because UI Automation is also used as a framework for automation testing of applications, UI Automation supports a parallel identification property named AutomationId. AutomationID is not relevant to accessibility support scenarios, although in practice Name and AutomationID sometimes use the same string values, or are supported by parallel property-forwarding techniques by implementing technologies. The intended design difference between AutomationId and Name is the following:

  • AutomationID is not intended to be human readable, but is intended to be unique

  • Name is intended to be human readable but might not be unique

Silverlight in particular has a property-forwarding technique whereby the Silverlight-specific Name or x:Name properties are promoted as the initial AutomationElementInformation.Name. This forwarding is implemented within build procedures to provide a fallback for testing and initial development of an application's UI Automation representation. In many cases a forwarded Name/x:Name does not result in a particularly human-comprehensible or user-actionable string or phrase. Silverlight application authors should use a test-based methodology to examine all possible AutomationElementInformation.Name values exposed by their application, and assure that each such string is specifically replaced by a UI-specific AutomationProperties.Name value.

Role

Role in UI Automation can be determined through several techniques.

The most straightforward technique for determining a given AutomationElement's role is to check the value of ControlType. This value provides an enumeration that reports role as several known possibilities plus an alternate role of "Custom" if no enumeration-defined role is a good descriptor. For example, a Silverlight Button control describes itself to UI Automation as a ControlType of Button, and a Silverlight TreeView describes itself as Tree.

For further information on roles, UI Automation clients can query an AutomationElement to see which UI Automation patterns that element supports. The patterns describe expectations of the interaction model, and the patterns themselves expose the methods that clients should call to engage that interaction. For more information, see Get Supported UI Automation Control Patterns on MSDN.

Value

In MSAA, the "Value" concept was addressed by the simple property Value and had to be represented as a string. One of the major refinements of UIA over MSAA is to expand what types of data can be expected to exist as a value. For this reason, determining "Value" requires a larger understanding of UI Automation and how to access UI Automation patterns exposed by each peer, and is not discussed further in this document. For more information, see Get Supported UI Automation Patterns and UI Automation Control Patterns for Clients. The most basic concept of Value is often represented by the ValuePattern, but UI Automation clients should be aware of the larger range of patterns that can possibly return or provide a value. In general, the UIA Value pattern is only relevant for setting the value directly, such as in a text box where a user types or otherwise inputs a string or phrase.

State is also a related concept to value. UI Automation elements typically report states that make sense given their role, and such state is reported in the provider implementations. There are also some generalized state properties available in any automation element. Examples of these include: HasKeyboardFocus; IsOffscreen.

Object Tree Concepts and UI Automation Tree Views

The object tree is composed of all the programming constructs that a Silverlight application author explicitly declares by writing XAML UI definitions (which are initially loaded by the Silverlight runtime) and by invoking run-time code. The relationships between nodes in XAML markup, and the declaration order of peer elements in XAML, create identical relationships/orders in the object tree representation. In code, order is made explicitly by using structured definitions and APIs of various types of collections (list, dictionaries, etc.) that are common in .NET Framework programming. For example, to get the first child of a StackPanel named myPanel, call myPanel.Childen[0] (.NET collections are zero-index based). Parent-child relationships are declared by how specific properties are set. For example, to add a "newButton" child element to myPanel as the last child, call myPanel.Children.Add(newButton).

An object tree representation forms the basis of the Silverlight run-time programming model, and enables programmatic access to every programming entity or element part of a running Silverlight application. The object tree representation is particularly useful for accessibility frameworks, and in turn for assistive technologies that use the accessibility framework as a client. The relationships and item order in the object tree also define the default reading order, as well as the default tab sequence for default Silverlight key handling. The Silverlight plug-in code that renders Silverlight content into the plug-in display area is literally reading the same run-time object tree that is being simultaneously reported to the accessibility frameworks or other subsystems of Silverlight (for example, printing APIs).

Silverlight supports UI Automation (UIA) as its primary accessibility framework on Windows platform. Silverlight also provides accessibility information to MSAA, by reporting information through the UIA-MSAA bridge. By using the APIs of the relevant accessibility framework, assistive technologies and other accessibility framework clients can discover the information and relationships declared in a Silverlight application's runtime object tree. The accessibility framework APIs work against the UI automation tree in a manner that does not require any specific knowledge of the Silverlight programming model. For example, the UI Automation APIs use an abstraction of a UIAutomationElement to represent any accessible Silverlight object. By calling UI Automation APIs against this abstracted object, accessibility framework clients can determine any child elements and their count, check parent elements, can obtain name/role/value of that UIAutomationElement, and so on. In fact, Silverlight accessibility support in general is achieved without assistive technologies even being aware that Silverlight is a distinct technology from HTML. This is because Silverlight implements its accessibility framework support such that Silverlight dovetails into the surrounding HTML content through the connection point of the "SilverlightControl" UIAutomationElement that exists within the browser host's HTML content.

For more information, see UI Automation (unmanaged) or UI Automation (managed)

An Object Tree / UI Automation Example

In the following XAML example, a Silverlight StackPanel is the container element for four different Button elements. In the visible user interface, the resulting buttons are oriented vertically, with the first declared button vertically above the others and first in the tab sequence. (Event handling logic for each button is not shown and is not relevant for the example.)

<StackPanel Orientation="Vertical" > <Button>Hit</Button> <Button>Stay</Button> <Button>Split</Button> <Button>Double Down</Button> </StackPanel>

The following image shows the resulting render order. Note the first “Hit” button has the blue border as focus indicator; focus was placed here by traversing the default tab order, and this element was the first Silverlight element that captured the focus.

Image:StackPanelButtonsOrder.png

The following is the same UI as defined in C# code rather than XAML. The key concept here is that each call to a Silverlight collection Add method adds that item to the end of the existing collection. Thus, to define a collection’s order, add the intended first item with the first call to Add, the second item in the next line of code, and so on. This code is analogous to what a XAML parser does when it processes the previous XAML example, and results in the same visible UI and same default tab order.

void MakeUI() { StackPanel sp = new StackPanel() { Width = 300, Orientation = Orientation.Vertical }; Button hitButton = new Button() { Content = "Hit" }; Button stayButton = new Button() { Content = "Stay" }; Button splitButton = new Button() { Content = "Split" }; Button doubleDownButton = new Button() { Content = "DoubleDown" }; sp.Children.Add(hitButton); sp.Children.Add(stayButton); sp.Children.Add(splitButton); sp.Children.Add(doubleDownButton); }

The following is a screenshot of the UI Automation subtree specifically in the area of the UI as declared by either the XAML or C# shown previously. The tool being used in this screenshot is Inspect.exe, which comes with the Windows SDK version 7.1

Image:Screenshot_uia_objecttree.png

The screenshot is representative of the kind of tree structure that a UI Automation client such as a given assistive technology is able to program against, when a Silverlight application exists as an embedded plug-in inside the surrounding browser host.

Input and Multimedia

Silverlight implements UI controls that support keyboard input methods for users who do not use a mouse. Also, Silverlight provides the input system framework such that application authors and control authors can provide similar mouse-keyboard equivalence from their own UI, by using the Silverlight event system and sending each event to the same or similar handling logic. Silverlight application authors can control the tab order of content within Silverlight content, as is demonstrated in the WCAG 2.0 techniques for Silverlight.

Silverlight is often used to display video. Silverlight and the media formats it supports can include embedded text tracks with timing markers. The text tracks and timing markers enable a Silverlight technique that can provide closed captions or subtitles in any language. Silverlight and its media formats also support multiple tracks of audio, thereby enabling support for video description.

Text and Color Preferences

Silverlight supports text resize through browser zoom, as described in G142: Using a technology that has commonly-available user agents that support zoom. The effects of invoking browser zoom apply any resize to the entirely of the hosted HTML (including Silverlight content). Silverlight interaction with browser zoom is further discussed in the Silverlight WCAG technique SL22: Supporting Browser Zoom in Silverlight.

However, not all browser hosts that are supported by Silverlight provide browser zoom as a feature, and in the Firefox implementation the text within the Silverlight content area is not affected if the user has checked Zoom Text Only. As an alternative or additional technique for text resize, the Silverlight WCAG technique SL23: Using A Style Switcher to Increase Font Size of Silverlight Text Elements describes how to use Silverlight APIs to resize text elements that are specifically within the Silverlight content area.

Silverlight supports a high-contrast detection mode at the platform level. If the user has already selected a high-contrast mode at the platform/OS level, the Silverlight application can use various styling and appearance techniques to select a color scheme that is appropriate for high contrast. This concept is shown in the Silverlight WCAG technique SL13: Providing A Style Switcher To Switch To High Contrast. Silverlight and its API do not account for any color settings that are made for default HTML by a browser host application (settings under General / Appearance in Internet Explorer; settings under Content / Fonts & Color in Firefox). This information is not made available to plug-ins such as Silverlight.

User Agents Supported

Silverlight documents its official list of supported user agents on the Microsoft.com web site. The list is dynamic, because the vendors that produce browsers are constantly updating versions. Also, Silverlight might announce support for a browser in a time period that falls after the release date of the latest Silverlight runtime; sometimes this means that the Silverlight product team performed new testing for acceptance of that specific user agent and can now vouch for an official level of Microsoft support.

For convenience, a snapshot of the official Microsoft browser/user agent support matrix from the date 13 January 2011 is reproduced here:

  • Windows Vista: IE 8, IE 7, Firefox 3, Chrome 4

  • Windows 7: IE 8, Firefox 3, Chrome 4

  • Windows Server 2008: IE 8, IE 7, Firefox 3, Chrome 4

  • Windows Server 2008 R2: IE 8, Chrome 4

  • Windows Server 2003, Windows XP SP2, SP3: IE 8, IE 7, IE 6, Firefox 3, Chrome 4

  • Windows 2000 SP4 + KB 891861: IE 6

  • Macintosh OS 10.4.11+ (Intel-based): Firefox 3, Safari 3, Safari 4

For the official list of supported user agents for Silverlight, see http://www.microsoft.com/getsilverlight/get-started/install/default.aspx (System Requirements tab).

  • As of 13 January 2011 Silverlight does not work in 64-bit browser hosts (64-bit platform users should use a 32-bit browser application on their system).

  • Silverlight and Novell have a technical collaboration, and Novell sponsors an open-source initiative known as the Mono Project. Part of the Mono Project is Moonlight, which is a port of Silverlight technology for Linux and other Unix/X11 based operating systems. For more information, see Mono and Moonlight Supported Platforms.

Browser Host Platform Considerations

Depending on the browser host being targeted, Silverlight is implemented as an ActiveX control or as an NPAPI plugin. When a user installs Silverlight, they are installing both of these implementations, such that the same Silverlight installation could be accessed by an Internet Explorer browser host and a Firefox browser host, and could even be accessed simultaneously by both. Differences between the program access layers of ActiveX versus NPAPI, and also browser-specific differences in program access layers, produce some platform differences that occasionally relate to accessibility support. For example, there can be slight differences in whether the program access layer will correctly forward certain keys or key combinations, which might impact keyboard-mouse equivalence implementations.

Silverlight also supports modes that do not rely on a browser host at all. In previous releases of Silverlight, Silverlight was defined as a platform for producing rich Internet applications. This is still true, but in the current Silverlight release the deployment options are expanded such that a Silverlight application is not necessarily a web-based application, and Silverlight is not exclusively a Web content technology.

Silverlight supports an out of browser deployment mode. Through UI in an initial Web-based Silverlight application, the user is asked to conform whether they wish to install the out-browser application. If the user approves the installation, the Web-based Silverlight application shuts down and the installation begins. Typically, the application restarts itself immediately after the installation. Once installed on the user's hard disk, a Silverlight out-of-browser functions more as an application window under the control of the current platform operating system. This is manifested through technical aspects such as a change in programming security boundaries, and addition of operating-system-specific application model features for the Silverlight out-of-browser application. Examples of the latter include icons and presence in running-application UI metaphors such as task bars. Out-of-browser mode is not specifically mentioned in the Silverlight WCAG techniques, because in this mode Silverlight is no longer a Web application. However, an out-of-browser Silverlight application can include an embedded control that is itself capable of displaying HTML. In this situation, Silverlight accesses basic HTML browser frameworks provided by the platform, and any techniques that would normally apply to HTML content and Web content could also apply to the HTML as viewed within a Silverlight out-of-browser application. For more information, see MSDN.

Silverlight is also a development platform that can be used to create applications for Windows Phone. While these applications often rely on Internet connectivity, these applications are run in the context of an application directly under the Windows Phone operating system, rather than being run in an intermediate Web host that serves as a generalized Web browser for Windows Phone. Therefore the typical considerations of Silverlight acting as a part of a larger definition of Web content do not apply. For more information on Silverlight for Windows Phone development, see The Silverlight and XNA Frameworks for Windows Phone on MSDN.

The XAML Language

XAML is an abbreviation for eXtensible Application Markup Language. In the Silverlight application model, XAML is generally used for defining the elements that make up an application's user interface (UI). XAML markup for UI resembles markup paradigms for HTML in that it uses angle brackets in its syntax, has concepts of elements and attributes, and uses a predominately text-based file editing and storage format such that XAML is human-readable in a text editor. The UI design role typically designs an application user interface by interacting with graphical user interface tools such as Microsoft Expression Blend. In this case, Expression Blend produces XAML as its output, and XAML becomes the interchange format between the Expression Blend tool and the Visual Studio tools. Visual Studio is more typically used by code-oriented Web developers for Silverlight. Web developers in Visual Studio might work with XAML at the text level, and write or change the XAML markup, and more than one interchange between tools and/or roles of a given XAML file might occur by the time the application is finished. The Silverlight techniques are written from the perspective of the code-oriented Web developer who is possibly adjusting post-design phase XAML.

One key difference between HTML and XAML is that XAML is always interpreted by the Silverlight runtime, or preparsed at compile time within Silverlight tools. XAML is NOT parsed by potentially different engines per browser host. Because XAML provides UI definition, the Silverlight techniques often include procedures or concepts that adjust the elements and attributes of XAML markup for an application. Some of the techniques show procedures or concepts for code-behind, scripting, deployment steps, or other aspects of Silverlight programming in addition to or instead of XAML examples. The runtime parsing characteristics of XAML for Silverlight is discussed further in the Silverlight WCAG technique SL33: Using Well-Formed XAML to Define a Silverlight User Interface.

XAML attributes sometimes specify strings that are visible in UI and reported to assistive technologies. The Silverlight WCAG techniques typically hard-code such UI strings in XAML, so that the example code can be kept simple and can concentrate on the immediate concept being illustrated. However, hard-coding UI strings in XAML is not a best practice for production code, because of localizion considerations. To learn more about producing XAML that is localization-ready, or about refactoring XAML to support better designer-coder-localizer workflows, see Localizing Silverlight-based Applications on MSDN.

Test-based Methodology for Accessibility Support

Some of the Silverlight WCAG techniques mention a concept of "test-based methodology" - this section describes what is meant by that concept.

In typical Web application development, there are phases that are a natural part of the workflow. First there is a specification phase, where the basic planning is performed. The next two phases are user interface design (often interweaved with user experience design) and code development. For larger applications or applications that are built on frameworks, the human role of designer is often separate from the human role of code developer/script developer. For this reason the UI design phase and code phase might be going on concurrently, and/or might be iterative. At the point where the efforts of UI design and code development are combined into a working application, many Web developers now introduce a testing phase. It is at this point that a test-based methodology for accessibility support becomes an appropriate and useful strategy.

Testers for Web applications sometimes rely largely on ad hoc or experiential tests, but increasingly there are tools available that assist with the job of testing a Web site. Many of these tools focus on specific aspects of testing: sub-areas such as testing under specific browser hosts; testing with stored state or data vs. initial experience; testing for different form factors; etc. One such sub-area of testing is testing the existing accessibility support.

Because Silverlight supports the UI Automation accessibility framework, the best tools for testing accessibility support in a Silverlight application are the tools that work with UI Automation as their basis. Some of these tools are available from Microsoft, and other such tools are available from third parties.

In a test-based methodology, a tester should view the application in its UIA representation. Using tools, testers can write tests for certain conditions and determine whether the application as a whole passes or fails. For example, a scripted test could determine whether all the controls in a UIA view have a valid string for Name. No Name string would potentially cause an assistive technology to misrepresent that element, and could cause confusion for user groups that rely on a particular assistive technology view of an application. In cases where an application failed these kinds of tests, the application might be sent back to the human role of developer/script writer, so that the missing accessibility information can be committed to the application code base. Then the application can be re-tested.

A test-based methodology for accessibility support works best because Silverlight is such an extensive development platform. Sometimes it is not immediately obvious to a developer that a certain property required for accessibility remained unset. Or perhaps that developer was expecting that the human design role would have introduced that information as part of UI definition. Only when the integration of UI design and code is complete is it possible to see that there is still information or functionality missing. When the development process includes a testing step wherein dedicated tests for accessibility support are committed in a systematic way, it is much more likely that issues can be detected prior to application deployment.

Running Silverlight Test Files Provided with Techniques

Most Silverlight WCAG Techniques reference one or more ZIP files from the Test Files section of the technique. These ZIP files are linked from the techniques and can be uploaded for testing.

To run the test files, you must have Microsoft Silverlight (the client run-time version) installed on your computer. To install Microsoft Silverlight, open the following URL: http://www.microsoft.com/getsilverlight/ . Follow the instruction steps on the Web page. When you install Silverlight, you are installing the plug-in for use by all supported browser user agents on that computer. In order to test techniques that rely on UIA, you should install Silverlight on a computer that is running Microsoft Windows (XP SP2; Vista; Windows 7) as the operating system. Note that you must be running as adminstrator in order to install Microsoft Silverlight on the computer.

Each ZIP file contains two items: an HTML file, and a Silverlight package file (always has a file extension of XAP). You can run any given test file through the following procedure:

  1. Click the link from the technique to download the ZIP file.

  2. Extract all files within the ZIP file to a temporary location, but use a tangible location such as C:\temp rather than temporary Internet files. Do not attempt to open the HTML file from within the unextracted archive; the test will only run correctly when the test components are extracted from ZIP.

  3. Go to the folder location where you extracted the files. To run the test based on the current system's file associations for HTML, open the HTML with the associated browser. Otherwise, you must open the specific browser you want to test under, and type or copy either a file:/// URL or a Windows folder path into that browser's address bar.

  4. This should open the HTML page. When the HTML page opens, it instantiates a Silverlight plug-in within the page content, which in turn references the other extracted file (the XAP) as local content.

  5. Once the content is in view, follow the remaining steps that are indicated in the specific test procedure.

Using Sample Code in Techniques to Create a New Silverlight Application

The Silverlight techniques offer pre-built test files so that you can observe the basic operation of a technique without having to write the code yourself, or create your own application. The salient parts of Silverlight code or Silverlight XAML for the technique are provided as code blocks under the Examples section. In order to experiment more with the technique beyond running the test file, you might want to define your own Silverlight application project, and then import the code and XAML from the technique into your own project. This section describes the basic information that is necessary to create a project that incorporates sample code from a Silverlight technique.

Prerequisites

Creating a Silverlight application project requires that you have a full Silverlight application development environment installed. Although Silverlight applications run cross-platform, the actual development of Silverlight applications is done on Microsoft Windows computers. The computer must have Microsoft Visual Studio 2008 or Microsoft Visual Studio 2010 installed. With some limitations, the Express SKUs of Visual Studio are adequate for basic Silverlight application development. The Express SKUs are available for 30-day evaluation from the following URL: http://go.microsoft.com/fwlink/?LinkId=323467 . In addition to Visual Studio, you also should install the Silverlight Tools, which includes the Silverlight SDK. Get Silverlight Tools from http://go.microsoft.com/fwlink/?LinkID=177428. What to install for Silverlight development is also linked to and explained at Silverlight.net.

Creating the Project

For general instructions, see How to: Create a New Silverlight Project. This creates a new project based on a default template.

The C# code or XAML shown in the Silverlight techniques is a usually a fragment that you should integrate into an existing code file or XAML page from the default project template. For code, you generally open the file page.xaml.cs from Solution Explorer, and paste the entirety of the example code into the body of the C# public partial class that you start with (this class comes from a template). For XAML, you generally open page.xaml from Solution Explorer and paste the entirety of the XAML into the <Grid> element. In some cases the example XAML is the entire XAML (you can identify this case if the example XAML contains one or more xmlns attributes). In this case, replace the entirety of the XAML. However, you may have to adjust the value of the x:Class attribute to properly reference your own partial class; this name is influenced by your own project naming in your local project and thus cannot be anticipated by the example code. Descibing Silverlight application development in its entirety is well beyond the scope of this document. Use resources available from Silverlight.net or MSDN Silverlight documentation to learn more about Silverlight application development.

Special Considerations for WCAG 2.0 Compliance

2.4.2 Page Titled - In order to meet 2.4.2, Silverlight content must be embedded within an HTML page that has a page title in the HTML title element.

3.1.1 Language of Page - The language of an HTML page is established by the Lang attribute of the containing object element in HTML. However, Silverlight's own logic generally interprets language/culture information using a Microsoft .NET Framework concept of the CultureInfo object. This makes it important to align the HTML-level lang with any CultureInfo as used by Silverlight. The reason for this is that assistive technologies are likely to respect the top-level declaration of the Lang attribute and to not be aware of the CultureInfo considerations of embedded Silverlight content. Application authors can delibrately override language settings of a client by specifying a discrete CultureInfo in the Silverlight <object> parameters; this can be useful if the application has real-time language switching, if users store language preferences either locally or based on server information or cookies, etc. Aligning html-lang with CultureInfo and adjusting the CultureInfo through various means are both discussed in Silverlight techniques.


SL1: Accessing Alternate Audio Tracks in Silverlight Media

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL1. Also see Silverlight Technology Notes.

Description

The objective of this technique is to show how to access an alternate audio channel in a prepared media file that is played in a Silverlight MediaElement.

Silverlight supports media file formats that contains additional audio channels in synchronization, beyond the two tracks for stereo audio that are used by typical media player defaults. Silverlight provides a dedicated AudioStreamIndex API on MediaElement, so that the Silverlight application author can use Silverlight programming techniques to select which audio channel to play for the user. Silverlight control authors might label a UI control with text such as "Activate this button to listen to an audio-only version of the media presentation" so that the purpose of the media element control interface is clear to the user. That way the same media control can be used to present the media either as audio-video or as audio-only with alternate track depending on user preference at run time.

The media formats that are supported by Silverlight are documented on MSDN.

Media encoding

The process of encoding the media with additional audio channels is not described in this technique because configuring and encoding audio channels for media formats is a technique for any usage of media in a computer application, not just a Silverlight-specific technique or a Web technology technique. For more information on one possible procedure for encoding the media in WMV format, see Microsoft Expression Encoder Overview. Often, Silverlight authors will receive the media from a third party, such as a video production facility, and are not directly involved with the encoding process. Silverlight authors should verify that the media they are using has alternate audio tracks encoded in it. If such tracks exist, Silverlight authors will need a track listing from the media producer to know which of the audio tracks is intended as the alternate audio. Other tracks might exist in the encoded media that provide language translations of the default audio, or that serve other purposes.

Examples

Example 1: Changing AudioStreamIndex

This example has a UI definition in XAML and interaction logic in C#. In addition to the typical Play/Pause/Stop controls, this interface includes a Play Full-Description Audio button. Activating the button invokes a function that swaps the audio channels and plays an alternative synchronized audio channel that contains a composite full-description audio track.

The following is the basic UI in XAML. This example is deliberately simple and does not include AutomationProperties. Audio streams are identified by an index in a collection.

      <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="20" />
        </Grid.RowDefinitions>
        <MediaElement x:Name="media" Source="/combined.wmv"
           Width="300" Height="300" 
           Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3"
           AutoPlay="false"
        />
        <Button Click="StopMedia" 
     Grid.Column="0" Grid.Row="1" Content="Stop" />
        <Button Click="PauseMedia" 
     Grid.Column="1" Grid.Row="1" Content="Pause" />
        <Button Click="PlayMedia" 
     Grid.Column="2" Grid.Row="1" Content="Play" />
        <Button Name="AltAudioBtn" Grid.Row="2" HorizontalAlignment="Left" Grid.ColumnSpan="2" 
        Click="AltAudioBtn_Click">Play Full-Description Audio</Button>
    </Grid>

The following is the C# logic.

        private void AltAudioBtn_Click(object sender, RoutedEventArgs e)
        {
            if (media.AudioStreamCount > 1)
            {
                if (media.AudioStreamIndex == 1)
                {
                    media.AudioStreamIndex = 0;
                    (sender as Button).Content = "Play full-description audio";
                } else {
                    media.AudioStreamIndex = 1;
                   (sender as Button).Content = "Play default audio";
                }
            }
            else
            {
                (sender as Control).IsEnabled = false;
            }
        }
        private void StopMedia(object sender, RoutedEventArgs e)
        {
            media.Stop();
        }
        private void PauseMedia(object sender, RoutedEventArgs e)
        {
            media.Pause();
        }
        private void PlayMedia(object sender, RoutedEventArgs e)
        {
            media.Play();
        }

This example is shown in operation in the working example of Alternative Audio Channel. If using the test file, the test contains test audio tones rather than actual audio description, but the pitch of the tones is indicative of which of the channels is selected and played.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Open the HTML page for a Silverlight application, where that application plays media and the media is expected to support an alternate audio track for the video.

  2. Verify that the application user interface presents a control that enables the user to cause the media to play with an alternate audio track.

  3. Activate that control. Verify that the audio portion of the media player output as played through the computer's audio system is now playing the alternate audio track.

Expected Results

#2 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL2: Changing The Visual Focus Indicator in Silverlight

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL2. Also see Silverlight Technology Notes.

Description

The objective of this technique is to use the Silverlight "control skinning" scenario and feature set to change the visible focus indication of a control. In particular, the intent is to increase the visibility of focus indication versus the appearance of a default-styled control. This technique is useful both for the control sets that are included in the Silverlight run time or SDK assemblies, as well as for Toolkit or any third party distributed control.

The default Silverlight core controls all indicate some type of visible focus indication, through their default templates. However, Silverlight application authors can still use the skinning techniques to augment or replace the visible focus indications for controls as used in their applications. For more information on how Silverlight controls will generally supply a default visual focus indicator, see Focus Overview on MSDN.

Silverlight control skinning is enabled through a deliberate separation of UI and logic in the Silverlight control model. Appearance of a control is largely written in XAML. The logic is largely written in code (for example C#) and is left unaffected when a Silverlight application author provides a new control template "skin". The hooks that connect the appearance and the logic are a Style property of the control (which the author changes the value of, to refer to their new XAML resource) and a contract of expected named entities in the XAML. The control logic invokes the names of the entities/parts whenever control state changes, and the expectation is that the named part provides the necessary appearance as defined in XAML. Design tools such as Visual Studio or Expression Blend generate copies of the default templates and parts, such that Silverlight authors can modify the parts that they want to change the appearance of, and still preserve the remainder of default appearance and behavior of the control.

For the visible focus indicator technique, the author typically modifies a single visual element that renders in layout as an overlay on top of the control when it is focused, and switches the overlay to nonvisible when the control is not focused. This element is a named element that is typically referred to from within the XAML named state Focused, which in turn is hooked up to changes in the visual state.

Note that this technique assumes that the original control author provided the necessary logic event hookup, and exposed a named state associated with keyboard focus to work with. If this is not the case, or if the scenario is that a Silverlight author is defining their own control, a different technique is needed. See SL7: Designing a Focused Visual State for Custom Silverlight Controls.

Focus in Silverlight

Focus in Silverlight is equivalent to the larger user interface and application concept of keyboard focus. The element that has focus is the element within the Silverlight object tree and programming model that has first chance to process the Silverlight key events. As a more tangible example that is user-centric, if a TextBox has keyboard focus, then when the user presses keys on the keyboard, the characters associated with the user's pressed keys will appear in the TextBox. A user interface element in Silverlight can obtain keyboard focus in one of three ways:

  1. The user uses the Silverlight tab sequence to traverse into the Silverlight content and to focus a specific control.

  2. The Silverlight application's logic calls the Focus method programmatically to force focus to a control.

  3. The user performs some other action, for example uses the mouse to click on a control. That control's specific logic handles the Silverlight input event and uses that event as stimulus to call Focus on that control. The difference between this case and the above case is that the behavior is typically built-in to that control's runtime behavior, and does not require each application author to call Focus in application code.

Examples

Example 1: Two Button elements, one reskinned to provide new visible focus indicator

XAML templates can be verbose; for clarity, only the parts of the template that were changed or useful for showing the structure are shown. Omitted portions are shown as ellipsis (...).

<UserControl x:Class="VisibleFocusTemplate.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
 <UserControl.Resources>
   <Style x:Key="StrongFocusIndicator" TargetType="Button">
...
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="Button">
...
             <VisualStateManager.VisualStateGroups>
               <VisualStateGroup x:Name="FocusStates">
                 <VisualState x:Name="Focused">
                   <Storyboard>
                     <DoubleAnimation Duration="0" To="1"
 Storyboard.TargetProperty="Opacity"
 Storyboard.TargetName="FocusVisualElement"/>
                     <DoubleAnimation Duration="0" To="0.5"
 Storyboard.TargetProperty="(UIElement.Opacity)"
 Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                   </Storyboard>
                 </VisualState>
                 <VisualState x:Name="Unfocused"/>
               </VisualStateGroup>
             </VisualStateManager.VisualStateGroups>
...
             <Border x:Name="FocusVisualElement"
 IsHitTestVisible="false" Opacity="0"
 CornerRadius="2" BorderBrush="#D0FF0000"
 BorderThickness="4">
               <Rectangle x:Name="rectangle"
 IsHitTestVisible="false" Margin="2"
 Opacity="0" RadiusY="2" RadiusX="2"
 Fill="#A0FF0000"/>
             </Border>
          </ControlTemplate>
       </Setter.Value>
     </Setter>
   </Style>
 </UserControl.Resources>
 <StackPanel x:Name="LayoutRoot">
   <Button Width="275">Default button</Button>
   <Button Width="275"
 Style="{StaticResource StrongFocusIndicator}"
 >Button with re-templated focus visible indicator</Button>
 </StackPanel>
</UserControl>

The most interesting aspect of this example is the change made to the FocusVisualElement part. Here is the original (default template) FocusVisualElement:

<Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" 
 Opacity="0" IsHitTestVisible="false" />

Here is the changed FocusVisualElement:

<Border x:Name="FocusVisualElement" IsHitTestVisible="false"
 Opacity="0" CornerRadius="2"
 BorderBrush="#D0FF0000" BorderThickness="4">
 <Rectangle x:Name="rectangle" IsHitTestVisible="false"
 Margin="2" Opacity="0"
 RadiusY="2" RadiusX="2" Fill="#A0FF0000"/>
</Border>

The following images show how each of the two buttons (default and reskinned) appear when focused.

Default button focus

Reskinned button focus

This example is shown in operation in the working example of Visible Focus Template.

Resources

Tests

Procedure

Note that not all Silverlight applications necessarily will start with the keyboard focus being somewhere within the Silverlight content area for purpose of Step #2. It may be necessary to press TAB several times to traverse the browser's framing user interface. Also, within the browser's display area that displays the HTML document, there might also be other HTML elements that are keyboard focusable, which are representative of HTML that falls lexically before the <object> tag that instantiates the Silverlight plug-in. So it may also be necessary to press TAB several times until these HTML elements are traversed.

  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Using a keyboard, tab to the element where focus characteristics are being examined.

  3. Check that the background, border, or other noticable visual indicator of the element changes color.

  4. Check that the changes in color for the background, border, or other noticable visual indicator are removed when the element loses focus.

Expected Results

#3 and #4 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL3: Controlling Silverlight MediaElement Audio Volume

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL3. Also see Silverlight Technology Notes.

Description

The objective of this technique is to adjust the volume for media that is played in Silverlight applications, as implemented through incorporating the Silverlight MediaElement object. By default, a MediaElement will start playing its media as soon as the UI loads completely AND the media source file is downloaded. For details, see SL24: Using AutoPlay to Keep Silverlight Media from Playing Automatically.

At any given time, a Silverlight MediaElement is associated with exactly one media source as specified by the Source property URI value. That source might be audio-only, or audio-video. The Volume property of MediaElement affects the audio playback volume of that particular source when it is playing. The Silverlight plug-in does not have a user option that adjusts the volume of ALL Silverlight applications as run within it, or a standardized user interface that is always present for all uses of MediaElement. Therefore it is the responsibility of Silverlight application authors to provide an adequate set of user interface controls, including volume adjustment, whenever the Silverlight application plays media that has an audio component.

Examples

Example 1: Providing a volume control and a Mute control as part of a set of user interface controls that go with a MediaElement

In addition to the Play Pause Stop controls, application authors can also provide a dedicated control that changes the Volume property of the MediaElement. The typical control for setting a discrete volume is Slider, because Slider is designed for input of discrete values from a range. Adjusting Volume with a data bound Slider changes the volume of any actively playing media, independent of the system volume or of any other audio source controlled by Silverlight. For Volume as set with the Slider, the Binding in XAML declares the interaction between the control and the MediaElement, without requiring an event handler. However, not all users will be able to interact quickly with a Slider, particularly if they are not using a mouse. To help these users, application authors should also include a "Mute" control. Rather than setting Volume to 0, application authors should instead set IsMuted to true. Note that Volume and IsMuted values are not directly related; if IsMuted is set to true, that does not set Volume to 0, nor does setting Volume to zero cause IsMuted to be set true.

<UserControl x:Class="MediaElementControls.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >
   <Grid x:Name="LayoutRoot">
       <StackPanel>
           <MediaElement x:Name="media" Source="/xbox.wmv"
          Width="300" Height="300" 
          AutomationProperties.Name="Video of new Fable game for XBox"           
       />
           <Grid Name="UIControls">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
               <Grid.RowDefinitions>
                   <RowDefinition Height="*" />
                   <RowDefinition Height="Auto" />
                   <RowDefinition Height="20" />
               </Grid.RowDefinitions>
               <Button Click="StopMedia" 
    Grid.Column="0" Grid.Row="1" Content="Stop" />
               <Button Click="PauseMedia" 
    Grid.Column="1" Grid.Row="1" Content="Pause" />
               <Button Click="PlayMedia" 
    Grid.Column="2" Grid.Row="1" Content="Play" />
               <Button Click="MuteMedia" 
   Grid.Row="2" Grid.Column="0" Content="Mute" />
               <TextBlock Name="VolumeLabel" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right">Volume</TextBlock>
               <Slider Height="20"
           Value="{Binding Volume, Mode=TwoWay, ElementName=media}"
           Minimum="0" Maximum="1"
           Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"
               AutomationProperties.LabeledBy="{Binding ElementName=VolumeLabel}"/>
           </Grid>
       </StackPanel>
   </Grid>
</UserControl>

The following is the C# logic.

 private void StopMedia(object sender, RoutedEventArgs e)
 {
     media.Stop();
 }
 private void PauseMedia(object sender, RoutedEventArgs e)
 {
     media.Pause();
 }
 private void PlayMedia(object sender, RoutedEventArgs e)
 {
     media.Play();
 }
 private void MuteMedia(object sender, RoutedEventArgs e)
 {
    Button target = sender as Button;
    // mute if not muted, unmute if already muted, in either case make sure the button content for text and accessibility info is updated
    if (!media.IsMuted)
    {
       media.IsMuted = true;
       target.Content = "Unmute";
    }
    else
    {
        media.IsMuted = false;
        target.Content = "Mute";
    }
 }

This example is shown in operation in the working example of Media Element Controls.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. It is expected that the application incorporates a MediaElement.

  2. Check that a control is available for controlling volume and that the Volume control controls the volume of the playing media, independently from system volume.

  3. Check that control is available for muting, and that the Mute control mutes the volume of the playing media, independently from system volume.

Expected Results

#2 OR #3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL4: Declaring Discrete Silverlight Objects to Specify Language Parts in the HTML DOM

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL4. Also see Silverlight Technology Notes.

Description

The objective of this technique is use the HTML Lang attribute on the object tag to describe each Silverlight plug-in instance on the HTML hosting page as a "part" that has a different language. Assistive technologies that use HTML Lang as a determinant of language of parts can thus treat all Silverlight content as using that HTML Lang-declared language.

Most assistive technologies that are capable of determining Language for Web content will use the HTML Lang tag value as the determinant of the language of the page. Assistive technologies would also use HTML Lang tag values for the language of parts. HTML Lang is not specifically reported in accessibility frameworks. Assistive technologies would typically access the HTML DOM to get this information. This technique specifically addresses this known situation regarding how ATs obtain Language information from HTML rather than from accessibility frameworks that otherwise report other aspects of HTML content.

In order to support different language parts that each contain Silverlight content, authors declare one Silverlight object tag per continuous language part region in the HTML. For example, the following HTML is a simplication of HTML markup for a page that contains two Silverlight content areas, the first declaring Lang as English (en), the second declaring Lang as German (de):

     <body>
       <object type="application/x-silverlight-2" lang="en">
       </object>
       <object type="application/x-silverlight-2" lang="de">
       </object>
     </body>
     

To support communication between different Silverlight plug-in instances that are hosted on the same HTML page, application authors can use various techniques, including the following

  • System.Windows.Messaging APIs: this is the simplest technique, and this is shown in Example 1

  • Using a shared business object, and exchanging information by having each Silverlight instance reference two-way data binding to that business object's properties.

  • Exchanging information through the HTML DOM and declaring properties of one or both instances as Scriptable by the DOM.

Silverlight runtime language determination

Regardless of how HTML Lang is declared on the defining object tags, many aspects of how Silverlight works with language and culture information at run time are not determined by HTML Lang, and are instead determined by the operating system and which culture that operating system is running. For more information, see Understanding Language/Culture Properties as Used by Silverlight Applications and Assistive Technologies.

Examples

Example 1: Two Silverlight object tags, each with different HTML Lang, to support a simple language-translator application as a Web page

The Visual Studio solution for this example has a total of 4 project components:

  • The Web project that declares the HTML or ASP page that shows the framework of how the two Silverlight object tags exist on a page. This is where the HTML Lang is actually set.

  • A project for the English user control, a simple TextBox.

  • A project for a German user control, also a simple TextBox.

  • A library with a static translation function

In this example, the English user control implements a LocalMessageSender, which sends asynchronous messages to the German user control. The German user control has a LocalMessageReceiver, which is set to listen as soon as the control is instantiated. When a message is received, the German control calls a function of the translation library, and displays translated text.

The following is the HTML page (some infrastructure and parameters omitted for clarity):

<html xmlns="http://www.w3.org/1999/xhtml" >
<body>

    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="25px" lang="en">
      <param name="source" value="ClientBin/SilverFish.xap"/>
    </object>

    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="25px" lang="de">
      <param name="source" value="ClientBin/SilverFish_DE.xap"/>
    </object>

</body>
</html>

The following is the XAML for the English user control:

<UserControl x:Class="SilverFish.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="20" 
>
   <Grid x:Name="LayoutRoot" Background="White">
       <TextBox AcceptsReturn="False" Language="en-us"
       Name="EnglishTranslationBox" 
       LostFocus="EnglishTranslationBox_LostFocus"/>
   </Grid>
</UserControl>

The following is the code-behind for the English user control:

   public partial class MainPage : UserControl
   {
       private LocalMessageSender messagesender;
       public MainPage()
       {
           InitializeComponent();
       }
       private void EnglishTranslationBox_LostFocus(object sender, RoutedEventArgs e)
       {
           messagesender = new LocalMessageSender("receiver");
           messagesender.SendAsync((sender as TextBox).Text);
       }
   }
   

The following is the code-behind for the German user control (the XAML is minimal; the main relevant point is that it contains a TextBox target named GermanTranslationBox). The code invokes the translation function found in a separate library. The translation function is not shown, it simply takes an English string and returns a German translation.

   public partial class MainPage : UserControl
   {
       public MainPage()
       {
           InitializeComponent();
           LocalMessageReceiver lmr = new LocalMessageReceiver("receiver");
           lmr.MessageReceived += new EventHandler<MessageReceivedEventArgs>(lmr_MessageReceived);
           try
           {
               lmr.Listen();
           }
           catch (ListenFailedException) {}
       }
       void lmr_MessageReceived(object sender, MessageReceivedEventArgs e)
       {
           if (e.Message!="") {
               String translated;
               translated = Translator.TranslateThat(e.Message);
               GermanTranslationBox.Text = translated;
               GermanTranslationBox.Focus();
           }
       }
   }

This example is shown in operation in the working example of SilverFish.

Resources

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references multiple Silverlight object tags, each with different HTML Lang values.

  2. Verify that language settings through HTML Lang on object tags are respected by assistive technologies that can use HTML Lang values for language of parts determination.

Expected Results

#2 gives expected results.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL5: Defining a Focusable Image Class for Silverlight

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL5. Also see Silverlight Technology Notes.

Description

The objective of this technique is to wrap the Silverlight Image class inside a UI container class that is focusable. If the image is focusable, users who use the TAB sequence to navigate content while the assistive technology is active, and/or assistive technologies that construct navigation structures that are based on the TAB sequence, can both detect the image in navigation. The assistive technology can then associate alternative text for that image within the navigation structure, and report the information to the user.

Many existing assistive technologies do not construct initial navigation views that are derived from UI Automation information if it is coming from a non-focusable element in a Silverlight user interface. This is particularly true if the assistive technology is in a navigation mode that is specifically intended to help users enter information into a form or similar interactive interface element; an example of this situation is the Forms Mode of the JAWS screen reader.

Image is an example of a Silverlight element that is not focusable. This technique and the example therein are intended to circumvent the possible omission of a nonfocusable Silverlight Image element from certain navigation views in existing assistive technology implementations. The Silverlight Image is wrapped with a display/viewer control class that is focusable. This image-wrapping control is initially presented in assistive technology representations of a Silverlight user interface that use only focusable elements when constructing the assistive technology's representation of the application.

The image wrapper class uses the AutomationProperties.Name property to provide a short text alternative for the contained Image, so that the alternative text can be read or otherwise presented by assistive technologies. The Silverlight API AutomationProperties.Name directly sets Name in the UI Automation tree. The properties in the UI Automation tree are reported to assistive technologies, when the assistive technology implements behavior that acts as a UI Automation client. Name is one of the accessibility framework properties that most assistive technologies present in some way, for purposes of both name and value information, and setting Name is the common technique for exposing text alternatives for any other Control class (for example, for a button with an image, as shown in the technique SL18: Providing Text Equivalent for Nontext Silverlight Controls With AutomationProperties.Name).

This technique is intended for cases where application authors deliberately do not want a visible image caption for the image to be part of the user interface, and the image is a part of a larger interactive user interface control or page. Otherwise, if there is a visible caption, authors can use SL26: Using LabeledBy to Associate Labels and Targets in Silverlight.

Examples

The two examples are intended to be used together, if an application is both defining and consuming the focusable image control.

Example 1: Defining the FocusableImage XAML template and C# code behavior

Silverlight supports a control development model whereby the visual appearance of a control is largely defined in XAML, and the behavior of a control (such as its event handling and hookups to services) are implemented in a managed code language such as C#. The following is the XAML template, which includes a visual state that shows visually when the control is focused in UI.

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ImageEquivalent">
 <Style TargetType="local:FocusableImage">
   <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="local:FocusableImage">
        <Grid>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FocusStates">
              <VisualState x:Name="Focused">
                <Storyboard>
                  <ColorAnimation  
 Storyboard.TargetName="focusborder"
 Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
 Duration="0" To="Blue"/>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Unfocused"/>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Border
            x:Name="focusborder"
            BorderThickness="4"
            BorderBrush="Transparent">
            <Image
             Margin="2" Opacity="10"
             Source="{TemplateBinding Source}"/>
         </Border>
       </Grid>
    </ControlTemplate>
    </Setter.Value>
   </Setter>
 </Style>
</ResourceDictionary>

The following is the C# class definition and logic. The logic includes invoking a default automation peer on creation, and loading the template as defined in the previous XAML example through the Silverlight "generic.xaml" resource convention for custom controls.

namespace ImageEquivalent
{
   public class FocusableImage : Control
   {
       protected override System.Windows.Automation.Peers.AutomationPeer OnCreateAutomationPeer()
       {
           return new FrameworkElementAutomationPeer(this);
       }
       public FocusableImage()
       {
           this.DefaultStyleKey = typeof(FocusableImage);
       }
       public ImageSource Source
       {
           get { return (ImageSource)this.GetValue(SourceProperty); }
           set { this.SetValue(SourceProperty,value); }
       }
       public static DependencyProperty SourceProperty = DependencyProperty.Register(
         "Source",
         typeof(ImageSource),
         typeof(FocusableImage),
         null);
       Boolean _Focused;
       void ChangeState()
       {
           if (_Focused)
           {
               VisualStateManager.GoToState(this,"Focused",false);
           }
           else
           {
               VisualStateManager.GoToState(this,"Unfocused",false);
           }
       }
       protected override void OnGotFocus(RoutedEventArgs e)
       {
           base.OnGotFocus(e);
           this._Focused = true;
           ChangeState();
       }
       protected override void OnLostFocus(RoutedEventArgs e)
       {
           base.OnGotFocus(e);
           this._Focused = false;
           ChangeState();
       }
   }
}

This example is shown in operation in the working example of Focusable Image.

Example 2: Using the FocusableImage class in UI and applying AutomationProperties.Name

Now that the image is wrapped by a focusable control, you can instantiate an instance of the wrapper UI inside a Silverlight layout container, specify AutomationProperties.Name at the level of the wrapper control’s tag, and have that text serve as the alternative text for the referenced source image file.

   <StackPanel
   xmlns:local="clr-namespace:ImageEquivalent;assembly=FocusableImage"
   >
   <local:FocusableImage
     Height="300" Width="400
     AutomationProperties.Name="Diagram of secret lair"
     Source="/diagram_lair.png" />
   </StackPanel>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Automation Tree
Procedure
  1. Open the test HTML page in a Silverlight-supported useragent host; to use UI Automation, use Microsoft Windows as platform.

  2. Use the tab sequence inside the Silverlight content area to focus the control.

  3. Using an accessibility framework verification tool, check that the string content is promoted as the default Name applied to the control.

Note: Accessibility framework verification tools typically show the entirety of an automation tree for a given application, and in fact will show the tree for all applications running on the Windows client machine. Focusing the control as in #2 is thus not strictly speaking necessary. However, manually focusing using the application interface is often a faster way to step into the automation tree as opposed to having to open an extensive series of nested nodes starting from the browser host application root. Whether this functionality exists depends on which accessibility framework verification tool is being used for testing.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

Tests

Screen Reader
Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. To use UI Automation, use Microsoft Windows as platform.

  2. Engage the screen reader. Move focus to the control (for example, use the tab sequence).

  3. Check that the Name applied to the image is read by the screen reader.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL6: Defining a UI Automation Peer for a Custom Silverlight Control

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL6. Also see Silverlight Technology Notes.

Description

The objective of this technique is to create an AutomationPeer class for a custom Silverlight control. The AutomationPeer exposes accessibility properties of the control in a way that abstracts the Silverlight technology specifics of the control model and maps information to UI Automation concepts, so that these properties can be consumed by the UI Automation accessibility framework.

The AutomationPeer concept is part of the overall architecture design of the UI Automation system. The peer represents a deliberate abstraction of the control, such that a client can obtain pattern-based information about the specific purpose and capability of a control without knowing its implementation-specific object model or having to resort to using a framework-specific object model API. Also, the peers run in a different process than the controls they represent, which has performance and security advantages. For more information on UI Automation architecture, see UI Automation Overview on MSDN.

Creating a custom Silverlight control is one way that Silverlight application authors can create user interface components either for their own application, or as a packaged redistributable that provides the control UI for third parties. Creating an automation peer for a custom control reports control-specific information to the UI Automation accessibility framework, and enables a custom control to participate in all of the same techniques involving UI Automation that can be used for a control that is distributed in the core Silverlight run time. Assistive technologies can use the UI Automation accessibility framework to discover the name and role of the user interface component, and can get and set values by accessing UI Automation patterns. UI Automation thus supports extensibility, while maintaining a discovery system for names, roles and values of UI components.

Control authors associate a peer with a class by implementing a method override for the class implementation. Control authors declare name and role through properties that are general to any UI Automation peer. Control authors expose the means to get and set values by choosing to support one or more patterns that are usually associated with a role. For example, a control in the role of "Button" would typically support an "Invoke" pattern. A consumer of UI Automation could check whether the pattern was supported and then call the pattern-based method Invoke, which would activate the button without any device input events being produced or required.

By convention, controls and their automation peers share a naming pattern. For example, if a control is named Spinner, its automation peer is named SpinnerPeer. However, the actual wiring for the class-peer association is made in the control code by overriding OnCreateAutomationPeer. Thus it is necessary to have access to the control code in order to associate a new peer class implementation with that control.

In addition to properties, automation peers can also expose methods as part of the implemented UI Automation control pattern. For example, a peer implementing the Value pattern can provide an implementation of the SetValue method. The SetValue method can be called by a UI Automation client in order to programmatically set the value of the owner control. The functionality exposed by the implementation of a control pattern can be accessed either by automation-based testing, or by assistive technologies.

Examples

Example 1: SimpleNumericUpDown control and its peer

The example implements a very simple Silverlight custom control named SimpleNumericUpDown. The control is a templateable control, meaning that the UI is defined in a XAML file that serves as the default UI, but any consumer of the control can change the visual appearance by applying a new template. Nevertheless, the basic accessibility characteristics of the control can be shaped by the control author, and can apply even for cases where the visible UI is noticably different. This separation between design-implementation and code-behavior is one reason for the peer-owner design in UI Automation. The majority of the example shows the C# code, including the following :

  • Associating the peer with the class.

  • Defining the peer, and basic information such as the class name.

  • Reporting which patterns the peer supports. In this case the peer supports a Value pattern.

Control definition class:

   public class SimpleNumericUpDown : Control
   {
       public SimpleNumericUpDown()
       {
           this.DefaultStyleKey = typeof(SimpleNumericUpDown);
       protected override System.Windows.Automation.Peers.AutomationPeer OnCreateAutomationPeer()
       {
           return new SimpleNumericUpDownAutomationPeer(this);
       }
 // templating and event handlers omitted
       public static DependencyProperty NumericValueProperty = DependencyProperty.Register(
           "NumericValue",
           typeof(Int32),
           typeof(SimpleNumericUpDown),
           new PropertyMetadata(0)
           );
       public Int32 NumericValue
       {
           get { return (Int32)this.GetValue(NumericValueProperty); }
           set {this.SetValue(NumericValueProperty,value);}
       }
   }
   

Automation peer definition:

   public class SimpleNumericUpDownAutomationPeer : FrameworkElementAutomationPeer, IValueProvider
   {
       private SimpleNumericUpDown OwnerControl { get { return (SimpleNumericUpDown)Owner; } }
       public SimpleNumericUpDownAutomationPeer(SimpleNumericUpDown owner)
           : base(owner) {}
       //peer overrides
       protected override string GetClassNameCore()
       {
           return "SimpleNumericUpDown";
       }
       protected override AutomationControlType GetAutomationControlTypeCore()
       {
           return AutomationControlType.Spinner;
       }
       public override object GetPattern(PatternInterface patternInterface) {
           if (patternInterface == PatternInterface.Value)
           {
               return this;
           }
           return base.GetPattern(patternInterface);
       }
       // Value pattern implementation
       String IValueProvider.Value
       {
           get { return OwnerControl.NumericValue.ToString(); }
       }
       bool IValueProvider.IsReadOnly {get{return false;}}
       void IValueProvider.SetValue(string value)
       {
           OwnerControl.NumericValue = Convert.ToInt32(value);
       }

This example is shown in operation in the working example of Simple Numeric UpDown control.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. To see UI Automation, use Microsoft Windows as platform.

  2. Use a verification tool that is capable of showing the full automation tree, and an object’s UI Automation properties and patterns as part of the tree. (For example, use UIAVerify or Silverlight Spy; see Resources links.) Select the item in the automation tree that is accessing the relevant custom automation peer implementation.

  3. Examine the set of properties exposed in the tree. Check that name is reported by Name, that the class name is reported as ClassName, and that there is a role as reported by the value of ControlType.

  4. If the control is expected to report a value, check that the value is reported in the tree somehow. (Exactly which property reports the value varies depending on the control function and pattern; for more information, see Windows Automation API).

  5. Check whether a control pattern is reported in the tree. If a control pattern is reported, test the methods of that pattern using facilities in the verification tool. Verify that invoking the methods has changed the corresponding read only property values in the tree.

Expected Results

#3, #4, and #5 (if applicable) are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL7: Designing a Focused Visual State for Custom Silverlight Controls

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL7. Also see Silverlight Technology Notes.

Description

The objective of this technique is to build custom visual states for custom controls that include visible focus indicators in the templates and parts.

The default Silverlight core controls all indicate some type of visible focus indication, through their default templates. For more information on how Silverlight controls will generally supply a default visual focus indicator, see Focus Overview on MSDN.

Silverlight control skinning is enabled through a deliberate separation of visible user interface design and control logic in the Silverlight control model. Control authors expect that application authors might reskin their control. But control authors should provide an initial default set of states, templates, etc. so that application authors have a good baseline of functionality to compare with their customization. Defining visible focus states for all control parts is an example of such baseline functionality. In order to make the visual focus state customizable, the visual state should be associated with a name. Ideally that name should have a human-readable meaning that hints at its purpose, but the real reason for the name is that it connects the XAML-defined template (which control consumers can change) with the control logic defined by the control author (which control consumers cannot change). Also, the visual names and groups in the XAML should be attributed on the control class, to assist design tools. The best resource for general information about Silverlight control customization is Silverlight documentation on MSDN.

Component Parts

Some controls are created by assembling various component parts that are already defined as controls either by the Silverlight run time libraries or by third parties. That scenario is not really what this technique is about, because in that case the focus behavior is already defined by the component's template, and the control author can re-use that behavior as-is or reskin it but still through the same named state definition. This technique specifically addresses how to define a control where the interactive surface has mouse and keyboard handling defined at a lower level for the control as a whole. The actual focus region is defined by the control author in that case, and the focus indicator is also defined to match the behavior visually and functionally.

Design for Focus Indicators

The general design principles for visual focus indicators are that the indicators should apply a visual change to the focus region's exterior margin. A common pattern is to deliberately define the visuals for the control with a pre-existing blank margin for its layout slot; that way when the focus indicator is applied, the focus indicator can fill that margin.

The actual graphic for the visual focus indicator is typically a border or shaped frame of a solid color brush with at least 1 pixel line thickness. The color used for the border stands out visually from the underlying control background or other elements of the control. The contrast between brush for visual focus and the remainder of control should be a contrast difference that is visible to users who do not distinguish the hue of colors, but can distinguish the lightness/value. In many cases the border is rectangular, to go along with the control's layout slot. However, if the control's basic shape is a non-rectangular shape, sometimes the focus indicator is designed to make a border around that shape. An example of a default Silverlight control that is round and applies an exterior round border as a focus indicator is a RadioButton.

Most focus indicator designs change only the border and do not change the main area of the control. One reason for this is that changes to the main control are typically reserved for other interactive states that also have a visual indicator. Specifically, controls need a visual state that indicates that the mouse is over the control (this is termed either MouseOver or Hover state). Controls that support activation also have a visual state that provides feedback for activation. For example, the default Silverlight RepeatButton changes its Background gradient on the button field to be darker blue value when the mouse is over the button, and changes to an even darker value blue when the button is activated (either by clicking the mouse or by pressing SPACE or ENTER with keyboard focus on the RepeatButton). To see this behavior in a live sample, see RepeatButton sample on MSDN.

Logic for Focus Indicators

Typical logic is that the border to indicate focus is present in the default template design, but with an initial value of Visibility=Collapsed. Then, a visual state for focus is defined with a name that properly indicates its purpose as text (example: "Focused"). In addition, a state is needed that undoes whatever changes were applied for focus, once focus moves to another element (for example, "Unfocused"). For example, if the "Focused" state sets the value Visibility=Visible on some element, the "Unfocused" state sets that value to Collapsed again. Silverlight's visual state system also provides a way to group related states with a factoring name (for example, "FocusStates"). For more information on state names and state groups in Silverlight visual states, as well as learning how these states define a control contract that any control consumers should follow if they reskin that control, see Customizing the Appearance of an Existing Control by Using a ControlTemplate on MSDN.

The visual state system is designed to support visual transitions to states, and for that reason the visual state system is closely coupled with the Silverlight animation system. By animating the transition, the visual appearance changes over a time interval. Typically, if transitions are used, the time interval is short, one second or less. In the case of focus indicators, it is typical to not use transitions and to instead make a discrete change; otherwise, the state change might be interpreted by users as a lag in interface response from their system.

The states themselves are designed in XAML, but are loaded and unloaded through logic that the control author defines as part of their control code. The control author does this by handling the appropriate events that occur while the event scope applies to their control. For example, to apply the "Focused" state, the control author handles the GotFocus event. Rather than handle the event directly, the more common pattern is to override a virtual method that acts as a prewired event handler, OnGotFocus. The centralized logic for visual state changes is the method GoToState, with one of the parameters to pass representing the XAML name of the correct state to load from the XAML templates. Examples for all of the APIs discussed here are available in the MSDN topic Creating a New Control by Creating a ControlTemplate.

Focus in Silverlight

Focus in Silverlight is equivalent to the larger user interface and application concept of keyboard focus. The element that has focus is the element within the Silverlight object tree and programming model that has first chance to process the Silverlight key events. As a more tangible example that is user-centric, if a TextBox has keyboard focus, then when the user presses keys on the keyboard, the characters associated with the user's pressed keys (or possibly input that is enabled by an assistive technology that can substitute for key strokes) will appear in the TextBox. A user interface element in Silverlight can obtain keyboard focus in one of three ways:

  1. The user uses the Silverlight tab sequence to traverse into the Silverlight content and to focus a specific control.

  2. The Silverlight application's logic calls the Focus() method programmatically to force focus to a control.

  3. The user performs some other action, for example uses the mouse to click on a control. That control's specific logic handles the Silverlight input event and uses that event as stimulus to call Focus() on that control. The difference between this case and the above case is that the behavior is typically built-in to that control's runtime behavior, and does not require each application author to call Focus() in application code.

Examples

Example 1: Visible focus indicator as a style and state

The following is the XAML that defines the basic (normal) control template. This control is simple: it has a yellow circle graphic, which overlays a red circle edge when the control is focused. The circle edge is defined by the "FocusVisual" element in the composition, and is initially Visibility=Collapsed (the expected visual state prior to being focused).

<ResourceDictionary
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="clr-namespace:FocusVisualCustomControl"
>
   <Style TargetType="local:SampleControl">
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="local:SampleControl">
                   <Grid x:Name="ControlRoot">
                       <Ellipse x:Name="CoinGraphic"
                         Fill="Orange"
                         Width="{TemplateBinding Width}"
                         Height="{TemplateBinding Height}"
                       />
                       <Ellipse x:Name="FocusVisual"
                         Visibility="Collapsed"
                         Stroke="Red"
                         StrokeThickness="1"
                         Width="{TemplateBinding FrameworkElement.Width}"
                         Height="{TemplateBinding FrameworkElement.Height}"
                       />
                   </Grid>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>
</ResourceDictionary>

The following is the specific visual state portion. Note how the visual state includes an ObjectAnimation with discrete keyframes for hard transition between Visible and Collapsed, targeting the element "FocusVisual" in the composition shown in the previous XAML.

                       <VisualStateManager.VisualStateGroups>
                           <VisualStateGroup x:Name="FocusStates">
                               <VisualState x:Name="Unfocused"/>
                               <VisualState x:Name="Focused">
                                   <Storyboard>
                                       <ObjectAnimationUsingKeyFrames
                                         Storyboard.TargetName="FocusVisual" 
                                         Storyboard.TargetProperty="Visibility" Duration="0">
                                           <DiscreteObjectKeyFrame KeyTime="0">
                                               <DiscreteObjectKeyFrame.Value>
                                                   <Visibility>Visible</Visibility>
                                               </DiscreteObjectKeyFrame.Value>
                                           </DiscreteObjectKeyFrame>
                                       </ObjectAnimationUsingKeyFrames>
                                   </Storyboard>
                               </VisualState>
                           </VisualStateGroup>
                       </VisualStateManager.VisualStateGroups>
                       

The following is control logic in the control class that responds to the focus-related events and switches visual states in response. In this particular example, "Unfocused" is a state without a definition. Switching to the definitionless state has the effect of reverting to the default state, which in the case of this design is intentional. Alternatively, authors could make specific template changes that revert any animation that applied to the focused state.

       protected override void OnGotFocus(RoutedEventArgs e)
       {
           base.OnGotFocus(e);
           VisualStateManager.GoToState(this, "Focused", false);
       }
       protected override void OnLostFocus(RoutedEventArgs e)
       {
           base.OnLostFocus(e);
           VisualStateManager.GoToState(this, "Unfocused", false);
       }

This example is shown in operation in the working example of Visual Focus Indicator.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Using a keyboard, tab to the element where focus characteristics are being examined.

  3. Check that the background, border, or other noticable visual indicator of the element changes color.

  4. Check that the changes in color for the background, border, or other noticable visual indicator are removed when the element loses focus.

Expected Results

#3 and #4 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL8: Displaying HelpText in Silverlight User Interfaces

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL8. Also see Silverlight Technology Notes.

Description

The objective of this technique is to provide a long text alternative that replaces content when a short text alternative is not sufficient for a given user, and the user specifically requests that the application should provide more context or more information through the application user interface. The technique could also apply for providing a long text alternative for a nontext object, for example for an image that contains a level of detail that is difficult to capture in a standard visible-in-UI image caption.

Silverlight supports a UI Automation property named HelpText, to connote its possible usage to provide imperative instructions for interactive elements. HelpText is not always forwarded to users by existing assistive technologies, which is an issue discussed in the technique SL19: Providing User Instructions With AutomationProperties.HelpText in Silverlight. Rather than relying on a particular assistive technology's support for enabling users to access the UIA HelpText, application authors can introduce user interface elements into their design that databind directly to the HelpText property, but where the interface element is not necessarily displayed by default. An interface update might be designed to occur if the application user specifically activates a "Get Help" action that is presented in the initial user interface.

This technique emphasises a "HelpText" model as a factoring practice. Silverlight application authors can use the HelpText as a data source that centralizes such information, because it already exists and has that intended purpose in accessibility frameworks. For example, the HelpText could be shown in a tooltip, a popup, a separate user interface element that is deliberately rendered in close proximity, etc. For accessibility support, a recommended display option for HelpText is to add or dynamically alter a Silverlight text element in the primary user interface. Silverlight supports an adaptive layout metaphor. Adding text to the runtime elements in the application generally causes an interface redraw, which in turn informs assistive technologies (through UIA properties and events) that content might have changed.

To set the UIA HelpText in Silverlight, you set the attached property AutomationProperties.HelpText. AutomationProperties.HelpText can be set in code, but is typically set in XAML that defines a Silverlight UI.

HelpText and Tooltip

The same information that is used for AutomationProperties.HelpText long text alternatives could also be useful to sighted users. In this case, the same text could be displayed in a Silverlight ToolTip control. The reason that application authors should use both AutomationProperties.HelpText AND Tooltip in conjunction is because the Tooltip information is not introduced into the runtime accessibility framework information set by UI Automation, because that information set does not anticipate the mouse action triggers that cause tooltips to display. In Silverlight programming, a useful technique for sharing the same resource is to combine the Silverlight data binding feature with the .NET Framework embedded resource feature. For more information on combining Silverlight data binding and resources for common string sources, see How to Make XAML Content Localizable.

Examples

Example 1: Displaying a long text alternative for an Image with XAML

Application authors can specify the AutomationProperties.HelpText attribute on the Image element. The value provided for the attribute should be a meaningful long text alternative for the image content. The value of AutomationProperties.HelpText should augment rather than duplicate any AutomationProperties.Name or an associated Label or LabeledBy caption. One or both of these is also typically specified to provide the basic (short-text) accessibility support for an image.

<StackPanel x:Name="imgContainer">
 <Image
   Height="400" Width="600"
   Source="/office.png"
   x:Name="imgOffice"
   AutomationProperties.HelpText=”The standard office layout
includes one corner desk unit in the corner farthest from the
door, and one file cabinet against the same wall as the door.”/>
 <sdk:Label x:Name="lblimgOffice" Target="{Binding ElementName=imgOffice}">Diagram of standard office layout</sdk:Label>
 <Button x:Name="HelpButton" Click="HelpButton_Click">Provide text-only alternative description of the previous image</Button>
</StackPanel>

The following event handler removes the Help button and replaces it in UI with a TextBox that displays the long text alternative.

       private void HelpButton_Click(object sender, RoutedEventArgs e)
       {
           imgContainer.Children.Remove(HelpButton);
           TextBox tb = new TextBox();
           tb.IsReadOnly=true;
           tb.Text = AutomationProperties.GetHelpText(imgOffice);
           imgContainer.Children.Add(tb);
           tb.Focus();
       }
Example 2: Using HelpText to augment existing form labels, to provide long text instructions

This example provides instructions for two form fields. The same text is also displayed for mouse users as a Tooltip and the AutomationProperties.HelpText string is used as a common source for both display options. In this example, the form submission does not perform client-side validation (although server-side validation following a data round trip might still exist, or validation could be added similar to the technique shown in SL35: Using the Validation and ValidationSummary APIs to Implement Client Side Forms Validation in Silverlight).

The following is the XAML UI:

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
   x:Class="HelpTextAndToolTip.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
       <Grid x:Name="LayoutRoot" Background="White" Margin="10">
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto"/>
               <ColumnDefinition Width="200"/>
               <ColumnDefinition Width="Auto"/>
           </Grid.ColumnDefinitions>
           <TextBlock Text="Form With Tooltips" FontSize="16" FontWeight="Bold"
     Grid.Column="1" HorizontalAlignment="Center" />
           <sdk:Label x:Name="NameLabel" Target="{Binding ElementName=NameTextBox}"
     Grid.Row="2" Margin="3"/>
           <TextBox x:Name="NameTextBox" 
     AutomationProperties.Name="{Binding Content, ElementName=NameLabel}"
     Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
     Grid.Column="1" Grid.Row="2" Margin="3"
                    AutomationProperties.HelpText="{Binding NameTextBoxToolTipString,Source={StaticResource TooltipStrings}}">
           <ToolTipService.ToolTip>
               <ToolTip Content="{Binding NameTextBoxToolTipString,Source={StaticResource TooltipStrings}}" />
           </ToolTipService.ToolTip>
           </TextBox>
           <sdk:Label x:Name="AgeLabel" Target="{Binding ElementName=AgeTextBox}"
     Grid.Row="3" Margin="3" HorizontalAlignment="Right"/>
           <TextBox x:Name="AgeTextBox" 
     AutomationProperties.Name="{Binding Content, ElementName=AgeLabel}" 
     Text="{Binding Age, Mode=TwoWay, UpdateSourceTrigger=Explicit}"  
     Grid.Column="1" Grid.Row="3" Margin="3"
    AutomationProperties.HelpText="{Binding AgeTextBoxToolTipString,Source={StaticResource TooltipStrings}}">
           <ToolTipService.ToolTip>
               <ToolTip Content="{Binding AgeTextBoxToolTipString,Source={StaticResource TooltipStrings}}" />
           </ToolTipService.ToolTip>
       </TextBox>
       <StackPanel Orientation="Horizontal">
           <Button x:Name="SubmitButton" Content="Submit" Click="SubmitButton_Click" Grid.Column="1" Grid.Row="4" Width="50" Margin="3" />
           <Button x:Name="HelpButton" Click="HelpButton_Click">Get Help</Button>
       </StackPanel>
       </Grid>
</UserControl>

The following is the resource definition in app.xaml:

       <ResourceDictionary>
           <resources:Resource1 x:Key="TooltipStrings"/>
       </ResourceDictionary>
       

The generated resource code that defines the "Resource1" class is not shown here because it is mostly infrastructure that is produced by a generation task in Visual Studio. For more information about embedded resources in Silverlight, see Resources Overview on MSDN. The resources here contain just two strings:

  • NameTextBoxToolTipString: Must be 10 characters or less. Required.

  • AgeTextBoxToolTipString Must be a value between 0 and 120. Required.

The following is the event handler code, which changes the interface.

       private void HelpButton_Click(object sender, RoutedEventArgs e)
       {
           AgeLabel.Content = AgeLabel.Content + ": " + AutomationProperties.GetHelpText(AgeTextBox);
           NameLabel.Content = NameLabel.Content + ": " + AutomationProperties.GetHelpText(NameTextBox);
           NameTextBox.Focus();
       }
       

Note the call to Focus() - this puts the screen reader focus on the first form element so that the added text can be read. The very same text source as used for the Tooltip is added programmatically to the existing Label controls.

After the Get Help button is clicked, the visual appearance of the application is modified:

Before activating Get Help

Image:BeforeTooltipForm.png

After activating Get Help

Image:AfterTooltipForm.png

This example is shown in operation in the working example of HelpText and Tooltip.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. To see UI Automation, use Microsoft Windows as platform.

  2. For a control where this technique is used to provide a long text alternative, verify that an identifiable and usable "Get Help" control is present in the initial user interface or assistive technology representation of that interface.

  3. Verify that activating the "Get Help" control changes the user interface, and the changed user interface now displays or reports long text alternatives that better address the user's information needs.

  4. If using a screen reader, verify that the long text alternative can be read aloud.

Expected Results

#2 and #3 are true. If testing with a screen reader, #4 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL9: Handling Key Events to Enable Keyboard Functionality in Silverlight

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL9. Also see Silverlight Technology Notes.

Description

The objective of this technique is to handle key events in a Silverlight application and enable application-specific keyboard functionality in a Silverlight application. The keyboard functionality might relate to a particular element of the Silverlight application user interface, or might be a handler for global key events within the application, such as an application-wide access key.

In Silverlight, application authors handle user input by attaching event handlers for input events. The input events are implemented on a class that is a base element in the Silverlight class hierarchy, such that all Silverlight UI elements can be the source of an input event if the user interacts with them. Typically, the event handler names are specified in XAML, although it is also possible to wire events in code. The implementation of the handlers for the Silverlight managed code programming model is always done in C# or Visual Basic code.

The most commonly used input events are the following:

  • KeyUp, KeyDown - these are the key events. Which key is pressed is determined by event parameters passed to the handler.

  • MouseEnter, MouseOver, MouseLeave

  • MouseLeftButtonDown, MouseLeftButtonUp, MouseRightButtonDown, MouseRightButtonUp

Other forms of input that Silverlight supports include touch devices (with mouse promotion for cases where the application runs on devices that do not have touch input modes) and a related inking mode. For any UI interaction that uses mouse input or these other input modes, Silverlight application authors can write a parallel key event handler to provide users the keyboard equivalent.

Also, the Silverlight event system and control model combine to enable behavior whereby a mouse event and a keyboard event can be treated as the same event and can be handled by a common event handler. Using this technique, Silverlight authors can facilitate keyboard functionality in custom controls or as override behavior to existing Silverlight-supplied controls, and provide equivalence for mouse events or events that are specific to other input devices. Silverlight authors can also use controls that already have a keyboard equivalence as a built-in behavior.

The parallel key event handler case, and the built-in behavior case, are each shown in one of the examples.

All input events report a specific source that is communicated to handler code as an event parameter, so that the application author can identify which element in their Silverlight UI was being interacted with, and the application can perform an action that is relevant to that user input. In the case of mouse events, the event source is the element that the mouse pointer is over at the time. In the case of key events, the event source is the element that has focus. The element that has focus is visually indicated so that the user knows which element they are interacting with (see SL2: Changing The Visual Focus Indicator in Silverlight). Assistive technologies often have parallel conventions whereby the user is made aware of which element is visually focused and is the current input scope presented by the assistive technology,

Silverlight core control built-in keyboard functionality

The following is a list of the Silverlight-supplied controls that have some level of key equivalence as a built-in behavior. In these cases, it is not necessary to add a specific Key event handler; you can handle the event and/or rely on the built-in key handling as listed.

  • Button (SPACE and ENTER) - raises Click event.

  • Other ButtonBase classes eg RepeatButton, HyperlinkButton (SPACE and ENTER) - raises Click event.

  • TextBox (ENTER, unless in a mode where the TextBox accepts multiple lines) - moves focus to next control, treated like a TAB

  • ListBox (various keys) - see OnKeyDown Method.

  • ComboBox (arrow keys ) - traverse list choices as control UI if popup area displayed.

  • RichTextBox (various keys ) - enable edit mode operations; see RichTextBox Overview.

  • Slider (arrow keys ) - increment/decrement values.

Browser hosts and keyboard events

Silverlight is hosted as a plug-in inside a browser host. The Silverlight run-time only receives the input events that the browser host forwards to hosted plug-ins through a browser-specific program access layer. Occasionally the browser host receives input that the browser host itself handles in some way, and does not forward the keyboard event. An example is that a Silverlight application hosted by an Internet Explorer browser host on Windows operating system cannot detect a press of the ALT key, because Internet Explorer processes this input and performs the action of bringing keyboard focus to the Internet Explorer menu bar. Silverlight authors might need to be aware of browser-specific input handling models and not rely on key events for keys that are essentially reserved for use by a browser host. For more information, see Keyboard Support.

Other event models

This technique specifically discusses event handling for the Silverlight managed programming model. However, Silverlight also supports parallel models for event handling, either through a Silverlight run-time feature or due to Silverlight's role as a plug-in within a script-capable browser host. For example, events from the HTML DOM can be handled by JavaScript at HTML scope for the overall Silverlight plug-in; this uses the browser host as script processor and the Silverlight run-time is not directly involved. Or, HTML DOM events can be handled through an HTML bridge that calls into Silverlight application code. These event models can potentially be used to provide keyboard equivalence, but it is generally more convenient to use the managed code model as described in this technique. For more information on other event models in Silverlight, see Events Overview for Silverlight.

Examples

Two examples are given. The first example is for the scenario of a Silverlight application author that is simply incorporating an existing control into their application design, and is taking advantage of mouse-keyboard equivalence that is already defined by certain Silverlight core controls. The second example is from the perspective of a control author, or at least that of a Silverlight application author that intends to encapsulate behavior in a custom Silverlight control and use it in their own application. For this second example, the control will handle the general Silverlight input event KeyUp, in order to check for input from key(s) that are designated to have a specific input meaning for that control.

Example 1: Built-in keyboard equivalence for core Silverlight controls

This example pertains to cases where the control that handles key events is focusable (through the tab sequence, etc.) and where an existing Silverlight control behavior provides the keyboard equivalence In this example, a Silverlight UI includes a Button element. For sighted users, or users that generally use the mouse to interact with UI, a typical way to interact with the button is to position the mouse pointer over the element, and click the left mouse button. However, the Button also supports a built-in key handling behavior, whereby either the SPACE or ENTER keys are treated as an equivalent action to clicking the button with a mouse. The requirement for this interaction is that the Button must have keyboard focus at the point in time that SPACE or ENTER are pressed. The Button might gain focus because the user pressed the TAB key to move through the tab sequence, or some equivalent action enabled by assistive technology. In terms of the programming experience, the Silverlight application author does not have to separately handle KeyDown for this case. Within the Button control built-in code, the special case of SPACE or ENTER keys pressed while a Button has focus invokes the button’s Click event. Then the Silverlight application author can simply handle Click without differentiating whether the input action was a mouse click or a keyboard equivalent. The following is the entire XAML UI.

<UserControl x:Class="BuiltInKeyEquivalence.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
   <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
       <Button Name="button1"
   AutomationProperties.Name="Equivalence test"
   Height="20" Width="150"
   Click="button1_Click">Click me, or press SPACE!</Button>
   </Grid>
</UserControl>

The following is the C# logic.

   private void button1_Click(object sender, RoutedEventArgs e)
   {
       MessageBox.Show("You clicked a button ... or maybe you hit the space bar ... or ENTER ... it's all the same to me.");
   }
   private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
   {
       System.Windows.Browser.HtmlPage.Plugin.Focus();
    }

This example is shown in operation in the working example of built-in keyboard equivalents.

Example 2: Keyboard events for a custom control, keyboard equivalence

In this example, a new Silverlight custom control named SimpleNumericUpDown uses a control template that includes two buttons. To provide keyboard equivalence for the buttons, an event handler is defined by the control class code. The event handler invokes the action in response to certain accelerator keys, where these actions are equivalent to clicking the button composition parts of the control with a mouse. The following is the default XAML template.

<ControlTemplate TargetType="local:SimpleNumericUpDown">
  <Border Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}" Name="controlFrame">
      <Grid>
          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="30"/>
          </Grid.ColumnDefinitions>
          <TextBox x:Name="valueBox" Text="{Binding NumericValue, RelativeSource={RelativeSource TemplatedParent}}"/>
          <StackPanel Grid.Column="1">
              <Button Name="minusButton">-</Button>
              <Button Name="plusButton">+</Button>
          </StackPanel>
      </Grid>
  </Border>
</ControlTemplate>

The following C# code shows the event handlers. Also, the code includes the event-wiring technique that is used whenever a Silverlight control author implements a templateable control. This technique enables the separation of UI appearance (which can be overridden) from the input event-handling behavior (which is implemented by the control author).

   public class SimpleNumericUpDown : Control
   {
       public SimpleNumericUpDown()
       {
           this.DefaultStyleKey = typeof(SimpleNumericUpDown);
       }
       
       public override void OnApplyTemplate()
       {
           base.OnApplyTemplate();
           Button plusButton = GetTemplateChild("plusButton") as Button;
           Button minusButton = GetTemplateChild("minusButton") as Button;
           Border controlFrame = GetTemplateChild("controlFrame") as Border;
           plusButton.Click += new RoutedEventHandler(Increment);
           minusButton.Click += new RoutedEventHandler(Decrement);
           controlFrame.KeyUp += new KeyEventHandler(Handle_Accelerators);
       }
       private void Increment(object sender, RoutedEventArgs e)
       {
           this.NumericValue += 1;
       }
       private void Decrement(object sender, RoutedEventArgs e)
       {
           this.NumericValue -= 1;
       }
       private void Handle_Accelerators(object sender, KeyEventArgs e)
       {
           switch (e.Key)
           {
               case (Key.Left):
                   this.NumericValue -= 1; 
                   e.Handled=true;
                   break;
               case (Key.Right):
                   this.NumericValue += 1; 
                   e.Handled=true;
                   break;
               default: break;
           }
       }
       public Int32 NumericValue //definition omitted in this example
   }

This example is shown in operation in the working example of custom keyboard events.

Resources

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Press TAB key to move keyboard focus to various element parts of the user interface.

  3. Verify that any user interface actions that exist for a given element part each have a keyboard equivalent.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL10: Implementing a Submit-Form Pattern in Silverlight

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL10. Also see Silverlight Technology Notes.

Description

The objective of this technique is to declare Silverlight user interface elements related to user input and use the Silverlight two-way data binding techniques to provide a Submit button and opt-in forms submission logic pattern for forms. The Submit button serves as the final deliberate step of a form submission scenario. Silverlight programming techniques do not provide a "Submit button as a distinct object. Rather, application authors design their user input workflow such that it is a single user action that initiates change of context that is related to a data input scenario. The key to doing this in Silverlight is to use a data binding mode that sets UpdateSourceTrigger of all individual databound fields in that form or transaction. For any data binding where the UpdateSourceTrigger is Explicit, no real-time change is made to the data, until the UpdateSource method is called on each of these bindings. The application-specific Submit button is connected to an event handler that calls UpdateSource on all of the databound UI elements that comprise that form.

Validation of data

The Submit button itself can also be the UI element that provides warnings, instructions, etc. in a way that assistive technologies can report to users, through the AutomationProperties techniques. Using a Submit model for Silverlight form input to databound data sources relies on a particular data binding mode. The Submit model can be used either along with client-side or server-side validation techniques. The example does not explicitly include either validation technique.

Examples

Example 1: Two form fields with Submit

In this example, the form fields correspond to a data object that implements a view model. Silverlight uses the view model and data annotations to generate some of its UI, notably the names of the fields are bound to the original view model names from the data. This example has a UI defined in XAML and logic defined in C#. The following is the XAML UI , which also includes the binding definitions. Note the Mode=TwoWay, UpdateSourceTrigger=Explicit attributes in the bindings. This is the binding mode to use for the Submit button scenario.

<UserControl x:Class="BasicSubmitButton.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
 <StackPanel x:Name="LayoutRoot" Background="White" Margin="10">
   <Grid>
   <Grid.RowDefinitions>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto"/>
       <ColumnDefinition Width="200"/>
       <ColumnDefinition Width="Auto"/>
   </Grid.ColumnDefinitions>
   <TextBlock Text="Form Input" FontSize="16" FontWeight="Bold"
     Grid.Column="1" HorizontalAlignment="Center" />
       <sdk:Label x:Name="NameLabel" Grid.Row="2" Margin="3"
   HorizontalAlignment="Right"
   Target="{Binding ElementName=NameTextBox}"/>
   <TextBox x:Name="NameTextBox" 
     AutomationProperties.Name="{Binding Content, ElementName=NameLabel}"
     Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
     Grid.Column="1" Grid.Row="2" Margin="3" />
       <sdk:Label x:Name="AgeLabel" Grid.Row="3" Margin="3"
   HorizontalAlignment="Right"
   Target="{Binding ElementName=AgeTextBox}"/>
   <TextBox x:Name="AgeTextBox" 
     AutomationProperties.Name="{Binding Content, ElementName=AgeLabel}" 
     Text="{Binding Age, Mode=TwoWay, UpdateSourceTrigger=Explicit}"  
     Grid.Column="1" Grid.Row="3" Margin="3" />
   <Button x:Name="SubmitButton" Content="Submit" Click="SubmitButton_Click"
     Grid.Column="1" Grid.Row="4" Width="50" Margin="3"
   AutomationProperties.HelpText="Activate this button to submit form."/>
   </Grid>
 </StackPanel>
</UserControl>

The following is the C# logic for the page. Note the SubmitButton_Click handler. This implementation disables the Submit button (representative of a change of context, because now the form cannot be submitted again) and provides user feedback without performing any validation. The test file included in this technique sets up its data object as a purely client side entity and does no validation, so that no service/server is necessary to use the test file. Each element with a binding calls the UpdateSource method, such that the act of pressing the Submit button commits all the form's information all at once. A full implementation might replace this with a server side data object infrastructure. A full implementation might also provide a "Reset" or "Edit" button to enable form submission again if there were issues.

private void SubmitButton_Click(object sender, RoutedEventArgs e)
{
   (sender as Button).IsEnabled = false;
   NameTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
   AgeTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
   TextBlock tb = new TextBlock();
   tb.Text="Thank you, your form information was submitted.";
   LayoutRoot.Children.Add(tb);
}

This example is shown in operation in the working example of Basic Submit Button.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. To test UI Automation based behavior such as reading AutomationProperties.HelpText, use Microsoft Windows as platform.

  2. Verify that the user interface design of the form includes a clearly indicated Submit button (a control that adequately communicates to users that activating it will cause input to be submitted and might cause a change of context).

  3. Provide values for the various input fields of the form, and verify that doing so does not in and of itself change the context.

  4. Verify that if change of context occurs at all, that action is delayed until after the Submit button is activated.

Expected Results

#2, #3, and #4 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL11: Pausing or Stopping A Decorative Silverlight Animation

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL11. Also see Silverlight Technology Notes.

Description

The objective of this technique is to associate a "Pause" or "Stop" action for a Silverlight animation with a user interface control. This enables a user to pause or stop an animation in Silverlight content.

The Silverlight animation system is generalized such that nearly any Silverlight property of type Double, Point or Color can be animated, or a property can cycle through discrete object values. Thus the possibilities for which properties in the user interface can be animated are quite broad. The general technique shown can be used to pause or stop any Silverlight animation, including those that are purely decorative.

Pause versus Stop

Silverlight has two discrete methods for animation control: a Pause method and a Stop method. The difference in behavior is that Pause uses whatever the last value was while the animation was still running, and holds that value permanenently (unless the animation is restarted). Stop sets the value to be whatever value existed before the animation was started. However, calling Stop on an animation often results in a behavior that looks like a "reset" to the user; this is particularly true if the animation is animating an element's position on screen. In many cases, what might be a conceptual "stop" for the user is better accomplished by a "permanent Pause" in the Silverlight animation API. Whether to call Pause or Stop is an aesthetic decision and application authors can experiment to see which behavior has the best appearance. If application authors choose to use Stop, authors can simply replace the call to .Pause() with a call to .Stop() for any code that is based on this technique's example.

Examples

Example 1: Pausing a decorative animation

The following is the XAML UI. The animated object and the animation behavior are both described in XAML, as is the control that users can activate to pause the animation.

<UserControl x:Class="PauseBouncyBall.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
 <UserControl.Resources>
   <Storyboard x:Key="anim" RepeatBehavior="Forever" >
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Ball"
          Storyboard.TargetProperty="(Canvas.Top)"
        FillBehavior="HoldEnd" AutoReverse="True">
               <EasingDoubleKeyFrame Value="100" KeyTime="00:00:01">
                   <EasingDoubleKeyFrame.EasingFunction>
                       <BounceEase Bounces="-1" EasingMode="EaseIn"/>
                   </EasingDoubleKeyFrame.EasingFunction>
               </EasingDoubleKeyFrame>
           </DoubleAnimationUsingKeyFrames>
   </Storyboard>
 </UserControl.Resources>
 <Canvas x:Name="LayoutRoot" Background="White" Height="600" Width="800">
   <Ellipse Name="Ball" Fill="Red" Width="20" Height="20" Canvas.Top="200">
       <Ellipse.RenderTransform>
           <TransformGroup>
               <TranslateTransform/>
           </TransformGroup>
       </Ellipse.RenderTransform>
   </Ellipse>
   <Button HorizontalAlignment="Left" Width="200" Click="Button_Click">Stop the bouncy ball please!</Button>
 </Canvas>
</UserControl>

The following is the C# logic. One function is the "page" constructor, which is what starts and loops the animation. The other function is the event handler for the UI control (a button). The event handler retrieves the animation definition from the page resources, and calls the Pause method on the animation.

       public MainPage()
       {
           InitializeComponent();
           (this.Resources["anim"] as Storyboard).Begin();
       }
       private void Button_Click(object sender, RoutedEventArgs e)
       {
           (this.Resources["anim"] as Storyboard).Pause();
       }

This example is shown in operation in the working example of Pause Bouncy Ball.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. For Silverlight content with moving, blinking, scrolling or auto-updating content that is the result of a running Silverlight animation:

  2. Check for a mechanism to stop the movement, blinking, scrolling or auto-updating.

  3. Check that the movement, blinking, scrolling or auto-updating stops when the mechanism is activated and does not restart by itself.

  4. For pause, check that the animation can be restarted using a start mechanism.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL12: Pausing, Stopping, or Playing Media in Silverlight MediaElements

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL12. Also see Silverlight Technology Notes.

Description

The objective of this technique is to create a control user interface for the Silverlight MediaElement object. The controls enable users to pause or stop the video to prevent the video images on the MediaElement surface from moving, and stop video-associated audio. These UI controls enable an interaction defined in code event handlers. Each handler calls one of the following MediaElement methods:

Note that by default, a MediaElement will start playing its media as soon as the UI loads completely AND the media source file is downloaded (or a certain buffer size is reached, in the case of streaming media). Use the AutoPlay property to change this default.

Examples

Example 1: Providing MediaElement controls in the UI

This example has a UI definition in XAML and interaction logic in C#.

<UserControl x:Class="MediaElementControls.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 >
  <Grid x:Name="LayoutRoot">
      <StackPanel>
          <MediaElement x:Name="media" Source="/xbox.wmv"
         Width="300" Height="300" 
         AutomationProperties.Name="Video of new Fable game for XBox"           
      />
          <Grid Name="UIControls">
              <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*" />
                  <ColumnDefinition Width="*" />
                  <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>
              <Grid.RowDefinitions>
                  <RowDefinition Height="*" />
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="20" />
              </Grid.RowDefinitions>
              <Button Click="StopMedia" 
   Grid.Column="0" Grid.Row="1" Content="Stop" />
              <Button Click="PauseMedia" 
   Grid.Column="1" Grid.Row="1" Content="Pause" />
              <Button Click="PlayMedia" 
   Grid.Column="2" Grid.Row="1" Content="Play" />
              <Button Click="MuteMedia" 
  Grid.Row="2" Grid.Column="0" Content="Mute" />
              <TextBlock Name="VolumeLabel" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right">Volume</TextBlock>
              <Slider Height="20"
          Value="{Binding Volume, Mode=TwoWay, ElementName=media}"
          Minimum="0" Maximum="1"
          Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"
              AutomationProperties.LabeledBy="{Binding ElementName=VolumeLabel}"/>
          </Grid>
      </StackPanel>
  </Grid>
</UserControl>

private void StopMedia(object sender, RoutedEventArgs e)
{
    media.Stop();
}
private void PauseMedia(object sender, RoutedEventArgs e)
{
    media.Pause();
}
private void PlayMedia(object sender, RoutedEventArgs e)
{
    media.Play();
}
private void MuteMedia(object sender, RoutedEventArgs e)
{
    Button target = sender as Button;
    // mute if not muted, unmute if already muted, in either case make sure the button content for text and accessibility info is updated
    if (!media.IsMuted)
    {
        media.IsMuted = true;
        target.Content = "Unmute";
    }
    else
    {
         media.IsMuted = false;
         target.Content = "Mute";
     }
}

This example is shown in operation in the working example of Media Element Controls.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. The application is expected to incorporate a MediaElement in the user interface.

  2. Check that interactive controls are available so that users can pause or stop the media.

  3. Check that when activated, the controls stop or pause the media.

Expected Results

#2 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL13: Providing A Style Switcher To Switch To High Contrast

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL13. Also see Silverlight Technology Notes.

Description

The objective of this technique is to incorporate high contrast color choices into a user interface visual design for Silverlight, by changing the values of styles or templates, or changing values of individual resources such as brushes or colors.

Silverlight styles and templates are produced in XAML. Silverlight event handlers (such as the ones that engage the style switch) are written in code, but are often wired through a method name reference in the XAML. For more information on how to use templates, styles and resources to change the appearance of Silverlight controls, see Control Customization topic on MSDN.

Silverlight provides a built-in property that can determine whether the hosting operating system is using a high contrast theme. This is a Boolean value only; Silverlight API cannot determine any further specifics about the theme choice, such as the colors being used or the contrast ratio between the colors. Querying this property at application startup is one possible trigger mechanism for applying high contrast themes to Silverlight content. Another mechanism is to expose a control (such as a button or text link) to the user, so that the user can engage high contrast for a Silverlight application's content by activating a control within the Silverlight application.

Silverlight Toolkit themes and System Colors

An extension to the Silverlight core deliverables known as the Silverlight Toolkit provides theming APIs and various themed styles for Silverlight controls, including the core controls. Most of these themes are intended for design purposes, but the Silverlight Toolkit also provides a System Colors theme. The System Colors theme aligns the Silverlight theme brushes or colors with those of the settings applied to the Microsoft Windows operating system display options. When the user switches the system themes to use a theme that is typically used for high contrast, the underlying system brushes are redefined. A Silverlight application that uses the System Colors theme also uses the now-redefined colors in its UI, and will effectively use the same High Contrast colors that are user-selected for all other display. How to use the Silverlight Toolkit system themes is not described in this technique. However, the Silverlight Toolkit theme system is a viable option for providing high contrast as well as other more aesthetics-oriented UI experiences. For more information about the Silverlight Toolkit, see Toolkit site. The themes feature of Silverlight Toolkit is best explained by Silverlight Toolkit release notes (from a Microsoft-related blog).

Real-time changes not supported

SystemParameters.HighContrast is an adequate trigger for cases where high contrast is already engaged before the Silverlight plugin is loaded into a host. However, a limitation of using SystemParameters.HighContrast as a trigger mechanism is that Silverlight does not detect the change if it happens after the Silverlight plugin is loaded by the host HTML. If Silverlight authors want to support real-time changes, they should provide a user-initiated control option for changing to high contrast in Silverlight UI rather than solely relying on SystemParameters.HighContrast.

Silverlight and CSS

Silverlight content does not use information that comes from a CSS style as applied to the hosting HTML page. Therefore, techniques as implemented by browser user agents and described by G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults or G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text do not work for Silverlight content, and C29 does not directly apply. For example, the Internet Explorer settings under Options / Appearance do not affect the fonts or contrast in the Silverlight content area.

Examples

Example 1: Silverlight application designed with brush resources and template resources that enable a high contrast switch

The example "application" for illustration is just text, a button and border. The concepts shown in the example can scale to any complexity of UI, including to applications that have thousands of lines of XAML. Note that the visual appearance of the button is already using a high contrast theme choice for its default state, to assure that the control is visible to anyone that requires a high contrast theme to see parts of the user interface per G174. To keep the example simple, the visual states (behaviors) associated with mouse-over, click, etc. have not been restyled for high contrast. Only the base appearance is changed. The example also shows a technique of storing original theme information and restoring it in response to user request.

<UserControl x:Class="HighContrast.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   d:DesignHeight="300" d:DesignWidth="400">
   <UserControl.Resources>
       <SolidColorBrush x:Key="ArtsyBrush1" Color="Salmon"/>
       <SolidColorBrush x:Key="ArtsyBrush2" Color="Bisque"/>
       <SolidColorBrush x:Key="ArtsyBrush3" Color="DarkSalmon"/>
       <SolidColorBrush x:Key="ArtsyBrush4" Color="Blue"/>
       <Color x:Key="ArtsyBrush1Restore">Salmon</Color>
       <Color x:Key="ArtsyBrush2Restore">Bisque</Color>
       <Color x:Key="ArtsyBrush3Restore">DarkSalmon</Color>
       <Color x:Key="ArtsyBrush4Restore">Blue</Color>
       <RadialGradientBrush x:Key="ArtsyGradient">
           <GradientStop Color="AliceBlue" Offset="0"/>
           <GradientStop Color="LightBlue" Offset="0.4"/>
           <GradientStop Color="#D00000EE" Offset="1"/>
       </RadialGradientBrush>
       <Style x:Key="ArtsyButton" TargetType="Button">
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="Button">
                       <Border CornerRadius="4"
                          BorderBrush="{StaticResource ArtsyBrush4}" BorderThickness="4">
                           <Grid>
                               <Rectangle Fill="{StaticResource ArtsyGradient}"
                                 RadiusX="2" RadiusY="2"/>
                               <ContentPresenter Content="{TemplateBinding Content}"
                               ContentTemplate="{TemplateBinding ContentTemplate}"/>
                           </Grid>
                           
                       </Border>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>
       <Style x:Key="HighConButton" TargetType="Button">
           <Setter Property="Control.Background" Value="White"/>
           <Setter Property="BorderBrush" Value="Black"/>
           <Setter Property="Foreground" Value="Black"/>
       </Style>
   </UserControl.Resources>
   <Border BorderBrush="{StaticResource ArtsyBrush1}" BorderThickness="4">
       <StackPanel x:Name="LayoutRoot" Background="{StaticResource ArtsyBrush2}">
           <TextBlock
             Foreground="{StaticResource ArtsyBrush3}">High contrast demo</TextBlock>
           <Button Name="Switcher" Click="Switcher_Click"
             Width="160" Style="{StaticResource HighConButton}">
              <TextBlock Text="Switch to high contrast"/>
           </Button>
           <Button Name="Switchback" Click="Switchback_Click"
             Width="160" Style="{StaticResource HighConButton}" IsEnabled="False">
               <TextBlock Text="Switch to regular theme"/>
           </Button>
       </StackPanel>
   </Border>
</UserControl>

The second listing is the C# code for the event handlers.

       private void Switcher_Click(object sender, RoutedEventArgs e)
       {
           ChangeToHighCon();
       }
       private void ChangeToHighCon()
       {
           (this.Resources["ArtsyBrush1"] as SolidColorBrush).Color = Colors.Black;
           (this.Resources["ArtsyBrush2"] as SolidColorBrush).Color = Colors.White;
           (this.Resources["ArtsyBrush3"] as SolidColorBrush).Color = Colors.Black;
           (this.Resources["ArtsyBrush4"] as SolidColorBrush).Color = Colors.Black;
           Switcher.IsEnabled = false;
           Switchback.IsEnabled = true;
       }
       private void RestoreRegularCon()
       {
           (this.Resources["ArtsyBrush1"] as SolidColorBrush).Color =
             (Color)this.Resources["ArtsyBrush1Restore"];
           (this.Resources["ArtsyBrush2"] as SolidColorBrush).Color =
             (Color)this.Resources["ArtsyBrush2Restore"];
           (this.Resources["ArtsyBrush3"] as SolidColorBrush).Color =
           (Color)this.Resources["ArtsyBrush3Restore"];
           (this.Resources["ArtsyBrush4"] as SolidColorBrush).Color =
             (Color)this.Resources["ArtsyBrush4Restore"];
           Switcher.IsEnabled = true;
           Switchback.IsEnabled = false;
       }
       private void Switchback_Click(object sender, RoutedEventArgs e)
       {
           RestoreRegularCon();
       }
   }

The following images show the original, and the applied high contrast settings.

Low contrast image with "switch to high contrast" button enabled

High contrast image with "switch to regular theme" button enabled

This example is shown in operation in the working example of High Contrast.

Example 2: Use SystemParameters.HighContrast to detect system high contrast settings at application startup

This example uses the same UI and style definitions as the previous example. The sole addition a case statement that is added to the primary page constructor of the UI (defined in C#). The added code is everything other than the InitializeComponent() call (which is part of Silverlight infrastructure). Note that the added code calls a user-defined function ChangeToHighCon(), which is the same function and behavior as shown in Example 1 for the user-initiated high contrast switch.

       public MainPage()
       {
           InitializeComponent();
           if (SystemParameters.HighContrast)
           {
               ChangeToHighCon();
           }
       }

Resources

Resources are for information purposes only, no endorsement implied.

Tests

UI option for style switching
Procedure

To test a Silverlight UI option for style switching (Example 1):

  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Check for a control that indicates it will change the application's appearance to use a high-contrast theme.

  3. Activate the control. Check that the Silverlight application's user interface color themes change to an appearance that uses at least a 4.5:1 contrast ratio per Success Criterion 1.4.3 (Contrast (Minimum)).

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

Tests

HighContrast API
Procedure

To test the HighContrast API (Example 2):

  1. Use operating system settings (such as Ctrl+LeftShift+PrtScn shortcut on Windows 7) to enter high contrast mode prior to opening the test page.

  2. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  3. Check that the Silverlight application's user interface color themes change to an appearance that uses at least a 4.5:1 contrast ratio per Success Criterion 1.4.3 (Contrast (Minimum)).

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

Tests

UI option for enhanced contrast
Procedure

To test a Silverlight UI option for style switching for enhanced contrast:

  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Check for a control that indicates it will change the application's appearance to use an enhanced contrast theme.

  3. Activate the control. Check that the Silverlight application's user interface color themes change to an appearance that uses at least a 7:1 contrast ratio per Success Criterion 1.4.6 Contrast (Enhanced).

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL14: Providing Custom Control Key Handling for Keyboard Functionality in Silverlight

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL14. Also see Silverlight Technology Notes.

Description

The objective of this technique is to implement built-in handling of key events in a custom control. If a custom control is correctly implemented, then any Silverlight applications that include the control can rely on the built-in key handling for some or all of the desired keyboard equivalence of a control's functionality.

Defining a custom control requires that the control author write a default template for the control and also the initialization logic, including the default implementations for built-in keyboard equivalence. Typically, control authors provide keyboard equivalence for any actions that can be activated by a mouse click on the control surface, and that are not already providing a keyboard equivalence through the implementation of a composite part.

All input events report a specific source that is communicated to handler code as an event parameter, so that the application author can identify which element in their Silverlight UI was being interacted with, and the application can perform an action that is relevant to that user input. In the case of mouse events, the event source is the element that the mouse pointer is over at the time. In the case of key events, the event source is the element that has focus. The element that has focus is visually indicated so that the user knows which element they are interacting with (see SL2: Changing The Visual Focus Indicator in Silverlight). Assistive technologies often have parallel conventions whereby the user is made aware of which element is visually focused and is the current input scope presented by the assistive technology.

Browser hosts and keyboard events

Silverlight is hosted as a plug-in inside a browser host. The Silverlight runtime only receives the input events that the browser host forwards to hosted plug-ins through a browser-specific program access layer. Occasionally the browser host receives input that the browser host itself handles in some way, and does not forward the keyboard event. An example is that a Silverlight application hosted by an Internet Explorer browser host on Windows operating system cannot detect a press of the ALT key, because Internet Explorer processes this input and performs the action of bringing keyboard focus to the Internet Explorer menu bar. Silverlight authors might need to be aware of browser-specific input handling models and not rely on key events for keys that are essentially reserved for use by a browser host. For more information, see Keyboard Support.

Application authors should choose keys that avoid browser conflicts, but still are a natural choice for an accelerator. Using the CTRL key as a modifier is a convention that is frequently used in existing Silverlight applications.

Informing users of which keys to use for keyboard equivalence

If a control supports user interaction, which key to use to engage the keyboard equivalent behavior is not always obvious. One way to inform users of the possible key options that a control supports is to author an AutomationProperties.HelpText value in the application UI that gives instructions such as "Press the plus key to increment value". This is up to the application author to do; the control definitions do not provide a means to set HelpText by default, because any display technique for end user help is potentially too application-specific to be encapsulated in control definitions. Application authors might also consider using tooltips, providing a menu framework that visually indicates the key associations (perhaps with the Windows key-underlined convention), providing a generalized application Help, or displaying plain text in the user interface.

The On* method pattern in Silverlight

Silverlight classes often have methods that follow the naming pattern On* where the star is a string that also identifies an event. These On* methods are prewired event handlers, defined as virtual methods so that subclasses can override them. A consumer of a control class can change or augment the default behavior associated with that event by overriding the method, and typically also calls the base implementation so that the base functionality is preserved. This principle is illustrated in Example 1 by the overrides of OnGotFocus and OnLostFocus. Controls that introduce new events should consider also exposing a virtual On* method that pairs with the event, so that consumers of the custom control can use the same pattern.

Examples

Example 1: KeyNumericUpDown Control That Handles Arrow Key Equivalence for + and - Buttons

This example implements a custom Silverlight control that displays an integer value, and can increment or decrement the integer value based on user actions. When a user interacts with the control, the user can click the "+" and "-" buttons that are component parts of the control. The "+" and "-" button parts are deliberately not in the Silverlight tab sequence, because this is intended to be a complete control, where only the control itself (and not its constituent parts) are focusable and are reported as an element to the accessibility framework. To provide keyboard equivalence, the control defines a KeyUp handler. The design of the control treats an Up Arrow key press as equivalent to activating the "+" button, and the Down Arrow key as equivalent to activating the "-" button. The control implementation reinforces this behavior by having the button Click event handlers and the cases of the KeyUp handler call the same underlying helper functions (Increment() and Decrement()).

Handling the + and - keys as alternate or additional keyboard equivalents for the actions is also possible (if that is desired, handler would check for Key.Add or Key.Subtract values).

The following is the XAML-defined control template for this control.

   <Style TargetType="local:KeysNumericUpDown">
       <Setter Property="BorderThickness" Value="1"/>
       <Setter Property="Height" Value="22"/>
       <Setter Property="BorderBrush">
           <Setter.Value>
               <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                   <GradientStop Color="#FFA3AEB9" Offset="0"/>
                   <GradientStop Color="#FF8399A9" Offset="0.375"/>
                   <GradientStop Color="#FF718597" Offset="0.375"/>
                   <GradientStop Color="#FF617584" Offset="1"/>
               </LinearGradientBrush>
           </Setter.Value>
       </Setter>
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="local:KeysNumericUpDown">
                   <Grid x:Name="CompositionRoot">
                       <Grid.ColumnDefinitions>
                           <ColumnDefinition/>
                           <ColumnDefinition/>
                       </Grid.ColumnDefinitions>
                       <TextBox x:Name="Text" IsTabStop="False" AcceptsReturn="False"
 BorderThickness="0" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}"
 FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}"
 FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" MinWidth="20"
 TextAlignment="Right" VerticalAlignment="Center"  TextWrapping="NoWrap" Text="{TemplateBinding Value}">
                               <TextBox.Style>
                                   <Style TargetType="TextBox">
                                       <Setter Property="Template">
                                           <Setter.Value>
                                               <ControlTemplate TargetType="TextBox">
                                                   <ScrollViewer x:Name="ContentElement" BorderThickness="0" Padding="0"/>
                                               </ControlTemplate>
                                           </Setter.Value>
                                       </Setter>
                                   </Style>
                               </TextBox.Style>
                           </TextBox>
                       <StackPanel Orientation="Vertical" Grid.Column="1">
                       <Button Width="18" Height="18" IsTabStop="False" x:Name="plusButton">+</Button>
                       <Button Width="18" Height="18" IsTabStop="False" x:Name="minusButton">-</Button>
                       </StackPanel>
                       <Border x:Name="FocusVisualElement" BorderBrush="#FF45D6FA" BorderThickness="{TemplateBinding BorderThickness}" 
                       CornerRadius="1,1,1,1" IsHitTestVisible="False" Opacity="0"/>
                   </Grid>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>
   

The following is the implementation of the control class. Overrides of the base class are omitted for clarity, as is automation support. Note the event wiring in OnApplyTemplate; this is a common pattern for custom control definitions.

   public class KeysNumericUpDown : UpDownBase<double>
   {
       Grid root;
       Button plusButton;
       Button minusButton;
       Border focusRect;
       public KeysNumericUpDown()
       {
           this.DefaultStyleKey = typeof(KeysNumericUpDown);
       }
       public override void OnApplyTemplate()
       {
           base.OnApplyTemplate();
           root = this.GetTemplateChild("CompositionRoot") as Grid;
           root.KeyUp += new KeyEventHandler(Handle_Accelerators);
           plusButton = this.GetTemplateChild("plusButton") as Button;
           minusButton = this.GetTemplateChild("minusButton") as Button;
           plusButton.Click += new RoutedEventHandler(plusButton_Click);
           minusButton.Click += new RoutedEventHandler(minusButton_Click);
           focusRect = this.GetTemplateChild("FocusVisualElement") as Border;
       }
       void plusButton_Click(object sender, EventArgs e)
       {
           Increment();
       }
       void minusButton_Click(object sender, EventArgs e)
       {
           Decrement();
       }
       private void Increment()
       {
           this.Value += 1;
       }
       private void Decrement()
       {
           this.Value -= 1;
       }
       private void Handle_Accelerators(object sender, KeyEventArgs e)
       {
           switch (e.Key)
           {
               case (Key.Up):
                   this.Value -= 1;
                   e.Handled = true;
                   break;
               case (Key.Down):
                   this.Value += 1;
                   e.Handled = true;
                   break;
               default: break;
           }
       }
       protected override void OnGotFocus(RoutedEventArgs e)
       {
           base.OnGotFocus(e);
           if (focusRect != null)
           {
               focusRect.Opacity = 1;
           }
       }
       protected override void OnLostFocus(RoutedEventArgs e)
       {
           base.OnLostFocus(e);
           focusRect.Opacity = 0;
       }
   }
   

When this control is included in application UI, the usage is very simple. Note that there are no key handlers on this instance; the necessary key handling to wire up the increment/decrement logic is already built-in to all instances of the control.

<local:KeysNumericUpDown Width="100" Height="45"/>

This example is shown in operation in the working example of Numeric Up / Down control.

Resources

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Press TAB key to move keyboard focus to various element parts of the user interface, and in particular to areas that are known to be custom control implementations.

  3. Check that custom key commands exist for all these user interface actions and that these key commands are made known to the user.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL15: Providing Keyboard Shortcuts that Work Across the Entire Silverlight Application

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL15. Also see Silverlight Technology Notes.

Description

The objective of this technique is to introduce key handling that exists at the application root level of a Silverlight application, rather than per-element key handling. Event handling at the application level as opposed to at the element level is one way to address key equivalence. The key events provide key equivalence for particular user interface elements that a user might otherwise interact with using a mouse. This technique is related to events in the Silverlight programming model, as opposed to in the HTML DOM.

Handling key events at the root level of an application rather than only on the element that was the "source" of a key event is possible because of a Silverlight programming model feature known as event routing. For more information on event routing and how it works, see Events Overview for Silverlight.

This technique demonstrates a "menu" approach to key handling and user interaction. This technique is presented as a companion to SL9: Handling Key Events to Enable Keyboard Functionality in Silverlight, which can be thought of as an "accelerator key/hotkey" approach. The "menu" approach towards keyboard equivalence is perhaps just as common as the "hotkey" approach. It is often simpler to document a menu's key equivalence in a user interface than it is to document key equivalents of particular regions of an application, or to communicate to users that where the current focus is placed is relevant to how keyboard keys are interpreted by the application, even if the key action is relevant to only one of the controls in an interface. If all keys are handled at the top level, the specific focused element is no longer relevant.

In order to originate a key event that Silverlight application code can detect, some element in the Silverlight application must have keyboard focus. One way to assure keyboard focus is to focus the Silverlight plug-in as a whole, as called from within an event handler for Application.Startup. This is shown in the examples.

If an application does handle keys at top level, care should be taken to not interfere with specific text entry control behavior, such as typing into a TextBox. To avoid interactions, the design of key equivalence at the top level of an application typically relies on combinations with key modifiers. The Control/CTRL key is a key that is often used for this purpose. Application authors should also be aware of the implications of browser hosts that might handle the key event at HTML DOM level without making that event available to the Silverlight programming surface. For more information on this concept, see "Keyboard Events and Browser Hosts" section of Keyboard Support Overview for Silverlight on MSDN.

Application authors are responsible for correctly documenting the accelerator keys that are pertinent for their application. There are a variety of techniques for documenting user interface actions that are not described here. One possible suggestion is to include a generalized "Help" button that appears early in the application's reading order, which is focusable and has an AutomationProperties.Name value available as the text content or equivalent. Such a button can be activated without knowing any of the application's accelerator keys, and the activation result could be a new text element that enumerates the possible keys. For example, the application could display a Silverlight Popup with the following content:

A screen shot of a sample Popup control that documents specific accelerator keys

Examples

Example 1: Key handling by application root UserControl

This example has only one interactive control for simplicity, but with two possible key combinations for that control being handled as actions. The purpose and explanation of the control is reported through a TextBlock that is associated with the labeled control through use of AutomationProperties.LabeledBy in XAML. The control being illustrated is MultiScaleImage, which supports a zoom-in metaphor for examining an image that redraws at increasingly fine resolutions. For more information on MultiScaleImage, see Deep Zoom on MSDN.

The following is the startup logic at application level that sends focus to Silverlight in the HTML DOM.

       private void Application_Startup(object sender, StartupEventArgs e)
       {
           this.RootVisual = new MainPage();
           //bring overall DOM focus to Silverlight area, so that keys are captured by Silverlight
           System.Windows.Browser.HtmlPage.Plugin.Focus();
       }
       

The following is XAML UI for the main page.

 <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    x:Class="ApplicationLevelKeyHandling.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" KeyUp="UserControl_KeyUp">

    <StackPanel x:Name="LayoutRoot" Background="White">
        <Button Name="bInstructions" Click="bInstructions_Click">Get Help</Button>
        <Popup Name="p">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock FontWeight="Bold">Key</TextBlock>
                <TextBlock FontWeight="Bold" Grid.Column="1">Action</TextBlock>
                <TextBlock Grid.Row="1">Ctrl + Alt + Plus</TextBlock>
                <TextBlock Grid.Row="1" Grid.Column="1">Zooms in on the image</TextBlock>
                <TextBlock Grid.Row="2">Ctrl + Alt + Minus</TextBlock>
                <TextBlock Grid.Row="2" Grid.Column="1">Zooms out of the image</TextBlock>
                <Button Grid.Row="3" Click="button1_Click">Close this Help</Button>
            </Grid>
        </Popup>
        <MultiScaleImage x:Name="deepZoomObject"
         Source="source/dzc_output.xml" 
         MouseLeftButtonDown="DeepZoomObject_MouseLeftButtonDown"
         MouseRightButtonDown="DeepZoomObject_MouseRightButtonDown"
         AutomationProperties.LabeledBy="{Binding ElementName=lblInstructions}"/>
    </StackPanel>
 </UserControl>

The following is the C# logic. Note how the key handlers and mouse handlers reference the same logic function.

        private void UserControl_KeyUp(object sender, KeyEventArgs e)
        {
            if ((Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control &&
                (Keyboard.Modifiers & ModifierKeys.Alt) == ModifierKeys.Alt &&
                e.Key == Key.Add)
            {
                DZIn();
            }
            if ((Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control &&
                (Keyboard.Modifiers & ModifierKeys.Alt) == ModifierKeys.Alt &&
                e.Key == Key.Subtract)
            {
                DZOut();
            }
        }
        private void DeepZoomObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            DZIn();
        }
        private void DeepZoomObject_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            e.Handled = true;
            DZOut();
        }
        private void DZIn()
        {
            this.deepZoomObject.ZoomAboutLogicalPoint(3, .5, .5);
        }
        private void DZOut()
        {
            this.deepZoomObject.ZoomAboutLogicalPoint(.333, .5, .5);
        }
        private void bInstructions_Click(object sender, RoutedEventArgs e)
        {

            // Set where the popup will show up on the screen.
            p.VerticalOffset = 25;
            p.HorizontalOffset = 25;
            // Open the popup.
            p.IsOpen = true;
        }
        void button1_Click(object sender, RoutedEventArgs e)
        {
            // Close the popup.
            p.IsOpen = false;

        }

This example is shown in operation in the working example of Application Level Key Handling.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Verify that keyboard focus is somewhere within the Silverlight content area, and not elsewhere in the hosting HTML or hosting browser user interface. If necessary, use TAB key to traverse the overall HTML tab sequence until an interface element within Silverlight displays a visual focus indicator.

  3. Verify that the keys to be used as keyboard equivalent action triggers for the application as a whole are documented for users. For example, text or long text alternative documents key / key combinations and short descriptions of actions.

  4. Verify that pressing the application-specific keys results in the action as expected in the application.

  5. Move keyboard focus throughout other areas of the Silverlight application, and verify that the same keys continue to function application-wide.

Expected Results

#3, #4 and #5 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL16: Providing Script-Embedded Text Captions for MediaElement Content

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL16. Also see Silverlight Technology Notes.

Description

The objective of this technique is to use text captioning that is embedded in the stream with media displayed in a Silverlight MediaElement, and present that text captioning in a separate Silverlight control or text element.

This particular technique uses scripting files with a TimelineMarkers collection that are embedded directly within the media file. When text captioning is embedded directly in the streams, synchonization of the scripting stream versus the video content stream is done automatically by the MediaElement component. Each time the MarkerReached event fires, that is an indication that a synch point in the video that corresponds to a script marker entry has been reached. Silverlight application authors can obtain the text from the relevant timeline marker entry through their event handler implementations, and can display captions in the user interface area where the text captions are displayed. Typical Silverlight controls that can be used for displaying text captions include TextBlock (nonfocusable), TextBox, or RichTextBox. A typical interface design would place the caption-display control in close proximity to the MediaElement control that is being captioned, for example might place the captions directly underneath the MediaElement "screen".

Script-embedded captions are captions that are stored directly in the media file as metadata, rather than as a separate file. For information about techniques for captions in separate files, see SL28: Using Separate Text-Format Text Captions for MediaElement Content.

Tools

Producing the media file with TimelineMarkers captions directly in embedded scripting can be accomplished using the Microsoft Expression Encoder tool. Online help for the procedure of encoding scripting with text captions in the stream are available in the offline Help file that installs with the Microsoft Expression 4 Encoder products. For more information, see Expression Encoder Pro Overview.

There is a public API for introducing Markers into a WMV file, as part of the Windows Media Format SDK. Using Expression Encoder is the way that the task of directly embedding TimelineMarkers is presented and taught in Microsoft's available instructional material on Silverlight. However, because the mechanism is public, it is possible that other tools exist or will exist that can also produce media with script-encoded TimelineMarkers.

Examples

Example 1: MediaElement handles MarkerReached, displays marker text in existing TextBox

This example has a UI definition in XAML and interaction logic in C#. The following is the basic UI in XAML. This example is deliberately simple and does not include AutomationProperties for identification or user instructions. The most relevant part of this example is that the Silverlight author declares a handler for the event MarkerReached. This event fires potentially hundreds of times, once for each caption in the stream. Each time the event fires, the event handler runs and adds the text to the dedicated TextBox in the user interface.

<UserControl x:Class="MediaTimelineMarkers.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
   <StackPanel x:Name="LayoutRoot" Background="White">
       <MediaElement MarkerReached="OnMarkerReached"
       HorizontalAlignment="Left"
       Source="/spacetime.wmv"
       Width="300" Height="200" />
       <ScrollViewer>
           <TextBox Name="captionText" Height="40"
           IsReadOnly="true" AcceptsReturn="true"/>
       </ScrollViewer>
   </StackPanel>
 </UserControl>

private void OnMarkerReached(object sender, TimelineMarkerRoutedEventArgs e)
{
   captionText.Focus();
   captionText.SelectedText = e.Marker.Text.ToString() + "\n";
}

This example is shown in operation in the working example of Media Timeline Markers.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. The application plays media that is expected to have text captioning.

  2. Check that a text area in the user interface shows captions for the media.

Expected Results

# 2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL17: Providing Static Alternative Content for Silverlight Media Playing in a MediaElement

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL17. Also see Silverlight Technology Notes.

Description

The objective of this technique is to replace a Silverlight MediaElement with static alternative non-media content that is not time-based. The static alternative content replaces the media in the same or a nearby user interface region of the Silverlight application.

A Silverlight application user interface can be adjusted at run time by removing elements from the visual tree, and adding new elements to the visual tree. In this case, the user interface is designed to provide a control that the user activates to display the static alternative content, which is often a control that displays text, or a text element.

Examples

Example 1: MediaElement playing audio, replace with transcript

This example has a UI definition in XAML and interaction logic in C#. In this case the MediaElement has no visual representation itself and is 0x0 size because it plays audio only. As a simple placeholder, this example displays the text "Library of Congress Audio" to represent the media element as something visible in the UI. In addition to Play/Stop controls, this interface includes a Display Transcript button. Activating the button displays static text that represents the transcript of the audio. The following is the basic UI in XAML.

<UserControl x:Class="ReplaceAudioWithTranscriptText.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:sys="clr-namespace:System;assembly=mscorlib">
   <UserControl.Resources>
       <sys:String x:Key="transSpeakerName">Matt Raymond: </sys:String>
       <sys:String x:Key="transText">This is Matt Raymond at the Library of Congress.
Each year thousands of book lovers of all ages visit the nation's capital to celebrate the joys 
of reading and lifelong literacy, at the Library of Congress National Book Festival. 
For the first time in the festival's nine year history, President Barack Obama and 
First Lady Michelle Obama will serve as honorary chairs of this free event. </sys:String>
   </UserControl.Resources>
   <StackPanel x:Name="LayoutRoot" Background="White" >
       <TextBlock FontSize="30" Foreground="Blue">Library of Congress Audio</TextBlock>
       <MediaElement Source="/locintro.wma" AutoPlay="False" Name="player" Height="0" />
       <StackPanel Orientation="Horizontal" Name="ControlBar">
           <Button Name="Play" Click="Play_Click">Play</Button>
           <Button Name="Stop" Click="Stop_Click">Stop</Button>
           <Button Name="TextAlt" Click="TextAlt_Click">Display Transcript</Button>
       </StackPanel>
   </StackPanel>
</UserControl>

The following is the C# logic.

   public partial class MainPage : UserControl
   {
       RichTextBox rtb;
       bool transDisplayed=false;
       public MainPage()
       {
           InitializeComponent();
           rtb = new RichTextBox();
           rtb.IsReadOnly = true;
           Paragraph p = new Paragraph();
           Run speakerName = new Run();
           speakerName.Text = this.Resources["transSpeakerName"] as String;
           speakerName.FontWeight = FontWeights.Bold;
           Run transText = new Run();
           transText.Text = this.Resources["transText"] as String;
           p.Inlines.Add(speakerName);
           p.Inlines.Add(transText);
           rtb.Blocks.Add(p);
       }
       private void Play_Click(object sender, RoutedEventArgs e)
       {
           player.Play();
           Play.IsEnabled = false;
       }
       private void Stop_Click(object sender, RoutedEventArgs e)
       {
           player.Stop();
           Play.IsEnabled = true;
       }
       private void TextAlt_Click(object sender, RoutedEventArgs e)
       {
           Panel parent = (player.Parent as Panel);
           if (!transDisplayed)
           {
               DisplayTranscript();
               (sender as Button).Content = "Hide Transcript";
               transDisplayed = true;
           }
           else
           {
               parent.Children.Remove(rtb);
               (sender as Button).Content = "Display Transcript";
               transDisplayed = false;
           }
       }
       private void DisplayTranscript()
       {
           Panel parent = (player.Parent as Panel);
           parent.Children.Add(rtb);
       }

This example is shown in operation in the working example of Replace Audio With Transcript.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. That application has audio-only media content and is expected to supply a text alternative, or has media that is expected to be replaced entirely with a transcript or similar text alternative.

  2. Check for a control that indicates that activating it will supply static alternative content for the media. Activate the control.

  3. Verify that the media control is replaced with alternate content, and that assistive technologies represent the change to the user interface.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL18: Providing Text Equivalent for Nontext Silverlight Controls With AutomationProperties.Name

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL18. Also see Silverlight Technology Notes.

Description

The objective of this technique is to use the Silverlight AutomationProperties.Name property to provide a short text alternative for controls that do not otherwise contain text. The text is intended to provide human-readable identifiers and short-descriptions or user instructions for accessibility frameworks, which can then be reported to assistive technologies.

"Control" in this technique refers to any element that is based on the Silverlight Control class, and is keyboard-focusable either by user action or calling focus to the control programmatically. The non-text control in question might be something like a button that communicates information using only an icon or image. For example, a triangle image rotated 90 degrees clockwise is commonly used in many user interfaces to indicate a "Play" button control. This "Play" icon mimics interface metaphors from many non-software consumer products, and is often presented in a user interface without any nearby visible text information that explains the purpose of the control. Another example is a "thumbnail" metaphor where a small image serves as a control that can be activated, and where the action results in the display of a larger version of the same image, or enters an editing mode that loads the same image.

For cases of controls such as buttons that invoke actions, the text alternative also identifies link purpose.

In Silverlight, a text-only identifier for any control can be set specifically as AutomationProperties.Name on the parent control. Silverlight control compositing techniques enable either per-control images that are specified by the application author, or a general-purpose image/icon for a control that is part of the control's template and displays that way by default. The Silverlight API AutomationProperties.Name directly sets Name in the UI Automation tree. The properties in the UI Automation tree are reported to assistive technologies, when the assistive technology implements behavior that acts as a UI Automation client (or as an MSAA client, which relies on the UIA-MSAA bridge).

Examples

Example 1: Applying a text alternative for an icon Button with XAML

Application authors can specify the AutomationProperties.Name attribute on the Button element, and leave accessibility information for the composited Image content unspecified. It is the button and its action that is relevant to users, not the non-interactive Image component. The value provided for AutomationProperties.Name is a meaningful text alternative for the action conveyed by the button's icon/image, but where the functionality is conceptually embodied in the button and not its images or other constituent parts in compositing or visual design.

 <Button
   Height="20" Width="50"
   AutomationProperties.Name="Pause Media">
   <Image Height="12" Width="12" Source="/icon_pause.png"/>
 </Button>

This example is shown in operation in the working example of Button Text Alternative.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Accessibility framework view
Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Use a verification tool that is capable of showing the full accessibility framework tree, and an object’s "Name" text alternative as part of the tree. Verify that all interactive elements such as buttons without visible text provide a human-readable text identifier "Name" in the automation tree.

Expected Results

#2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

Tests

Screen Reader
Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Engage the screen reader. Press TAB to traverse the tab sequence inside the Silverlight content area to focus to a composite control that has no visible text, but has an AutomationProperties.Name applied.

  3. Check that the "Name" as applied to the control instance, along with the class name of the named control, is read by the screen reader.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL19: Providing User Instructions With AutomationProperties.HelpText in Silverlight

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL19. Also see Silverlight Technology Notes.

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, and to show the practice of storing that information in a dedicated property of the Silverlight-supported UI Automation support system. The technique can also be used on text controls (such as TextBox), for cases where the control text itself does not provide enough context to suggest an appropriate user action.

The relevant UI Automation property is named HelpText, to connote its possible usage to provide imperative instructions for interactive elements. However, the same property can instead be used for long text alternatives for nontext objects. The Silverlight API AutomationProperties.HelpText directly sets HelpText in the UI Automation tree. The properties in the UI Automation tree are reported to assistive technologies, when the assistive technology implements behavior that acts as a UI Automation client.

AutomationProperties.HelpText can be set in code, but is most typically set as an attribute in XAML that defines a Silverlight UI.

The same information as is present in AutomationProperties.HelpText could also be useful to sighted users. In this case, the same text could be displayed in a Silverlight ToolTip control. The reason that application authors should use both AutomationProperties.HelpText AND Tooltip in conjunction is because the Tooltip information is not introduced into the runtime accessibility framework information set. This is because a tooltip is transient and not conventionally focusable. In Silverlight programming, a useful technique for sharing the same resource is to combine the Silverlight data binding feature with the .NET Framework embedded resource feature. For more information on combining Silverlight data binding and resources for common string sources, see How to Make XAML Content Localizable.

Examples

Example 1: Applying a long text alternative for an Image with XAML

To introduce the necessary information to Silverlight XAML for an application UI definition, specify the AutomationProperties.HelpText attribute on the Image element. The value provided for the attribute is a meaningful long text alternative for the image content. The value of AutomationProperties.HelpText should augment rather than duplicate AutomationProperties.Name, which is also typically specified to provide accessibility support for an image.

 <Image
   Height="400" Width="600"
   Source="/office.png"
   AutomationProperties.Name="Diagram of standard office layout"
   AutomationProperties.HelpText=”The standard office layout
includes one corner desk unit in the corner farthest from the
door, and one file cabinet against the same wall as the door.”/>
Example 2: Using HelpText as form instructions

This example provides instructions for two form fields by using both Tooltip and AutomationProperties.HelpText. The strings used for these purposes are shared to both methodologies by defining the strings as resources and binding to them. In this example, the form submission does not perform client-side validation (although server-side validation following a data round trip might still exist).

The following is the XAML UI:

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
   x:Class="HelpTextAndToolTip.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
       <Grid x:Name="LayoutRoot" Background="White" Margin="10">
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto"/>
               <ColumnDefinition Width="200"/>
               <ColumnDefinition Width="Auto"/>
           </Grid.ColumnDefinitions>
           <TextBlock Text="Form With Tooltips" FontSize="16" FontWeight="Bold"
     Grid.Column="1" HorizontalAlignment="Center" />
           <sdk:Label x:Name="NameLabel" Target="{Binding ElementName=NameTextBox}"
     Grid.Row="2" Margin="3"/>
           <TextBox x:Name="NameTextBox" 
     AutomationProperties.Name="{Binding Content, ElementName=NameLabel}"
     Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
     Grid.Column="1" Grid.Row="2" Margin="3"
     AutomationProperties.HelpText="{Binding
       NameTextBoxToolTipString,Source={StaticResource TooltipStrings}}">
           <ToolTipService.ToolTip>
               <ToolTip Content="{Binding NameTextBoxToolTipString,Source={StaticResource TooltipStrings}}" />
           </ToolTipService.ToolTip>
           </TextBox>
           <sdk:Label x:Name="AgeLabel" Target="{Binding ElementName=AgeTextBox}"
     Grid.Row="3" Margin="3" HorizontalAlignment="Right"/>
           <TextBox x:Name="AgeTextBox" 
     AutomationProperties.Name="{Binding Content, ElementName=AgeLabel}" 
     Text="{Binding Age, Mode=TwoWay, UpdateSourceTrigger=Explicit}"  
     Grid.Column="1" Grid.Row="3" Margin="3"
    AutomationProperties.HelpText="{Binding AgeTextBoxToolTipString,Source={StaticResource TooltipStrings}}">
           <ToolTipService.ToolTip>
               <ToolTip Content="{Binding AgeTextBoxToolTipString,Source={StaticResource TooltipStrings}}" />
           </ToolTipService.ToolTip>
       </TextBox>
           <Button x:Name="SubmitButton" Content="Submit" Click="SubmitButton_Click"
             Grid.Column="1" Grid.Row="4" Width="50" Margin="3" />
       </Grid>
</UserControl>

The following is the resource definition in app.xaml:

       <ResourceDictionary>
           <resources:Resource1 x:Key="TooltipStrings"/>
       </ResourceDictionary>
       

The generated resource code that defines the "Resource1" class is not shown here because it is mostly infrastructure that is produced by a generation task in Visual Studio. For more information about embedded resources in Silverlight, see Resources Overview on MSDN. The resources here contain just two strings, each of which would typically be defined in a Visual Studio .resx file. Resources in a .resx file can be localized or changed separately from code by the appropriate localization toolsets for Microsoft localization/development.

  • NameTextBoxToolTipString: Must be 10 characters or less. Required.

  • AgeTextBoxToolTipString Must be a value between 0 and 120. Required.

These examples are shown in operation in the working example of Automation Properties Help Text and working example of HelpText and ToolTip.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. To see UI Automation, use Microsoft Windows as platform.

  2. Use a verification tool that is capable of showing the full automation tree, and an object’s long text alternative as part of the tree. (For example, use UIAVerify or Silverlight Spy; see Resources links.)

  3. Focus an element that is known to have a long text alternative. Check that the AutomationProperties.HelpText as applied to individual UI elements appears as the HelpText or acc_Help value in the automation tree.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL20: Relying on Silverlight AutomationPeer Behavior to Set AutomationProperties.Name

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL20. Also see Silverlight Technology Notes.

Description

The objective of this technique is to illustrate how in certain cases, the Silverlight automation peer system can provide an accessibility framework Name based on any simple text strings that are also presented in the visible user interface as control content.

The applicability of this technique to SC 1.3.1 is that once promoted, the Name becomes the primary information item that describes the user interface element to accessibiity frameworks and assistive technologies, and the information is thus immune to any further applications of the Silverlight style system that might change the appearance of the visual text equivalent (styled with color, uses italic font for rendering basis, etc.)

The applicability of this technique to SC 4.1.2 is that the default peer promotion behavior provides the Name component of Name, Role, Value. This is related to the description of the term label in SC4.1.2.

A default behavior for generating Name for accessibility frameworks is possible for certain peers of content controls. The content controls that might support a default automation peer behavior include:

  • TextBlock

  • ButtonBase derived classes that do not change the GetNameCore implementation. This includes the Button class. In order for the default promotion to work, the Content of the button must be set as a plain string or must contain only a TextBlock; any compositing such as wrapping in a Border or other container will disable the default promotion.

  • Any other ContentControl derived class where the Content property contains either TextBlock or a text-content-only ButtonBase implementation as sole content.

In these cases the string that sets either Content (for ContentControl and ButtonBase) or Text (for TextBlock) is promoted as the AutomationProperties.Name for the control in UI Automation, without any further attribution. The properties in the UI Automation tree are reported to accessibility frameworks (UI Automation, and MSAA through the bridge). The accessibility frameworks reports this information to assistive technology clients.

Relying on default automation peer behavior is the preferred Silverlight technique for supplying the accessibility framework "Name" information, so long as the default peer promotion actually does produce a usable name. Using default behavior is preferred because re-using the strings that are already used in the general visual presentation is less likely to result in accessibility-specific strings being forgotten by the application author, or get decoupled from visible UI in a revision process.

For cases where there is control compositing in a control rather than simple text, the automation peer typically cannot provide a default simple string, and it may be the application author's responsibility to set AutomationProperties.Name explicitly as an attribute in XAML, or as a property in runtime code. For details, see SL30: Using Silverlight Control Compositing and AutomationProperties.Name.

Test-based methodology

In order to use this technique effectively, application authors are expected to be following a test-based methodology towards verifying what information their application is reporting to any pertinent accessibility framework. Useful tools for this purpose include SilverlightSpy and UIAVerify. Application authors might examine their running Silverlight application on a test machine where the accessibility framework test viewers are also active. Initially, the application author might view the application at a point in the application development cycle that is prior to any effort devoted to specifically adding accessibility-related information to the application. Silverlight applications might be in this state because the initial user interface design was done in a visually oriented design tool such as Microsoft Expression Blend. Using the test-based methodology, application authors might note that certain accessibility framework properties are already populated, as a result of the mechanisms that are described in this technique. However, it is rare that ALL of the necessary accessibility information for an application can be obtained entirely from the built-in default behaviors of the automation peers. At this point, the application author may have to apply additional Silverlight techniques that provide accessibility framework information, for example SL30: Using Silverlight Control Compositing and AutomationProperties.Name.

Examples

Example 1: Button is composed with direct text content only

The following example shows XAML UI only. Logic is not shown, but would typically be added by referencing a Click handler from the XAML.

 <Button Height="20" Width="200">Fire photon torpedoes!</Button>

The following illustration shows the UIAVerify tree view of this simple interface. Note that the internal string "Fire photon torpedoes!" is being peer-forwarded. This is verified by the Properties view on the right side: the Name property value is "Fire Photon Torpedoes", even though no programmatic Name property or AutomationProperties.Name has been applied to that button that would otherwise have supplied an acccessibility framework "Name".

UIAVerify tree view

This example is shown in operation in the working example of Simple Peer Forwarding.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. To use UI AUtomation, use Windows as the platform.

  2. Use a verification tool that is capable of showing the full automation tree, and an object’s name text alternative as part of the tree. (For example, use UIAVerify or Silverlight Spy; see Resources links.)

  3. Check that any element where default automation peer promotion is expected is supplying a default Name in the automation tree.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL21: Replacing A Silverlight Timed Animation With a Nonanimated Element

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL21. Also see Silverlight Technology Notes.

Description

The objective of this technique is to replace a timed Silverlight animation with a non-timed user interface element that presents equivalent information. This is useful in cases where the Silverlight animation is a timed animation that may contain information that the user wants to see without a time limit, such as crawling text in a text area. The animated version of information in the user interface element can instead be swapped out for an equivalent static element.

The Silverlight animation system is generalized such that nearly any Silverlight property of type Double, Point or Color can be animated, or a property can cycle through discrete object values. Thus the possibilities for which properties in the user interface can be animated are quite broad. The general technique shown can be used to stop any animation.

Examples

Example 1: Stopping an animation that is scrolling text, replacing the animation with a full text alternative

This example has a UI definition in XAML and interaction logic in C#. The following is the basic UI in XAML.

<UserControl x:Class="StopAnimation.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
   <UserControl.Resources>
       <ImageBrush x:Key="Stars" ImageSource="/stars.jpg" Stretch="Fill"/>
       <Storyboard x:Key="crawl">
           <DoubleAnimation From="700" To="-100" Duration="0:0:20"
             Storyboard.TargetName="crawltext" Storyboard.TargetProperty="(Canvas.Top)"/> 
       </Storyboard>
       <sys:String x:Key="crawlText">
           Episode IV, A NEW HOPE It is a period of civil war. Rebel spaceships, striking from a hidden base, 
           have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed 
           to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with 
           enough power to destroy an entire planet. Pursued by the Empire’s sinister agents, Princess Leia 
           races home aboard her starship, custodian of the stolen plans that can save her people and restore 
           freedom to the galaxy….
       </sys:String>
   </UserControl.Resources>
   <StackPanel x:Name="LayoutRoot"
   Background="{StaticResource Stars}"
   Height="600" Width="800">
       <Button Width="200"
   Click="Button_Click">Stop crawling text, display fixed text</Button>
       <Canvas Name="CrawlPanel" Width="605" Height="595" >
           <Canvas.Projection>
               <PlaneProjection RotationX="-75"/>
           </Canvas.Projection>
           <Canvas.Clip>
               <RectangleGeometry Rect="0 0 600 600"/>
           </Canvas.Clip>
           <TextBlock Text="{StaticResource crawlText}"
   TextWrapping="Wrap" FontSize="20"
   Width="300" Canvas.Left="150" Name="crawltext"
   Foreground="Goldenrod"/>
       </Canvas>
   </StackPanel>
</UserControl>

The following is the C# logic. In this example, the animation starts automatically. When the user activates the control (the Button), the event handler stops the animation, removes the animated element from the visual tree, and replaces it with a fixed text element that presents all text at once. Because it is a TextBox, assistive technologies could identify the newly introduced text element and present it, for example read the text in a screen reader.

       public MainPage()
       {
           InitializeComponent();
           (this.Resources["crawl"] as Storyboard).Begin();
       }
       private void Button_Click(object sender, RoutedEventArgs e)
       {
           (this.Resources["crawl"] as Storyboard).Stop();
           LayoutRoot.Children.Remove(CrawlPanel);
           TextBox tb = new TextBox();
           tb.IsReadOnly = true;
           tb.FontSize = 30;
           tb.TextWrapping = TextWrapping.Wrap;
           tb.Text = (string)this.Resources["crawlText"];
           LayoutRoot.Children.Add(tb);
       }

This example is shown in operation in the working example of Stop Text Animation.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. For a Silverlight application that has a time limit on interaction due to an animated user interface element:

  2. Check for a mechanism to stop the time limit on interaction.

  3. When the mechanism is activated, check that the element that is animated and resulting in a time limit is removed, and the time-limited element is replaced with static content that is equivalent and does not have a time limit.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL22: Supporting Browser Zoom in Silverlight

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

  • Silverlight content in a user agent host that supports browser zoom

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL22. Also see Silverlight Technology Notes.

Description

The objective of this technique is to support or anticipate existing browser zoom features effectively when users interact with the Silverlight application. This technique explains how the Silverlight content area reacts to the browser zoom feature implemented by some user agent hosts. Silverlight content and layout properties are based on physical screen pixel measurements. When the browser zoom is engaged, Silverlight content scales correctly for the zoom factor, and uses the same zoom factor as any surrounding HTML content.

Browser zoom is relevant for accessibility and Silverlight because it is likely to be the zoom /scaling feature enabled by the browser host that Web technology users are the most familiar with as a technique for increasing the text size in Web content.

Legacy behavior in Silverlight version 2

Built-in support for browser zoom was introduced as a feature in Silverlight version 3. Older documents on the Web might describe techniques that were relevant for Silverlight version 2, where dealing with browser zoom required JavaScript handling of the Resized event, and developers manually applied a ScaleTransform to Silverlight content to scale it up. Silverlight has a "quirks mode" that detects existing handlers that might still use the older techniques. Built-in zoom not active in these cases, so that applications can avoid doubling or otherwise mishandling the user agent's zooming behavior.

Deliberately disabling browser zoom in Silverlight applications

Silverlight also provides the ability to disable the built-in browser zoom handling and rendering behavior. This is sometimes done in order to suppress some of the aliasing and distortion artifacts that host-level scaling can introduce, particularly for video content or certain uses of text. In these cases, application authors might consider other Silverlight techniques for scaling the user interface, perhaps specifically only for the text elements on a page. When an application disables the built-in zoom behavior and rendering for Silverlight content, the browser still retains its zoom settings, and that setting applies to other content outside of Silverlight such as the hosting HTML.

Examples

Example 1: Verifying browser zoom, and checking the zoom factor

This example has a UI defined in XAML and logic defined in C#. The UI shows the zoom factor, and also demonstrates what happens when built-in browser zoom handling is deliberately disabled. Note that the zooming factor as reported by the API is still retained even when Silverlight built-in zoom scaling is disabled deliberately. The following is the XAML UI:

<UserControl x:Class="BrowserZoom.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
   <StackPanel x:Name="LayoutRoot" Background="White">
       <TextBlock>Some text you can zoom.</TextBlock>
       <Button Click="Button_Click">Toggle built-in zoom handling</Button>
       <StackPanel Orientation="Horizontal">
           <Button Click="Button_Click_1">Query current zoom factor</Button>
           <TextBox IsReadOnly="true" Name="zoomf"
   Text="{Binding Path=reportZoom}"/>
       </StackPanel>
   </StackPanel>
</UserControl>

The following is the C# logic:

   public partial class MainPage : UserControl
   {
       public MainPage()
       {
           InitializeComponent();
       }
       private void Button_Click(object sender, RoutedEventArgs e)
       {
           if (!Application.Current.Host.Settings.EnableAutoZoom == false) {
           Application.Current.Host.Settings.EnableAutoZoom = false;
           }
           else
           {
               Application.Current.Host.Settings.EnableAutoZoom = true;
           }
       }
       private void Button_Click_1(object sender, RoutedEventArgs e)
       {
           zoomf.Text = Application.Current.Host.Content.ZoomFactor.ToString();
       }
   }

This example is shown in operation in the working example of Browser Zoom.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. The browser being used for the test must support a browser zoom feature, and the feature must be turned on as a user preference.

  2. Verify that the Silverlight application enables auto zoom (no Silverlight application-specific code or markup has set EnableAutoZoom API to false).

  3. Test the zooming feature of the user agent. Verify that browser zoom factors apply to the Silverlight content.

Expected Results

#2 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL23: Using A Style Switcher to Increase Font Size of Silverlight Text Elements

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL23. Also see Silverlight Technology Notes.

Description

The objective of this technique is to define style switching logic for Silverlight. In particular, the intent is to use the style switcher to change the font size of text elements. This technique could be used only for specific elements, or could also be applied to the entire Silverlight content area and all text elements therein (including elements such as TextBlock that are technically not controls). Examples are provided for these two cases.

The property to style or otherwise change is the FontSize property. Primarily, this is done using the API Control.FontSize, but developers can also use similar properties on other objects that do not derive from Control (examples: TextBlock; DataGridTextColumn).

Silverlight uses a style system whereby many properties that affect UI appearance can be referred to and changed through a style resource. The style resource overrides the default code implementation and the default XAML template as provided by the Silverlight core implementation(or a third party control author). A style enables an application author to make a one-to-many change to property values in an efficient and reversible way, and also to group multiple related property changes as one unit of logic. Styles can be applied explicitly by referencing them by name, or implicitly by associating a style with a class (which then targets all instances of that class). This is analogous to how CSS can either define styles globally for tags or uniquely for classids and names.

Silverlight styles are always written in XAML. Silverlight event handlers are most often written in code (there are related techniques that can react to states with event associations, defined in pure XAML, but the specific style switching technique is most straightforward in code).

Using this technique versus relying on browser zoom

Silverlight supports browser zoom when viewed in browser hosts that support a browser zoom feature. Specifically, Silverlight scales content within its content area when the user engages browser zoom, based on the browser zoom factor. However, not all browser hosts that Silverlight supports have a browser zoom feature, and/or users might choose not to use browser zoom. This technique presents an alternative technique for font scaling in cases when relying on browser zoom is not viable as a technique. Applications might use HTML DOM based logic to determine the user agent string of the browser host, and use that as a determinant of whether the user has browser zoom available as an option. If no browser zoom feature exists for that user and their user agent, that user could be served a version of the Silverlight application that presents a UI and logic for sizing the fonts using the Silverlight API, as described in this technique.

For more information about Silverlight and browser zoom, see the technique SL22: Supporting Browser Zoom in Silverlight.

Sizing by percent

Generally, sizing Silverlight FontSize values by percentages is not recommended. Sizing by percentage produces non-integer font size values, which in turn produce aliasing artifacts. The Silverlight rendering routines for text work best when dealing with integer numbers. The entire Silverlight rendering system is based on pixel measurements. In particular, the behavior for text rendering produces optimized font shaping and subpixel rendering for text areas, and this behavior is based on the assumption that font unit measurements will be provided by applications using whole pixel values.

Units for font sizing in Silverlight

Font sizing in Silverlight is always specified by a unit measure of pixels. Other unit measures such as ems or points that come from a migrated UI definition in XAML would need to be unit-converted to all use a purely numeric value, such that attribute values in XAML do not not include unit identifier suffixes such as "px", "pt", "em", or "cm". This note is most relevant if the application author is porting or migrating a Windows Presentation Framework (WPF) application to Silverlight, or is using a XAML-emitting design tool that is producing general XAML UI definitions and not targeting a specific framework.

Examples

Example 1: Style applied to all text elements within a RichTextBox container

Variations of this example could be employed to offer more choices. For example, multiple style switchers could be provided that gave three or more fontsize choices.

<UserControl x:Class="StyleSwitcherFontSize.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
   <UserControl.Resources>
       <Style x:Key="BiggerRTBFonts" TargetType="RichTextBox">
           <Setter Property="FontSize" Value="24"/>
       </Style>
   </UserControl.Resources>

   <StackPanel x:Name="LayoutRoot" Background="White">
       <Button Click="Button_Click">Super size fonts!</Button>
       <Button Name="Undo" Click="Undo_Click">Make those big fonts stop!</Button>
       <RichTextBox IsReadOnly="True" Name="rtb1">
           <RichTextBox.Blocks>
               <Paragraph>Various test text</Paragraph>
               <Paragraph>
                   <Bold>Some bold test text</Bold></Paragraph>
               <Paragraph>
                   <Italic>Some italic</Italic>
               </Paragraph>
               <Paragraph FontFamily="Times New Roman">A different font, why not?</Paragraph>
           </RichTextBox.Blocks>
       </RichTextBox>
   </StackPanel>
</UserControl>

The second listing is the C# code for the event handler . Note that all it does is change a style property, using a value that keys into the .Resources collection from XAML where the Style is defined. Another event handler nulls out the style and returns values to defaults.

private void Button_Click(object sender, RoutedEventArgs e)
{
  rtb1.Style = this.Resources["BiggerRTBFonts"] as Style;
}
private void Undo_Click(object sender, RoutedEventArgs e)
{
   rtb1.Style = null;
}

The following images show the original, and the applied style.

Screen shot with standard fonts and a button to enlarge

Screen shot with enlarged fonts after activating button to enlarge

This example is shown in operation in the working example of Style Switcher Font Size.

Example 2: Font size increase applied to all text content by applying at UserControl level, and by percent increase logic

This example uses the inheritance characteristics of the FontSize property that is available to all Silverlight controls. Rather than using a style, this example uses a HoldEnd animation, to take advantage of the "By" behavior of the animation system that can increment an existing value by 2 (pixels) rather than replacing the value with a fixed pixel value.

The following is the XAML UI:

<UserControl x:Class="StyleSwitcherFontSize.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Name="rootcontrol">
   <UserControl.Resources>
       <Storyboard x:Key="BySize">
           <DoubleAnimation Storyboard.TargetName="rootcontrol" Storyboard.TargetProperty="FontSize" By="2" FillBehavior="HoldEnd" Duration="0"/>
       </Storyboard>
   </UserControl.Resources>
   <StackPanel x:Name="LayoutRoot" Background="White">
       <Button Click="Button_Click">Super size fonts!</Button>
       <Button Name="Undo" Click="Undo_Click">Make those big fonts stop!</Button>
       <TextBox Text="Various test text"/>
       <TextBox FontWeight="Bold" Text="Some bold test text"/>
       <TextBox FontStyle="Italic" Text="Some italic"/>
       <TextBox FontFamily="Times New Roman" Text="A different font, why not?"/>
   </StackPanel>
</UserControl>

The following are the C# event handlers.

private void Button_Click(object sender, RoutedEventArgs e)
{
   (this.Resources["BySize"] as Storyboard).Begin();
}
private void Undo_Click(object sender, RoutedEventArgs e)
{
   (this.Resources["BySize"] as Storyboard).Stop();
}

This example is shown in operation in the working example of By Animation Font Size.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Verify that the application provides a control that can increase font size.

  3. Activate the control, and check that the font sizes increase.

Expected Results

#2 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL24: Using AutoPlay to Keep Silverlight Media from Playing Automatically

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL24. Also see Silverlight Technology Notes.

Description

The objective of this technique is to use the AutoPlay property of MediaElement object, which prevents the MediaElement from playing its media source automatically.

By default the value of AutoPlay is true, which causes any media that is the Source of the MediaElement to play as soon as either the entire source file is loaded (for nonstreaming media) or an initial buffer is loaded (for streaming media). To prevent the possible accessibility issues, developers can instead specifically set AutoPlay to false, so that the user always controls whether the media plays. This technique would thus be used in combination with providing user interface controls that go along with the MediaElement, and that enable the user to control the media. In particular, the user interface controls enable the media to play, pause or stop, with event wiring for those controls associated with the Play, Pause or Stop methods of the MediaElement object.

Examples

Example 1: Setting AutoPlay to false, and providing the typical MediaElement controls in the UI

This example has a UI definition in XAML and interaction logic in C#.

The following is the basic UI in XAML. Note the AutoPlay="false" setting.

<UserControl x:Class="MediaElementControlsAutoPlay.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >
   <Grid x:Name="LayoutRoot">
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*"/>
       </Grid.ColumnDefinitions>
       <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="Auto" />
       </Grid.RowDefinitions>
       <MediaElement x:Name="media" Source="/xbox.wmv"
          Width="300" Height="300" 
          Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3"
          AutoPlay="False"
          AutomationProperties.Name="Video of new Fable game for XBox"           
       />
       <Button Click="StopMedia" 
    Grid.Column="0" Grid.Row="1" Content="Stop" />
       <Button Click="PauseMedia" 
    Grid.Column="1" Grid.Row="1" Content="Pause" />
       <Button Click="PlayMedia" 
    Grid.Column="2" Grid.Row="1" Content="Play" />
   </Grid>
</UserControl>

The following is the C# logic.

 private void StopMedia(object sender, RoutedEventArgs e)
 {
     media.Stop();
 }
 private void PauseMedia(object sender, RoutedEventArgs e)
 {
     media.Pause();
 }
 private void PlayMedia(object sender, RoutedEventArgs e)
 {
     media.Play();
 }
 

This example is shown in operation in the working example of Media Element Controls with AutoPlay False.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. The application is expected to use a MediaElement object to play prerecorded media.

  2. Check that the media does not play automatically as soon as the application loads and displays. Rather, the user is presented with a user interface that can start the media per the user's action.

Expected Results

#2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL25: Using Controls and Programmatic Focus to Bypass Blocks of Content in Silverlight

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL25. Also see Silverlight Technology Notes.

Description

The objective of this technique is to use the combination of Silverlight control activation and programmatic focus to enable the user to skip regions of content in a Silverlight application user interface.

The control that the user activates should clearly indicate that its purpose is to skip content, so that the resulting programmatic focus shift is not interpreted as an undesired change of context.

The object to call focus to (the receiver of focus after the user-initiated action is triggered) has to be a Control in the Silverlight programming model. This is because the Focus method must be called on the target, and therefore the target must inherit the Control class. So, an application author might call focus to a read-only TextBox, or perhaps a RichTextBox, depending on the purpose of the Silverlight application and its user interface design. You can also focus a UserControl, for cases where the area to call focus to represents a custom control implementation.

Setting TabIndex (not recommended)

Silverlight provides a TabIndex attribute that can be used to override the default-generated tab sequence. Do not attempt to adjust tab index as a technique for getting past content blocks. Doing so will create a focus order that does not match the apparent visual order, as described in SC 2.4.3.

Examples

Example 1: User-enabled control that programmatically sets focus

The following is the XAML for the user interface.

   <StackPanel Name="LayoutRoot">
       <Button Name="bypassbtn1" Click="bypassbtn1_Click">Skip menus, go to main page content</Button>
       <!intervening content-->
       <StackPanel>
           <RichTextBox Name="rtb_MainContent" IsReadOnly="True">
           <Paragraph>Here is the main content ....</Paragraph>
           </RichTextBox>
       </StackPanel>
   </StackPanel>
   

The following is the event handler that forces focus.

       private void bypassbtn1_Click(object sender, RoutedEventArgs e)
       {
           rtb_MainContent.Focus();
       }

This example is shown in operation in the working example of Programmatic Focus.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Open the test HTML page for a Silverlight application.

  2. Check for a control that indicates that activating that control can skip to some particular region of the content.

  3. Activate that control. Verify that activating the control causes focus to go to that region, and that a repeated block or blocks of content are skipped.

Expected Results

#2 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL26: Using LabeledBy to Associate Labels and Targets in Silverlight

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL26. Also see Silverlight Technology Notes.

Description

The objective of this technique is to use the AutomationProperties.LabeledBy property to associate a non-interactive text label with an interactive field such as a Silverlight TextBox or RichTextBox. By using this technique, application authors can use the label text as the default source for AutomationProperties.Name on the target, and do not need to specify an explicit AutomationProperties.Name.

This technique relies on several Silverlight features: the Name property for identifying specific UI elements, the AutomationProperties API, and the ElementName variation of Silverlight data binding. AutomationProperties.Name can be set on and can target any Silverlight UIElement. The two most common uses of this labeling technique are for labeling a form field, and for associating an image caption with an image.

Examples

Example 1: Two TextBox form fields, each with a LabeledBy reference to a text label

The following is XAML for the UI (and can be inserted into a UserControl XAML root or elsewhere). No code-behind is necessary for this example; the element relationships are established by the {Binding} values in the XAML and interpreted appropriately by the Silverlight run time.

   <StackPanel x:Name="LayoutRoot" Background="White">
       <StackPanel Orientation="Horizontal">
           <TextBlock Name="lbl_FirstName">First name</TextBlock>
           <TextBox AutomationProperties.LabeledBy="{Binding ElementName=lbl_FirstName}" Name="tbFirstName" Width="100"/>
       </StackPanel>
       <StackPanel Orientation="Horizontal">
           <TextBlock Name="lbl_LastName">Last name</TextBlock>
           <TextBox AutomationProperties.LabeledBy="{Binding ElementName=lbl_LastName}" Name="tbLastName" Width="100"/>
       </StackPanel>
   </StackPanel>

This example is shown in operation in the working example of Labels.

Example 2: Labeling / captioning an image
       <Image HorizontalAlignment="Left" Width="480" Name="img_MyPix"
                Source="snoqualmie-NF.jpg"
                AutomationProperties.LabeledBy="{Binding ElementName=caption_MyPix}"/>
       <TextBlock Name="caption_MyPix">Mount Snoqualmie North Bowl Skiing</TextBlock>
       

Note: If the caption is not a usable text alternative, use the technique SL5: Defining a Focusable Image Class for Silverlight, or change the caption text.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. To see UI Automation, use Microsoft Windows as platform.

  2. Use a verification tool that is capable of showing the full automation tree. (For example, use UIAVerify or Silverlight Spy; see Resources links.)

  3. Verify that any element that has a LabeledBy value has an associated visible label.

  4. Verify that any element that has a LabeledBy value uses the Name value from that label.

Expected Results

#3 and #4 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL27: Using Language/Culture Properties as Exposed by Silverlight Applications and Assistive Technologies

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL27. Also see Silverlight Technology Notes.

Description

The objective of this technique is to use the combination of HTML Lang attribute, CultureInfo and Language to correctly specify the language of the entirety of Silverlight content, or of parts within the Silverlight content.

In general, Silverlight does not attempt to repurpose HTML Lang, because Silverlight is not HTML. Instead, internally within the Silverlight content area, Silverlight uses language definition concepts that relate to XML (Language is a remapping of xml:lang) or .NET Framework programming (CultureInfo). For these reasons, HTML Lang techniques as described in [H58] are not useful for Silverlight programming of Silverlight-specific "parts".

What becomes important in Silverlight application programming then is to make sure that the HTML language concept of Lang and the Silverlight language concept of CultureInfo or Lang are not at odds with one another, or reporting misinformation. In particular, application authors should avoid situations where an assistive technology has HTML Lang available for programmatic determination of either page or part, but the effective runtime language in the Silverlight part is different. The result here might be that a screen reader that changes functionality such as phonetic pronunciations would not correctly read the text content from the Silverlight content. Avoiding this situation is largely a matter of due diligence on the part of a Silverlight application author, OR on the part of the Web page author who authors surrounding HTML, in cases where a Web page is embedding Silverlight content or packages that the Web page's author did not actively develop and is only consuming/embedding.

The following is a general recommendation that summarizes the detailed discussion in subsequent subheadings:

  • If the Silverlight application does not have a strong emphasis on presenting textual information with a particular language association, HTML Lang should be left blank. This causes assistive technologies to defer to either user agent or platform language settings. Silverlight is able to determine these same language values at run time, and language behavior of assistive technologies and of Silverlight is kept synchronized through the use of the same external information set.

  • If the Silverlight application DOES have a strong emphasis on presenting textual information with A SINGLE particular language association, HTML Lang should be assigned to report that specific language either for whole page or at least for the Silverlight object tag. This enables assistive technologies to pick up the value, per H57: Using language attributes on the html element HTML. Aside from due diligence during development and deployment, Silverlight application code might choose to enforce that its runtime CultureInfo is really the same. This could be addressed with a specific HTML DOM helper function.

  • If the Silverlight application has MULTIPLE language associations, the best option is to separate the Silverlight application into object parts at the HTML level, to assure that HTML Lang and intended runtime language do not clash. This is particularly important if the application is actively resetting CurrentCulture away from the user settings of platform or user agent. For more information, see SL4: Declaring Discrete Silverlight Objects to Specify Language Parts in the HTML DOM.

HTML Lang

When Silverlight is embedded in an HTML document with the <object> element, the value of the HTML Lang attribute of the surrounding HTML becomes a factor. Browsers process the outer HTML, and the browser's processing has possible influence over values reported to any DOM script that acts, or to any accessibility framework that is reporting the browser content. The preferred way for a Silverlight application to address SC 3.1.1 is to correctly specify the HTML Lang value in the hosting HTML page. This technique should be used in conjunction with H57: Using language attributes on the html element HTML. By using the same language values with both techniques as a better practice, H57 will satisfy 3.1.1 while setting the language value of the Silverlight content to match will assist authors in meeting SC 3.1.2.

The Silverlight runtime itself does not attempt to inherit language settings that come from markup that is outside the Silverlight-specific content. In particular, the HTML Lang attribute applied to the html tag, Lang on host object tag, specific parameters of the Silverlight object tag, all have no affect on the value of any Silverlight Language attribute. Instead, the Silverlight Language defaults to the CultureInfo of the Silverlight runtime as instantiated by HTML object tag invocation. It is expected that if a Silverlight application contains extensive text where language of text is a factor for assistive technology purposes, developers will manually set the HTML Lang tag to match the Language value on the Silverlight root element in XAML. Development tools might or might not enforce or inform the relationship between HTML Lang and Silverlight Language; that consideration is outside the scope of Silverlight as a technology. If language is not a major factor in the application, application authors should consider leaving HTML Lang blank on the hosting HTML page.

You can programatically determine the value of HTML Lang of surrounding HTML from within the Silverlight API, by using the DOM-bridging method HtmlElement.GetAttribute. Otherwise, this can be determined by techniques other than Silverlight's (such as scripting to the HTML DOM of the hosting browser).

Silverlight Language property

Language is an attribute that is available on all Silverlight objects that directly represent a UI element. Language can be queried (or set) by Silverlight managed code run time, such that the Language value can be programatically determined within the Silverlight programming model.

The format of the value that is used to set Language is based on ISO-639-1, and is thus compatible with http://www.rfc-editor.org/rfc/bcp/bcp47.txt.

Language has a behavior that parallels the behavior of xml:lang in an XML document: if Language is set on a parent element, all child elements inherit that Language value. An actual xml:lang attribute in XAML is also valid for this purpose.

Language can be set at the root of a XAML document, so that the entire UI shares the same language setting. If Language is not explicitly set at the root by application markup, Language is inferred per running instance, based on processing the acting CultureInfo at run time.

However, another usage is for application authors to set Language on a specific child element, to override the root-level or client-environment-inferred Language value. This enables consciously embedding a content part that is deliberately in a different language than the remainder of the Silverlight content.

Exactly what happens when a Language is set on a part is not always specified, and is largely a matter of implementation detail of the individual Silverlight classes that might be a "part". However, as an informative generalization, the value of Language might affect considerations such as: how white space is processed (in particular CR or LF); character sets for fonts; string formatting when using APIs specifically on that part.

CultureInfo

CultureInfo is a concept that is relevant to .NET Framework programming. This concept applies to Silverlight because Silverlight uses a specific implementation of a CLR runtime that uses .NET Framework principles. CultureInfo potentially specifies both a language and a culture. This distinction becomes relevant for advanced string formatting concepts that are provided in the .NET Framework, such as decimal separators, dates, and currency. For example, an application author might simply specify "en" if the author did not care about string formatting, but might specify "en-GB" if the application was using string formatting for currency values with the intention of displaying Pounds Sterling as currency unit in string formatting.

Silverlight applications often run using an inferred CultureInfo based on the operating system where the user agent browser host exists (in other words, the culture of the client computer where the Silverlight application is run). This CultureInfo can be queried by applications at run time; see CultureInfo.CurrentCulture. Application authors can deliberately constrain the set of CultureInfo cases that a Silverlight application can be run under, in order to verify that necessary string resources for that culture are available in that application. This is done by setting <SupportedCultures> in the Silverlight project settings. If a user accesses the application on a client that is outside the SupportedCultures, the application author has the following choices:

  • Use a fallback resource set representing a neutral culture; this is enabled automatically by the Silverlight resources lookup behavior, so long as the project includes resources identified as being culture-neutral. This is the preferred approach.

  • Use client logic to detect the culture, and initiate a client-side redirect to request either a different XAP or a different hosting HTML page.

  • Trap requests at the server level by checking lang request in the header. This varies between server implementations, is not a Silverlight-specific technique, and is not discussed here.

For more information, see How to: Create a Build that Targets a Specific Culture.

CultureInfo generally applies to the Silverlight application as a whole. There are advanced techniques whereby worker threads can be run as separate cultures, but that is not discussed here and is not relevant because only the main UI thread has relevance to Web content accessibility. So, if an application author wants to declare specific language settings for a part (component, region or control) of the Silverlight application, a different Silverlight-specific property Language is used.

Examples

These examples show Silverlight behaviors that are based on interpreting the Language property value, as a way of illustrating the programmatic determination of language values specifically in the Silverlight application framework. To determine HTML Lang, application authors should use the HTML DOM as enabled by browser host scripting, rather than Silverlight APIs. HTML DOM techniques are not shown here because they are specific to browsers or scripting frameworks, not to Silverlight.

Example 1: Language set at root-level of Silverlight content, inherits

This example features a XAML UI and logic that reports information to demonstrate that the information is programmatically determinable. This example shows determination of the Language property.

<UserControl x:Class="LangProperties.MainPage" 
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Language="en-gb">
 <StackPanel x:Name="LayoutRoot" Background="White">
       <Border BorderBrush="Red" BorderThickness="2">
           <TextBlock Language="zh-cn" Text="(()共" Name="t2" VerticalAlignment="Top" TextWrapping="Wrap" Height="100"/>
       </Border>
       <Border BorderBrush="Red" BorderThickness="2">
           <TextBlock Text="(()共" Name="t3" VerticalAlignment="Top" TextWrapping="Wrap" Height="100"/>
       </Border>
       <Button Click="button1_Click">IETF Language of this app</Button>
 </StackPanel>
</UserControl

private void button1_Click(object sender, RoutedEventArgs e)
{
   Button b = sender as Button;
   MessageBox.Show(b.Language.IetfLanguageTag);
   // this will be 'en-gb' because inherits from the root
}

This example is shown in operation in the working example of Language Properties.

Example 2: Determine CurrentCulture; runtime verification that CurrentCulture and the surrounding HTML's current Lang value do not report different language settings

The following is an event handler that can be hooked to an object lifetime event such as UserControl.Loaded on the Silverlight XAML root. This example demonstrates property access to several of the relevant language properties that are present in Silverlight and shows a specific way to compare CultureInfo and Lang by a "not equals" check after constructing a CultureInfo based on the Lang string. To apply this test, the hosting HTML page may need to be altered to declare a specific HTML Lang; default Silverlight aspx or html test pages do not declare HTML Lang.

       private void RunLanguageDetectLogic(object sender, RoutedEventArgs e)
       {
           CultureInfo thisAppCC = CultureInfo.CurrentCulture;
           CultureInfo thisAppCUIC = CultureInfo.CurrentUICulture;
           HtmlDocument thisPage = HtmlPage.Document;
           String thisAppHTMLLang = (string) thisPage.DocumentElement.GetProperty("lang");
           CultureInfo CCFromLang = new CultureInfo(thisAppHTMLLang);
           if (CCFromLang != thisAppCC && CCFromLang.ToString() !=  "")
           {
               TextBlock tb = new TextBlock();
               tb.Text += "Warning: the current culture for the run time (";
               tb.Text += thisAppCC.ToString();
               tb.Text += ") does not match the culture indicated in hosting HTML's Lang (";
               tb.Text += CCFromLang.ToString();
               tb.Text += ").";
               tb.Inlines.Add(new LineBreak());
               tb.Inlines.Add("Typical action here would be to redirect the request to an HTML page
                 where the Lang is correct for user's current culture as determined from the OS.");
               LayoutRoot.Children.Add(tb); 
               //LayoutRoot refers to the default MainPage.xaml element from a VS-template Silverlight Application
           }
       }

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Verify that language settings are respected by individual Silverlight control characteristics. (Exactly what behavior manifests the language difference varies per Silverlight class implementation. For some testing ideas, see Creating Globally Aware Applications).

  3. Verify that any interaction between HTML Lang in the HTML and the Language or CultureInfo from the Silverlight application do not result in a clash of language information, either in terms of basic application behavior or in how an assistive technology decides to process language information.

Expected Results

#2 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL28: Using Separate Text-Format Text Captions for MediaElement Content

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL28. Also see Silverlight Technology Notes.

Description

The objective of this technique is to use text captioning that comes from a separate text file, synchronize the captions with the media in a Silverlight MediaElement, and display the captions in Silverlight.

There are two variations of the general theme of implementing Silverlight media player controls to work with external timed text: using built-in capabilities of the Microsoft Expression Encoder tool, and using parsing code that consumes caption as a raw file format and converts that format into the Silverlight API's TimelineMarkers representation. This technique primarily addresses how to use the Expression Encoder technique, along with media player templates that are also provided by Expression Encoder or related Silverlight SDKs such as the Smooth Streaming SDK.

At a pure architecture level, Silverlight uses the TimelineMarkers API to display caption text at synchronized times. The Expression Encoder and Expression Blend tools provide a front end to drive the TimelineMarkers API for the supported formats. The intention of the architecture is so that Silverlight as a run-time has a base architecture that could potentially use any existing or future timed text format, but the tools for Silverlight (rather than built-in features of the runtime) provide the optimized workflow for producing captioned media projects.

A procedure for using the Expression Encoder and Expression Blend tools to produce a Silverlight media player application that can consume timed text in TTML format is provided as Example 1 in this technique. (Note: prior to the approval of TTML by W3C, DFXP was a format that used much of the eventual TTML vocabulary. In tools that predate TTML, this format is often identified as DFXP.)

A purely code-based parsing technique, with the goal of avoiding Expression Encoder dependencies, is necessarily more complex. This is because there are multiple issues to solve:

  • Obtaining and validating the timed text file

  • Parsing the format into general information items like timings, text, format etc. that are either consumable directly in a Silverlight API, or useful as intermediates

  • Using the timecode information to create TimelineMarker representations for each timed text entity

  • Associating the TimelineMarkers with media loaded by the player

  • Finding a place to store the additional formatting that is conveyed, including the text and any formatting

  • Handling events from TimelineMarkers in the media player, in such a way that text and formatting behavior can be retrieved and presented in the Text part of the player UI

Text Captioning Formats

There are several existing text-based formats that are used for text captioning of prerecorded media. The following are supported as formats if using the Expression Encoder tool as shown in Example 1 (where the Expression Encoder generated Silverlight application uses the existing Silverlight MediaPlayerTemplate and the TimedTextLibrary component.) For more information on which timed text formats can be referenced in an Expression Encoder project, see About Captioning (Expression documentation on MSDN).

  • SAMI (Synchronized Accessible Media Interchange). For more information on this format, see Understanding SAMI 1.0 on MSDN.

  • SMIL (Synchronized Multimedia Integration Language). For more information on this format, see Synchronized Multimedia Integration Language (SMIL 3.0) on W3C site.

  • TT (Timed Text) in particular TTML (Timed Text Markup Language). For more information, see Timed Text Markup Language (TTML) 1.0 on W3C site.

  • TTML (previously known as DFXP). This is the Timed Text format used by Adobe Flash for its FLVPlaybackCaptioning component, and is produced by a variety of tools and full-service captioning vendors. For more information, see Captions on the Adobe site.

The following are not supported directly in Expression Encoder templates. To use these formats, application authors would have to write parsing logic, as shown in Example 2:

  • MPEG Part 17 / 3GPP Timed Text. For more information, see ISO/IEC 14496-17:2006 on ISO site.

  • Other formats that have not realized wide adoption, for example Universal Subtitle Format.

  • In addition to these formats, other formats for device-specific recorded media (such as DVD encoded tracks) could be cross-purposed for use by streaming/online media.

Rather than build the parsing logic for all these formats into the Silverlight runtime, or choosing just one of these formats to support, the Silverlight design for text captioning at the core level instead makes the TimelineMarkers property of a MediaElement writeable, independently of the value of Source. The format of each TimelineMarker in the collection is very simple: a time value expressed in the format, and the text value of the text for that synchronized caption. The time format for TimelineMarkers is documented as TimelineMarker reference on MSDN. Converting timed text formats to TimelineMarkers form as consumed by the Silverlight core can be done by following any of the following application design patterns:

  • Authoring the project using Expression Encoder, and using the Expression MediaPlayerTemplate as the media player UI. In this case, Expression produces a Silverlight application that includes assemblies that are generated from code templates. The default build of the project provides a working library that handles all tasks related to timed-text format conversion, from the formats as documented at About Captioning (Expression documentation on MSDN).

  • The templates of an Expression Encoder project can also be edited, either editing the XAML for the UI by altering the template, or by altering the C# code files that define various aspects of the media player logic, including the timed text format parsers. Then the project can be rebuilt using the desired customizations. Using this technique, it is possible to adapt the code to support timed text formats that are not directly supported in the Expression Encoder project UI.

  • Using a 3rd party media player implementation that also includes a codebase for processing timed text formats, producing TimelineMarkers, and displaying the captions in the player-specific UI.

  • Including a library that handles just the format parsing, and using APIs of this library as part of the Silverlight application code-behind.

  • Writing all logic that is necessary for timed text parsing AND application UI display, and including it all in the main Silverlight application library.

Examples

Example 1: Using Expression Encoder and Expression Blend to produce a Silverlight media player project from tool output and templates

By far the simplest technique for incorporating existing timed-text information is to use Microsoft Expression Encoder and the media player templates that an Expression Encoder project produces by default. You can use timed text in any of the following formats: DFXP, SAMI, SRT, SUB, and LRC. Associating a caption file with a media source is done as an "import" operation in the Expression Encoder tool. However, the "import" does not necessarily mean that the timed text file is integrated into the media stream; Silverlight authors have the option to preserve the file separation. This is useful if the application is obtaining timed text from a third party source in real-time, or if Silverlight authors have a production pipeline that makes it difficult to have the captioning ready in time to be encoded in the stream along with the audio-visual source files. For third-party timed text files that are served directly from the third party's HTTP servers, it can be useful to supply a dummy URL in the initial project encoding. The output of the Expression Encoder project parameterizes many of the project settings at the HTML level. This makes it possible to change the URL at any time prior to deployment without having to rebuild the project. The following code is the HTML output of a sample Expression Encoder project. Note the CaptionSources node in the initparams; that is the information item that informs the Expression Encoder templates where to find the timed text file.

     <object data="data:application/x-silverlight," type="application/x-silverlight" width="100%" height="100%">
       <param name="source" value="MediaPlayerTemplate.xap"/>
       <param name="onerror" value="onSilverlightError" />
       <param name="autoUpgrade" value="true" />
       <param name="minRuntimeVersion" value="4.0.50401.0" />
       <param name="enableHtmlAccess" value="true" />
       <param name="enableGPUAcceleration" value="true" />
       <param name="initparams" value='playerSettings = 
         <Playlist>
           <AutoLoad>true</AutoLoad>
           <AutoPlay>true</AutoPlay>
           <DisplayTimeCode>false</DisplayTimeCode>
           <EnableOffline>false</EnableOffline>
           <EnablePopOut>false</EnablePopOut>
           <EnableCaptions>true</EnableCaptions>
           <EnableCachedComposition>true</EnableCachedComposition>
           <StretchNonSquarePixels>NoStretch</StretchNonSquarePixels>
           <StartMuted>false</StartMuted>
           <StartWithPlaylistShowing>false</StartWithPlaylistShowing>
           <Items>
             <PlaylistItem>
             <AudioCodec></AudioCodec>
             <Description></Description>
             <FileSize>2797232</FileSize>
             <IsAdaptiveStreaming>false</IsAdaptiveStreaming>
             <MediaSource>thebutterflyandthebear.wmv</MediaSource>
             <ThumbSource></ThumbSource>
             <Title>thebutterflyandthebear</Title>
             <DRM>false</DRM>
             <VideoCodec>VC1</VideoCodec>
             <FrameRate>30.00012000048</FrameRate>
             <Width>508</Width>
             <Height>384</Height>
             <AspectRatioWidth>4</AspectRatioWidth>
             <AspectRatioHeight>3</AspectRatioHeight>
             <CaptionSources>
               <CaptionSource Language="English" LanguageId="eng" Type="Captions" Location="thebutterflyandthebear.eng.capt.dfxp"/>
             </CaptionSources>
           </PlaylistItem>
         </Items>
      </Playlist>'/>       
   </object>
   

The templates include a library that handles any parsing requirements for the chosen timed text format, both at the level of getting the basic text and timing into the TimelineMarkers used by the run-time MediaElement, and for preserving a subset of format information that can reasonably be crossmapped from the formatting paradigm of the source (typically HTML/CSS) into the Silverlight text object model of the text element that displays the captions in the running Silverlight application.

The following is a brief description of the procedure for creating a project that incorporates a separate timed text file.

  1. From the initial Expression Encoder screen, select New Project from the File menu.

  2. In the Load a new project dialog, select Silverlight Project.

  3. From the File menu, select Import. Choose the primary media source file the project will use.

  4. In the Text tab, find the listing for the media source file. Click the + icon to the right of the file name. This opens a file dialog.

  5. Choose a timed text file to add to the project.

  6. Build the project. By default the project produces a complete output folder. The folder includes the media player template XAP, the timed text file as a separate file, and additional libraries and XAPs that support the basic template and/or the timed text capabilities.

  7. Optionally, use the features in the Templates tab of Expression Encoder to generate a template copy. You can edit the template copy in other tools such as Expression Blend or Visual Studio, to change the layout or behavior from the default media player template. Template editing can address requirements such as applying a particular branding or "look" to the player user interface.

The following is a screenshot of the Expression Encoder (version 4) interface. The + icon mentioned in Step 4 is highlighted in this screenshot with a red diamond. The Templates tab mentioned in Step 7 is on the right side, top-middle. Note that all tabs of an Expression user interface are dockable; the orientations shown here are the default, but could be in different locations on any given computer or configuration.

Expression Encoder screenshot

Example 2: Code parses timed text; MediaElement handles MarkerReached, displays marker text in application-defined TextBox

This example defines a very simple media player class that includes a display surface, basic controls, and a text display for captions as part of its default template. The usage code for this control in XAML is simple, but only because the majority of the implementation is present in the definition of the media player class.

The following is example usage XAML:

 <local:SimpleMediaPlayerWithTT Width="480" Height="360" CaptionUri="testttml.xml" MediaSourceUri="/xbox.wmv" />
    					

Note the attributes CaptionUri and SimpleMediaPlayerWithTT. Each of these is a custom property of the media control class TTReader. CaptionUri in particular references a URL, in this case a local URL from the same server that serves the Silverlight XAP. The timed text file could come from a different server also, but comes from a local server in this example to conform to the behavior of the test file.

The following is the generic.xaml default template for the media player control. The template is mainly relevant for showing the named elements that are shown in the initialization code.

               <ControlTemplate TargetType="local:SimpleMediaPlayerWithTT">
                   <Border Background="{TemplateBinding Background}"
                           BorderBrush="{TemplateBinding BorderBrush}"
                           BorderThickness="{TemplateBinding BorderThickness}">
                       <Grid x:Name="vroot">
                           <Grid.RowDefinitions>
                               <RowDefinition Height="*"/>
                               <RowDefinition Height="50"/>
                               <RowDefinition Height="80"/>
                           </Grid.RowDefinitions>
                           <MediaElement x:Name="player" AutoPlay="False"/>
                           <StackPanel Orientation="Horizontal" Height="50" Grid.Row="1">
                               <Button x:Name="player_play">Play</Button>
                               <Button x:Name="player_pause">Pause</Button>
                               <Button x:Name="player_stop">Stop</Button>
                           </StackPanel>
                           <ScrollViewer x:Name="scroller" Height="50" Grid.Row="2">
                           <TextBox IsReadOnly="True" x:Name="captions"/>
                           </ScrollViewer>
                       </Grid>
                   </Border>
               </ControlTemplate>
               

The following is the initialization code that is for general infrastructure. OnApplyTemplate represents the code wiring to the template-generated UI.

   public class SimpleMediaPlayerWithTT : Control
   {
       MediaElement player;
       TextBox captions;
       public SimpleMediaPlayerWithTT()
       {
           this.DefaultStyleKey = typeof(SimpleMediaPlayerWithTT);
       }
       public override void OnApplyTemplate()
       {
           base.OnApplyTemplate();
           player = this.GetTemplateChild("player") as MediaElement;
           captions = this.GetTemplateChild("captions") as TextBox;
           scroller = this.GetTemplateChild("scroller") as ScrollViewer;
           //event hookups and prop inits
           player.MediaOpened += new RoutedEventHandler(OnMediaOpened);
           player.MediaFailed += new EventHandler<ExceptionRoutedEventArgs>(OnMediaFailed);
           player.Source = this.MediaSourceUri;
           player.MarkerReached+=new TimelineMarkerRoutedEventHandler(player_MarkerReached);
           Button player_play = this.GetTemplateChild("player_play") as Button;
           player_play.Click += new RoutedEventHandler(player_play_click);
           Button player_pause = this.GetTemplateChild("player_pause") as Button;
           player_pause.Click += new RoutedEventHandler(player_pause_click);
           Button player_stop = this.GetTemplateChild("player_stop") as Button;
           player_stop.Click += new RoutedEventHandler(player_stop_click);
       }
       // mediaelement in template events
       void OnMediaOpened(object sender, RoutedEventArgs e)
       {
           LoadCaptions(captionUri);
       }
       void OnMediaFailed(object sender, ExceptionRoutedEventArgs e)
       {
       }
       void player_MarkerReached(object sender, TimelineMarkerRoutedEventArgs e)
       {
           captions.SelectedText = e.Marker.Text + "\n";
           scroller.ScrollToVerticalOffset(scroller.ScrollableHeight);
       }
       void player_play_click(object sender, RoutedEventArgs e)
       {
           player.Play();
       }
       void player_pause_click(object sender, RoutedEventArgs e)
       {
           player.Pause();
       }
       void player_stop_click(object sender, RoutedEventArgs e)
       {
           player.Stop();
       }
       // properties
       private Uri captionUri;
       public Uri CaptionUri
       {
           get { return captionUri; }
           set { captionUri = value; }
       }
       private Uri msUri;
       public Uri MediaSourceUri
       {
           get { return msUri; }
           set { msUri = value; }
       }
       

The following is the logic that is particular to obtaining the separate caption file. Some of this logic is referenced in the preceding template-specific event handlers. This example uses the asynchronous WebClient technique to request the file result of the CaptionUri. Make sure to use AutoPlay=false or some other means to allow time for the caption file to download before attempting to play the media file.

       private void LoadCaptions(Uri captionURL)
       {
           WebClient wc = new WebClient();   // Web Client to download data files
           if (captionURL != null)
           {
               wc.DownloadStringCompleted +=
                   new DownloadStringCompletedEventHandler(OnDownloadStringCompleted);
               wc.DownloadStringAsync(captionURL);
           }
       }
       private void OnDownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
       {
           if (!e.Cancelled && e.Error == null && e.Result != "")
           {
               string xml = e.Result.Trim();
               ParseCaptionData(new StringReader(xml));
           }
       }
       

The actual parsing can be done using a combination of the "XML to Linq" facilities of an optional Silverlight library, and standard .NET Framework string format APIs from the Silverlight core. An implementation is NOT provided here, due to length considerations. TTML supports a number of profiles and capabilities. The basic pattern to follow in the implementation is to obtain the necessary text and timing information, and to pass it to a function that might resemble the following code template. This code template takes the raw information, generates a new TimelineMarker, and adds it to the collection assigned to the active MediaElement as identified by "player" in the application.

       public void AddMediaMarker(string time, string type, string data)
       {
           TimelineMarker marker = new TimelineMarker();
           marker.Time = new TimeSpan(0,0,(Convert.ToInt32(time.Trim())/1000));
           // this logic could vary depending on how time is formatted in the input string; this one assumes raw milliseconds
           marker.Type = type;
           marker.Text = data.Trim();
           player.Markers.Add(marker);
       }

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. That application plays media that is expected to have text captioning.

  2. Check that the text area in the textbox shows captions for the media, and that the captions synchronize with media in an expected way.

Expected Results

#2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL29: Using Silverlight "List" Controls to Define Blocks that can be Bypassed

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL29. Also see Silverlight Technology Notes.

Description

The objective of this technique is to use some of the basic user interface objects in Silveright to produce blocks of content that are identified as a "List" to accessibility frameworks and to Silverlight's own tab sequence navigation behavior.

Using the "List" technique results in a tab sequence behavior whereby that element is treated as a single tab stop, even if that element has consituent elements (the list items) that would otherwise be considered additional tab stops in the main tab sequence. In the default key handling, when the user presses the TAB key while focus is on a List, the focus goes to the next element after the List. To focus the items of the list, the user would press the Arrow keys rather than TAB. In the Silverlight programming model for controls, this tab sequence behavior is expressed by the TabNavigation property holding the value of Once. The Silverlight ListBox is a control that reports itself as "List" role, and that has a default TabNavigation.Once value. Thus ListBox as per this technique is a lightweight technique for producing blocks that can be bypassed. It is specifically a lightweight technique because it can be accomplished by writing simple application-level XAML and using only the Silverlight core libraries.

Silverlight also supports more full-featured techniques for producing bypass blocks that are based on common user interface features such as menus or toolbars. However, using toolbars in Silverlight is inherently not as lightweight because the Silverlight core libraries themselves do not include a ready-made toolbar. Silverlight provides a ContextMenu as part of the Silverlight Toolkit extensions, but the behavior of this particular menu does not easily address the bypass block scenario. Silverlight includes all the infrastructure and necessary base classes for defining a toolbar or a menu that could address the bypass block scenario. Many third-party control implementations of menus and toolbars exist, either as part of control packages that are sold by control vendors, or through community mechanisms such as CodePlex or third-party sites that provide free source code. For some examples, see the following:

If application authors use a built-in control such as ListBox where the accessibility framework reported role is not traditionally associated with a navigation role, it is a best practice to set AutomationProperties.Name such that the name informs the user of the purpose of the list control. Otherwise, the role alone leaves this ambiguous. For example, an author might name the list control "Navigation control".

Often the List control itself is focusable. So long as the List control has a visual focus indicator, that behavior might be acceptable. However, it might provide a better user experience to deliberately have the List itself non-focusable, and instead have focus fall to the first List item when focus reaches that region. Otherwise, the List might be perceived as an "extra" tab stop to some users. To enable that behavior, set IsTabStop to false on the List control. The List itself still provides the intended tab navigation behavior, and is still reported and identified to accessibility frameworks and assistive technologies, even when the List container is not focusable. This is shown in Example 1, by setting IsTabStop as part of a Style.

When an accessibility framework presents a List, assistive technologies are generally expected to continue to support use of the same key behavior as the default behavior, and to report to users that the item is a List when it is focused. If assistive technologies use the accessibility framework APIs for navigation, the items in the list are considered child elements. Navigating either by spatial direction (e.g. NAVDIR_RIGHT in MSAA) or sequential direction (e.g. NAVDIR_NEXT in MSAA) skips the list items and goes to the spatial/next peer.

Examples

Example 1: Customize the behavior and appearance of a ListBox to construct a navigation control that can be bypassed

In this example, several properties that influence the items presentation behavior of the Silverlight core control ListBox are adjusted to make it suitable for a navigation control. The behavior of this control is that when the tab sequence reaches the control, "next" or spatial navigation continues on to other controls, rather than through the child controls of the list's items/options. This is enabled and properly reported because ListBox reports its accessibility framework role as "List", uses TabNavigation = Once as default (because it is the default, TabNavigation does not have to be set explicitly in the markup). ListBox has default key handling for the arrow keys (to enable traversing the choices in the menu by keyboard-only). The control could also be visually a menu or perhaps other user interface control metaphors, depending on how it is visually templated and composited. Regardless of appearance, the accessibility framework and any assistive technologies based on that framework will treat the control as a "List". This example is templated as a horizontally oriented toolbar-type control. The items in this example are Button controls, but could be templated to not appear quite as button-like, or could instead use another focusable control for the items such as a read-only TextBox.

<UserControl x:Class="TabNavigation.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
   <StackPanel x:Name="LayoutRoot" Background="White">
       <ListBox AutomationProperties.Name="Navigation Control">
           <ListBox.ItemsPanel>
               <ItemsPanelTemplate>
                   <StackPanel Orientation="Horizontal"/>
               </ItemsPanelTemplate>
           </ListBox.ItemsPanel>
           <ListBox.ItemContainerStyle>
               <Style TargetType="Control">
                   <Setter Property="IsTabStop" Value="False"/>
               </Style>
           </ListBox.ItemContainerStyle>
           <Button>Home</Button>
           <Button>Search</Button>
           <Button>Tools</Button>
           <Button>Help</Button>
       </ListBox>
   </StackPanel>
   <Button>Button here to show a focusable peer control beyond the list</Button>
</UserControl>

The following is an illustration of what such a control might look like:

Screen shot of a focusable control beyond a list of buttons

This example is shown in operation in the working example of Tab Navigation.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Press TAB key to traverse typical tab sequence within the Silverlight application. Verify that common areas in the user interface composition ("blocks") that are reporting the List role per this technique can be bypassed without having to tab through each constituent part (the "items/children" of the List).

  3. Verify that the list children are still accessible by keyboard, by using ARROW keys rather than TAB.

  4. Engage an accessibility framework test tool such as UIAVerify. Examine roles in the automation tree, and verify that the List used for bypass behavior reports a combination of name+role that is consistent with the behavior.

  5. Use a screen reader to verify that name and role are reported properly.

Expected Results

#2 and #3 are true, and either #4 OR #5 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL30: Using Silverlight Control Compositing and AutomationProperties.Name

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL30. Also see Silverlight Technology Notes.

Description

The objective of this technique is to properly apply Silverlight control composition techniques that can present text and non-text in UI as part of the same control. This technique explains the consequences that using control composition has on how that control is reported to the accessibility frameworks that Silverlight supports.

Silverlight control composition concepts are relevant either to Silverlight developers who define and package a Silverlight control for use by other Silverlight authors, or for Silverlight application authors that use Silverlight controls in their UI but use the content properties of such controls to include several other elements in a composite layout.

In Silverlight programming and UI definition, Silverlight authors can use control composition to define a parent control that initiates an action. The control can have component parts, such as text and non-text composition pieces that display within the control and have equivalent meaning. Silverlight authors can rely on the text component of the control to provide any text alternative for purposes other than the accessibility framework. However, Silverlight authors should declare alternative text on the control that is specifically consumed by accessibility frameworks, by setting AutomationProperties.Name as an attribute in XAML. In most cases, this text can be the same as the visible text in the control composition, per the definition of 'label' in SC 4.1.2.

Note that this technique does not result in a duplication of text, as explained in H2. This is because the element parts of control composition are either inherently not focusable separately, or can be specified by instance-specific properties to behave as if they cannot be focused. The parts in Silverlight composition are not promoted to the accessibility frameworks as parts of an application-specific UI Automation tree, so that control composition as an implementation detail does not interfere with the usage of controls by Silverlight application authors. The primary source of accessibility-related information is the specific AutomationProperties.Name property as set on the parent control in the composition, which is set by the application author rather than the control author.

The control author does specify the information that is reported to accessibility frameworks as the "ClassName", which is often used by assistive technologies for identification purposes and is appended to any "Name" value. For example, if an application author includes a "Widget" control, and gives it an AutomationProperties.Name value of "Show Map", an assistive technology might identify the element as "Show Map widget". The "Show Map" part comes from the application author code, and the "widget" part comes from the Widget control implementation code.

Examples

Example 1: Button is composed with a StackPanel that contains nontext and text content

In this example the TextBlock that goes with the graphic image conveys the text information for non-accessibility purposes. The Button has internal composition that combines text from a non-focusable TextBlock part and an image part. Therefore the "Pause" Text is not promoted to serve as "Name" through built-in Button automation peer logic. The Silverlight application author is responsible for explicitly setting AutomationProperties.Name on the Button so that the text equivalent is available to the accessibility framework. This example shows the XAML UI. The logic, which might be attached to Button with a Click handler, is not shown.

 <Button
   Height="20" Width="50" AutomationProperties.Name="Pause" 
 >
   <StackPanel Orientation="Horizontal" >
     <Image Height="12" Width="12" Source="/icon_pause.png"/>
     <TextBlock Text="Pause"/>
   </StackPanel>
 </Button>

This example is shown in operation in the working example of Button Nontext Text Composition.

Example 2: Button composed, using binding and resource references for strings

This example is similar to Example 1 and produces the same result at run time. This example shows the preferred technique of using the Silverlight data binding and resource features to ensure that the strings for text content and accessibility are the same strings. Also, this gets the strings out of the XAML source and makes them simpler to localize or edit. For more information on using resource strings through binding, see Localizing XAML topic on MSDN.

 <Application.Resources>
  <resx:Resources x:Key="UIResourceStrings" />
 </Application.Resources>
  ...
 <Button
   Height="20" Width="50"
   AutomationProperties.Name="{Binding PauseUIString, Source=UIResourceStrings}" />
 >
   <StackPanel Orientation="Horizontal" >
     <Image Height="12" Width="12" Source="/icon_pause.png"/>
     <TextBlock
       Text="{Binding PauseUIString, Source=UIResourceStrings}"/>
   </StackPanel>
 </Button>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Automation tree verifier
Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Use a verification tool that is capable of showing the full automation tree, and an object’s name text alternative as part of the tree. (For example, use UIAVerify or Silverlight Spy; see Resources links.)

  3. Check that the AutomationProperties.Name appears as the Name value for identification in the automation tree, whenever a composite control that has both text and non-text elements is encountered.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

Tests

Screen reader
Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Engage the screen reader. With focus inside the Silverlight content area, press TAB to focus to a composite control where both text and non-text elements are present.

  3. Check that the Name as applied to the control instance, along with the class name of the control, is read by the screen reader.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL31: Using Silverlight Font Properties to Control Text Presentation

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL31. Also see Silverlight Technology Notes.

Description

The objective of this technique is to change the presentation / visual appearance of text, by setting several of the font-specific properties in the Silverlight API. Changing such properties does not change the semantic meaning of the text, nor does it alter the representation of the text that is available to assistive technologies through the Silverlight support of the UIA accessibility framework. By using font properties, it is possible to introduce a wide variety of presentation changes to fonts that do not introduce semantic elements that interfere with an assistive technology's view of text in the Silverlight application. In particular, adjusting font properties will make it possible to avoid any need for use of images of text, yet still provide a wide range of choices for text presentation.

Silverlight font properties exist on all controls, as well as on other text elements that are not true controls. For controls, the font properties apply in any case where the control enables a presentation mode that has enclosed text areas in its layout. By setting Silverlight font properties, it is possible to adjust presentation of font features without changing the structural connotation of that control, or the value of any control-specific property that contains plain-text. For example, the FontSize property can be set on a Paragraph (not a control) or on a Button (a control, and in this case the font size changes apply to any text displayed in the button content area). Font properties are also inheriting properties, meaning that if applying a font property value to a container in a relationship, those font property values can apply to child elements in the relationship. For example, if a FontSize is applied to a RichTextBox, that FontSize value is used by default by all the Paragraph items displayed in the RichTextBox.

Similar to CSS, Silverlight font properties can be grouped as a Style. That Style can be applied to all instances of a text element type (for example to all cases of Paragraph) or specifically referenced as a resource that is only used by certain instances of a text element type. Either way, the Style feature enables the separation of presentation from semantics for text elements, and enables workflows where content authors supply the semantic text and design-oriented authors adjust the related Silverlight styles. For more information on the Silverlight concept of styles, see Control Customization on MSDN.

The following Silverlight font properties are useful to style text and avoid the need for text in images. Links in this list refer to the Control class version of these properties.

  • The FontFamily property is used to display the code aspect in a monospace font family (specifically, FontFamily="Courier New").

  • The FontSize property is used to display the text in a larger size.

  • The FontStyle property is used to display text in italics.

  • The FontWeight property is used to set how thick or thin characters in text should be displayed.

  • The FontStretch property is used to control the spacing of letters in text.

  • The Foreground property is used to display the color of text or text containers.

  • The Background property can be used to display text on a non-text background.

So long as images of text are avoided, the text within a Silverlight text element can be reported to the UI Automation accessibility framework that Silverlight supports. That text is reported using the same basic text content as is used for semantic text display in the UI. In other words, exposing that text to assistive technologies that use UIA as a framework does not require the Silverlight application author to resort to automation-specific override properties such as AutomationProperties.HelpText; the automation peers for text elements report all necessary text content to automation as a built-in behavior of the text element controls. For more information on UI Automation and text containers, see SL32: Using Silverlight Text Elements for Appropriate Accessibility Role.

CSS versus Silverlight font properties

Related CSS techniques mention that users can override any page-declared CSS styling techniques, by invoking browser-specific features. For example, using Internet Explorer, a user can use Tools / Internet Options, Appearance / Accessibility to override certain classifications of CSS-controlled font properties when displaying HTML documents, or to use a user-specific style sheet for HTML documents. No browser-level equivalent feature exists for user alteration of Silverlight text properties in the Silverlight content area. Instead, application authors could supply controls that enable similar font-property changing behavior, and include those controls in the application-specific user interface. For more information on this technique, see SL13: Providing A Style Switcher To Switch To High Contrast.

Glyphs

Silverlight API includes a related text presentation API Glyphs. Glyphs is intended for specific decorative or niche language-support scenarios. The Glyphs API does not offer as much UIA exposure or the ability to programmatically change typical font properties; the main scenarios for Glyphs are to package migrated text content from document formats, or for purely decorative text in a font that is not commonly found on a user system and only the glyphs actually used in the Unicode string are subsetted into the Glyphs font payload. If addressing the WCAG criteria, authors should avoid using Glyphs API and instead use other text containers such as TextBox, along with a font that is supplied in the application package or known to exist on the end user system.

Examples

Example 1: Run time applied font properties, style, and template

This example illustrates applying runtime changes to a font property.

This example has UI in XAML, and logic in C#. The following is the XAML.

<UserControl x:Class="DocumentStructure.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
   <UserControl.Resources>
       <Style x:Key="NewStyle" TargetType="Control">
           <Setter Property="FontFamily" Value="Arial"/>
           <Setter Property="FontSize" Value="30"/>
           <Setter Property="Height" Value="40"/>
       </Style>
   </UserControl.Resources>
   <StackPanel x:Name="LayoutRoot" Background="White">
   <RichTextBox IsReadOnly="True" Name="rtb" FontFamily="Algerian" FontSize="20">
           <Paragraph>Call me Ishmael. Some years ago--never mind how long precisely--having little or no money in my purse, 
           and nothing particular to interest me on shore, I thought I would sail about a little 
and see the watery part of the world. It is a way I have of driving off the spleen and 
regulating the circulation. Whenever I find myself growing grim about the mouth; whenever 
it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before 
coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my 
<Hyperlink NavigateUri="http://en.wiktionary.org/wiki/hypo">hypos</Hyperlink>
get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into 
the street, and methodically knocking people's hats off--then, I account it high time to get to sea as soon as I can. 
This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself 
upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, 
almost all men in their degree, some time or other, cherish very nearly the same 
feelings towards the ocean with me.
           </Paragraph>
           <Paragraph>There now is your
               <Hyperlink 
               NavigateUri="https://en.wikipedia.org/wiki/New_York_Harbor">insular city of the Manhattoes</Hyperlink>
, belted round by wharves as Indian isles by coral reefs--commerce surrounds it 
with her surf. Right and left, the streets take you waterward. Its extreme downtown is the 
battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours 
previous were out of sight of land. Look at the crowds of water-gazers there.
           </Paragraph>
           <Paragraph>Circumambulate the city of a dreamy Sabbath afternoon. 
Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?
--Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men 
fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; 
some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving 
to get a still better seaward peep. But these are all landsmen; of week days pent up in lath 
and plaster--tied to counters, nailed to benches, clinched to desks. How 
then is this? Are the green fields gone? What do they here?
           </Paragraph>
       </RichTextBox>
       <Button Name="swapper" Click="swapper_Click" Width="220">Swap styles</Button>
   </StackPanel>
</UserControl>

The following is C# code:

       private void swapper_Click(object sender, RoutedEventArgs e)
       {
           rtb.Style = this.Resources["NewStyle"] as Style;
       }

This example is shown in operation in the working example of Document Structure.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Test that application of font properties as enabled in application UI changes presentation, but does not change semantic meaning of text.

  3. Close the browser. Repeat the test with an accessibility framework test tool running. There should be no difference in the structure or relationships in the accessibility view beyond the presentation changes.

Expected Results

#2 and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL32: Using Silverlight Text Elements for Appropriate Accessibility Role

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL32. Also see Silverlight Technology Notes.

Description

The objective of this technique is to choose a Silverlight text container that provides appropriate behavior and accessibility roles for different types of text content. How those roles interact with existing assistive technologies that are interpreting Silverlight under the larger concept of being an "HTML control part" is also a factor in which Silverlight text container should be used in an application's composition.

Text containers can identified by role to accessibility frameworks, and each type of Silverlight text container uses a different role. Application authors should choose text containers that combine the desired behavior in the user interface with an accessibility role that can be consumed by existing assistive technology implementations.

The Silverlight core libraries define the following classes that are specifically intended as text containers:

UI Automation programmatic access

For programming information that is relevant for how Silverlight application authors produce the application, each text container has its own object model/API. That API is documented on MSDN, specifically for each class TextBox; RichTextBox; TextBlock.) However, rather than using the Silverlight-specific object models, most assistive technologies that are capable of reporting on Silverlight will choose to use UI Automation (or MSAA) to obtain information about the Silverlight elements in general. Text containers within the Silverlight content are identified through UIA accessibility roles. This is because the assistive technologies can use UI Automation to query for ANY relevant text items from the content (and chrome) of the user agent / browser host, not just those that come from Silverlight. That can include the HTML content, items created from scripting, CSS or other plugin-internal object models and so on. In other words, text from Silverlight is integrated into the overall UI Automation view of the user agent host as the top-level application in a platform view. Different types of "text" in a general sense might appear as different UI Automation patterns, as is described below.

TextBox

A TextBox within the Silverlight content area is reported to UI Automation as an Edit role (through MSAA, as Editable Text).

Edit controls are expected to implement the Value pattern for UIA, so that the value of the edit area can be queried or set by a client. Assistive technologies can use this value as a text-string value for screen readers or other purposes.

In typical user interface design, a form with an input field also includes a label or other explanatory text that is proximally close to the input field. In order to maintain proper reading order, the label should typically appear immediately before the input field. This general model should also be used for Silverlight user interface design. For more information on labeling for TextBox controls, see SL26: Using LabeledBy to Associate Labels and Targets in Silverlight.

RichTextBox

A RichTextBox within the Silverlight content area is reported to UI Automation and MSAA as a Document role.

A RichTextBox can either be set to be a read-only control, or left as a read-write control. In the latter case, users can insert a text cursor and make changes to the text. It is more common in Silverlight programming to set the RichTextBox to be read-only; in this scenario the reason for using RichTextBox is because TextBlock did not offer the range of text formatting options that are possible from a RichTextBox.

In UIA, a document is generally expected to support the Text pattern for UI Automation. However, to read the text from a RichTextBox, the assistive technology does not necessarily have to implement code that handles the entirety of the information that the Text pattern reports.

More about the Text pattern

The Text pattern provides APIs to iterate over the internal structure of a document and return text ranges. Each such text range can be queried for specific properties, and can return its plain text string value to UI Automation. Ranges can also be programmatically adjusted by the TextPattern/TextRange APIs. The following is a snippet of a Silverlight-specific UI Automation tree utility to give a general idea of the APIs involved. Note that these are not specifically Silverlight APIs; they are .NET Framework APIs. .NET Framework or Windows Automation APIs are generally what is used for programming a UI Automation client, which runs on a platform runtime rather than the Silverlight runtime. Using the Text pattern is generally what is necessary in order for an assistive technology to obtain a comprehensive view of the "value" for a document role object.

private void FindTheTextPatterns_Click(object sender, RoutedEventArgs e)
{
   if (allSilverlight != null && allSilverlight.Count>0)
   {
       //for simplicity just processing item 0, not assuming more than one SL control
       //on the page because this app controls the page being loaded
       AutomationElementCollection documentsList = allSilverlight[0].FindAll(TreeScope.Descendants,
           new PropertyCondition(AutomationElement.ControlTypeProperty,ControlType.Document)
   );
   for (int j=0; j< documentsList.Count;j++) {
       TextPattern targetTextPattern = 
         documentsList[j].GetCurrentPattern(TextPattern.Pattern) as TextPattern;
       if (targetTextPattern!=null) {
           TextPatternRange tr = targetTextPattern.DocumentRange;
           MessageBox.Show(tr.GetText(Int16.MaxValue));
       }
   }
}
private void GetAllSilverlight()
{
   allSilverlight = this._clientAppRootInstance.FindAll(TreeScope.Descendants,
      new PropertyCondition(AutomationElement.ClassNameProperty, "MicrosoftSilverlight"));
}

MSAA has only limited possibilities for interacting with a Document role, and MSAA code for attempting to do so is not shown.

TextBlock

TextBlock is reported as a Text role in UI Automation. TextBlock has several important characteristics:

  • A TextBlock is always read-only; only the application author can declare the text, users cannot change it.

  • A TextBlock is not considered to be a true control in the Silverlight object model (it is not a class derived from Control). The practical implications of this to accessibility scenarios is that a TextBlock is not in the default tab sequence, cannot be manually added to any tab sequence, and cannot be keyboard-focused either programatically or by the user.

  • TextBlock has a deliberately limited range of block / span formatting options. If the application author desires a wider range of formatting options, for example supporting a "Paragraph" metaphor for blocks of text, a read-only RichTextBox should be used instead.

If the user relies solely on navigating a Silverlight application using the TAB sequence, such navigation will skip over any TextBlock in the interface. This could have implications for how users who use screen readers can interact with the Silverlight content. Screen readers typically read text only from the currently focused element in cases where the user is moving through the TAB sequence or changing focus within the application, and thus cannot read the text from a TextBlock in such a mode. However, most screen readers also have modes for reading text that is not necessarily focusable. These are generally the same modes that screen readers use for a conventional non-interactive HTML document text. For example, some screen readers support a mode that reads text by line, or by word. These modes can read text from a TextBlock.

Examples

Example 1: Structure from a container that has non-semantic role in UI Automation, and TextBlock for text

If viewed as a UI Automation tree, the StackPanel and Grid do not exist explicitly in the tree view, because they do not serve a semantic role (only a presentation role). Rather, the tree consists of the items that report some kind of semantic control type. The semantic children of the containers are still reported in the order that they were declared, when viewed as children of the next semantic container upwards in the tree, and despite the containers themselves being abstracted out of the tree. This defines the reading order. This example is a large block of text with intentionally simple formatting, where the only formatting is to represent paragraphs as separate TextBlock elements to support an adaptive layout, but no Run blocks within.

When viewed with assistive technologies that represent the contents, each TextBlock is a control type of Text. Screen readers can use document reading modes such as virtual cursor modes to read the content from each element and each element's content, following the same reading order as is declared in the XAML. For example, in JAWS 12, readers can read out this text container line by line using (Jaws Key)+DownArrow. It is actually JAWS that determines the line length, because the line length otherwise is defined only by the adaptive layout at runtime, which is not reported to UIA.

  <StackPanel x:Name="LayoutRoot" Background="White">
          <TextBlock>Call me Ishmael. Some years ago--never mind how long precisely--
having little or no money in my purse, and
nothing particular to interest me on shore, I thought I would sail about a little 
and see the watery part of the world. It is a way I have of driving off the spleen 
and regulating the circulation. Whenever I find 
myself growing grim about the mouth; whenever it is a damp, drizzly November in 
my soul; whenever I find myself involuntarily pausing before coffin warehouses, 
and bringing up the rear of every funeral I meet;
and especially whenever my hypos get such an upper hand of me, that it requires a strong moral 
principle to prevent me from
deliberately stepping into the street, and methodically knocking people's hats off--then, 
I account it high time to get to sea as
soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato 
throws himself 
upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, 
almost all men in their degree, some time or other, cherish very nearly the same feelings towards the 
ocean with me.
          </TextBlock>
          <TextBlock>There now is your insular city of the Manhattoes, belted round by wharves as Indian isles 
          by coral reefs--
commerce surrounds it with her surf. Right and left, the streets take you waterward. 
Its extreme downtown is the battery, where
that noble mole is washed by waves, and cooled by breezes, which a few hours previous 
were out of sight of land. Look at the crowds of water-gazers there.
          </TextBlock>
          <TextBlock>Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook 
          to Coenties Slip, and from thence, by Whitehall, northward.
What do you see?--Posted like silent sentinels all around the town, stand thousands 
upon thousands of mortal men fixed in ocean
reveries. Some leaning against the spiles; some seated upon the pier-heads; 
some looking over the bulwarks of ships from China; 
some high aloft in the rigging, as if striving to get a still better seaward peep. 
But these are all landsmen; of week days pent
up in lath and plaster--tied to counters, nailed to benches, clinched to desks. 
How  then is this? Are the green fields gone? What do they here?
          </TextBlock>
  </StackPanel>
Example 2: Text containers and their UIA representation

The following example is intended as sample XAML to view in an accessibility framework viewer, to see the various names, roles, and patterns for obtaining value.

   <StackPanel x:Name="LayoutRoot">
       <TextBox Text="This is a TextBox"/>
       <RichTextBox>
           <Paragraph>This is a RichTextBox.</Paragraph>
       </RichTextBox>
       <TextBlock Text="This is a TextBlock"/>
   </StackPanel>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. To see UI Automation, use Microsoft Windows as platform.

  2. Use a verification tool that is capable of showing the full automation tree. (For example, use UIAVerify or Silverlight Spy; see Resources links.)

  3. Verify that TextBox elements in the Silverlight user interface have the Edit role, that RichTextBox elements have the Document role, and TextBlock has Text role in UI Automation.

  4. Verify that the text content can be programmatically determined by techniques that are appropriate for that role.

Expected Results

#3 and #4 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL33: Using Well-Formed XAML to Define a Silverlight User Interface

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL33. Also see Silverlight Technology Notes.

Description

The objective of this technique is to use the characteristics of the XAML language to support basic parsing requirements that both applications and accessibility frameworks rely upon. This technique explains the role of XAML in the overall Silverlight development and application architecture, in particular for defining the elements that make up a Silverlight user interface. This technique also present some basic facts about XAML as a language; more information of this nature is also included in Silverlight Technology Notes.

XAML is a markup language for object instantiation. XAML can be incorporated into a technology such as Silverlight. A specific XAML vocabulary can be defined by a technology such as Silverlight, and the vocabulary can be extended by anyone that provides suitable backing code. For example, a Silverlight application author can define a custom class, and the application author or potentially other Silverlight application authors can use XAML to instantiate instances of the custom class.

XAML has a published language specification.

XAML does not necessarily declare the entirety of the object tree that a Silverlight client runtime loads, but XAML typically declares the majority of the objects/elements that represent the Silverlight application's user interface. The objects and values that are used for accessibility scenarios are often closely related to the standard user interface, and thus accessibility-related properties are typically declared in XAML rather than in code, even though setting the values in code is technically possible.

For more information on XAML in Silverlight, see Silverlight XAML Overview on MSDN.

XAML and XML

XAML is based on XML, and shares many of its language features. Some of the language features that are directly relevant to the stated intent of SC4.1.1 and to 4.1.1 related techniques include:

  • Well-formedness: The definition of well-formed XAML is the same as the XML definition. XAML processors, including the Silverlight runtime XAML parser, will block loading XAML that is not well formed.

  • Duplicate attributes: Unless specially configured for scenarios such as design-time support, XAML processors will block loading XAML where elements contain duplicate attributes.

  • Quote matching: mismatched quote matching for attribute values in XAML constitutes XAML that is not well formed.

Some XAML language features that are analogous to XML but have some technology-specific differences include:

  • Identifiers: XAML defines a Name directive, which is analogous to xml:id in that Name serves as the unique identifier of an element. However, XAML defines an additional concept of a XAML namescope, which permits a XAML document to contain multiple XAML namescopes as a factoring technique. Thus, identical Name values are permitted in a XAML document so long as each is defined in a separate XAML namescope. XAML namescopes are associated with elements, such that the extent of each XAML namescope is understood by XAML processors.

  • Schemas and vocabularies: A notable difference between XAML and XML is that a XAML vocabulary is not typically represented in existing XML schema definition formats such as XSD or DTD. XAML includes inheritance and reference features that cannot adequately be expressed in XSD or other existing XML schema representation formats. This affects the "elements are nested according to their specifications" consideration of SC4.1.1. XAML definitely has the ability to enforce nesting restrictions as represented by a XAML vocabulary. However, XAML validity for a vocabulary is deliberately fluid, in order to support extension by user code. XAML validity is determined by a combination of a XAML processor, a XAML concept known as a XAML schema context, and the code that backs the XAML and defines any objects being instantiated as a parsing result. Typically, design time tools such as Microsoft Visual Studio can adequately duplicate the runtime validity characteristics of a XAML vocabulary. Using these tools, application authors can both verify XAML validity as well as receive design-time information for how to correct any XAML validity errors.

XAML parsing and HTML parsing

In the Silverlight implementation, XAML is like HTML in that it is loaded and parsed just-in-time. Silverlight XAML is not precompiled to binary or MSIL (the language-neutral CLR runtime format). Instead,Silverlight XAML is transmitted or stored as plain text, either loose or packaged as resources in a library. Thus Silverlight XAML is human readable as well as machine readable.

However, unlike HTML, Silverlight XAML is only intended to be loaded and interpreted by the Silverlight runtime, rather than multiple possible user agents that each implement an HTML engine. HTML is a language where the behavior is also specified. In contrast, XAML is a language for referencing constructs that are defined in runtime libraries, and the functional specification of the XAML language itself is minimal (intrinsics; language rules; primitive types). Layout, appearance, type-member sets, roles, etc. are all left up to specific frameworks and vocabularies that use XAML. Behavior associated with a given XAML construct is based on type definitions made in a runtime library. For Silverlight XAML, the types are from Silverlight core libraries, but often the definitions come from libraries that are available to the Silverlight runtime as part of an application's packaging for distribution.

XAML is generally speaking strict, and will raise parsing errors if XAML contains elements that are not recognized. Such parsing errors generally present the information in the XAML from resulting in any objects being created, which in turn prevents a Silverlight application from running. This is different from typical (non-xHTML) HTML, where implementations are permitted to contain nonrecognized elements or attributes and ignore them.

Examples

Example 1: XAML in design tools for Silverlight

A developer utilizes features in their Silverlight XAML authoring tool to ensure that:

  • XAML is well formed

  • XAML is valid according to Silverlight parser and all reference assemblies

  • XAML Names are unique in namescope

  • XAML has no duplicate attributes

More about design tools and XAML

Silverlight XAML is able to be loaded by design tools for Silverlight. In the design tool, the XAML is interpreted much like the runtime interprets it, in order to show the visual representation of the Silverlight application. In addition, the design tool might implement design surfaces in which the user interface can be changed, and typically provides a way to save any changes made in the tool back into the loaded XAML.

At design time, tools such as Microsoft Visual Studio or Microsoft Expression might provide opportunities to correct any XAML errors before the Silverlight application is compiled and packaged for deployment. This might be implemented by performing static analysis of the XAML, by forwarding the design tool's own parser errors as it renders the design surface, or by forwarding linking errors that are identified by a precompile step (for example, missing event handlers raise a XAML error from precompile). This behavior is sometimes identified as a design mode behavior in Microsoft documentation and other documentation about Visual Studio or specific tools.

Regardless of how a given XAML file behaves while being interacted with in a design mode, it is the Silverlight runtime XAML parser on each client installation that is the ultimate determinant of whether the XAML is valid or invalid.

Example 2: Silverlight application consumer

A consumer views a Silverlight application that is hosted in an HTML page. If the Silverlight application has valid XAML, the Silverlight content loads, and the fact that the XAML-based UI loaded at all is assurance that:

  • XAML is well formed

  • XAML is valid

  • XAML validity is partially based on correct type mapping of all elements referenced in XAML, according to Silverlight XAML parser and all reference assemblies included by that application

  • XAML Names are unique in namescope

  • XAML has no duplicate attributes

  • XAML-defined properties that are relevant for assistive technology (for example AutomationProperties.Name as described by other Silverlight techniques) are available

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Pass case
Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. That application is known to consume Silverlight XAML.

  2. Verify that the application runs correctly and displays user interface.

Expected Results

#2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

Tests

Fail case
Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. That application is known to consume Silverlight XAML, and the XAML is known to be deliberately invalid.

  2. Verify that the application did not run.

Expected Results
  1. #2 is true.

Note that it is common that an error message is displayed to users in HTML, which is implemented by handling the JavaScript OnError event emitted by the Silverlight plugin. XAML parse errors are forwarded to JavaScript errors and can be handled in this way. However, it is also possible that the application is production-ready, and deliberately does not expose any JavaScript errors, whether Silverlight managed code errors or not. If seeing the specific error is important, the test might need to be run against a preproduction or debug version of the application.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL34: Using the Silverlight Default Tab Sequence and Altering Tab Sequences With Properties

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL34. Also see Silverlight Technology Notes.

Description

The objective of this technique is to use the default Silverlight tab sequence, or alternatively to apply the options that Silverlight application authors can use for altering the tab sequence. Application authors might alter the tab sequence in cases where the default tab sequence is not desirable for some reason, and those reasons might vary per application or application scenario. The tab sequence can be altered in order to create a meaningful sequence in the tab order, so that assistive technologies that rely on traversal of focusable elements can use and determine the meaningful sequence.

Silverlight uses structured definitions for defining its user interface presentations, where the declaration order is significant because it becomes the structure of the run-time visual tree. The structured definitions also define the layout and presentation structure in most cases. The structured definition concept is described in more detail in Silverlight Technology Notes.

The Silverlight development platform attempts to create an overall system where the logical order of how elements are defined in XAML and code, and then presented in a user interface, will also match a logical tab sequence and logical reading order when presented to the user. In many cases, a Silverlight application author can write an application without necessarily worrying about the tab sequence, can test the tab sequence during a verification and testing phase of development, and will not need to set any specific properties to adjust the tab sequence. As a broad generalization, a Silverlight tab sequence will be constructed so that it traverses elements left to right, and top to bottom, and will behave similarly to how HTML would behave if the HTML analogs of Silverlight elements were constructed and presented in the same way. However, there are specific Silverlight controls that deliberately alter the tab sequence, or whose elements are made keyboard-accessible through a keyboard navigation technique other than TAB. For more information, see Focus Overview on MSDN.

How Silverlight implements tab sequence concepts

The Silverlight programming model defines a Control class that is a base class of many of the practical controls that produce a Silverlight application user interface. One of the behaviors of the Control class is that only a Control can receive keyboard focus as a discrete element within the Silverlight content area.

When a Silverlight application user interface is constructed from the visual tree, a default tab sequence for all Silverlight content is also constructed, using the same principles of order that were used by the visible layout. This default tab sequence is usually adequate as a tab sequence that supports users that press the TAB key to traverse the UI. The same TAB sequence and/or the focusable state of controls is also used by many assistive technologies or modes of assistive technologies to construct the representation of the interface for the Silverlight content.

For cases where developers decide that the default tab sequence is not adequate, the developer can take one of two approaches for changing the tab sequence:

  • Change other properties of the control where a change to the tab sequence happens as a secondary effect.

  • Reorder the tab sequence directly.

Changing control properties
  • Setting the Visibility property of a control to Collapsed causes the control to no longer render in the UI. As a secondary effect, that control is removed from the tab sequence.

  • Setting the IsEnabled property of a control to false causes the control to no longer be focusable by keyboard or clickable by the mouse. In many cases, the visual appearance of the control changes also, through a theme style. For example, the control may appear as gray rather than black. As a secondary effect, that control is removed from the tab sequence.

Changing specific tab properties
  • Setting the IsTabStop property of a control to false causes the control to no longer be focusable by keyboard or programmatic focus, and that control is removed from the tab sequence.

  • Setting the TabIndex property of a control to a specific index causes the control to be inserted at that position in the tab sequence. The default value of TabIndex is Single.MaxValue, therefore any non-default value promotes that control to be first in an otherwise default tab sequence. More typically, authors would specify a TabIndex for any controls that are involved in a deliberate segment of tab order re-ordering.

Tab order and language

Left-to-right is the default only for languages that use left-to-right reading order. For languages that use right-to-left reading order, right-to-left is also the default tab order as implemented by Silverlight runtime behavior. That language preference is declared by the acting CultureInfo. For more information on CultureInfo, see SL27: Using Language/Culture Properties as Exposed by Silverlight Applications and Assistive Technologies.

Examples

Example 1: Default tab order, based on ordering in the StackPanel

In this example, a StackPanel has a natural layout order of top-to-bottom, and that will also be the tab order of each StackPanel child element (FirstName, then LastName).

   <StackPanel x:Name="LayoutRoot" Background="White">
       <StackPanel Orientation="Horizontal">
           <TextBlock Name="lbl_FirstName">First name</TextBlock>
           <TextBox AutomationProperties.LabeledBy="{Binding ElementName=lbl_FirstName}" Name="tbFirstName" Width="100"/>
       </StackPanel>
       <StackPanel Orientation="Horizontal">
           <TextBlock Name="lbl_LastName">First name</TextBlock>
           <TextBox AutomationProperties.LabeledBy="{Binding ElementName=lbl_LastName}" Name="tbLastName" Width="100"/>
       </StackPanel>
   </StackPanel>

This example is shown in operation in the working example of Tab Sequence.

Example 2: Tab order, modified by TabIndex

A form is marked up using a data table that includes the fields of the groom in the first column and the fields of the bride in the second column. The order in the content is row by row but the author feels it is more logical for users to navigate the form column by column. This way, all the groom's criteria can be filled in before moving on to the bride's criteria. The TabIndex attributes of the Silverlight elements are used to specify a tab order that navigates column by column. This example specifically illustrates how changing tab order can change the meaningful sequence.

 <UserControl x:Class="TabSequence.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 >
   <StackPanel x:Name="LayoutRoot" Background="White">
       <TextBlock>he first column contains the search criteria 
 of the groom, the second column the search criteria of 
 of the bride</TextBlock>
       <Grid>
       <Grid.RowDefinitions>
         <RowDefinition/>
         <RowDefinition/>
         <RowDefinition/>
         <RowDefinition/>
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
         <ColumnDefinition/>
         <ColumnDefinition/>
         <ColumnDefinition/>
       </Grid.ColumnDefinitions>
       <TextBlock>Search criteria</TextBlock>
       <TextBlock Grid.Column="1">Groom</TextBlock>
       <TextBlock Grid.Column="2">Bride</TextBlock>
       <TextBlock Grid.Row="1">First name</TextBlock>
       <TextBox Grid.Row="1" Grid.Column="1" TabIndex="1"/>
       <TextBox Grid.Row="1" Grid.Column="2" TabIndex="4"/>
       <TextBlock Grid.Row="2">Last name</TextBlock>
       <TextBox Grid.Row="2" Grid.Column="1" TabIndex="2"/>
       <TextBox Grid.Row="2" Grid.Column="2" TabIndex="5"/>
       <TextBlock Grid.Row="3" >Place of birth</TextBlock>
       <TextBox Grid.Row="3" Grid.Column="1" TabIndex="3"/>
       <TextBox Grid.Row="3" Grid.Column="2" TabIndex="6"/>
       </Grid>
   </StackPanel>
 </UserControl>
 

This example is shown in operation in the working example of Tab Sequence TabIndex.

Example 3: Tab order, modified by changing runtime Control properties

In this example, a radio button choice in a form controls whether certain other fields in the form are relevant or not relevant. The current radio button selection toggles the IsEnabled property in such fields to enable or disable them based on how the user selected the preceding logical element, which also affects whether the fields appear in the further tab sequence. The following is UI definition in XAML.

<UserControl x:Class="TabSequence.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
   <StackPanel x:Name="LayoutRoot" Background="White">
       <TextBlock>Registration</TextBlock>
       <Grid>
       <Grid.RowDefinitions>
         <RowDefinition/>
         <RowDefinition/>
         <RowDefinition/>
         <RowDefinition/>
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
         <ColumnDefinition/>
         <ColumnDefinition/>
         <ColumnDefinition/>
       </Grid.ColumnDefinitions>
           <StackPanel Orientation="Horizontal">
               <RadioButton GroupName="Registration" Checked="RadioButton_CheckedG">Guest</RadioButton>
               <RadioButton GroupName="Registration" Checked="RadioButton_CheckedC">Custom</RadioButton>
           </StackPanel>
               <TextBlock Grid.Row="1">First name</TextBlock>
           <TextBox x:Name="tb_fn" IsEnabled="false" Grid.Row="1" Grid.Column="1" />
           <TextBlock Grid.Row="2">Last name</TextBlock>
           <TextBox  x:Name="tb_ln" IsEnabled="false" Grid.Row="2" Grid.Column="1" />
       </Grid>
   </StackPanel>
</UserControl>

The following is event handler code.

       private void RadioButton_CheckedC(object sender, RoutedEventArgs e)
       {
           tb_fn.IsEnabled = true;
           tb_ln.IsEnabled = true;
       }
       private void RadioButton_CheckedG(object sender, RoutedEventArgs e)
       {
           tb_fn.IsEnabled = false;
           tb_ln.IsEnabled = false;
       }
       

This example is shown in operation in the working example of Tab Sequence Enabled.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Engage the screen reader. Press the TAB key to traverse the sequence of elements inside the Silverlight content area.

  3. Verify that the order in which elements are traversed in a tab sequence is also the expected order of the elements as they are presented visually, particularly in such cases where the order of each element is significant per SC 1.3.2.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


SL35: Using the Validation and ValidationSummary APIs to Implement Client Side Forms Validation in Silverlight

Applicability

  • Microsoft Silverlight, versions 3 and greater

  • Silverlight managed programming model and Silverlight XAML

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for SL35. Also see Silverlight Technology Notes.

Description

The objective of this technique is to use the Silverlight Validation API. The Validation API associates the validation logic with form input elements that properly support accessible text both for the initial entry and for any error identification and suggestion that is displayed in the user interface.

Application authors can either associate Validation.Errors output with specific UI elements, include an initially hidden ValidationSummary user interface element, or both. The example shown in this technique uses both ValidationSummary and Validation.Errors. The ValidationSummary is the most appropriate technique for providing text feedback after a form submission attempt, because assistive technologies pick it up as a discrete focusable element in the interface representation. The Validation.Errors technique is perhaps a better cognitive user experience for sighted users, because it presents the specific error suggestions in closer proximity to the input items that are in error.

This technique relies on several Silverlight features: AutomationProperties, the Name property for identifying specific UI elements, the Validation and ValidationSummary API, the ElementName variation of Silverlight data binding, and the general behavior of TextBox elements.

Contrast for validation states of the Label control

Silverlight version 4's default visual styles have a bug where the colors used to indicate an invalid field entry by changing the color of the foreground text do not satisfy the 4.5:1 contrast ratio per SC 1.4.1. To correct for this visual bug, application authors should copy the control template for the Label control, and adjust the color used for the validation state. This is shown in Example 1; the resource "LabelStyle1" was generated by copying the default Label style using Microsoft Expression Blend. Then, the value was changed in the copied template, and the changed template was referenced and included in the application. The specific changed line is indicated by a comment in the Example 1 sample markup.

Examples

Example 1: Two form fields with validation on Submit, and an error identification/suggestion system and UI on the client side

In this example, the form fields correspond to a data object that implements a view model. Silverlight uses the view model and data annotations to generate some of its UI, notably the names of the fields are bound to the original view model names from the data. The ValidationSummary API is defined in a "Client SDK" library System.Windows.Controls.Data.Input.dll, which is included as part of the project and the distributable.

This example has a UI defined in XAML and logic defined in C#. The following is the XAML UI.

<UserControl x:Class="AccessibleValidation.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<UserControl.Resources>
 <Style x:Key="LabelStyle1" TargetType="sdk:Label">
 <Setter Property="IsTabStop" Value="False"/>
 <Setter Property="HorizontalContentAlignment" Value="Left"/>
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="sdk:Label">
    <Grid>
     <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
       <VisualState x:Name="Normal"/>
       <VisualState x:Name="Disabled"/>
      </VisualStateGroup>
      <VisualStateGroup x:Name="ValidationStates">
       <VisualState x:Name="Valid"/>
       <VisualState x:Name="Invalid">
        <Storyboard>
         <ColorAnimation Duration="0" To="#FFF00000"
         Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
         Storyboard.TargetName="ContentControl" d:IsOptimized="True"/>
         //above is the line where color was adjusted from default Red to FFF00000, 
         //to satisfy the 4.5:1 contrast requirement
        </Storyboard>
       </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="RequiredStates">
       <VisualState x:Name="NotRequired"/>
       <VisualState x:Name="Required">
         <Storyboard>
          <ObjectAnimationUsingKeyFrames Duration="0" 
          Storyboard.TargetProperty="FontWeight" 
          Storyboard.TargetName="ContentControl">
           <DiscreteObjectKeyFrame KeyTime="0" Value="SemiBold"/>
          </ObjectAnimationUsingKeyFrames>
         </Storyboard>
        </VisualState>
       </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      <Border BorderBrush="{TemplateBinding BorderBrush}" 
      BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 
      CornerRadius="2" Padding="{TemplateBinding Padding}">
       <ContentControl x:Name="ContentControl" Cursor="{TemplateBinding Cursor}" 
         ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" 
         Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}"
         FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" 
         FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
         IsTabStop="False" VerticalAlignment="{TemplateBinding VerticalAlignment}" 
         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
      </Border>
     </Grid>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>
</UserControl.Resources>
 <Grid x:Name="LayoutRoot" Background="White" Margin="10">
   <Grid.RowDefinitions>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="Auto"/>
     <ColumnDefinition Width="200"/>
     <ColumnDefinition Width="Auto"/>
   </Grid.ColumnDefinitions>
   <TextBlock Text="Validating Form" FontSize="16" FontWeight="Bold"
     Grid.Column="1" HorizontalAlignment="Center" />
   <sdk:ValidationSummary x:Name="ErrorSummary" IsTabStop="True"
     Grid.Row="1" Grid.ColumnSpan="2" Margin="3" />
   <sdk:Label x:Name="NameLabel" Target="{Binding ElementName=NameTextBox}"
     Grid.Row="2" Margin="3" HorizontalAlignment="Right" Style="{StaticResource LabelStyle1}"/>    
   <TextBox x:Name="NameTextBox" 
     AutomationProperties.Name="{Binding Content, ElementName=NameLabel}"
     Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit, 
     NotifyOnValidationError=True, ValidatesOnExceptions=True}"
     Grid.Column="1" Grid.Row="2" Margin="3" />
   <sdk:DescriptionViewer Target="{Binding ElementName=NameTextBox}" 
     Grid.Column="2" Grid.Row="2" />
   <sdk:Label x:Name="AgeLabel" Target="{Binding ElementName=AgeTextBox}"
     Grid.Row="3" Margin="3" HorizontalAlignment="Right" Style="{StaticResource LabelStyle1}"/>
   <TextBox x:Name="AgeTextBox" 
     AutomationProperties.Name="{Binding Content, ElementName=AgeLabel}" 
     Text="{Binding Age, Mode=TwoWay, UpdateSourceTrigger=Explicit, 
     NotifyOnValidationError=True, ValidatesOnExceptions=True}"  
     Grid.Column="1" Grid.Row="3" Margin="3" />
   <sdk:DescriptionViewer Target="{Binding ElementName=AgeTextBox}" 
     Grid.Column="2" Grid.Row="3" />
   <Button x:Name="SubmitButton" Content="Submit" Click="SubmitButton_Click"
     Grid.Column="1" Grid.Row="4" Width="50" Margin="3" />
 </Grid>
</UserControl>

The following is the C# logic for the page. Note the call to Focus in the logic; many assistive technologies use focus to determine what area of the interface to report to the user. If code calls Focus to reference the error summary once it is completed, the assistive technology can report the error summary immediately.

       public MainPage()
       {
           InitializeComponent();
           LayoutRoot.DataContext = new Product();
       }
       // Commits text box values when the user presses ENTER.
       private void TextBox_KeyDown(object sender, 
           System.Windows.Input.KeyEventArgs e)
       {
           if (e.Key == System.Windows.Input.Key.Enter) (sender as TextBox)
               .GetBindingExpression(TextBox.TextProperty).UpdateSource();
       }
       private void SubmitButton_Click(object sender, System.Windows.RoutedEventArgs e)
       {
           NameTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
           AgeTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
           if (ErrorSummary.Errors.Count > 0) ErrorSummary.Focus();
           }

The following is the data class. Note how much of the validation logic is defined within this view model, rather than as part of Silverlight UI logic.

  public class Product 
   {
       private string nameValue;
       private const string nameMessage = "Must be 10 characters or less.";
       [Display(Name = "Username", Description = "Required. " + nameMessage)]
       [StringLength(10, ErrorMessage = nameMessage)]
       [Required(ErrorMessage = "Required.")]
       public string Name
       {
           get { return nameValue; }
           set
           {
               if (nameValue != value)
               {
                   Validator.ValidateProperty(value, new ValidationContext(
                       this, null, null) { MemberName = "Name" });
                   nameValue = value;
               }
           }
       }
       private string ageValue;
       private const string ageMessage = "Must be in the 5 to 120 range.";
       [Display(Description = ageMessage)]
       [Range(5, 120, ErrorMessage = ageMessage)]
       [RegularExpression("\\d*", ErrorMessage = "Must be a number.")]
       public string Age
       {
           get { return ageValue; }
           set
           {
               if (ageValue != value)
               {
                   Validator.ValidateProperty(value, new ValidationContext(
                       this, null, null) { MemberName = "Age" });
                   ageValue = value;
               }
           }
       }
       

The following image is a screen shot of this simple UI, after two invalid values are entered in the form and Submit is activated:

Form with invalid values

The following image is a screen shot of the UIAVerify tree view of this same application. Note the "Text" role items that appear as adjacent peer elements, which describe the validation errors. This Text is actually coming from sdk:DescriptionViewer, and in the visible UI in the screenshot is not currently visible. This text would be visible if any of the following occurs:

  • the user hovers the mouse over the red triangle in the input field corner

  • the user hovers over the "info i" icon

  • the user clicks (or tabs to) the relevant field, which focuses it

UIAVerify tree view of form with invalid values

This example is shown in operation in the working example of Accessible Validation.

Validation style for Label controls

The default validation style for the Invalid state of Label does not have adequate contrast by default. Application authors can restyle Label with a new template that has a 4.5:1 contrast.

Resources

Tests

Procedure
  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. The application is expected to contain form fields, and a Submit pattern for form interaction as described in SL10: Implementing a Submit-Form Pattern in Silverlight.

  2. Navigate through the items of a form until an editable field is read. Enter a value that triggers the validation.

  3. Navigate to Submit button and activate it to attempt to submit the form.

  4. Verify that a Validation Summary now appears, and is focusable.

  5. Verify that the Validation Summary provides enough information to correct any error.

  6. Navigate back to input elements that have validation issues. Correct the errors as suggested.

  7. Tab to Submit button. Press ENTER to resubmit.

  8. Verify that Validation Summary is no longer displayed and that the screen reader does not focus to/read any further validation information.

Expected Results

#4, #5, and #8 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

11. PDF Techniques

PDF Technology Notes

Introduction

The Portable Document Format (PDF) is a file format for representing documents in a manner independent of the application software, hardware, and operating system used to create them, as well as of the output device on which they are to be displayed or printed. PDF files specify the appearance of pages in a document in a reliable, device-independent manner. The PDF specification was introduced by Adobe Systems in 1993 as a publicly available standard. In July 2008, PDF 1.7 became an ISO standard (ISO 32000-1) [ISO32000].

Of note for accessibility is PDF/UA (Universal Accessibility) which became an ISO Standard in July 2012, and was updated in 2014 (ISO 14289-1:2014 (See PDF/UA (ISO 14289-1:2014).) The scope of PDF/UA is not meant to be a techniques (how-to) specification, but rather a set of guidelines for creating more accessible PDF. The specification describes the required and prohibited components and the conditions governing their inclusion in or exclusion from a PDF file in order for the file to be available to the widest possible audience, including those with disabilities. The mechanisms for including the components in the PDF stream are left to the discretion of the individual developer, PDF generator, or PDF viewing agent. PDF/UA also specifies the rules governing the behavior for a conforming reader.

PDF Accessibility Support

PDF includes several features in support of accessibility of documents to users with disabilities. The core of this support lies in the ability to determine the logical order of content in a PDF document, independently of the content's appearance or layout, through logical structure and Tagged PDF. Applications can extract the content of a document for presentation to users with disabilities by traversing the structure hierarchy and presenting the contents of each node. For this reason, producers of PDF files must ensure that all information in a document is reachable by means of the structure hierarchy.

Logical Structure

PDF's logical structure features (introduced in PDF 1.3) provide a mechanism for incorporating structural information about a document's content into a PDF file. Such information might include, for example, the organization of the document into chapters, headings, paragraphs and sections or the identification of special elements such as figures, tables, and footnotes. The logical structure features are extensible, allowing applications that produce PDF files to choose what structural information to include and how to represent it, while enabling PDF consumers to navigate a file without knowing the producer's structural conventions.

PDF logical structure shares basic features with standard document markup languages such as HTML, SGML, and XML. A document's logical structure is expressed as a hierarchy of structure elements, each represented by a dictionary object. Like their counterparts in other markup languages, PDF structure elements can have content and attributes. In PDF, rendered document content takes over the role occupied by text in HTML, SGML, and XML.

A PDF document's logical structure is stored separately from its visible content, with pointers from each to the other. This separation allows the ordering and nesting of logical elements to be entirely independent of the order and location of graphics objects on the document's pages.

The logical structure of a document is described by a hierarchy of objects called the structure hierarchy or structure tree. At the root of the hierarchy is a dictionary object called the structure tree root, located by means of the StructTreeRoot entry in the document catalog. See Section 14.7.2, ("Structure Hierarchy") in PDF 1.7 (ISO 32000-1): Table 322 shows the entries in the structure tree root dictionary. The K entry specifies the immediate children of the structure tree root, which are structure elements.

Tagged PDF

Tagged PDF (PDF 1.4) is a stylized use of PDF that builds on PDF's logical structure framework. It defines a set of standard structure types and attributes that allow page content (text, graphics, and images) to be extracted and reused for other purposes. It is intended for use by tools that perform the following types of operations:

  • Simple extraction of text and graphics for pasting into other applications.

  • Automatic reflow of text and associated graphics to fit a page of a different size than was assumed for the original layout.

  • Processing text for such purposes as searching, indexing, and spell-checking.

  • Conversion to other common file formats (such as HTML, XML, and RTF) with document structure and basic styling information preserved.

  • Making content accessible to people who rely on assistive technology.

PDF File Production and Accessibility

PDF files may be produced either directly by application programs or indirectly by conversion from other file formats or imaging models. In addition, tools exist for inspecting, checking, and repairing PDF files for accessibility. The following sections provide representative lists of applications and tools typically used for these functions.

These notes do not, and cannot, provide an exhaustive list, nor do they endorse particular applications and tools. Rather they provide a snapshot of tools in fairly wide use at the time the WCAG Working Group undertook to review and publish techniques for producing PDF documents. As with any software, application support for PDF accessibility will vary with different versions, with the formatting requirements of specific PDF documents, and with actual usage of the application. That is, the tools can be used properly to produce appropriate tags, etc..

In general, newer tools will provide greater support than earlier ones. The tools' vendors are the source of authoritative information about their support for PDF accessibility.

Generating PDF Files

Many applications can generate PDF files directly, and some can import them as well. This direct approach is preferable, since it gives the application access to the full capabilities of PDF, including the imaging model and the interactive and document interchange features. Alternatively, applications that do not generate PDF directly can produce PDF output indirectly. There are two principal indirect methods:

  • The application describes its printable output by making calls to an application programming interface (API) such as GDI in Microsoft® Windows® or QuickDraw in the Apple Mac OS. A software component called a printer driver intercepts these calls and interprets them to generate output in PDF form.

  • The application produces printable output directly in some other file format, such as PostScript, PCL, HPGL, or DVI, which is converted to PDF by a separate translation program.

Although these indirect strategies are often the easiest way to obtain PDF output from an existing application, the resulting PDF files may not make the best use of the high-level PDF imaging model relied upon to expose the semantics of the document. This is because the information embodied in the application's API calls or in the intermediate output file often describes the desired results at too low a level. Any higher-level information maintained by the original application has been lost and is not available to the printer driver or translator.

For example, since the printer driver or translator targets correct visual output, information about the semantics of the document may not be sent at all or may be ignored when creating the PDF output. As a result, headings may not be tagged as such, or link text may not be associated with its link object. Check with the vendor of any PDF authoring tool in order to understand how to use the tool in a way that produces the best tagged output.

PDF Authoring Tools that Provide Accessibility Support

  • Adobe Acrobat's PDFMaker - PDFMaker is part of Adobe Acrobat which adds macros to many business applications such as Microsoft Office, AutoCAD and Lotus Notes that support the conversion of content from the original format to tagged PDF.

  • Adobe FrameMaker - Desktop publishing application from Adobe Systems that directly exports tagged PDF and provides support for alternative text descriptions.

  • Adobe InDesign - Page layout and desktop publishing application from Adobe Systems that directly exports tagged PDF and provides support for alternative text descriptions.

  • Adobe LiveCycle Designer - Windows-based forms design application from Adobe Systems that directly exports tagged PDF interactive forms and provides support for alternative text descriptions; can be invoked standalone or from within Acrobat Pro.

  • LibreOffice - Open-source word processing software from The Document Foundation that can export tagged PDF.

  • Lotus Symphony Documents - Word-processing software from IBM that can export tagged PDF.

  • Microsoft® Word - Word processing application from Microsoft Corporation that can export tagged PDF using the save as XPS or PDF utility.

  • OpenOffice.org Writer - Open source word-processing software from Sun Microsystems Inc. that can export tagged PDF using the Export as PDF utility.

  • CommonLook Office for Microsoft Office from Netcentric Technologies is an add-in to Microsoft® Word and PowerPoint that makes it possible to create tagged PDF documents. CommonLook Office provides tools to allow content authors to run accessibility tests in the Microsoft Word and PowerPoint environments and to remediate accessibility issues prior to conversion to PDF.

  • Xenos Axess™ for Accessible Statements - PDF software integrates with an organization's existing enterprise content management (ECM) infrastructure to capture high-volume print streams and automatically transform them into tagged PDFs.

  • WordPerfect® Office - Word-processing software from Corel that can be used to create, mark up, and share tagged PDF documents.

  • Microsoft Office 10 - a suite of desktop office applications that creates tagged PDF.

Note: Care should be taken when choosing PDF creation tools from the many available, as some may not support creation of tagged PDF files.

Accessibility Checking and Repair

Adobe Acrobat Pro. Adobe Acrobat Pro is an application that creates and edits PDF files. It has a number of tools for evaluating and repairing the accessibility of PDF files, including access to the structure root through the tags panel, the ability to directly manipulate the reading order through the order panel, a built-in accessibility checker, and the Touch Up Reading Order tool which provides a graphical mechanism for assessing and repairing the accessibility of a PDF document.

Commonlook™ PDF. Commonlook PDF. Commonlook PDF is a plug-in for Adobe Acrobat Pro from Netcentric Technologies. CommonLook PDF helps identify, report and correct the most common accessibility problems, including the proper tagging of images, tables, forms and other non-textual objects.

API Inspection Tools
  • aDesigner - a disability simulator from the Eclipse Foundation that helps designers ensure that content is accessible and usable by visually impaired users.

  • inspect32 - part of the Microsoft Windows Software Development Kit (SDK) that allows developers and testers to examine the accessible properties of UI components.

  • PDDOMView - part of Acrobat_Accessibility_9.1.zip which contains files that can be used by Windows clients of the accessibility interfaces described in the Accessibility API Reference document.

  • UISpy - part of the Microsoft Windows Software Development Kit (SDK) that allows developers and testers to view and interact with the user interface (UI) elements of an application.

User Agents

PDF User Agents with accessibility support include:

  • Adobe Acrobat Pro - PDF Authoring Tool, Editor, and Viewer from Adobe Systems which is compatible with MSAA devices on the Windows platform. Has a number of built in accessibility features including text to speech (Read Out Loud), high contrast display, reflow for large print display, auto scroll, accessibility full check, accessibility quick check, touch up reading order tool, and an accessibility setup assistant.

  • Adobe Reader – Freely distributed PDF Viewer from Adobe Systems which is compatible with MSAA devices on the Windows platform. Has a number of built in accessibility features including text to speech (Read Out Loud), high contrast display, reflow for large print display, auto scroll, accessibility quick check, and an accessibility setup assistant.

  • Kurzweil 3000™ - a comprehensive reading, writing and learning software solution from Kurzweil Educational Systems® which reads PDF files using text to speech facilities.

Adobe Reader and Acrobat Support for Accessibility APIs

Adobe provides methods to make the content of a PDF file available to assistive technology such as screen readers:

  • On the Microsoft® Windows® operating system, Acrobat and Adobe Reader export PDF content as Component Object Model (COM) objects. Accessibility applications such as screen readers can interface with Acrobat or Adobe Reader in two ways:

    • Through the Microsoft Active Accessibility (MSAA) interface, using MSAA objects that Acrobat or Adobe Reader exports

    • Directly through exported COM objects that allow access to the PDF document's internal structure, called the Document Object Model (DOM).

  • On UNIX® platforms, Adobe Reader supports the Gnome accessibility architecture. C-based Accessibility Toolkit (ATK) interfaces are available.

The DOM and MSAA models are related, and developers can use either or both. Acrobat issues notifications to accessibility clients about interesting events occurring in the PDF file window and responds to requests from such clients. Recent versions of Acrobat and Reader have enhanced the support for accessibility interfaces:

  • MSAA interfaces are supported in Acrobat/Reader 5.0 and later.

  • In Acrobat/Reader 6.0 and later, information about the underlying PDF structure is made available through direct COM objects that represent the PDF DOM. The DOM accessibility interfaces provide somewhat more extensive access.

  • In Acrobat/Reader 7.0 and later, ATK and expanded DOM support is available.

  • The Linux®, Solaris™, AIX®, and HP-UX versions of Adobe Reader implement C-based ATK interfaces, allowing screen readers, screen magnifiers, and on-screen keyboards to query an Accessibility Technology - Service Providers Interface (AT-SPI) registry for applications that are accessible.

  • The DOM has been expanded to provide enhanced caret, selection, and focus support, as well as the new interfaces IPDDomDocument, ISelectText, and IPDDomNodeExt.

Assistive Technology Support

  • JAWS 12 for Windows - screen reader from Freedom Scientific. Support for PDF started with JAWS version 4.

  • MAGic 11 - screen magnifier from Freedom Scientific

  • NVDA 2011.1 - NonVisual Desktop Access, open source screen reader distributed by NV Access. Providing feedback via synthetic speech and Braille, NVDA allows blind and vision-impaired people to access and interact with the Windows operating system and many third party applications.

  • Supernova Access Suite 12.02 – full screen reader offering magnification, speech, and Braille support from Dolphin. Support for PDF started with HAL version 5.

  • System Access To Go - screen reader from Serotek Corporation

  • VoiceOver - screen reader for Mac OS X v10.6 Snow Leopard

  • Window-Eyes 7.2 - screen reader from GW Micro. Window-Eyes was the first screen reader to provide support for PDF files, in Window-Eyes 4.2.

  • ZoomText 9.1 - screen magnifier and screen reader from Ai Squared, with support for Adobe Acrobat and Reader:

    • PDF documents can be read using both AppReader and DocReader (without special settings)

    • PDF documents can be read in all Windows operating systems (without special settings)

    • AppReader and DocReader start instantly in Adobe Reader

    • PDF documents can be read with greater accuracy and without paging delays

    • PDF documents can be read in Internet Explorer (with the Adobe Reader plug-in)

    • Special Adobe Reader settings are no longer needed to obtain optimal reading


PDF1: Applying text alternatives to images with the Alt entry in PDF documents

Applicability

Tagged PDF documents with images

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF1. Also see PDF Technology Notes.

Description

The objective of this technique is to provide text alternatives for images via an /Alt entry in the property list for a Tag. This is normally accomplished using a tool for authoring PDF.

PDF documents may be enhanced by providing alternative descriptions for images, formulas, and other items that do not translate naturally into text. In fact, such text alternatives are required for accessibility: alternate descriptions are human-readable text that can be vocalized by text-to-speech technology for the benefit of users with vision disabilities.

When an image contains words that are important to understanding the content, the text alternative should include those words. This will allow the alternative to accurately represent the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.

Examples

Example 1: Adding an /Alt entry to an image using Adobe Acrobat 9 Pro's TouchUp Object Tool

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Choose Tools > Advanced Editing > TouchUp Object Tool

    The TouchUp Object Tool in the Advanced Editing menu.

  2. Access the context menu for the image and choose Properties.

  3. On the TouchUp Properties dialog, select the Tag tab.

  4. On the Tag panel, type the text alternative in the Alternate Text text box.

    The Tag Tab in the TouchUp Properties dialog.

This example is shown in operation in the working example of Adding an /Alt entry to an image.

Example 2: Adding an /Alt entry to an image using Adobe Acrobat 9 Pro's TouchUp Reading Order Tool

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Choose Tools > Advanced Editing > TouchUp Reading Order Tool

    The TouchUp Reading Order Tool in the Advanced Editing menu.

  2. The TouchUp Reading Order dialog will be displayed.

  3. Right-click on the image and choose Edit Alternate Text.

  4. The Alternate Text dialog will be displayed.

  5. Type the text alternative in the Alternate Text text box.

    The Alternate Text box.

Example 3: Adding an /Alt entry to an image in PDF documents generated using Microsoft Word

This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

Word 2000-2003
  1. Right-click on the image and choose Format Picture

  2. Select the Web tab

  3. Type the alternative text into the text box provided and then click OK.

The Web tab in the Format Picture dialog.

Word 2007
  1. Right-click on the image and choose Size

  2. Select the Alt Text tab

  3. Type the alternative text into the text box provided and then click OK.

The Alt Text tab in the Size dialog.

Example 4: Adding an /Alt entry to an image in PDF documents generated using OpenOffice.org Writer 2.2

This example is shown with Open Office.org Writer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Access the context menu for the image and choose Picture...

  2. Select the Options tab

  3. Type the alternative text into Alternate (Text Only) text box and click OK.

The Options tab in the Picture... dialog.

Example 5: Adding a text alternative to an image in a PDF document using an /Alt entry

The /Alt property used on an image of mountains with a moon and trees typically would be used like this (typically accomplished by an authoring tool):

/Figure <</Alt (Sketch of Mountains with moon rising over trees) >>

The image might also be represented by a tag with a different name. A different name might be used because the tag name is written in a language other than English or because a specific tool uses a different name for some other reason. In this situation, it is also necessary that the RoleMap contained within the StructTreeRoot for the PDF document contain an entry which explicitly maps the name of the tag used for the image with the standard structure type used in PDF documents (in this case, Figure). If the RoleMap contains only an entry mapping Shape tags to Figure tags, the rolemap information would appear as follows:

/RoleMap << /Shape /Figure >>

In this case, the usage of the /Alt entry as follows would also be correct:

/Shape <</Alt (Crater Lake in the summer, with the blue sky, clouds and crater walls perfectly reflected in the lake) >>
    					

Note that the /Alt entry in property lists can be combined with other entries.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Verify the images which need equivalents have /Alt entries on an enclosing tag by one of the following:

    • Read the PDF document with a screen reader, listening to hear that the equivalent text is read when tabbing to the non-text object (if it is tabbable) or hearing the alternative text read when reading the content line-by-line.

    • Using a PDF editor, check that a text alternative is displayed for each image.

    • Use a tool which is capable of showing the /Alt entry value, such as aDesigner, to open the PDF document and view the GUI summary to read the text alternatives for images.

    • Use a tool that exposes the document through the accessibility API and verify that images have required text equivalents.

Expected Results
  • Check 1 is true for each image in the document which needs a text equivalent.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF2: Creating bookmarks in PDF documents

Applicability

Tagged PDF documents

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF2. Also see PDF Technology Notes.

Description

The intent of this technique is to make it possible for users to locate content using bookmarks (outline entries in an Outline dictionary) in long documents.

A person with cognitive disabilities may prefer a hierarchical outline that provides an overview of the document rather than reading and traversing through many pages. This is also a conventional means of navigating a document that benefits all users.

Examples

Example 1: Converting a table of contents created with Microsoft Word 2007 and creating bookmarks for Adobe Reader 9 and Acrobat 9 Pro

This example is shown with Microsoft Word and Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Create a table of contents at the beginning of the Word document.

    Reference tab on Word ribbon, showing Table of Contents tool.

  2. Use Save as... > Adobe PDF to convert the Word document to PDF, specifying both of the following:

    • Enable Accessibility and Reflow with Tagged Adobe PDF

    • Convert Word Headings into Bookmarks

The table-of-contents entries in the converted document will be linked to the headings in the document.

In addition, the headings will appear as PDF Bookmarks in the left-hand Navigation pane.

PDF document showing the Table of Contents and Bookmarks created from the headings in a Word document.

If the document provides a glossary and/or index, these sections should have headings that appear in the table of contents (and thus as bookmarks in the Navigation pane). The table of contents also should be marked up with a heading so it is bookmarked as well.

If this markup has not been done in the authoring tool, Adobe Acrobat Pro can be used to provide the tags. See PDF9: Providing headings by marking content with heading tags in PDF documents if you need to modify converted headings or add new ones.

This example is shown in operation in the working example of creating bookmarks with Word 2007.

Example 2: Converting a table of contents created with OpenOffice.org Writer 2.2 and creating bookmarks for Adobe Reader 9 and Acrobat 9 Pro

This example is shown with OpenOffice.org Writer and Adobe Acrobat Pro and Reader. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Create a table of contents at the beginning of the OpenOffice.org Writer document:

    • Insert > Indexes and Tables... > Indexes and Tables > Insert Index/Table

  2. Use File > Export as PDF... to convert the document to PDF, specifying Tagged PDF in the Options dialog.

Image of the Insert Index/Table dialog in OpenOffice.org Writer.

The table-of-contents entries in the converted document will be linked to the headings in the document, and will appear as PDF Bookmarks in the left-hand Navigation pane. The OpenOffice.org Table of Contents and Bookmarks look the same as they appeared in Example 1.

This example is shown in operation in the working example of creating bookmarks with OpenOffice Writer.

Example 3: Adding bookmarks using Adobe Acrobat 9 Pro after conversion

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

After conversion to tagged PDF, you may decide to add bookmarks that were not automatically generated. Like the converted bookmarks, tagged bookmarks use the underlying structural information in the document.

  1. In the Bookmarks panel, choose the options menu, then choose New Bookmarks From Structure...

  2. From the Structure Elements dialog, select the elements you want specified as tagged bookmarks.

The image below shows the Bookmarks options menu.

The Bookmarks options menu.

The next image shows the selection of links in the document for bookmarking.

The tagged elements that can be used for bookmarking, with 'links' selected.

The tagged bookmarks are nested under a new, untitled bookmark. Access the context menu for the new bookmark and select the Rename option to rename the new bookmark, as shown in the following image.

The bookmarks for the hyperlink in the document.

This example is shown in operation in the working example of creating bookmarks with Acrobat Pro.

Example 4: Creating bookmarks with the outline hierarchy

The following code fragment illustrates part of an outline hierarchy used to create bookmarks This is typically accomplished by an authoring tool.

121 0 obj
 << /Type /Outlines
    /First 22 0 R
    /Last 29 0 R
    /Count 6
 >>
endobj
22 0 obj
 << /Title (Applying Guerrilla Tactics to Usability Testing by People with Disabilities)
    /Parent 21 0 R
    /Next 29 0 R
    /First 25 0 R
    /Last 28 0 R
    /Count 4
    /Dest [3 0 R /XYZ 0 792 0]
 >>
endobj
25 0 obj
 << /Title (Getting started)
    /Parent 22 0 R
    /Next 26 0 R
    /Dest [3 0 R /XYZ null 701 null]
 >>
endobj

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that the Bookmarks panel displays bookmarks.

  2. Check that the bookmarks link to the correct sections in the document.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF3: Ensuring correct tab and reading order in PDF documents

Applicability

Tagged PDF documents

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF3. Also see PDF Technology Notes.

Description

The intent of this technique is to ensure that users can navigate through content in a logical order that is consistent with the meaning of the content. Correct tab and reading order is typically accomplished using a tool for authoring PDF.

For sighted users, the logical order of PDF content is also the visual order on the screen. For keyboard and assistive technology users, the tab order through content, including interactive elements (form fields and links), determines the order in which these users can navigate the content. The tab order must reflect the logical order of the document.

Logical structure is created when a document is saved as tagged PDF. The reading order of a PDF document is determined primarily by the tag order of document elements, including interactive elements, but the order of content within individual tags is determined by the PDF document’s content tree structure.

If the reading order is not correct, keyboard and assistive technology users may not be able to understand the content. For example, some documents use multiple columns, and the reading order is clear visually to sighted users as flowing from the top to the bottom of the first column, then to the top of the next column. But if the document is not properly tagged, a screen reader may read the document from top to bottom, across both columns, interpreting them as one column.

The simplest way to ensure correct reading order is to structure the document correctly in the authoring tool used to create the document, before conversion to tagged PDF. Note, however, that pages with complex layouts with graphics, tables, footnotes, side-bars, form fields, and other elements may not convert to tagged PDF in the correct reading order. These inconsistencies must then be corrected with repair tools such as Acrobat Pro.

When a PDF document containing form fields has a correct reading order, all form fields are contained in the tab order in the appropriate order, and in the correct order relative to other content in the PDF. Common tab-order errors include:

  • Form fields missing from the tagged content.

  • Form fields in the wrong location in the PDF content; e.g., at the end of non-interactive content.

Examples

Example 1: Creating a 2-column document using Microsoft Word 2007

This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

Multi-column documents created using Word's Page Layout > Columns... tool typically are in the correct reading order when converted to tagged PDF. The image below shows Word's Columns tool.

The Columns tool in Word. Two is selected to lay out the page in 2 columns.

This example is shown in operation in the working example of 2-column document using Word 2007 (Word file) and working example of 2-column document using Word 2007 (PDF file).

Example 2: Creating a 2-column document using OpenOffice.org Writer 2.2

This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

Multi-column documents created using OpenOffice.org Writer's Format > Columns... tool typically are in the correct reading order when converted to tagged PDF. The image below shows Writer's Columns tool.

The Columns tool in OpenOffice.org Writer. Two is selected to lay out the page in 2 columns.

This example is shown in operation in the working example of 2-column document using OpenOffice Writer (OpenOffice file) and working example of 2-column document using OpenOffice Writer (PDF file).

Example 3: Setting the tab order for one or more pages using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

In a tagged PDF document:

  1. Open the Pages panel by either:

    • Clicking the Pages icon Pages icon in the upper left of the Adobe Acrobat Pro navigation pane

    • Or selecting View > Navigation Panels > Pages

  2. Select one or more page thumbnails.

  3. Access the context menu for the selected thumbnail(s) and select Page Properties...

  4. Select the Tab Order tab in the Page Properties dialog.

  5. If needed, select a tab order option:

Option Description
Use Row Order Tabs from the upper left field, moving first left to right and then down, one table row at a time.
Use Column Order Tabs from the upper left field, moving first from top to bottom and then across from left to right, one table column at a time.
Use Document Structure For tagged documents, moves in the tag order specified by the authoring application.

Note: This is usually the correct reading order and will be selected by default for tagged documents.

Unspecified If the document was created using an earlier version of Acrobat Pro, the tab order is Unspecified by default. With this setting, form fields are tabbed through first, followed by links and then comments ordered by row. This may not be correct reading order.

Page properties in Adobe Acrobat Professional. The choices are Use Row Order, Use Column Order, Use Document Structure, Unspecified. Use Document Structure is selected. This is also the default.

This example is shown in operation in the working example of setting the tab order (Word file) and working example of setting the tab order (PDF file).

Example 4: Repairing the reading order using the Tags panel in Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support (http://trace.wisc.edu/wcag_wiki/index.php?title=PDF_Technology_Notes).

To correct the reading order in Example 5, use the Tags panel, and either

  • Drag-and-drop the H1 tag to precede the required-field text (tagged H2), or

  • Cut-and-paste the H2 tag to follow the H1 tag.

In the following image, the reading order is correct for the text and header. That is, the content elements H1 and H2 have been switched into the correct reading order.

Image showing the corrected reading order In
    						Adobe Acrobat Pro. The tags H1 and H2 have been switched and are
    							now in the correct order.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Verify that the content is in the correct reading order by one of the following:

    • Read the PDF document with a screen reader or a tool that reads aloud, listening to hear that each element is read in the correct order.

    • Use a tool that exposes the document through the accessibility API, and verify that the reading order is correct.

  2. Verify that the tab order is correct for focusable content by one of the following:

    • Use the tab key to traverse the focus order in the document.

    • Use a tool that is capable of showing the page object entry that specifies the tab order setting to open the PDF document and view the setting.

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

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF4: Hiding decorative images with the Artifact tag in PDF documents

Applicability

Tagged PDF documents

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF4. Also see PDF Technology Notes.

Description

The purpose of this technique is to show how purely decorative images in PDF documents can be marked so that they can be ignored by Assistive Technology by using the /Artifact tag. This is typically accomplished by using a tool for authoring PDF.

In PDF, artifacts are generally graphics objects or other markings that are not part of the authored content. Examples of artifacts include page header or footer information, lines or other graphics separating sections of the page, or decorative images.

Examples

Example 1: Marking a background image as an artifact using Adobe Acrobat 9 Pro's TouchUp Reading Order Tool

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

The TouchUp Reading Order Tool can be used to mark an image as "Background," which removes it from the document tag structure.

  1. Open the TouchUp Reading Order Tool in Acrobat Pro: Advanced > Accessibility > TouchUp Reading Order

  2. Select the decorative image in the document

  3. In the TouchUp Reading Order Tool, click the Background button to remove the selected image from the tag structure

The screenshot below illustrates this example.

screen shot showing use of the TouchUp Reading Order panel to remove an image from the tag tree

This example is shown in operation in the working example of creating a decorative image (Word file) and working example of marking a background image as an artifact (PDF file).

Example 2: Marking an image as an artifact in a PDF document using an /Artifact tag or property list

The PDF specification allows images to be marked as "artifacts" as defined in Section 14.8.2.2 (Real Content and Artifacts) in PDF 1.7 (ISO 32000-1). An artifact is explicitly distinguished from real content by enclosing it in a marked-content sequence with the /Artifact tag.

/Artifact

BMC  ...  EMC    

or

/Artifact propertyList

BDC  ...  EMC  

The first is used to identify a generic artifact; the second is used for artifacts that have an associated property list. Note, to aid in text reflow, artifacts should be defined with property lists whenever possible. Artifacts lacking a specified bounding box are likely to be discarded during reflow.

Property list entries for artifacts include Type, BBox, Attached, and Subtype.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For an image that is purely decorative, use one of the following to verify that it is marked as an artifact:

    • Read the PDF document with a screen reader, listening to hear that the decorative image is not announced when reading the content line-by-line.

    • Using a PDF editor, make sure the decorative image is marked as an artifact.

    • Reflow the document and make sure the decorative image does not appear on the page.

    • Use a tool that is capable of showing the /Artifact entry or property list, such as aDesigner, to open the PDF document and verify that decorative images are marked as artifacts.

    • Use a tool that exposes the document through the accessibility API and verify that the decorative image is not exposed through the API.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF5: Indicating required form controls in PDF forms

Applicability

Tagged PDF documents with forms

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF5. Also see PDF Technology Notes.

Description

The objective of this technique is to notify the user when a field that must be completed has not been completed in a PDF form. Required fields are implemented using the /Ff entry in the form field's dictionary (see Table 220 in Section 12.7 (Interactive Forms) of PDF 1.7 (ISO 32000-1). This is normally accomplished using a tool for authoring PDF.

If errors are found, an alert dialog describes the nature of the error in text. This may be accomplished through scripting created by the author (see, for example, SCR18: Providing client-side validation and alert). User agents, such as Adobe Acrobat Pro and LiveCycle, can provide automatic alerts (as described in the examples below).

Note: once the user dismisses the alert dialog, it may be helpful if the script positions the keyboard focus on the field where the error occurred, although some users may expect the focus to remain on the last control focused prior to the alert appearing. Authors should exercise care to ensure that any movement of the focus will be expected. For example, if the alert announces a missing required phone number, positioning the focus on the phone number field when the alert is dismissed can be regarded as helpful and expected. In some cases, however, this may not be possible. If multiple input errors occur on the page, another approach must be taken to error reporting. (See, for example, the Adobe scripting resources.)

Ensuring that users are aware an error has occurred, can determine what is wrong, and can correct it are keys to software usability and accessibility. Meeting this objective helps ensure that all users can complete transactions with ease and confidence.

Labels for required form controls

It is also important that users are aware that an error may occur. You can incorporate this information in labels; for example, "Date (required)" or the use of a red asterisk to indicate required fields. (Make sure that a legend appears on each form with required fields, e.g., "* = required field".) See PDF10: Providing labels for interactive form controls in PDF documents.

Examples

Example 1: Creating a required field in a PDF form using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Access the context menu of the field and select the Properties dialog.

  2. If the field is required, check the Required box. This checkbox forces the user to fill in the selected form field. If the user attempts to submit the form while a required field is blank, an error message appears and the empty required form field is highlighted.

The Properties dialog for a form field. The Required box is checked.

This example is shown in operation in the working example of creating a required field in Acrobat.

Example 2: Creating a required field in a PDF form using Adobe LiveCycle Designer ES 8.2.1

This example is shown with Adobe LiveCycle Designer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Access the context menu of the form control, select Palettes, and select Object.

  2. Select "User entered - Required" from the Type pulldown.

  3. Enter an error message in the "Empty Message" field. This message appears when a user tries to submit the form without entering a value in the required field.

If the user attempts to submit the form with a required field left blank, the Empty Message text appears and the empty required field is highlighted.

The image below shows the Adobe LiveCycle Object palette with the required selection.

Image of Adobe LiveCycle Object palette showing the 'User entered - Required' selection.

You can also add explicit text to the form label to indicate required fields (e.g., "(Required)").

This example is shown in operation in the working example of creating a required field in LiveCycle Designer.

Example 3: Adding a required text field in a PDF form using the /Tx field type and Ff flag

The following code fragment illustrates code that is typical for the object definitions for a typical text field. Note that the text field is required, using the Ff flag. This is typically accomplished by an authoring tool.

<< /AP -dict-                                                   
   /DA /Helv  0 Tf 0 g
   /DR -dict-
   /F 0x4
   /FT Tx              % FT key set to Tx for Text Field
   /Ff 0x2             % Ff integer 0x2 value indicates required
   /P -dict-
   /Rect -array-
   /StructParent 0x1
   /Subtype Widget
   /T First            % Partial field name First
   /TU First name (required)  % TU tool tip value serves as short description
   /Type Annot
   /V Pat Jones
>>
...
<Start Stream>
 BT
  /P <</MCID 0 >>BDC
  /CS0 cs 0  scn 
  /TT0 1 Tf
    -0.001 Tc 0.003 Tw 11.04 0 0 11.04 72 709.56 Tm
    [(P)-6(le)-3(as)10(e)-3( )11(P)-6(rin)2(t)-3( Y)8(o)-7(u)2(r N)4(a)11(m)-6(e)]TJ
  0 Tc 0 Tw 9.533 0 Td
  ( )Tj
  -0.004 Tc 0.004 Tw 0.217 0 Td
  [(\()-5(R)-4(e)5(q)-1(u)-1(i)-3(r)-3(e)-6(d)-1(\))]TJ
 EMC
  /P <</MCID 1 >>BDC
  0 Tc 0 Tw 4.283 0 Td
  [( )-2( )]TJ
   EMC
   /ArtifactSpan <</MCID 2 >>BDC
   0.002 Tc -0.002 Tw 0.456 0 Td
  [(__)11(___)11(___)11(___)11(___)11(_)11(____)11(___)11(___)11(__)]TJ
  0 Tc 0 Tw 13.391 0 Td
  ( )Tj
  EMC
 ET
<End Stream>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each form field that is required, verify that validation information and instructions are provided by applying the following:

  1. Check that the required status is indicated in the form control's label.

  2. Leave the field blank and submit the form. Check that an alert describing the error is provided.

  3. Use a tool that exposes the document through the accessibility API, and verify that the required property is indicated.

Expected Results
  • #1, #2, and #3 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF6: Using table elements for table markup in PDF Documents

Applicability

Tagged PDF documents with tables

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF6. Also see PDF Technology Notes.

Description

The purpose of this technique is to show how tables in PDF documents can be marked up so that they are recognized by assistive technology. This is typically accomplished by using a tool for authoring PDF.

Tabular information must be presented in a way that preserves relationships within the information even when users cannot see the table or the presentation format is changed. Information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal). These relationships are represented in columns and rows, and the columns and rows must be recognizable in order for the logical relationships to be perceived.

Tagged tables can be created using the Add Tags to Document feature in Adobe Acrobat, using the Object Library in Adobe LiveCycle, or converting tables to PDF from a third-party application, such as Microsoft Word. However, the resulting tables may not be tagged correctly and you should ensure that table tagging issues are resolved.

Within PDF documents, a table uses the following structure types for table elements:

  • A table element (Table).

  • One or more table row elements(TR) which define each row of table cells as immediate children of the Table element.

  • One or more table header elements (TH) or table data elements (TD) as the immediate children of each table row element.

  • Cells that span two or more rows or columns should use the RowSpan or ColSpan attribute.

  • For tables that contain blank cells, you may need to add empty TD cells so that each row or column has the same number of cells.

Examples

Example 1: Creating tables in Microsoft Word 2007 that have correctly tagged headings when converted to PDF

This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Access the table header row's context menu and select Table Properties...

  2. Select the Row tab.

  3. Check "Repeat as header at the top of each page" as shown in the following image.

Image of Table properties dialog for the first table row in Word, with the Row tab selected. 'Repeat as header at the top of each page' is checked to ensure that the first row is marked as header cells.

This example is shown in operation in the working example of tagged table headings in Word 2007.

Note: Microsoft Word can only mark up cells as column headings, not as row headings. Only the first row can be marked as heading for all table columns. When the table has row headings or a more complex heading structure, this mark-up must be added in a PDF editor such as Acrobat Pro.

Example 2: Creating tables in OpenOffice.org Writer 2.2 that have correctly tagged headings when converted to PDF

This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Access the table's context menu and select Table...

  2. Select the Table Format tab.

  3. Check Repeat Heading and select "1" in the First Rows listbox as shown in the following image.

Image of Table dialog in OpenOffice.org Writer with Table Format tab selected. Repeat Heading is checked and 1 is selected in the First Rows listbox to ensure that the first row is marked as header cells.

This example is shown in operation in the working example of tagged table headings in OpenOffice Writer.

Note: OpenOffice.org Writer can only mark up cells as column headings, not as row headings. Only the first row can be marked as heading for all table columns. When the table has row headings or a more complex heading structure, this mark-up must be added in a PDF editor such as Acrobat Pro.

Example 3: Modifying table tags using the Tags tab in Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

To check that a converted document with tables has correct table tagging:

  • In the View menu, select Navigation Panel, then select Tags.

Table in Adobe Acrobat Pro showing the Tags tab opened to display the table tags. All table cells are marked TD.

Note that in this case, the table headers were not formatted as illustrated in Examples 1 and 2, and are marked as data cells (TD). To change these to TH tags:

  1. On the Tags tab, open the table row that contains the header cells, as shown on the image above.

  2. Select on the first data cell and select Properties...

  3. On the Tags tab in the Properties dialog, use the Type dropdown to change Table Data Cell to Table Header Cell.

  4. Repeat for all the table header cells in the first table row.

Table in Adobe Acrobat Pro showing the use of the Tag Properties dialog to change data cells to header cells

This example is shown in operation in the working example of tagged table headings in Acrobat.

Example 4: Marking up a table using table structure elements

The following code fragment illustrates code that is typical for a simple table (header row and data row) such as shown in Examples 1-3:

95 0 obj                %Structure element for a table
 << 
  /A 39 0 R
  /K[96 0 R 101 0 R 106 0 R 111 0 R]
  /P 93 0 R
  /S/Table              %standard structure type is table
 >> 
 endobj
96 0 obj                %Structure element for a table row
 << 
  /K[97 0 R 98 0 R 99 0 R 100 0 R]
  /P 95 0 R
  /S/TR                 %standard structure type is table row
 >> 
 endobj
97 0 obj                %Structure element for a table header
 <</A[23 0 R 120 0 R]
   /K 1
   /P 96 0 R
   /S/TH                 %standard structure type is table head
   /Pg 8 0 R
 >> 
endobj
104 0 obj                %Structure element for table data (cell contents)
 << 
  /A 29 0 R
  /K 7
  /P 101 0 R
  /S/TD                  %standard structure type is table data
  /Pg 8 0 R
 >> 
endobj

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For each table, confirm one of the following:

    • Read the PDF document with a screen reader, listening to hear that the tabular information is presented in a way that preserves logical relationships among the table header and data cells.

    • Using a PDF editor, verify that the appropriate TR, TH, and TD tags are in the proper reading order and hierarchy in the table tree.

    • Use a tool which is capable of showing the table elements to open the PDF document, view the table structure, and verify that it contains the appropriate TR, TH, and TD structures.

    • Use a tool that exposes the document through the accessibility API, and verify that the table structure contains the appropriate TR, TH, and TD structures, and that they are in the proper reading order and hierarchy.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF7: Performing OCR on a scanned PDF document to provide actual text

Applicability

Scanned PDF documents

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF7. Also see PDF Technology Notes.

Description

The intent of this technique is to ensure that visually rendered text is presented in such a manner that it can be perceived without its visual presentation interfering with its readability.

A document that consists of scanned images of text is inherently inaccessible because the content of the document is images, not searchable text. Assistive technologies cannot read or extract the words; users cannot select, edit, resize, or reflow text nor can they change text and background colors; and authors cannot manipulate the PDF for accessibility.

For these reasons, authors should use actual text rather than images of text, using an authoring tool such as Microsoft Word or Oracle Open Office to author and convert content to PDF.

If authors do not have access to the source file and authoring tool, scanned images of text can be converted to PDF using optical character recognition (OCR). Adobe Acrobat Pro can then be used to create accessible text.

Examples

Example 1: Generating actual text rather than images of text using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

This example uses a simple one-page scanned image of text. To ensure that actual text is stored in the document, perform the following steps:

  1. Scan the document using as high a resolution as possible to improve the OCR performance.

  2. Load the scanned document in Acrobat Acrobat Pro. Select Document > OCR Text Recognition > Recognize Text Using OCR...

  3. In the next dialog, select the All Pages radio button under Pages (or Current Page if you are converting only one page), and then select OK.

  4. Under the Settings list, select Edit. In the next dialog, select Formatted Text and Graphics in the PDF Output Style drop-down list. This is important for ensuring accessibility.

  5. Depending on the resolution and how clear the text was, OCR converts images of words and characters to actual text. Text that Acrobat Pro does not recognize is listed as an "OCR suspect," or text element that Acrobat suspects was not recognized correctly.

  6. To fix the suspects, choose Document > OCR Text Recognition > Find First OCR Suspect. Acrobat Pro presents each suspect one at a time, which can be corrected using Acrobat Pro touchup tools.

  7. Run Advanced > Accessibility > Add Tags to Document

  8. Test for accessibility: Advanced > Accessibility > Full Check...

Note: Alternatively, you can use Document > OCR Text Recognition > Find All OCR Suspects to display all OCR suspects at the same time for faster editing.

The following image shows a scanned one-page document in Adobe Acrobat Pro.

A scanned page in Acrobat Pro showing soup recipes.

The next image shows the converted content after adding tags to the document. It will probably be necessary to use the TouchUp Reading Order tool and the Tags panel to tag the content properly for the intended final document. For this example, the image of the spiral book binding was tagged in the conversion. The TouchUp Reading Order tool was used to hide the image as a background (decorative) image (see PDF4: Hiding decorative images with the Artifact tag in PDF documents). The recipe titles were tagged as first level headers.

A tagged converted page in Acrobat Pro showing soup recipes. The name of each soup is a first level header. The image of the spiral book binding was hidden as a decorative image.

Note: Acrobat Pro may automatically add tags when the file is run through OCR.

This example is shown in operation in the working example of generating actual text and the result of performing OCR.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For each page converted to text using OCR, ensure that the resulting PDF has been converted correctly, using one of the following ways:

    • Read the PDF document with a screen reader or a tool that reads aloud, listening to hear that all text is read correctly and in the correct reading order.

    • Save the document as text and check that the converted text is complete and in the correct reading order.

    • Use a tool that is capable of showing the converted content to open the PDF document and verify that all text was converted and is in the correct reading order.

    • Use a tool that exposes the document through the accessibility API and verify that all text was converted and is in the correct reading order.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF8: Providing definitions for abbreviations via an E entry for a structure element

Applicability

Tagged PDF documents containing abbreviations or acronyms

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF8. Also see PDF Technology Notes.

Description

The objective of this technique is to provide an expansion or definition of an abbreviation for the first occurrence of the abbreviation. For example, a reference to an abbreviation, such as "WCAG," should be available as "Web Content Accessibility Guidelines (WCAG)" on its first occurrence in a document.

This is done by setting expansion text using an /E entry for a structure element, and is normally accomplished using a tool for authoring PDF. A Span structure element is typically used to tag the abbreviation, but the /E entry is valid with any structure element.

This technique is applicable for any abbreviation, including acronyms and initialisms. Note that on the first occurrence of the abbreviation, both the abbreviation and the expansion text must be provided. This will aid recognition of later use of the abbreviation.

PDF documents may be enhanced by providing expansions for abbreviations. In fact, such expansions are required for accessibility to ensure understanding by people who have difficulty decoding words; rely on screen magnification (which may obscure context); have limited memory; or who have difficulty using context to aid understanding.

Examples

Example 1: Adding an /E entry to an abbreviation using Adobe Acrobat 9 Pro's Tags panel

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

In a tagged PDF document:

  1. Select the Tags panel, using Views > Navigation Panes > Tags

  2. Select the first instance of the abbreviated text that needs to be expanded. If the selected text is part of a larger tag, access the Tags panel options menu, select Create Tag from Selection, and create a new Span tag. In this example, the text "WCAG2" (within the LBody tag) has been enclosed in a Span tag.

  3. In the Tags panel, access the context menu for the spanned text and select Properties... to open the TouchUp Properties dialog for the Span tag.

  4. On the Content tab of the TouchUp Properties dialog, enter the expansion text, followed by the originally selected text.

The following image illustrates this technique:

The addition of expansion text to an abbreviation using the Tags panel. The text 'WCAG2.0' has been selected and a Span tag created for it. The expansion text 'Web Content Accessibility Guidelines (WCAG) 2.0' is entered as the expansion of 'WCAG2.0' using the TouchUp Properties dialog

This example is shown in operation in the working example of Providing definitions for Abbreviations (Word document), working example of Providing definitions for Abbreviations (OpenOffice document), and working example of Providing definitions for Abbreviations (PDF document).

Example 2: Using a /Span structure element with an /E entry to define an abbreviation

The following code fragment illustrates code that is typical for using the /Span structure element to define an abbreviation.

This example uses the sentence "Sugar is commonly sold in 5 lb bags." The abbreviation "lb" is tagged as a /Span structure element with an /E entry (typically accomplished by an authoring tool).

 1 0 obj                                  % structure element
   << /Type /StructElemen
            /S /Span                      % element type
            /P ...                        % Parent in structure hierarchy
            /K << /Type /MCR
                        /Page 2 0 R       % Page containing marked-content sequence
                        /MCID 0           % Marked content identifier for "lb"
               >>
            /E  (pound, lb)
    >>
 endobj
Example 3: Using a /TH structure element with an /E entry to define an abbreviation

As noted in the Description, the /E entry is valid with any structure element.

The following code fragment illustrates code that is typical for using an /E entry to define an abbreviation.

A table that contains columns for each month uses abbreviations as the values of column headers. The expansion for each abbreviation is provided as the /E entry of the /TH structure element (typically accomplished by an authoring tool).

 1 0 obj                                  % structure element
   << /Type /StructElemen
            /S /TH                        % element type
            /P ...                        % Parent in structure hierarchy
            /K << /Type /MCR
                        /Page 2 0 R       % Page containing marked-content sequence
                        /MCID 0           % Marked content identifier for "Dec"
               >>
            /E  (December, Dec)
    >>
 endobj

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Verify that the first occurrence of abbreviations that require expansion text have /E entries on an enclosing tag by one of the following and that both the abbreviation and the expansion text are provided:

    • In Windows, use Microsoft's Inspect.exe tool, or some other tool that allows inspection of the MSAA interface, to locate the text of the abbreviation in the document tree and ensure that the value of the abbreviation is in the expansion text.

    • In a PDF editor, locate the tag for the text that is the abbreviation, and check that an expansion or definition is provided for each abbreviation in the Expansion Text field in the corresponding tag's properties.

    • Read the PDF document with a screen reader, listening to hear that on the first occurrence, the abbreviation and expansion are read when the screen reader reads the content line-by-line.

    • Use a tool that is capable of showing the /E entry value, such as aDesigner to open the PDF document and view the GUI summary to read the text expansions for abbreviations.

    • Use a tool that exposes the document through the accessibility API and verify that the text expansion of the abbreviation is properly implemented.

Expected Results
  • Check #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF9: Providing headings by marking content with heading tags in PDF documents

Applicability

Tagged PDF documents with headings

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF9. Also see PDF Technology Notes.

Description

The purpose of this technique is to show how headings in PDF documents can be marked so that they are recognized by assistive technologies. Headings are marked up using the heading elements (H, H1, H2, ... H6) in the structure tree. This is typically accomplished by using a tool for authoring PDF.

Heading markup can be used:

  • to indicate start of main content

  • to mark up section headings within the main content area

  • to demarcate different navigational sections, such as top or main navigation, left or secondary navigation, and footer navigation

  • to mark up images (containing text) which have the appearance of headings visually.

Because headings indicate the start of important sections of content, it is possible for assistive technology users to access the list of headings and to jump directly to the appropriate heading and begin reading the content. This ability to "skim" the content through the headings and go directly to content of interest significantly speeds interaction for users who would otherwise access the content slowly.

Examples

Example 1: Adding or modifying tagged headings in PDF documents with Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

Using the Touchup Reading Order tool

One method of adding headings to PDF documents uses the Touchup Reading Order tool:

  1. Open the PDF document in Adobe Acrobat Pro

  2. Select Advanced > Accessibility > TouchUp Reading Order...

  3. Click the Show Order Panel button on the TouchUp Reading Order panel

  4. View the tags in the Show Order panel.

The following image shows a PDF document opened in Adobe Acrobat Pro. The Tags panel is open, showing heading text "Cooking techniques" tagged as H1 and "Cooking with oil" tagged as H2. The text "Cooking with butter" should be tagged as H2 but is not.

 PDF document opened in Adobe Acrobat. The Tags panel shows the headings in the tag tree. Text that should be tagged as H2 is incorrectly tagged as a paragraph.

To correct the H2 heading, use the TouchUp Reading Order panel as follows:

  1. Left click and drag a selection box over the content you want to tag.

  2. Select the Heading 2 tag from the TouchUp Reading Order panel.

The following image shows the PDF document opened in Adobe Acrobat Pro. The TouchUp Reading Order panel is visible. A selection box appears around the text "Cooking with butter," and Heading 2 on the panel is selected.

 PDF document opened in Adobe Acrobat. The TouchUp Reading Order panel is visible; the heading text is selected and Heading 2 on the panel is selected.

Finally, click the Show Order Panel button on the TouchUp Reading Order panel.

The following image shows the PDF document opened in Adobe Acrobat Pro. The Tags panel is visible, showing that the text "Cooking with butter" is now tagged as H2.

 PDF document opened in Adobe Acrobat. The TouchUp Reading Order panel shows the correctly tagged headings.

Using the Order and Tags panels

You can also add or change headings as follows:

  1. Bring up the Order panel.

  2. Access the context menu for the text to be changed or added as a heading.

  3. Select the correct heading tag for the text.

The following screenshot shows Order panel and the context menu for the text "Cooking with butter." "Tag as heading 2" is selected in the context menu.

 PDF document opened in Adobe Acrobat. The Order panel and context menu show the text to be changed to Heading 2.

You can then check that the correct heading is applied by opening the Tags panel, as shown in the following screenshot.

 PDF document opened in Adobe Acrobat. The Tags panel confirms the correct heading tags.

This example is shown in operation in the working example of adding tagged headings (Word file) and working example of adding tagged headings (PDF file).

Example 2: Creating documents in Microsoft Word that have correctly tagged headings when converted to PDF

This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

Use Styles to create heading formats: Heading 1, Heading 2, Heading 3, etc. Make styles progress in a logical manner; e.g., a Heading 2 should come after a Heading 1.

In Microsoft Word 2003
  • Select the "Format > Styles and Formatting" menu item to reveal the styles and formatting task pane.

  • Use the Heading 1 to Heading 6 styles provided in the "Styles and Formatting" panel.

Selecting heading styles in Word 2003.

In Microsoft Word 2007/2010

Select the Home Ribbon in Word 2007/2010 and select the appropriate heading (Heading 1 to Heading 6) from the Styles group.

Selecting heading styles in Word 2007/2010.

Example 3: Creating documents in OpenOffice.org Writer 2.2 that have correctly tagged headings when converted to PDF

This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

Use Styles to create heading formats: Heading 1, Heading 2, Heading 3, etc. Make styles progress in a logical manner; e.g., a Heading 2 should come after a Heading 1.

Export to PDF as follows:

  1. From the File menu, select Export as PDF...

  2. The first time you export as PDF, an Options Dialog appears.

  3. Select Tagged PDF, then select Export.

Selecting heading styles and exporting to PDF in OpenOffice.org Writer.

Example 4: Marking up headings using /Hn elements

Headings within PDF documents can be marked up using /Hn elements elements in the structure tree, where n is numeral 1 through 6 (for example /H1, /H2, etc.).

The following code fragment illustrates code that is typical for using the /Hn elements elements to mark content. Note that /H1 has been role-mapped to /Head1 in this example. This is typically accomplished by an authoring tool.

0 obj% Document catalog
  << /Type /Catalog
     /Pages 100 0 R                  % Page tree
     /StructTreeRoot 300 0 R         % Structure tree root
  >>
endobj
 ...
300 0 obj% Structure tree root
  << /Type /StructTreeRoot
     /K [ 301 0 R                    % Two children: a chapter
        304 0 R                      % and a paragraph
        ]
     /RoleMap << /Chap /Sect         % Mapping to standard structure types
                 /Head1 /H
                 /Para /P
              >>
    /ClassMap << /Normal 305 0 R >>  % Class map containing one attribute class
    /ParentTree 400 0 R              % Number tree for parent elements
    /ParentTreeNextKey 2             % Next key to use in parent tree
    /IDTree 403 0 R                  % Name tree for element identifiers
  >>
endobj
301 0 obj                            % Structure element for a chapter
  << /Type /StructElem
     /S /Chap
     /ID (Chap1)                     % Element identifier
     /T (Chapter 1)                  % Human-readable title
     /P 300 0 R                      % Parent is the structure tree root
     /K [ 302 0 R                    % Two children: a section head
          303 0 R                    % and a paragraph
        ]
  >>
endobj
302 0 obj                            % Structure element for a section head
  << /Type /StructElem
     /S /Head1
     /ID (Sec1.1)                    % Element identifier
     /T (Section 1.1)                % Human-readable title
     /P 301 0 R                      % Parent is the chapter
     /Pg 101 1 R                     % Page containing content items
     /A << /O /Layout                % Attribute owned by Layout
           /SpaceAfter 25
           /SpaceBefore 0
           /TextIndent 12.5
        >>
    /K 0                             % Marked-content sequence 0
  >>
endobj
...

Within marked content containers, headings can be marked up using /Headn elements as follows for a first-level heading in a PDF document:

BT		 		% Start of text object
  /Head1 <</MCID 0 >>   	% Start of marked-content sequence
     BDC
        ...
        (This is a first level heading. Hello world: ) Tj
        ...
     EMC			% End of marked-content sequence
     ...
ET				% End of text object

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For all PDF content that is divided into separate sections, use one of the following to verify that headings are tagged correctly:

    • Read the PDF document with a screen reader, listening to hear that the list of headings is announced correctly.

    • Using a PDF editor, make sure the headings are tagged correctly.

    • Use a tool that is capable of showing the /Headn entries to open the PDF document and verify that headings are tagged correctly.

    • Use a tool that exposes the document through the accessibility API and verify that the headings are tagged correctly.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF10: Providing labels for interactive form controls in PDF documents

Applicability

  • Tagged PDF documents with forms.

  • PDF forms created using Adobe LiveCycle Designer.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF10. Also see PDF Technology Notes.

Description

The objective of this technique is to ensure that users of assistive technology are able to perceive form control labels and understand how form controls are used.

Form controls allow users to interact with a PDF document by filling in information or indicating choices which can then be submitted for processing. Assistive technology users must be able to recognize and understand the form fields, make selections, and provide input to complete the forms, and submit the form, just as sighted users can. Understandable labels that convey the purpose of each form control are essential to form accessibility.

Form inputs generally have labels and instructions to help users understand what information is required and how to fill in the form. Unless these labels are programmatically associated with the relevant fields, assistive technology might not be able to associate them correctly, and thus users might not understand how to complete the form.

Using Adobe Acrobat Pro with documents with interactive forms, you can make sure that the forms are accessible and usable by making sure that programmatically associated labels that convey the purpose of the fields are provided.

The heuristics used by assistive technology will sometimes use the text label if a programmatically associated label cannot be found. The TU entry (which is the tooltip) of the field dictionary is the programmatically associated label (see Example 3 below and Table 220 in PDF 1.7 (ISO 32000-1)). Therefore, add a tooltip to each field to provide a label that assistive technology can interpret.

Placement rules

The table below lists the placement rules governing where Adobe LiveCycle positions labels by default. Note that these rules assume left-to-right text directionality. If your form requires different positioning (e.g., to accommodate PDF documents in languages that use right-to-left text directionality), see Repositioning form labels in Example 2 below. In general, authors should review label positioning to make sure it meets the requirements of their particular form.

Control Type LiveCycle Placement Rules
Text input (including date/time and password fields) Default placement for the label is to the left of the control. If this is not possible, LiveCycle will attempt to place it immediately above the control.
Checkbox Default placement for the label is to the right of the check box.
Radio button group Default placement for the label for each individual radio button is to the right of the button. Create a visible caption for the radio button group by creating static text and placing it to the left of or above the group. (See Labeling radio buttons below.)
Combo box Default placement for the label is to the left of the drop-down list. If this is not possible, LiveCycle will attempt to place it immediately above the control..
List box Default placement for the label is above the list box.
Button LiveCycle automatically places the label on the button; it does not have to be positioned manually. Ensure that the button's purpose is properly described in the label text.

Examples

Example 1: Providing labels using the Forms tool in Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

As noted in the Description, text labels added in an authoring tool and then converted to PDF might be visually associated with the fields but are not programmatically associated, and you should provide a tooltip.

  1. In the Forms menu, select Add or Edit Fields...

  2. For the field you want to edit, access the context menu and select the Properties dialog.

  3. In the General tab of the Properties dialog, type a description for the form field in the Tooltip field.

  4. Repeat for all form fields.

The following image shows the Properties dialog with a description in the Tooltip field.

The Properties dialog for a form field. A short description, including the format required for the field, is added and will appear as a tooltip.

This example is shown in operation in the working example of providing labels using the forms tool.

Example 2: Providing labels to form controls in Adobe LiveCycle Designer ES 8.2.1

This example is shown with Adobe LiveCycle Designer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

LiveCycle Designer provides several options for associating descriptive text and labels with form elements.

For sighted or low-vision users, it is important to properly position the label adjacent to the control. For screen reader users, you should also ensure that the label is programmatically associated with the form control and that sufficient information is provided so that screen reader users can readily complete and submit the form.

This example is shown in operation in the working example of providing labels in LiveCycle Designer.

Specifying accessible label text using the accessibility palette

In LiveCycle Designer, create or import a form. Then:

  1. Enable the palette by selecting Window > Accessibility or by pressing shift + F6.

  2. The palette appears in LiveCycle Designer's right-hand panel.

  3. Select an object in your form. The palette shows the object's accessibility properties.

Image of Adobe LiveCycle Accessibility Palette showing the Precedence drop down list. Text is announced in the order shown in the list: custom text, tool tip, caption, and name.

The label that a screen reader uses does not necessarily have to be the same as the visual caption. In some cases, you may want to provide more information about a form element's purpose.

To specify what text should be announced by the screen reader for a particular object, you can use the Accessibility Palette's Screen Reader Precedence drop down list. Text is announced in the order shown in the list: custom text, tool tip, caption, and name.

Depending on the complexity and difficulty of your form, you must decide which option best suits the requirements for your form.

By default, a screen reader searches for an object's text in order shown in the image. Once descriptive text has been found for a control, the search stops.

The image below shows an example of a text field with a visual caption that might be unclear for screen reader users. One of the fields has a caption of "Date" but screen reader users may want to know the preferred date format (shown as screen text). So this text is provided in the tooltip. Because a tooltip has a higher precedence than the visual caption, the screen reader uses the tooltip.

Image of a date form field in LiveCycle Designer showing tooltip text for a date format.

Labeling radio buttons

When a screen reader user tabs into a radio button, the screen reader needs to announce two items:

  • A general description of the purpose of the group of buttons

  • A meaningful description for the purpose of each radio button

To make radio buttons accessible:

  1. In the Hierarchy palette, select the radio button group.

  2. Select the Accessibility palette and in the Custom Screen Reader Text box, type the speak text for the group. For example, type "Select a method of payment."

  3. In the Hierarchy palette, select the first radio button in the group.

  4. In the Object palette, select the Field tab. In the Item area, select the item and type a meaningful value for the selected radio button. For example, type "Cash."

  5. Repeat steps 3 and 4 for each radio button in the group.

Image of Custom Screen Reader Text for radio buttons in LiveCycle Designer.

Repositioning form labels

The placement of a caption, or label, is important because users expect them to be found at a particular location adjacent to the control. For screen magnification users this is even more important, as they might not be able to view both the control and the label at the same time.

When you create an object, Adobe LiveCycle Designer automatically positions the label as specified by the control type (see the table in the Description above). For example, for a text field, the label is positioned to the left of the control.

If you need to change the position of the label text (for example, to accommodate right-to-left text directionality):

  1. Select the object by moving the focus to it.

  2. In the Layout palette, under Caption at the bottom of the palette, select the position of your object from the Position drop-down list.

The Layout palette and the new Caption position.

The resulting repositioned label is shown below. The label for the Date text field has been moved from the left of the field to the line above the field.

A form label repositioned above the field; also shown are default label positions to the left of text fields.

Example 3: Adding a tooltip to interactive form controls

The following code fragment illustrates the use of the TU entry to provide a tooltip (or programmatically associated text label) for a form field. This is typically accomplished by an authoring tool.

<< /AP -dict-                                                   
   /DA /Helv  0 Tf 0 g
   /DR -dict-
   /F 0x4
   /FT Tx              % FT key set to Tx for Text Field
   /P -dict-
   /Rect -array-
   /StructParent 0x1
   /Subtype Widget
   /T Date you are available   % Partial field name Date
   /TU Date you are available: use MM/DD/YYYY format % TU tool tip value serves as short description
   /Type Annot
   /V Pat Jones
>>
...
<Start Stream>
 BT
  /P <</MCID 0 >>BDC
  /CS0 cs 0  scn 
  /TT0 1 Tf
    -0.001 Tc 0.003 Tw 11.04 0 0 11.04 72 709.56 Tm
    [(P)-6(le)-3(as)10(e)-3( )11(P)-6(rin)2(t)-3( Y)8(o)-7(u)2(r N)4(a)11(m)-6(e)]TJ
  0 Tc 0 Tw 9.533 0 Td
  ( )Tj
  -0.004 Tc 0.004 Tw 0.217 0 Td
  [(\()-5(R)-4(e)5(q)-1(u)-1(i)-3(r)-3(e)-6(d)-1(\))]TJ
 EMC
  /P <</MCID 1 >>BDC
  0 Tc 0 Tw 4.283 0 Td
  [( )-2( )]TJ
   EMC
   /ArtifactSpan <</MCID 2 >>BDC
   0.002 Tc -0.002 Tw 0.456 0 Td
  [(__)11(___)11(___)11(___)11(___)11(_)11(____)11(___)11(___)11(__)]TJ
  0 Tc 0 Tw 13.391 0 Td
  ( )Tj
  EMC
 ET
<End Stream>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For each form control, verify visually that the label is positioned correctly in relation to the control.

  2. For each form control, verify that the name is programmatically associated with the control by one of the following:

    • Open the PDF document with a tool that is capable of showing the name associated with the control and verify that the name is associated correctly with the control.

    • Use a tool that exposes the document through the accessibility API, and verify that the name is associated correctly with the control.

Expected Results
  • #1 and #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF11: Providing links and link text using the Link annotation and the /Link structure element in PDF documents

Applicability

PDF documents that contain links

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF11. Also see PDF Technology Notes.

Description

The purpose of this technique is to show how link text in PDF documents can be marked up to be recognizable by keyboard and assistive technology users. That is, the link information is programmatically available to user agents so that links are recognizable when presented in a different format. This is typically accomplished by using a tool for authoring PDF.

Links in PDF documents are represented by a Link tag and objects in its sub-tree, consisting of a link object reference (or Link annotation) and one or more text objects. The text object or objects inside the Link tag are used by assistive technologies to provide a name for the link.

The simplest way to provide links that comply with the WCAG success criteria is to create them when authoring the document, before conversion to PDF.

However, in some cases, it may not be possible to create the links using the original authoring tool. In these cases, Adobe Acrobat Pro can be used to create the link. But, because the tooltip created using the Link dialog in Adobe Acrobat Pro is not accessible to screen readers, be sure that the link text or the link context makes the purpose clear.

In all cases, link purpose should be made clear as described in the general techniques:

Examples

Example 1: Creating a hyperlink in Microsoft Word 2007 before conversion to PDF

This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

To create a hyperlink in Microsoft Word, first locate the item (e.g., web page) to link to. Then:

  1. Either

    • Select Insert on the ribbon and select Hyperlink in the Links tools

    • Or, use the CTRL+K keyboard shortcut

  2. On the Insert Hyperlink dialog, add the link destination and link text.

  3. Save the file as tagged PDF. (See the PDF Technology Notes.)

Example 2: Creating a hyperlink in OpenOffice.org Writer 2.2 before conversion to PDF

This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. On the Insert menu, select Hyperlink.

  2. In the Hyperlink dialog, insert the target URI in the Target field under Hyperlink Type.

  3. Insert the link text in the Text field under Further Settings. (You can also select the link text from the document text before bringing up the dialog. The Text field will be filled in with the selected text.)

  4. Save the file as tagged PDF. (See the PDF Technology Notes.)

Example 3: Creating a hyperlink using the Create Link dialog in Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Select the text that will become the link text.

  2. Access the context menu and select Create Link.

Image of a PDF document with text selected to create a hyperlink. The context menu shows Create Link selected.

3. Follow the instructions in the Create Link dialog to specify the link appearance, as shown below.

Image of a PDF document with the Create Link dialog open and link appearance options selected.

Then select Next and specify the URI. The image below shows the resulting hyperlink and tooltip.

Image of a PDF document with a hyperlink created using the Create Link dialog, including the resulting tooltip on mouseover.

This example is shown in operation in the working example of creating a hyperlink in PDF.

Example 4: Marking up link text using a /Link structure element

Link annotations in PDF documents are associated with a geometric region of a page rather than a particular object in a content stream. For this reason, link annotations alone are not useful for users with visual impairments, or to applications that must determine which content can be activated to invoke a hypertext link.

Tagged PDF /Link elements use PDF's logical structure to establish the association between content items and link annotations, providing functionality comparable to HTML hypertext links.

In HTML, the following example produces text containing a hypertext link:

Here is some text <a href="http://www.w3.org/WAI/"> with a link </a> inside.

In PDF the page must be painted first and then a link annotation placed over the area where the object action will occur.

The following code fragment shows PDF equivalent to the HTML above; it uses link text displayed in blue and underlined. A second code fragment follows, indicating the associated logical structure hierarchy. This is typically accomplished by an authoring tool.

 /P <</MCID 0>>                                                %Marked Content Sequence 0 (paragraph)
  BDC                                                          %Begin marked content sequence
   BT                                                          %Begin text object
    /F1 11.04 Tf                                               %set text font and size
    1 0 0 1 72.024 709.54 Tm                                   %set text matrix
    0 g                                                        %set non stroking color to black
    0 G                                                        %set stroke color to black
   [(H)3(ere )-4(is s)10(o)5(m)-4(e)9( t)-3(e)9(xt)-3( )] TJ   %Show text preceding the link" Here is some text"
   ET                                                          %end text object
  EMC                                                          %end marked content sequence
 
 /Span <</MCID 1>>                                             %Marked Content Sequence 1 (underlined link text)
  BDC                                                          %Begin marked content sequence
   BT                                                          %Begin text object
    1 0 0 1 152.42 709.54 Tm                                   %set text matrix
    0 0 1 rg                                                   %set non-stroking color to blue
    0 0 1 RG                                                   %set stroke color to blue
    [(with a )-2(li)3(n)14(k)] TJ                              %Show link text " with a link"
   ET                                                          %end text object
    0 0 1 rg                                                   %set stroke color to blue
    152.42 707.62 45.984 0.72 re                               %rectangle operator - target area for the link
    f*                                                         %fill the path using the even-odd rule
  EMC                                                          %end marked content sequence
 
 /P <</MCID 2>>                                                %Marked Content Sequence 2 (paragraph)
  BDC                                                          %Begin marked content sequence
   BT                                                          %begin text object
    1 0 0 1 198.41 709.54 Tm                                   %set text matrix                                            
    0 g                                                        %set non stroking color to black
    0 G                                                        %set stroke color to black
    [( )] TJ                                                   %empty text string showing white space
   ET                                                          %end text object
   BT                                                          %begin text object
    1 0 0 1 200.93 709.54 Tm                                   %set text matrix
    [(in)5(sid)5(e.)] TJ                                       %show text following the link "inside."
   ET                                                          %end text
   BT                                                          %begin text object
    1 0 0 1 229.97 709.54 Tm                                   %set text matrix
    [( )] TJ                                                   %empty text string showing white space
   ET                                                          %end text object
  EMC                                                          %end marked content sequence 
  

The following code fragment is an excerpt from the logical structure that establishes the association between the content items and the link annotation:

 11 0 obj                                              %Object ID 11, generation   0, obj keyword
  <</K[1                                               %immediate child of the structure tree root
   <<
    /Obj 26 0 R                                        %reference to Object 26
    /Type/OBJR                                         %this object describes an indirect object reference
   >>]
    /P 12 0 R
    /Pg 17 0 R
    /S/Link
  >>
 endobj
 
 26 0 obj                                              %object ID 26 which is referenced by the OBJR in Object 11
  <</A 31 0 R
   /BS
   <</S/S
     /Type/Border
     /W 0
   >>
   /Border[0 0 0]                                      %a colorless border
   /H/I
   /Rect[150.128 694.558 200.551 720.0]                %the boundaries defining target area where link annotation is active
   /StructParent 1
   /Type/Annot                                         %Structure element is an annotation
   /Subtype/Link
  >>                                                   %It is a link annotation                                                 
 endobj     
 31 0 obj                                              %Object 31, gen 0, obj
  <</S/URI                                             %Object type is URI action
    /URI(http://www.w3.org/WAI)                        %The Uniform resource identifier to resolve
  >>   
 endobj

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each hyperlink, verify that the link is correctly tagged and the link text is properly exposed:

  1. Read the PDF document with a screen reader, listening to hear that the link is read correctly and that it describes the purpose of the link (i.e., its destination).

  2. Visually scan the tag tree to verify that the link is tagged correctly and the link text is exposed (for screen magnifier users and sighted users with cognitive disabilities).

  3. Use a tool that is capable of showing the /Link entry value to open the PDF document and view the hyperlink and link text.

  4. Use a tool that exposes the document through the accessibility API and verify that the link has the correct link text.

  5. Tab to each link and check that it can be followed to its target by pressing Enter.

Expected Results
  • #1 or #2 or #3 or #4 is true.

  • #5 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF12: Providing name, role, value information for form fields in PDF documents

Applicability

Tagged PDF documents with interactive form fields.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF12. Also see PDF Technology Notes.

Description

The objective of this technique is to ensure that assistive technologies can gather information about and interact with form controls in PDF content.

The types of PDF form controls are: text input field, check box, radio button, combo box, list box, and button.

Providing name, role, state, and value information for all form components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software used by people with disabilities.

The PDF specification defines how name, role, and value are set for form controls in Section 12.7.4 (Field Types) of PDF 1.7 (ISO 32000-1), as shown in the following table. The Comments column explains how Adobe Acrobat Pro displays the corresponding information.

Interactive Form Dictionary EntriesUsed to DefineComments
FTRoleControls that share field type also use field flags to set the appropriate role. In Adobe Acrobat the role for form controls is set automatically.
TUNameIn Adobe Acrobat the TU entry value is provided via the Tooltip field in the form control's Properties dialog. This should not be confused with the T entry which is defined as the Name in Acrobat's form control properties dialog - the name field in the Properties dialog is not used to provide the name for a control when read by assistive technologies.
CAName (Pushbuttons only)In Adobe Acrobat the CA entry value is provided via the label field in the form control's Properties dialog.
VValueThe Value entry is set by the user interacting with the control, where a value is needed.
DVDefault ValueIn Adobe Acrobat the DV entry value can be set in the form control's Properties dialog.

The following table describes how the role, name, value, and state are defined for PDF form controls created using Adobe Acrobat Pro. Adobe LiveCycle Designer provides the same controls as well as several additional ones: see Example 2 below.

PDF form element Role (FT entry) Name (TU entry)Value (V entry)Configurable States
Text fieldText /Tx TooltipDefault value (DV entry in field dictionary) can be set in the Properties dialog. Value is entered by user.Read Only, Required, Multiline, Password
Check boxCheck box /Btn TooltipV entry is set to 'Yes' or 'No' depending on Checked state.Read Only, Required, Checked
Radio buttonRadio button /Btn (Field Flag set to 'Radio')TooltipV entry is set to 'Yes' or 'No' depending on Checked state.Read Only, Required, Checked
Combo boxCombo box /Ch (Field Flag set to 'Combo') TooltipDefault value (/DV) can be set in the Properties dialog. Value is determined by user selection.Read Only, Required
List boxDrop-down list /Ch TooltipDefault value (/DV) can be set in the Properties dialog. Value is determined by user selection.Read Only, Required
ButtonPush button /Btn (Field Flag set to 'Pushbutton')Label (CA entry instead of TU entry)Push buttons do not have or require a value.Read Only, Required
Signature fieldText /Sig TooltipDefault value (DV entry in field dictionary) can be set in the Properties dialog. Value is entered by user.Read Only, Required

Examples

Example 1: Specifying name, role, value and/or state for a form field using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

This example uses a check box for illustration; the procedure is the same for other form controls. In Form Editing mode:

  1. Access the context menu for the form field you are creating or modifying.

  2. Select the Properties... dialog for the form field.

  3. Specify the name by adding a value to the tool tip field. This will used by the accessibility API as the Name for the control and should usually be set to match the text used as a visual label for the control.

  4. Select the Options tab.

  5. Specify the default value and the default state, if appropriate.

The image below shows the Check Box Properties dialog, open in the General tab. (The Name field in the dialog is not needed for accessibility.)

General tab on the Check Box Properties dialog, showing name and tool tip fields for a check box

The image below shows the Check Box Properties dialog, open in the Options tab.

Options tab on the Check Box Properties dialog, showing value and state fields for a check box.

This example is shown in operation in the working example of specifying name, role, value using Acrobat Pro.

Example 2: Specifying name, value, and state for a form field using Adobe LiveCycle Designer ES 8.2.1

This example is shown with Adobe LiveCycle Designer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

In Adobe LiveCycle Designer, you use the Object Library to create form objects and the Object Palette to specify name, role, state or value for the object.

The following image shows the Object Palette.

LiveCycle Designer Object Library showing the form objects available for form creation.

The following three images show the tabs in the Object palette. In the first the Field tab is open for specifying the type (or role) of the field.

LiveCycle Designer Object palette, Field tab.

The next image shows the Value tab, with options that can be applied to the field.

LiveCycle Designer Object palette, Value tab options.

The third images shows the Binding tab, specifying the name of the field.

LiveCycle Designer Object palette, Binding tab.

This example is shown in operation in the working example of specifying name, role, value using LiveCycle Designer.

Example 3: Adding a checkbox in a PDF document using the /Btn field type

The following code fragment illustrates code that is typical for a simple check box field such as shown in Examples 1 and 2. This is typically accomplished by an authoring tool.

1 0 obj
  << /FT /Btn     % Role
     /TU Retiree  % Name
     /V /Yes      % Value
     /AS /Yes
     /AP << /N << /Yes 2 0 R /Off 3 0 R>>
  >>
endobj

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For the form control, verify that name, role, and value/state are specified by one of the following:

    • Use a screen reader to navigate to the form control and check that it can be activated or that its value can be changed. Verify that the name (tooltip) and role are announced.

    • Use a tool capable of showing the form field information to open the PDF document and verify that the form control has the correct name, role, value, and state (if appropriate) information.

    • Use a tool that exposes the document through the accessibility API, and verify that the form control has the correct name, role, value, and state (if appropriate) information.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF13: Providing replacement text using the /Alt entry for links in PDF documents

Applicability

Tagged PDF documents that contain links.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF13. Also see PDF Technology Notes.

Description

The objective of this technique is to provide replacement link text via the /Alt entry in the property list for a tag. This is usually not necessary, but in some situations, additional information beyond the visible link text is needed, particularly for screen reader users. Screen readers can read visible link text, but replacing the screen text with meaningful alternate text for links in a PDF document can make links more accessible.

Links in PDF documents are represented by a Link tag and objects in its sub-tree, consisting of a link object reference (or Link annotation) and one or more text objects. The text object or objects inside the Link tag are used by assistive technologies to provide a name for the link.

Authors can replace the default link text by providing an /Alt entry for the Link tag. When the Link tag has an /Alt entry, screen readers ignore the value of any visible text objects in the Link tag and use the /Alt entry value for the link text.

The simplest way to provide context-independent link text that complies with the WCAG 2.0 success criteria is to create them when authoring the document, before conversion to PDF. In some cases, it may not be possible to create the links using the original authoring tool. When editing PDF documents with Adobe Acrobat Pro, the best way to create accessible links is to use the Create Link command.

Authors should make sure that the alternate text makes sense in context of the screen text before and after the link.

Examples

Example 1: Adding alternate link text using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

The image below shows a document converted to PDF from Oracle Open Office. Note that the visible link text is the URL for the link target. A screen reader will read the entire URI as the link text.

A document with the link URI as the link text.

To create more accessible link text for assistive technology:

  1. In the View menu, open the Tag panel by selecting Navigation Panels > Tags.

  2. Locate the Link tag in the tag tree, access the context menu for the link, and select Properties.

  3. In the TouchUp Properties dialog, in the Tags tab, enter replacement text in the Alternate Text field. Screen readers will read this text instead of the entire URI.

The next image shows the Link tag structure in the Tag panel.

The Link tag structure in the tag panel.

The last image shows the Alternate Text specified in the Link tag's TouchUp Properties dialog. A screen reader will read the Alternate Text as the link text.

The new Alternate Text: 'Boston Globe technology page'

This example is shown in operation in the working example of adding alternate link text (OpenOffice file) and working example of adding alternate link text (PDF file).

Example 2: Adding alternate link text in a PDF document using the /Alt entry

The following code fragment illustrates code that is typical for alternative text for a link. This is typically accomplished by an authoring tool.

32 0 obj
<<
  /S/URI                                       %Action type (required), must be URI for a URI action
  /URI(http://www.boston.com/business/technology/)  %Uniform resource identifier(required), the URI to be resolved
>>
endobj

The following illustrates how to specify alternate text for the URL in the above link:

11 0 obj
<<
  /Alt(Boston Globe technology page)    %Alternate text entry
  /K [ 1                                                      
       <<
         /Obj 27 0 R
         /Type /OBJR            %Object reference to the link
       >>
       ]                       
  /P 12 0 R
  /Pg 18 0 R
  /S
  /Link
>>
endobj

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For the hyperlink, verify that the alternate link text is properly coded by one of the following:

    • Read the PDF document with a screen reader, listening to hear that the alternate link text is read correctly.

    • Use a tool that is capable of showing the /Alt entry to open the PDF document and view the hyperlink and alternate link text.

    • Use a tool that exposes the document through the accessibility API and verify that the alternate link text is the text for the link.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF14: Providing running headers and footers in PDF documents

Applicability

Tagged PDF documents

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF14. Also see PDF Technology Notes.

Description

The objective of this technique is to help users locate themselves in a document by providing running headers and footers via pagination artifacts. This is normally accomplished using a tool for authoring PDF.

Running headers and footers help make content easier to use and understandable by providing repeated information in a consistent and predictable way. The content of headers and footers will vary widely depending on the document scope and content, the audience, and design decisions. Some examples of location information that may be used in headers and footers are listed below. Whether the information appears in a header or a footer is often a design decision; page numbers often appear in footers but they may alternatively appear in headers.

  • Document title

  • Current chapter and/or section in the document

  • Page numbers with location information such as, "Page 3-4" or "Page 9 of 15."

  • Author and/or date information.

Consistency helps users with cognitive limitations, screen-reader users and low-vision magnifier users, and users with intellectual disabilities understand content more readily.

The easiest way to provide page headers and footers is in the authoring tool for the document. Authoring tools typically provide features for creating header and footer text and information (such as page numbers). However, if after converting your document to PDF, you need to add or modify page headers and footers, authoring or repair tools like Adobe Acrobat Pro's Header & Footer tools can be used. In all cases, the tools generate page headers and footers in consistent and predictable layout, format, and text.

Examples

Example 1: Adding running headers and footers using Microsoft Word 2007

This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

In Microsoft Word, use the Insert ribbon, which allows you to specify header, footer, and page number information and layout, as shown in the following images.

Header and Footer tools on the Word Insert ribbon.

You can use these tools to specify headers and footers as shown in the following images:

Page headers in a Word document.

Page footers in a Word document.

When converted to PDF, the page headers and footers appear in the document.

Page headers converted from Word.

Page footers converted from Word.

This example is shown in operation in the working example of adding running headers using Word (Word file) and working example of adding running headers using Word (PDF file).

Example 2: Adding running headers and footers using OpenOffice.org Writer 2.2

This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

In OpenOffice.org Writer, use the Insert > Header and Insert > Footer tools, which allow you to specify header and footer information and layout, as shown in the following images.

Header and Footer tools in OpenOffice.org Writer.

Page headers in an OpenOffice.org Writer document.

Page footers in an OpenOffice.org Writer document.

When converted to PDF, the page headers and footers appear in the document as they do in the converted Word document in Example 1.

This example is shown in operation in the working example of adding running headers using OpenOffice Writer (OpenOffice file) and working example of adding running headers using OpenOffice Writer (PDF file).

Example 3: Adding running headers and footers to PDF documents using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

In Adobe Acrobat Pro, you can add or modify headers and footers:

  1. Select Document > Header & Footer > Add...

  2. In the Add Header and Footer tool, specify text and formats for headers and footers in your document.

  3. Use the Previews to make sure the text, fonts, and layout are as you want them for your document.

The image below shows Acrobat Pro's Add Header and Footer tool.

Add Header and Footer tool in Adobe Acrobat Pro

Example 4: Marking a running header or footer as a pagination artifact in a PDF document using an /Artifact tag or property list

The PDF specification allows running headers and footers to be marked as "pagination artifacts" as defined in section 14.8.2.2 "Real Content and Artifacts," of PDF 1.7 (ISO 32000-1).

An artifact is explicitly distinguished from real content by enclosing it in a marked-content sequence with the /Artifact tag.

/Artifact
BMC
...
EMC

or

/Artifact propertyList
BDC
...
EMC

The first is used to identify a generic artifact; the second is used for artifacts that have an associated property list. Note: to aid in text reflow, artifacts should be defined with property lists whenever possible. Artifacts lacking a specified bounding box are likely to be discarded during reflow.

Property list entries for artifacts include Type, BBox, Attached, and Subtype.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that running headers and/or footers are provided and contain information to help users locate themselves within the document (such as page numbers or chapter numbers).

  2. If section headers are used in the running header or footer, check that the section header and the running header or footer are consistent.

Expected Results
  • #1 and #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF15: Providing submit buttons with the submit-form action in PDF forms

Applicability

Tagged PDF documents with forms.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF15. Also see PDF Technology Notes.

Description

The objective of this technique is to provide a mechanism that allows users to explicitly request a change of context using the submit-form action in a PDF form. The intended use of a submit button is to generate an HTTP request that submits data entered in a form, so it is an appropriate control to use for causing a change of context. In PDF documents, submit buttons are normally implemented using a tool for authoring PDF.

Examples 1 and 2 demonstrate how to add a submit button using specific authoring tools. There are other PDF tools that perform similar functions. Check the functionality provided by PDF Authoring Tools that Provide Accessibility Support.

Examples

Example 1: Adding a submit button using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. From the toolbar, select Forms > Form Tools > Button and create a button on the form.

  2. Access the context menu for the button and select Properties... to open the Button Properties dialog.

  3. In the General tab, provide a tooltip for the button.

  4. In the Options tab, choose an option in the Layout menu for the button label, icon image, or both. Then, type text in the Label box to identify the button as a submit button and/or click Choose Icon and locate the image file you want to use.

  5. In the Actions tab:

    • For Select Trigger, choose Mouse Up. (The Mouse Up event is keyboard accessible and, in addition, ensures that the button will not change context unexpectedly, as it might with, e.g., a Mouse Enter event.)

    • For Select Action, choose Submit A Form.

    • Click Add.

  6. In the Add dialog, enter a URL to collect data on a server or collect form data as e-mail attachments.

The following image shows the Options tab on the Button Properties dialog.

The Options tab in the Button Properties dialog, showing the layout and label button properties.

The following image shows the Actions tab on the Button Properties dialog.

The Action tab in the Button Properties dialog with the Select Action option specified.

Example 2: Adding a submit button using Adobe LiveCycle Designer ES 8.2.1

This example is shown with Adobe LiveCycle Designer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. On the Insert > Standard menu, select the HTTP Submit Button item.

  2. On the Object panel for the HTTP Submit Button, insert the URL for form-submission processing.

The following image shows the Standard menu with the list of form controls.

The Standard menu showing the list of form controls, including the selection of the HTTP Submit Button.

The following image shows the Object panel with the URL and other fields for button appearance.

The Object panel showing the URL and other fields for specifying the submit button's appearance and action.

Example 3: Adding a script action to a submit button in a PDF document using JavaScript

The following JavaScript code illustrates the use of a script to specify the submit-form action. To add this script to the form field:

  1. Open the Button Properties dialog, as shown in Example 1, and select the Actions tab

  2. Select Run a JavaScript from the drop-down list, and select the Add button

  3. Enter JavaScript code in the JavaScript Editor dialog, for example:

var aSubmitFields = new Array( "name", "id", "juser" );
this.submitForm({
  cURL: "http://www.example.com/cgi-bin/myscript.cgi#FDF",
  aFields: aSubmitFields,
  cSubmitAs: "FDF" // the default, not needed here
});

The following images illustrate this process:

The Button Properties dialog for a submit button.

The JavaScript added to the Action tab of the Button Properties dialog.

This example is shown in operation in the working example of adding a script action to a submit button.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For each page that submits a form, visually verify that the form contains a submit button and check one of the following:

    • Tab to the button and check that it submits the form in response to user action to select the button.

    • Open the PDF document with a tool that is capable of showing the submit-form action and check that the button action is to submit the form.

Expected Results
  • #1 is true for each page that contains a form.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF16: Setting the default language using the /Lang entry in the document catalog of a PDF document

Applicability

Tagged PDF documents

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF16. Also see PDF Technology Notes.

Description

The objective of this technique is to specify a document's default language by setting the /Lang entry in the document catalog. This is normally accomplished using a tool for authoring PDF.

Both assistive technologies and conventional user agents can render text more accurately when the language of the document is identified. Screen readers can load the correct pronunciation rules. Visual browsers can display characters and scripts correctly. Media players can show captions correctly. As a result, users with disabilities are better able to understand the content.

Examples

Example 1: Adding a /Lang entry to specify the default document language using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Open the document in Adobe Acrobat Pro

  2. From the File menu, select "Properties..."

  3. In the "Properties" dialog, select the "Advanced" tab

  4. In the "Reading Options" field, select the default language from the "Language" combo box

Specifying the default language in Adobe Acrobat's Properties dialog.

Note: Acrobat includes 16 preset language selections. If you need to specify a language that is not on the list, such as Russian, you must type the ISO 639 code for the language, not its name.

This example is shown in operation in the working example of adding a /Lang entry using Acrobat Pro.

Example 2: Specifying the default document language in a PDF document using Microsoft Word 2007

This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

Documents authored in Microsoft Word: "In some instances, even if the document language has been specified in the source file, the information about document language is not conveyed to the PDFMaker. Setting the language for an entire document in the Document Properties dialog box [see Example 1] corrects all errors related to this option."(Adobe® Acrobat® 9 Pro Accessibility Guide: Creating Accessible PDF from Microsoft® Word)

Example 3: Specifying the default document language in a PDF document using a /Lang entry

The natural language used for text in a document is determined in a hierarchical fashion, based on whether an optional /Lang entry is present in any of several possible locations. At the highest level, the document's default language may be specified by a /Lang entry in the document catalog.

The following code fragment illustrates code that is typical for using the /Lang entry in the document catalog for a document's default language (in this case, US English). (This is typically accomplished by an authoring tool.)

 1 0 obj
   << /Type /Catalog
      ...
      /Lang (en-US)
      ...
   >> 
 endobj

Resources

Tests

Procedure
  1. Verify that the default language for the document is correctly specified by applying one of the following:

    • Read the PDF document with a screen reader, listening to hear that the text is read in the correct natural language.

    • Using a PDF editor, check that the language is set to the default document language.

    • Use a tool which is capable of showing the /Lang entry value in the document catalog to open the PDF document and view the language settings.

    • Use a tool that exposes the document through the accessibility API and verify that the language is set to the default language.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF17: Specifying consistent page numbering for PDF documents

Applicability

Tagged PDF documents

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF17. Also see PDF Technology Notes.

Description

The objective of this technique is to help users locate themselves in a document by ensuring that the page numbering displayed in the PDF viewer page controls has the same page numbering as the document. For example, Adobe Acrobat Pro and Reader display page numbers in the Page Navigation toolbar. The page number format is specified by the /PageLabels entry in the Document Catalog.

Many documents use specific page number formats within a document. Commonly, front matter is numbered with lowercase Roman numerals. The main content, starting on the page numbered 1, may actually be the fifth or sixth page in the document. Similarly, appendices may begin with page number 1 plus a prefix of the appendix letter (e.g., "A-1").

Authors should make sure that the page numbering of their converted documents is reflected in any page number displays in their user agent. Consistency in presenting the document's page numbers will help make navigating the document more predictable and understandable.

As an example, if /PageLabels has not been provided to describe the page number formatting, the page numbering scheme will not be reflected in the Page Navigation toolbar in Adobe Acrobat Pro or Reader. This toolbar displays the page number in a text box, which users can change to move to another page. In addition, users can select the arrows to move one page up or down in the document. The toolbar also displays the relative page number location. In the image below, the default display indicates the user is on page 1 of 4 pages.

Page Navigation toolbar in Adobe Acrobat Pro, displaying the page number in a text box, which users can change to move to another page. In addition, users can select the arrows to move one page up or down in the document. The toolbar also displays the relative page number location, e.g., page 1 of 4 pages.

A more direct way of going to a page is to use the shortcut for the View > Page Navigation > Page menu item. On Windows, this shortcut is "Ctrl + Shift + N"; on Mac OS, it is "Cmd + Shift + N". This brings up a dialog box to go to a specific page number.

Examples

Example 1: Editing PDF page number formatting specifications using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

The example document converted from Microsoft Word 2007 has 4 pages, numbered i, ii, iii, 1. The image below shows the Word document with lowercase Roman numeral page numbering specified In Word using:

  • Insert ribbon > Page number > Page Number Format

In this document, a new section has been created with page numbering beginning with Arabic numeral 1 on the fourth page of the document. The document was then converted to PDF from Word.

The Page Number Format dialog in Word, specifying lowercase Roman page numbering.

In Adobe Acrobat Pro, Select View > Navigation Panels > Pages. The following image shows the page thumbnails in the Pages panel and the Page Navigation toolbar. Both the thumbnails and the toolbar use Arabic page numbers.

Page thumbnails in the Pages panel and the Page Navigation toolbar, both using Arabic page numbers.

To correct the page numbers:

  1. Select the pages to be renumbered

  2. Access the context menu for the selected pages and select Number Pages

  3. In the Page Numbering dialog, select the lowercase Roman numeral style and the starting page (1 by default, which is correct in this case)

  4. Select OK

The following image shows the Page Numbering dialog and selections.

Three pages selected on the Pages panel and the Page Numbering dialog specifying the new page styles. The starting page is specified as 1 (default), which is correct.

Follow the same process to change the fourth page number to Arabic numeral 1.

The following image shows the correct page numbers for the 4 pages. Note that page iii is selected in the Pages panel and the Page Navigation toolbar shows iii in the text area. In addition, the relative location in the document is shown at the right of the toolbar: "(3 of 4)."

The Pages panel in Adobe Acrobat Pro showing pages numbered i, ii, iii, 1. The Page Navigation toolbar shows iii for the third page. The relative page location is also displayed as '(3 of 4).'

This example is shown in operation in the working example of specifying page numbers in a document converted from Word (Word file) and working example of specifying page numbers in a document converted from Word (PDF file).

Example 2: Specifying page numbers using the /PageLabels entry

The following code fragment illustrates code that is typical for specifying multiple page numbering schemes in a document.

The example below is for a document with pages labeled:

Example: i, ii, iii, iv, 1, 2, 3, A-8, A-9, …

This numbering scheme requires 3 page-label dictionaries (for lowercase Roman, Arabic, and prefixed numbers)

1 0 obj
    << /Type /Catalog
       /PageLabels << /Nums [ 0 << /S /r >>  % lowercase Roman numerals
                              4 << /S /D >>  % Arabic numerals
                              7 << /S /D     % Arabic numerals with ...
                      /P (A-)                % the prefix "A-"...
                      /St 8                  % starting at page 8
                                >>
                            ]
                    >>
       …
   >>
  endobj

Page labels are specified as follows:

  • /S specifies the numbering style for page numbers:

    • /D - Arabic numerals (1,2,3...)

    • /r - lowercase Roman numerals (i, ii, iii,...)

    • /R - uppercase Roman numerals (I, II, III,...)

    • /A - uppercase letters (A-Z)

    • /a - lowercase letters (a-z)

  • /P (optional) - page number prefix

  • /St (optional) - the value of the first page number in the range (default: 1)

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For every section in the document that uses a different pagination format, check that the page navigation feature uses the same format used on the document pages:

    • Select the pages that begin a new pagination format and visually verify that the same format and page number is shown in the page navigation feature.

    • Using a screen reader, check that the page number announced in the page navigation feature is the same as the page number announced on the document page.

    • Using a tool that is capable of showing the /PageLabels entries, open the PDF document and view the entries.

    • Use a tool that exposes the document through the accessibility API, and verify that the /PageLabels entries are specified correctly.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF18: Specifying the document title using the Title entry in the document information dictionary of a PDF document

Applicability

Tagged PDF documents

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF18. Also see PDF Technology Notes.

Description

The intent of this technique is to show how a descriptive title for a PDF document can be specified for assistive technology by using the /Title entry in the document information dictionary and by setting the DisplayDocTitle flag to True in a viewer preferences dictionary. This is typically accomplished by using a tool for authoring PDF.

Document titles identify the current location without requiring users to read or interpret page content. User agents make the title of the page easily available to the user for identifying the page. For instance, a user agent may display the page title in the window title bar or as the name of the tab containing the page.

Examples

Example 1: Setting the document title in the metadata and specifying that the title be displayed in the title bar using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

Open the PDF document in Adobe Acrobat Pro:

  1. Select File > Properties

  2. Select the Description tab to view the metadata in the document, including the document information dictionary

  3. Modify the Title field to add or change the document's Title entry

Viewing the Title field in the Description tab of the Properties dialog. The document title is entered in the field.

Note that, with Adobe Acrobat installed, you can also enter and read the data properties information from the desktop. Access the file's context menu, choose Properties, and select the PDF tab. Any information you type or edit in this dialog box also appears in the Document Properties Description when you open the file.

To display the document title in the title bar of a user agent:

  1. Select File > Properties

  2. Select the Initial View tab

  3. In the Window Options section, select Document Title in the Show pull-down list.

Specifying that the document title be displayed in the title bar. In the Window Options, Show Document Title is selected.

The title is displayed in the title bar, as shown in the image below.

Image of the Adobe Acrobat Pro title bar with the title of the document displayed.

This example is shown in operation in the working example of displaying document title in the title bar.

Example 2: A /Title entry in the document information dictionary of a PDF document

The following code fragment illustrates code that is typical for providing a /Title entry in a document information dictionary that contains a document title.

1 0 obj   
   << /Title (Applying Guerrilla Tactics to Usability Testing by People with Disabilities)    
      /Author (Mary Smith) 
      /CreationDate (D:19970915110347-08'00')    
   >>   
endobj

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Verify that the title for the document is correctly specified and displayed in the user agent title bar by applying one of the following:

    • Open the PDF document with a screen reader, listening to hear that the document title is read correctly.

    • Using a PDF editor, check that the document title is specified. Select the Initial View tab to check that the title will be displayed.

    • Use a tool which is capable of showing the /Title entry value in the document catalog to open the PDF document and view the /Title entry and /DisplayDocTitle flag settings.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF19: Specifying the language for a passage or phrase with the Lang entry in PDF documents

Applicability

Tagged PDF documents

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF19. Also see PDF Technology Notes.

Description

The objective of this technique is to specify the language of a passage, phrase, or word using the /Lang entry to provide information in the PDF document that user agents need to present text and other linguistic content correctly. This is normally accomplished using a tool for authoring PDF.

Both assistive technologies and conventional user agents can render text more accurately when the language is identified. Screen readers can load the correct pronunciation rules. As a result, users with disabilities are better able to understand the content.

Note: This technique can be used to set the default language for the entire document if the entire document is contained in the container or tag. In this case, this technique would apply to Success Criterion 3.1.1.

Examples

Example 1: Adding a /Lang entry to specify the language for a paragraph using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. In the Tools menu, select Advanced Editing.

  2. Select the TouchUp Reading Order Tool.

  3. Click the Show Order Panel button in the TouchUp Reading Order Tool

  4. Select the Tags tab in the Show Order Panel and select the paragraph that is in the different language. You can also use the Options menu in the Tags tab: select Find Tag from Selection.

  5. Right-click the selection and select Properties in the context menu.

  6. In the Tags tab in the Properties dialog, select the language from the drop-down list.

Note: Acrobat includes 16 preset language selections. If you need to specify a language that is not on the list, such as Russian, you must type the ISO 639 code for the language, not its name.

Example 2: Adding a /Lang entry to specify the language for a specific word or phrase using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Select the word or phrase that is in a different language and create a tag for it in the Reading Order Panel (e.g., Text).

  2. Open the Tags tab in the Show Order Panel and select the tagged word or phrase that is in the different language. You can also use the Options menu in the Tags tab: select Create Tag from Selection.

  3. Right-click the selection and select Properties in the context menu.

  4. In the Tags tab in the Properties dialog, select the language from the drop-down list.

When you tag a word or phrase, Acrobat splits the original content into three document content tags: one for the text that precedes your selection, one for the selection, and one for the text that follows the selection. As needed, drag the document content tag for the selected text into position between the other two tags, so that the text reads in the proper order. All three tags must also be at the same level beneath their parent tag. Drag them into place if they are not.

Specifying the language for a word in text using the Show Order Panel of the TouchUp Reading Order tool.

This example is shown in operation in the working example of marking a specific word or phrase in Acrobat Pro.

Example 3: Specifying the language for a word or phrase in a PDF document using a /Lang entry

Below the level of the default document language, the language for a passage may be specified for the following items:

  • Marked-content sequences that are not in the structure hierarchy, through a /Lang entry in a property list attached to the marked-content sequence with a Span tag.

  • Structure elements of any type, through a /Lang entry in the structure element dictionary.

The following code fragment illustrates code that is typical for using the /Lang entry to override the default document language by specifying a marked-content sequence within a page's content stream:

   /P % Start of marked-content sequence
   BDC
      (See you later, or in Spanish you would say, ) Tj
      /Span << /Lang (es-MX) >>% Start of nested marked-content sequence
     BDC
      (Hasta la vista.) Tj
     EMC% End of nested marked-content sequence
   EMC% End of marked-content sequence

The following code fragment illustrates code that is typical for using the /Lang entry in the structure element dictionary. In this case, the /Lang entry applies to the marked-content sequence having an MCID (marked-content identifier) value of 0 within the indicated page's content stream.

1 0 obj% Structure element
  << /Type /StructElem
    /S /Span% Structure type
    /P /P% Parent in structure hierarchy
    /K<< /Type /MCR
      /Pg 2 0 R% Page containing marked-content sequence
      /MCID 0% Marked-content identifier
     >>
   /Lang (es-MX)% Language specification for this element
   >>
endobj
2 0 obj% Page object
  << /Type /Page
     /Contents 3 0 R% Content stream
   …
   >>
   endobj
3 0 obj% Page's content stream
  << /Length … >>
    stream
     BT
      /P % Start of marked-content sequence
      BDC
     (See you later, or in Spanish you would say, ) Tj
     /Span << /MCID 0 >>% Start of nested marked-content sequence
    BDC
     (Hasta la vista.) Tj
    EMC% End of nested marked-content sequence
  EMC% End of marked-content sequence
 ET
 endstream
 endobj

Resources

Tests

Procedure
  1. Verify that the language of a passage, phrase, or word that differs from the language of the surrounding text is correctly specified by a /Lang entry on an enclosing tag or container:

    • Read the PDF document with a screen reader that supports the language of the phrase and the language of the surrounding text, listening to hear that the text is read in the correct natural language.

    • Using a PDF editor, select the word or phrase that is in the different language and check that the language is set correctly.

    • Use a tool which is capable of showing the /Lang entry value to open the PDF document and view the language settings.

    • Use a tool that exposes the document through the accessibility API and verify that the language for the passage or phrase is set correctly.

  2. Verify that if the container or tag contains the entire document, the language setting is the language intended as the default for the document.

Expected Results
  • #1 and #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF20: Using Adobe Acrobat Pro's Table Editor to repair mistagged tables

Applicability

Tagged PDF documents with tables.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF20. Also see PDF Technology Notes.

Description

The purpose of this technique is to show how table cells in PDF documents can be marked up so that the logical relationships among rows and columns are preserved and recognized by assistive technology. This is typically accomplished by using a tool for authoring PDF.

However, tables converted to PDF may have incorrectly merged or split table cells, even if they were marked up correctly in the authoring tool. Authors can ensure that table cells are structured properly by using the Table Editor in Adobe Acrobat Pro's TouchUp Reading Order tool.

Examples

Example 1: Repairing table cells using the Table Editor in the TouchUp Reading Order tool in Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

This example uses a table that was marked up correctly when it was created in Microsoft Word. Some table headers span two rows in the header row; one table header spans two columns.

A correctly marked up table in Word, with complex headers, before conversion to PDF.

To check the table in the PDF document:

  1. Advanced > Accessibility > TouchUp Reading Order...

  2. Select the table by clicking the number in the top left hand corner of the table (3 in the reading order in the image below).

  3. Select the Table Editor button on the TouchUp Reading Order panel. The table cells will be outlined in red and labeled with their tags. The red outlines may not exactly match up to the table cells but you should be able to determine if the cells are tagged correctly.

The following image shows the example table in the TouchUp Reading Order tool. Note that the Results header appears to span two sub-headers and the other headers to the left span the two rows in the Results header.

Table in the TouchUp Reading Order tool. As in Word, the table Results header appears to span two sub-headers and the other headers to the left span the two rows in the Results header.

The following images shows the example table in the Table Editor. The cells are outlined in red, and the tab for each cell is displayed. Upon conversion, the Results header was incorrectly split and does not span its two sub-headers. The headers to the right were incorrectly split into 2 cells each and do not span the Results headers. In addition, the incorrectly split cells were merged into one cell.

Example table in the Table Editor, showing table cells and the tag for each cell. The Table Editor shows the Results header was incorrectly split and does not span its two sub-headers; and other headers were also incorrectly split and merged.

To repair the Results header:

  1. Select the header in the table (it will be outlined in blue when selected)

  2. Access the context menu

  3. Select Table Cell Properties...

  4. In the Table Cell Properties dialog, change the Column Span from 1 to 2

  5. Press OK. You'll get a warning that the change might result in a malformed table structure. In this case, the change is correct. The cell you changed should change color to show the new span, as shown in the following image.

The Table Cells Properties dialog showing the Column Span changed to 2 to repair a mistagged header in this example.

Similarly, to repair the incorrectly split header cells to the left of Results header:

  1. Select the top cell in the column (it will be outlined in blue when selected)

  2. Access the context menu

  3. Select Table Cell Properties...

  4. In the Table Cell Properties dialog, change the Row Span from 1 to 2

  5. Press OK. The following image shows the correction being made to the last header cell, with the corrected header cells to its left.

The Table Cells Properties dialog showing the Row Span changed to 2 to repair a mistagged header in this example.

The following image shows the repaired example table.

The repaired example table in the Table Editor. It now has the same table structure as the original Word table.

This example is shown in operation in the working example of repairing table structure (Word file) and working example of repairing table structure (PDF file).

Example 2: Marking up a table using table structure elements

The following code fragment illustrates code that is typical for a simple table (header row and data row) such as shown in Examples 1-3:

95 0 obj                %Structure element for a table
 << 
  /A 39 0 R
  /K[96 0 R 101 0 R 106 0 R 111 0 R]
  /P 93 0 R
  /S/Table              %standard structure type is table
 >> 
 endobj
96 0 obj                %Structure element for a table row
 << 
  /K[97 0 R 98 0 R 99 0 R 100 0 R]
  /P 95 0 R
  /S/TR                 %standard structure type is table row
 >> 
 endobj
97 0 obj                %Structure element for a table header
 <</A[23 0 R 120 0 R]
   /K 1
   /P 96 0 R
   /S/TH                 %standard structure type is table head
   /Pg 8 0 R
 >> 
endobj
104 0 obj                %Structure element for table data (cell contents)
 << 
  /A 29 0 R
  /K 7
  /P 101 0 R
  /S/TD                  %standard structure type is table data
  /Pg 8 0 R
 >> 
endobj

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For a table that has been repaired with the Table Editor, confirm one of the following:

    • Read the PDF document with a screen reader, listening to hear that the tabular information is presented in a way that preserves logical relationships among the table header and data cells. (Configure the screen reader to not use heuristics to read table header cells.)

    • Using a PDF editor, verify that the appropriate TR, TH, and TD tags are in the proper reading order and hierarchy in the table tree.

    • Use a tool which is capable of showing the table elements to open the PDF document, view the table structure, and verify that it contains the appropriate TR, TH, and TD structures.

    • Use a tool that exposes the document through the accessibility API, and verify that the table structure contains the appropriate TR, TH, and TD structures, and that they are in the proper reading order and hierarchy.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF21: Using List tags for lists in PDF documents

Applicability

Tagged PDF documents with lists.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF21. Also see PDF Technology Notes.

Description

The intent of this technique is to create lists of related items using list elements appropriate for their purposes. PDF files containing lists are normally created or repaired using a tool for authoring PDF.

When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty navigating the information. An example of such visual formatting is simply using line-breaks to separate list items.

Some assistive technologies allow users to navigate from list to list or item to item. If the lists are not correctly formatted with list tags, these users will have difficulty understanding the list content.

The easiest way to create lists in PDF content is to format them properly using list markup in the authoring tool, for example, Microsoft Word or OpenOffice.org Writer. However, if you do not have access to the source file and authoring tool, you can use Acrobat Pro's TouchUp Reading Order tool and the Tags panel.

The PDF specification defines list structure in section 14.8.4.3.3 (List Elements). The structure types for lists in PDF documents are:

  • L - the List tag, which contains one or more LI tags.

  • LI - the List Item tag. List item tags can contain Lbl and LBody tags.

  • Lbl - the list item label. Contains distinguishing information such as a item number or bullet character.

  • LBody - the list item body. Contains list item content, or in the case of a nested list, it may contain additional List tag trees.

Examples

Example 1: Adding lists to Microsoft Word 2007 documents

This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

On the Home ribbon, use the lists tools to create or repair lists in Word documents. This is the easiest way to ensure that lists are formatted correctly when they are converted to PDF.

In the image below, the numbered and bullet lists were created using the list tools. The third list did not use the list tool (see the ribbon) and the list will not be tagged as list elements when converted to PDF.

Screenshot showing correctly formatted ordered and unordered lists, and a third section of text formatted to appear as a list, but not using the list formatting tool in Microsoft Word.

Example 2: Adding lists to OpenOffice.org Writer 2.2 documents

This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

Use the Bullets and Numbering tool to create or repair lists in OpenOffice.org Writer documents. This is the easiest way to ensure that lists are formatted correctly when they are converted to PDF.

In the image below, the numbered and bullet lists were created using the list tools. The third list did not use the list tool (see the toolbar) and the list will not be tagged as list elements when converted to PDF.

Screenshot showing correctly formatted ordered and unordered lists, and a third section of text formatted to appear as a list, but not using the list formatting tool in OpenOffice.org Writer.

This example is shown in operation in the working example of adding lists to OpenOffice Writer documents.

Example 3: Ensuring that lists are correctly formatted using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. View > Navigation Panels... > Tags

  2. Inspect the lists in the document to determine which, if any, are not formatted properly.

In the following image, the third list is formatted as text. The list items are separated only by line-breaks. Assistive technology may not be able to render the list intelligibly for users.

Tags panel showing incorrectly formatted list as text beneath a Text body tag rather than nested under list tags.

To repair the list, use the Tags panel to create list tags in the content.

The following image shows the resulting first list item correctly formatted.

Tags panel showing first list item correctly nested under list tags.

This example is shown in operation in the working example of ensuring lists are properly formatted in Acrobat Pro.

Example 4: Marking up lists using List structure elements

The following code fragment illustrates code that is typical marking up a list hierarchy in PDF documents. It uses the simple numbered list in the previous examples. This is typically accomplished by an authoring tool.

4 0 obj
  <</Type /Page
    /Contents 5 0 R
  >>

endobj
5 0 obj
  << /Length 3 0 R >>
  stream
   /P <</MCID 1>> BDC
      BT T* (The most popular sports are:) Tj ET EMC
   /Lbl <</MCID 11>> BDC
      BT T* (1. ) Tj ET EMC
   /LBody <</MCID 12>> /BDC
      BT (Snow-shoeing ) Tj ET EMC
   /Lbl <</MCID 21>> BDC
      BT T* (2. ) Tj ET EMC
   /LBody <</MCID 22>> /BDC
      BT (Ice-skating ) Tj ET EMC
   /Lbl <</MCID 31>> BDC
      BT T* (3. ) Tj ET EMC
   /LBody <</MCID 32>> /BDC
      BT (Skiing ) Tj ET EMC
endstream
endobj

101 0 obj                 % Structure element for intro paragraph to list ("The most popular sports are:")
  << /Type /StructElem
     /S /P
     /P 201 0 R
     /Pg 4 0 R
     /K 1
  >>
endobj

111 0 obj                  % Structure element for first item, list label (Lbl): "1."
  << /Type /StructElem
     /S /Lbl
     /P 211 0 R
     /Pg 4 0 R
     /K 11
  >>
endobj

112 0 obj
  << /Type /StructElem     % Structure element for first item, list text (LBody): ("Snow-shoeing")
     /S /LBody
     /P 211 0 R
     /Pg 4 0 R
     /K 12
  >>
endobj

... [ objects 121-122 and 131-132, referencing MCIDs 21-22 and 31-32 are omitted in the interest of space. ]

201 0 obj
  << /Type /StructElem
     /S /Caption            % Intro paragraph
     /P 400 0 R
     /K [101 0 R]
  >>
endobj

211 0 obj
  << /Type /StructElem
     /S /LI                 % List item for "1. Snow-shoeing"
     /P 400 0 R
     /K [111 0 R 112 0 R]
  >>
endobj

212 0 obj
  << /Type /StructElem
     /S /LI                 % List item for "2. Ice-skating"
     /P 301 0 R
     /K [121 0 R 122 0 R]
  >>
endobj

213 0 obj
  << /Type /StructElem
     /S /LI                 % List item for "3. Skiing"
     /P 301 0 R
     /K [131 0 R 132 0 R]
  >>
endobj

400 0 obj
  << /Type /StructElem
     /S /L                   % Top-level structure element in the list hierarchy                
     /K [201 0 R 211 0 R 212 0 R 213 0 R]
  >>
endobj

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For a list in a PDF document, verify in one of the following ways:

    • Read the PDF document with a screen reader, listening to hear that list is read correctly when reading the content line-by-line.

    • Use a tool that is capable of showing lists to open the PDF document and view the list to check that it is correctly structured.

    • Inspect the tag tree to verify that the list is structured according to the PDF specification.

    • Use a tool that exposes the document through the accessibility API and verify that the list is correctly structured.

Expected Results
  • #1 is true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF22: Indicating when user input falls outside the required format or values in PDF forms

Applicability

Tagged PDF documents

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF22. Also see PDF Technology Notes.

Description

The objective of this technique is to notify the user when user input to a field that requires a specific, required format (e.g., date fields) is not submitted in that format.

If the required format is not used, an alert dialog describes the nature of the error in text. This may be accomplished through scripting created by the author (see, for example, SCR18: Providing client-side validation and alert). User agents, such as Adobe LiveCycle can provide automatic alerts (as described in the examples below).

Note: Once the user dismisses the alert dialog, it may be helpful if the script positions the keyboard focus on the field where the error occurred, although some users may expect the focus to remain on the last control focused prior to the alert appearing. Authors should exercise care to ensure that any movement of the focus will be expected. For example, if the alert announces an error in a phone number format, positioning the focus on the phone number field when the alert is dismissed can be regarded as helpful and expected. In some cases, however, this may not be possible. If multiple input errors occur on the page, an alternative approach to error notification should be implemented.

Ensuring that users are aware an error has occurred, can determine what is wrong, and can correct it are key to software usability and accessibility. Meeting this objective helps ensure that all users can complete for-based transactions with ease and confidence.

Labels for required formats in form controls

It is also important that users are aware that an error may occur. You can incorporate this information in labels; for example, "Date (MM/DD/YYYY)." See PDF10: Providing labels for interactive form controls in PDF documents.

Examples

Example 1: Providing validation for an input field format using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

Many fields -- telephone number, postal code, date -- must have data entered in a specific format or pattern.

  1. Access the context menu for the form control that requires a specific format.

  2. Select Properties...

  3. In the Format tab, select the Format Category (in this case, Date). The Date Options appear.

  4. Select the format for this form control (in this case, mm/dd/yyyy).

  5. In the General tab, specify "Date (mm/dd/yyyy)" for the Name and Tooltip for the control.

Specifying a required format for an input field format using Adobe Acrobat 9 Pro

When a user types a recognized date format, it is converted automatically to the specified format. If the date format or value is not recognized, an error alert appears and provides further information, as shown in the image below.

Error alert for date with unrecognized format or value.

This example is shown in operation in the working example of Required Fields in Acrobat.

Example 2: Providing validation for an input field format using Adobe LiveCycle Designer ES 8.2.1

This example is shown with Adobe LiveCycle Designer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

  1. Select the form control that has a required format.

  2. In the Object palette, click the Validation Pattern... button.

  3. Because this is a date field the Patterns-Date Field dialog appears. Select the pattern or format you want users to enter. Then click OK.

    Using LiveCycle to specify form fields that require pattern validation

  4. In the Object palette, use the Validation Pattern Message box to type a warning message. Be sure to include the required pattern. This message appears when a user tries to submit the form using an invalid date format.

This example is shown in operation in the working example of Required Fields in LiveCycle Designer.

Example 3: Validating a required date format in a PDF form using JavaScript using Adobe Acrobat Pro 9

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

The following JavaScript code illustrates the use of a script to validate form fields, in this case, a date field. To add this script to the form field, open the Text Field Properties dialog, as shown in Example 1, and select Edit in the Validate tab:

 Text Field Properties dialog, with the Validate tab open to specify JavaScript validation code.

// JavaScript code for date mask format MM/DD/YYYY
var re = /^[mdy0-9]{2}\/[mdy0-9]{2}\/[mdy0-9]{4}$/
//Allow blank space in field
if (event.value !="") {
  if (re.test(event.value) == false) {
    app.alert ({
       cTitle: "Incorrect Format",
       cMsg: "Please enter date using mm/dd/yyyy format"
    });
  }
}

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each form field that requires specific input, verify that validation information and instructions are provided by applying the following:

  1. Check that the format or value that is required is indicated in the form control's label.

  2. Use an erroneous format or value and move off the field: make sure that an alert describing the error is provided.

Expected Results
  • #1 and #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.


PDF23: Providing interactive form controls in PDF documents

Applicability

  • Tagged PDF documents with forms.

  • PDF forms created using Adobe LiveCycle Designer.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for PDF23. Also see PDF Technology Notes.

Description

The objective of this technique is to ensure that interactive form controls in PDF documents allow keyboard operation. Interactive PDF forms are generally created using a tool for authoring PDF. Form controls are implemented in PDF documents either as described in Section 12.7 (Interactive Forms) of PDF 1.7 (ISO 32000-1) or as described in the Adobe XML Forms Architecture (XFA).

The types of PDF form controls are: text input field, check box, radio button, combo box, list box, and button.

Form controls allow users to interact with a PDF document by filling in information or indicating choices, which can then be submitted for processing. Users who rely on keyboard access must be able to recognize and understand the form fields, make selections, and provide input to complete the forms, and submit the form, just as sighted users can.

Interactive form controls can be provided for forms created by converting a scanned paper form to tagged PDF or by creating a form in an authoring application such as Microsoft Word or Open Office and converting it to tagged PDF.

However, documents created by authoring applications that provide form design features might not fully retain their fillable form fields on conversion to PDF. Complex forms in particular may not have properly converted form fields and labels when tagged in conversion.

Using Adobe Acrobat Pro with forms in converted documents, you can ensure that form fields are keyboard accessible and usable by:

  • Opening tagged PDF documents with form fields and creating interactive PDF form elements with the Run Form Fields Recognition tool.

  • Modifying fillable form fields, or adding form fields, using Adobe Acrobat Pro or Adobe LiveCycle Designer.

Using Adobe LiveCycle Designer, you can create forms from scratch.

Examples

Example 1: Adding interactive controls to existing forms in PDF documents using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

If you have a form in a tagged PDF document (created by scanning a paper form or using an authoring tool to generate tagged PDF), you can use Adobe Acrobat Pro to make the form elements keyboard accessible in the same page locations as the static form.

  1. Use Advanced > Accessibility > Run Form Field Recognition to automatically detect form fields and make them fillable.

The following image shows the Run Form Field Recognition tool is selected to detect form fields in a document converted to tagged PDF.

Form fields in a PDF document in Adobe Acrobat Pro. The Advanced > Accessibility menu is selected, showing the Run Form Field Recognition tool.

The following image shows the resulting form fields after the Run Form Recognition tool is run.

Form fields in a PDF document in Adobe Acrobat Pro after running the Form Field Recognition tool.

This example is shown in operation in the working example of Interactive Controls in Acrobat.

Example 2: Adding form controls in PDF documents using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

You can add keyboard accessible form controls to your form as follows:

  1. Forms > Add or Edit Fields... This puts the form in Form Editing mode.

  2. Open the Add New Field menu on the upper left, and select a form field to add. The image below shows the menu of fields.

The Add New Field menu with the list of available form fields.

The following image shows a checkbox added to the form in Example 1.

A checkbox added to the form using Add or Edit Fields...

This example is shown in operation in the working example of Interactive Controls in LiveCycle Designer.

Example 3: Editing form controls in PDF documents using Adobe Acrobat 9 Pro

This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

To edit fields, select the context menu for the field and select Properties... The properties menu for that form field lets you modify it, as shown in the following image.

The Text Field Properties dialog to modify a form field.

Note: The tooltip is not keyboard accessible but will be screen-reader accessible: see PDF12: Providing name, role, value information for form fields in PDF documents.

Example 4: Creating new interactive forms with Adobe LiveCycle Designer ES 8.2.1

This example is shown with Adobe LiveCycle Designer. There are other software tools that perform similar functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility Support.

You can use Adobe LiveCycle Designer to create new forms. In addition to invoking this standalone tool from the Windows Start menu, you can invoke it in Adobe Acrobat Pro:

  1. Forms > Start Form Wizard...

  2. Select the No Existing Form radio button, as shown in the following image.

The first dialog in the Form Wizard showing the No Existing Form Button selected.

Clicking Next invokes LiveCycle Designer and the first page of the New Form Assistant. as shown in the following image.

LiveCycle Designer and the first page of the New Form Assistant.

When you invoke LiveCycle Designer from the Windows Start menu, the Form Wizard is available from File > New...

The New Form Assistant creates a blank form. Use the Object Library in the right pane to select form controls.

A newly created blank form in LiveCycle Designer with the Object Library.

You can also use LiveCycle Designer to create forms based on commonly used forms templates.

  1. Invoke the Template Assistant wizard from the New pulldown: LiveCycle Designer: New icon to select form templates..

  2. Select Forms and then select an appropriate type of form. Then, you can personalize the form by swapping out placeholder text, graphics, form fields, and properties with custom objects that you provide or define.

LiveCycle Designer: list of form templates.

Example 5: Adding a text field in a PDF document using the /Tx field type

The following code fragment illustrates code that is typical for a simple text field such as shown in Examples 1 and 2. This is typically accomplished by an authoring tool.

<< /AP -dict-                                                   
   /DA /Helv  0 Tf 0 g
   /DR -dict-
   /F 0x4
   /FT Tx              % FT key set to Tx for Text Field
   /P -dict-
   /Rect -array-
   /StructParent 0x1
   /Subtype Widget
   /T Date you are available   % Partial field name Date
   /TU Date you are available: use mm/dd/yyyy format % TU tool tip value serves as short description
   /Type Annot
   /V Pat Jones
>>
...
<Start Stream>
 BT
  /P <</MCID 0 >>BDC
  /CS0 cs 0  scn 
  /TT0 1 Tf
    -0.001 Tc 0.003 Tw 11.04 0 0 11.04 72 709.56 Tm
    [(P)-6(le)-3(as)10(e)-3( )11(P)-6(rin)2(t)-3( Y)8(o)-7(u)2(r N)4(a)11(m)-6(e)]TJ
  0 Tc 0 Tw 9.533 0 Td
  ( )Tj
  -0.004 Tc 0.004 Tw 0.217 0 Td
  [(\()-5(R)-4(e)5(q)-1(u)-1(i)-3(r)-3(e)-6(d)-1(\))]TJ
 EMC
  /P <</MCID 1 >>BDC
  0 Tc 0 Tw 4.283 0 Td
  [( )-2( )]TJ
   EMC
   /ArtifactSpan <</MCID 2 >>BDC
   0.002 Tc -0.002 Tw 0.456 0 Td
  [(__)11(___)11(___)11(___)11(___)11(_)11(____)11(___)11(___)11(__)]TJ
  0 Tc 0 Tw 13.391 0 Td
  ( )Tj
  EMC
 ET
<End Stream>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. For each form control, verify that it is properly implemented by tabbing to each form control and checking that it can be activated or that its value can be changed from the keyboard.

Expected Results
  • #1 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

12. Common Failures


F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS

Applicability

All technologies that support CSS.

This failure relates to:

Description

This describes the failure condition that results when CSS, rather than structural markup, is used to modify the visual layout of the content, and the modified layout changes the meaning of the content. Using the positioning properties of CSS2, content may be displayed at any position on the user's viewport. The order in which items appear on a screen may be different than the order they are found in the source document. Assistive technologies rely on the source code or other programmatically determined order to render the content in the correct sequence. Thus, it is important not to rely on CSS to visually position content in a specific sequence if this sequence results in a meaning that is different from the programmatically determined reading order.

Examples

Failure Example 1

The following example demonstrates how CSS has been improperly used to create a set of columns. In addition, the text appears visually in the browser in a different order than in the markup.

In this example a class is defined for each object that is being positioned. When style sheets are applied, the text appears in two columns. Elements of class "menu1" (Products) and "menu2" (Locations) appear as column headings. "Telephones, Computers, and Portable MP3 Players" are listed under Products and "Idaho" and "Wisconsin" are listed under Locations (note the different order for Idaho and Wisconsin in the source code order).

Since appropriate structural elements have not been used, when style sheets are not applied, all of the text appears in one line in the source order, "Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho."

Here is the HTML content:

Example Code:


<div class="box">      
     <span class="menu1">Products</span>       
     <span class="menu2">Locations</span>       
     <span class="item1">Telephones</span>       
     <span class="item2">Computers</span>       
     <span class="item3">Portable MP3 Players</span>       
     <span class="item5">Wisconsin</span>       
     <span class="item4">Idaho</span>
</div>

Here are the styles for the above content:

Example Code:


.menu1 { 
     position: absolute; 
     top: 3em; 
     left: 0em;     
     margin: 0px; 
     font-family: sans-serif;     
     font-size: 120%; 
     color: red; 
     background-color: white 
}        
.menu2 { 
     position: absolute; 
     top: 3em; 
     left: 10em;     
     margin: 0px; 
     font-family: sans-serif;     
     font-size: 120%; 
     color: red; 
     background-color: white 
}      
.item1 { 
     position: absolute; 
     top: 7em; 
     left: 0em; 
     margin: 0px 
}      
.item2 { 
     position: absolute; 
     top: 8em; 
     left: 0em; 
     margin: 0px 
}      
.item3 { 
     position: absolute; 
     top: 9em; 
     left: 0em; 
     margin: 0px 
}      
.item4 { 
     position: absolute; 
     top: 7em; 
     left: 14em; 
     margin: 0px 
}      
.item5 { 
     position: absolute; 
     top: 8em; left: 14em; 
     margin: 0px 
}      
#box { 
     position: absolute; 
     top: 5em; 
     left: 5em 
} 

A better solution for this content would be to use more meaningful elements, such as a table or a definition list.

Resources

No resources available for this technique.

Tests

Procedure

For content which uses CSS for positioning:

  1. Remove the style information from the document or turn off use of style sheets in the user agent.

  2. Check that the reading order of the content is correct and the meaning of the content is preserved.

Expected Results
  • If step #2 is false, then this failure condition applies and the content fails this Success Criterion.


F2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text

Applicability

All technologies that support images or presentation markup.

This failure relates to:

Description

This document describes a failure that occurs when a change in the appearance of text conveys meaning without using appropriate semantic markup. This failure also applies to images of text that are not enclosed in the appropriate semantic markup.

Examples

Failure Example 1: Using CSS to style the p element to look like a heading

The author intended to make a heading but didn't want the look of the default HTML heading. So they used CSS to style the P element to look like a heading and they called it a heading. But they failed to use the proper HTML heading element. Therefore, the Assisitive Technology could not distinguish it as a heading.

Example Code:


 <style type="text/css">
 .heading1{
        font-family: Times, serif;
        font-size:200%;
        font-weight:bold;
 }
 </style>

 <p class="heading1">Introduction</p>
 <p>This introduction provides detailed information about how to use this 
 ........
 </p>

Note: In this case, the proper approach would be to use CSS to style the H1 element in HTML.

Failure Example 2: Images of text used as headings where the images are not marked up with heading tags

Chapter1.gif is an image of the words, "Chapter One" in a Garamond font sized at 20 pixels. This is a failure because at a minimum the img element should be enclosed within a header element. A better solution would be to eliminate the image and to enclose the text within a header element which has been styled using CSS.

Example Code:


<img src="Chapter1.gif" alt="Chapter One">
 
<p>Once upon a time in the land of the Web.....
</p>
Failure Example 3: Using CSS to visually emphasize a phrase or word without conveying that emphasis semantically

The following example fails because the information conveyed by using the CSS font-weight property to change to a bold font is not conveyed through semantic markup or stated explicitly in the text.

Here is a CSS class to specify bold:


.yell {
  font-weight:bold;
  text-transform: uppercase;
}

And here is the corresponding HTML:


<p>
 "I said, <span class="yell">no</span>, not before dinner!", 
 was the exasperated response when Timmy asked his mother for the 
 fourth time for an ice cream cone. 
 </p>

Resources

No resources available for this technique.

Tests

Procedure
  1. For images of text:

    1. Check if any images of text are used to convey structural information of the document.

    2. Check that the proper semantic structure (e.g., HTML headings) is used with the text to convey the information.

  2. For styled text that conveys information:

    1. Check if there is any styled text that conveys structural information.

    2. Check that in addition to styling, the proper semantic structure is used with the text to convey the information.

Expected Results
  • If check #1.1 is true, then #1.2 is true.

  • If check #2.1 is true, then #2.2 is true.


F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information

Applicability

All technologies that support CSS.

This failure relates to:

Description

The CSS background-image property provides a way to include images in the document with CSS without any reference in the HTML code. The CSS background-image property was designed for decorative purposes and it is not possible to associate text alternatives with images that are included via CSS. Text alternatives are necessary for people who cannot see images that convey important information. Therefore, it is a failure to use this property to add images to convey important information. This failure would apply equally in a case where the background image was declared in the HTML style attribute, as well as in a case where the background image declaration was created dynamically in a client script (see example 3 below).

Note: Embedding information into a background image can also cause problems for people who use alternate backgrounds in order to increase legibility and for users of high contrast mode in some operating systems. These users, would lose the information in the background image due to lack of any alternative text.

Examples

Failure Example 1:

In the following example, part of the content is contained in an image that is presented by CSS alone. In this example, the image TopRate.png is a 180 by 200 pixel image that contains the text, "19.3% APR Typical Variable."

Example Code:

 The CSS contains: 
p#bestinterest {
  padding-left: 200px;
  background: transparent url(/images/TopRate.png) no-repeat top left;
}

It is used in this excerpt:

Example Code:

 
<p id="bestinterest">
  Where else would you find a better interest rate?
</p>
Failure Example 2:

A book distributor uses background images to provide icons against a list of book titles to indicate whether they are new, limited, in-stock, or out of stock.

The CSS contains:

Example Code:


ul#booklist li {
  padding-left: 20px;
}

ul#booklist li.new {
  background: transparent url(new.png) no-repeat top left; 
}
                            
ul#booklist li.limited {
  background: transparent url(limited.png) no-repeat top left; 
}
                            
ul#booklist li.instock {
  background: transparent url(instock.png) no-repeat top left; 
}

ul#booklist li.outstock {
  background: transparent url(outstock.png) no-repeat top left; 
}

It is used in this excerpt:

Example Code:


<ul id="booklist">
  <li class="new">Some book</li>
  <li class="instock">Some other book</li>
  <li class="limited">A book we desperately want to get rid of</li>
  ...
  <li class="outstock">A book you actually want </li>
</ul>
Failure Example 3:

Using the code from example 1, the same background image is declared in the HTML style attribute:

<p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;" >
Where else would you find a better interest rate?
<p>

In the following code, the background image declaration is created in a client script:

<script type="text/javascript">
var newP = document.createElement('p');
var newPText = document.createTextNode('Where else would you find a better interest rate?');
newP.appendChild(newPText);
newP.style.background = 'transparent url(/images/TopRate.png) no-repeat top left';
document.body.appendChild(newP);
</script> 

Resources

No resources available for this technique.

Tests

Procedure
  1. Examine all images added to the content via CSS, HTML style attributes, or dynamically in script as background images.

  2. Check that the images do not convey important information.

  3. If an image does convey important information, the information is provided to assistive technologies and is also available when the CSS image is not displayed.

Expected Results
  • If step #2 and step #3 are both false, then this failure condition applies and the content fails this Success Criterion.


F4: Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds

Applicability

Cascading Style Sheets.

This failure relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for F4.

Description

CSS defines the blink value for the text-decoration property. When used, it causes any text in elements with this property to blink at a predetermined rate. This cannot be interrupted by the user, nor can it be disabled as a user agent preference. The blinking continues as long as the page is displayed. Therefore, content that uses text-decoration:blink fails the Success Criterion because blinking can continue for more than three seconds.

Examples

Failure Example 1

A product list page uses the text-decoration:blink style on an element to draw attention to sale prices. This fails the Success Criterion because users cannot control the blink.

Example Code:


<p>My Great Product <span style="text-decoration:blink">Sale! $44,995!</span></p>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Examine inline styles, internal stylesheets, and external stylesheets for the text-decoration property with a value of "blink".

  2. If the property is used, determine if the ID, class, or element identified by selectors on which this property is defined are used in the document.

Expected Results
  • If step #1 and step #2 are true, the content fails the success criterion.


F7: Failure of Success Criterion 2.2.2 due to an object or applet, such as Java or Flash, that has blinking content without a mechanism to pause the content that blinks for more than five seconds

Applicability

Technologies that support blinking content within an object, applet, or a plug-in.

This failure relates to:

Description

When content that is rendered by a plug-in or contained in an applet blinks, there may be no way for the user agent to pause the blinking. If neither the plug-in, applet, nor the content itself provides a mechanism to pause the content, the user may not have sufficient time to read the content between blinks or it may be so distracting that the user will not be able to read other content on the page.

Examples

  • An applet displays an advertisement on a news site. The applet blinks key words in the advertisement in order to call the user's attention to it. The blinking cannot be paused through any user agent settings and the applet does not provide a mechanism to stop it.

Tests

Procedure

For each page that has blinking content in a plugin or applet:

  1. Determine if the content continues to blink for longer than 5 seconds.

  2. Determine if there is a means to pause the blinking content.

Expected Results
  • If step #1 is true and step #2 is false, the content fails the success criterion.


F8: Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important sound effects

Applicability

Applies to all technologies.

This failure relates to:

Description

This describes a failure condition for all techniques involving captions. If the "caption" does not include all of the dialogue (either verbatim or in essence) as well as all important sounds then the 'Captions' are not real captions.

NOTE: Captions sometimes simplify the spoken text both to make it easier to read and to avoid forcing the viewer to read at very high speed. This is standard procedure and does not invalidate a caption.

Examples

Failure Example 1

Examples of text streams that are not captions include:

  • text that contains the dialogue (possibly simplified dialogue) but that does not describe important sounds

  • text that omits dialogue during portions of the material

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. View the material with captioning turned on.

  2. Check that all dialogue is accompanied by a caption.

  3. Check that all important sounds are captioned.

Expected Results
  • If check #2 and check #3 are false, then this failure condition applies and the content fails the Success Criterion.


F9: Failure of Success Criterion 3.2.5 due to changing the context when the user removes focus from a form element

Applicability

General.

This failure relates to:

Description

This document describes a failure that occurs when removing focus from a form element, such as by moving to the next element, causes a change of context.

Examples

Failure Example 1:

The user is going through the form filling out the fields in order. When he moves from the third field to the forth, the form submits.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Find all form elements.

  2. Go through them in order.

  3. Check if the form submits when you move from one field to the next.

  4. Check if moving from one field to the next launches any new windows.

  5. Check if moving from one field to the next navigates to another screen.

Expected Results
  • If step #3, step #4, or step #5 is true, then this failure condition applies and the content fails the Success Criterion.


F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type

Applicability

Applies when content creates a situation where the user can enter the content using the keyboard, but cannot exit the content using the keyboard.

This failure relates to:

Description

When content includes multiple formats, one or more user agents or plug-ins are often needed in order to successfully present the content to users. For example, a page that includes XHTML, SVG, SMIL and XForms may require a browser to load as many as three different plug-ins in order for a user to successfully interact with the content. Some plug-ins create a common situation in which the keyboard focus can become "stuck" in a plug-in, leaving a keyboard-only user with no way to return to the other content.

Examples

  • A plug-in traps the user A user tabs into a plug-in and is unable to return to content outside the plug-in content with the keyboard. The user has to restart their browser in order to regain control and navigate to a new page and is unable to access any content that appears beyond the plug-in content.

Resources

No resources available for this technique.

Tests

Procedure
  1. Using a keyboard, navigate through the content.

  2. Check to see that the keyboard focus is not "trapped" and it is possible to move keyboard focus out of the plug-in content without closing the user agent or restarting the system.

Expected Results
  • If the keyboard focus becomes "trapped," then this failure condition applies and content fails the Success Criterion and conformance requirement 5.


F12: Failure of Success Criterion 2.2.5 due to having a session time limit without a mechanism for saving user's input and re-establishing that information upon re-authentication

Applicability

Sites that require user login to submit input and that terminate the session after a some period of inactivity.

This failure relates to:

Description

Web servers that require user authentication usually have a session mechanism in which a session times out after a period of inactivity from the user. This is sometimes done for security reasons, to protect users who are assumed to have left their computer exposed in a state where someone could do something harmful to them such as transfer bank funds or make an unauthorized purchase. A user with a disability may actually still be working to complete the form as it may take him or her longer to complete the form than would normally be expected. Upon re-authentication, if the state of the user's session is not restored, including all data that had been previously entered into the form, he or she will have to start over. And for these users, it is likely that the session will time out again before they can complete the form. This sets up a situation where a user who needs more time to complete the form can never complete it.

Examples

  • A user submits a form on an authenticated site after their login has expired. On submitting the form, they are prompted to log in again, and then taken to a general welcome page. The data is not processed and they must try again.

  • A user submits a form on an authenticated site after their login has expired. On submitting the form, they are prompted to log in again, and then taken back to the page they were on just before the login, which in this case contains the form they attempted to submit. However, the form is not populated with the data they just entered, and they must re-enter it.

Tests

Procedure

On a site where authentication is required, user input is collected, and which ends the user's session after a known period of inactivity:

  1. Provide user input as required but allow the session to time out, then submit the form.

  2. When requested, re-authenticate with the server.

  3. Determine if the function is performed using the previously submitted data.

Expected Results
  • If step #3 is false, the site fails the Success Criterion.


F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image

Applicability

All technologies.

This failure relates to:

Description

The objective of this technique is to describe the failure that occurs when an image uses color differences to convey information, but the text alternative for the image does not convey that information. This can cause problems for people who are blind or colorblind because they will not be able to perceive the information conveyed by the color differences.

Examples

  • A bar chart of sales data is provided as an image. The chart includes yearly sales figures for four employees in the Sales Department. The text alternative for the image says, "The following bar chart displays the yearly sales figures for the Sales Department. Mary sold 3.1 Million; Fred, 2.6 Million; Bob, 2.2 Million; and Andrew, 3.4 Million. The red bars indicate sales that were below the yearly quota". This text alternative fails to provide the information which is conveyed by the color red in the image. The alternative should indicate which people did not meet the sales quota rather than relying on color.

Resources

No resources available for this technique.

Tests

Procedure

For all images in the content that convey information by way of color differences:

  1. Check that the information conveyed by color differences is not included in the text alternative for the image.

Expected Results
  • If step #1 is true, then this failure condition applies and content fails the Success Criterion.


F14: Failure of Success Criterion 1.3.3 due to identifying content only by its shape or location

Applicability

All technologies.

This failure relates to:

Description

The objective of this technique is to show how identifying content only by its visual shape or location makes content difficult to understand and operate. When only visual identification or location is used, users with visual disabilities may find it difficult to locate content since they cannot see the screen or may perceive only a small portion of the screen at one time. Also, location of content can vary if page layout varies due to variations in font, window, or screen size.

Examples

  • The navigation instructions for a site state, "To go to next page, press the button to the right. To go back to previous page, press the button to the left."

  • A user is reading a news article in an on-line newspaper. The article contains an illustration and additional links for more information. Within the text of the article is a statement, "Please see sidebar to the left of the illustration for links to additional information." An assistive technology user would have difficulty finding the illustration and the sidebar. Some alternatives would be to include the list of links within the text; to provide an in-page link within the text which links to the sidebar; to provide a heading for the sidebar which can be used for navigation and refer to the heading in the instructions.

  • A user is completing an on-line survey. There are three buttons at the bottom of the survey form. The instructions state, "Press the square button to exit the survey without saving, Press the triangle button to save in-progress survey results. You may return later to complete the survey. Press the round button to submit the survey results." A screen reader user or a user unable to distinguish shapes cannot determine which button is square, triangular, or round. The buttons must have additional information to indicate their functions or their shapes.

Resources

No resources available for this technique.

Tests

Procedure
  1. Examine the Web page for textual references to content within the Web page.

  2. Check that the references do not rely on only the visual shape or location of the content.

Expected Results
  • If step #2 is false, then this failure condition applies and the content fails this Success Criterion.


F15: Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely

Applicability

Applies to all technologies that support an accessibility API.

This failure relates to:

Description

When standard controls from accessible technologies are used, they usually are programmed in a way that uses and supports the accessibility API. If custom controls are created, however, then it is up to the programmer to be sure that the newly created control supports the accessibility API. If this is not done, then assistive technologies will not be able to understand what the control is or how to operate it or may not even know of its existence.

Note: For technologies that support it, WAI-ARIA can be used to expose a custom control's role, name, value, states, and properties via the accessibility API for the technology.

Examples

Failure Example 1

A music player is designed with custom controls that look like musical notes that are stretched for volume, tone etc. The programmer does not make the new control support the Accessibility API. As a result - the controls cannot be identified or controlled from AT.

Resources

(none currently listed)

Tests

Procedure
  1. Using the accessibility checker for the technology (or if that is not available, inspect the code or test with an assistive technology), check the controls to see if they support the accessibility API.

Expected Results
  • If step #1 is false, then this failure condition applies and the content fails this Success Criterion


F16: Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content

Applicability

All technologies that support visual movement or scrolling.

This failure relates to:

Description

In this failure technique, there is moving or scrolling content that cannot be paused and resumed by users. In this case, some users with low vision or cognitive disabilities will not be able to perceive the content.

Examples

  • A page has a scrolling news ticker without a mechanism to pause it. Some users are unable to read the scrolling content.

Tests

Procedure

On a page with moving or scrolling content,

  1. Check that a mechanism is provided in the Web page or user agent to pause moving or scrolling content.

  2. Use the pause mechanism to pause the moving or scrolling content.

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

  4. Check that a mechanism is provided in the Web page or user agent to restart the paused content.

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

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

Expected Results
  • If step #1, step #3, step #4, or step #6 are false, then the content fails the success criterion.


F19: Failure of Conformance Requirement 1 due to not providing a method for the user to find the alternative conforming version of a non-conforming Web page

Applicability

Sites that provide alternative, WCAG-conforming versions of nonconforming primary content.

This failure relates to:

Description

This failure technique describes the situation in which an alternate, conforming version of the content is provided, but there is no direct way for a user to tell that it is available or where to find it. Such content fails the Success Criterion because the user cannot find the conforming version.

Examples

  • A link or a search takes a user directly to one of the nonconforming pages in the Web site. There is neither an indication that an alternate page is available, nor a path to the alternate page from the nonconforming page.

  • Nonconforming pages on the Web site inform the user that a conforming version is available and provide a link to the home page. However, the user must search the site for the conforming version of the page, so the functionality does not meet the requirements of the Success Criterion.

  • A user is able to use the nonconforming Web site for most pages. But when the user is not able to access a particular page, there is no way to find the conforming version of the page.

Tests

Procedure
  1. Identify a nonconforming page that has an alternative conforming version.

  2. Determine if the nonconforming page provides a link to the conforming version.

Expected Results
  1. If step #2 is false, the content fails the Success Criterion.


F20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur

Applicability

Applies to all technologies.

This failure relates to:

Description

The objective of this failure condition is to address situations where the non-text content is updated, but the text alternative is not updated at the same time. If the text in the text alternative cannot still be used in place of the non-text content without losing information or function, then it fails because it is no longer a text alternative for the non-text content.

Examples

  • Failure Example 1: A Sales chart is updated to October results, but the text alternative still describes September results.

  • Failure Example 2: Pictures on a home page change daily, but text alternatives are not updated at the same time.

  • Failure Example 3: The source attribute of images on a page is updated periodically using script, but the text alternatives are not updated at the same time.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Check each text alternative to see if it is describing content other than the currently-displayed non-text content.

Expected Results
  • If step #1 is true then the text alternative is not up to date with current item, this failure condition applies, and content fails these Success Criteria.


F22: Failure of Success Criterion 3.2.5 due to opening windows that are not requested by the user

Applicability

General

This failure relates to:

Description

Failure due to opening new windows when the user does not expect them. New windows take the focus away from what the user is reading or doing. This is fine when the user has interacted with a piece of User Interface and expects to get a new window, such as an options dialogue. The failure comes when pop-ups appear unexpectedly.

Examples

Failure Example 1:

When a user navigates to a page, a new window appears over the existing user agent window, and the focus is moved to the new window.

Failure Example 2:

A user clicks on a link, and a new window appears. The original link has no associated text saying that it will open a new window.

Failure Example 3:

A user clicks on the body of a page and a new window appears. No indication that the area that was clicked has functionality is present.

Failure Example 4:

A user clicks on undecorated text within the page and a new window appears. The page has no visible indication that the area is functional.

Resources

No resources available for this technique.

Tests

Procedure
  1. Load the Web page.

  2. Check if new (additional) windows open.

  3. Find every actionable element, such as links and buttons, in the Web page.

  4. Activate each element.

  5. Check if activating the element opens a new window.

  6. Check if elements that open new windows have associated text saying that will happen. The text can be displayed in the link, or available through a hidden association such as an HTML title attribute.

Expected Results
  • If step #2 is true, the failure condition applies and the content fails the Success Criterion

  • If step #5 is true and step #6 is false, the failure condition applies and the content fails the Success Criterion


F23: Failure of 1.4.2 due to playing a sound longer than 3 seconds where there is no mechanism to turn it off

Applicability

Applies to all technologies except those for voice interaction.

This failure relates to:

Description

This describes a failure condition for Success Criteria involving sound. If sound does not turn off automatically within 3 seconds and there is no way to turn the sound off then Success Criterion 1.4.2 would not be met. Sounds that play over 3 seconds when there is no mechanism to turn off the sound included in the content would fall within this failure condition.

Examples

Failure Example 1
  • A site that plays continuous background music

Failure Example 2
  • A site with a narrator that lasts more than 3 seconds before stopping, and there is no mechanism to stop it.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Check that there is a way in a Web page to turn off any sound that plays automatically for more than three seconds.

Expected Results
  • If step #1 is not true then content fails Success Criterion 1.4.2


F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa

Applicability

All technologies that allow user agents to control foreground and background colors through personal stylesheets or other means.

This failure relates to:

Description

Users with vision loss or cognitive, language and learning challenges often prefer specific foreground and background color combinations. In some cases, individuals with low vision will find it much easier to see a Web page that has white text on a black background, and they may have set their user agent to present this contrast. Many user agents make it possible for users to choose a preference about the foreground or background colors they would like to see without overriding all author-specified styles. This makes it possible for users to view pages where colors have not been specified by the author in their preferred color combination.

Unless an author specifies both foreground and background colors, then they (the author) can no longer guarantee that the user will get a contrast that meets the contrast requirements. If, for example, the author specifies, that text should be grey, then it may override the settings of the user agent and render a page that has grey text (specified by the author) on a light grey background (that was set by the user in their user agent). This principle also works in reverse. If the author forces the background to be white, then the white background specified by the author could be similar in color to the text color preference expressed by the user in their user agent settings, thus rendering the page unusable to the user. Because an author can not predict how a user may have configured their preferences, if the author specifies a foreground text color then they should also specify a background color which has sufficient contrast with the foreground and vice versa.

It is not necessary that the foreground and background colors both be defined on the same CSS rule. Since CSS color properties inherit from ancestor elements, it is sufficient if both foreground and background colors are defined either directly or through inheritance by the time that color is applied to a given element.

Note: Best practice is to include all states of the text. For example, text, link text, visited link text, link text with hover and keyboard focus, etc.

Examples

Failure Example 1: Specifying only background color with CSS

In the example below the background color is defined on the CSS stylesheet, however the foreground color is not defined. Therefore, the example fails the Success Criterion.

Example Code:


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">

       body {background-color:white}
    </style>
  </head>
  <body>
    <p>My background is white.</p>
  </body>
</html>
Failure Example 2: Specifying only foreground color with CSS

In the example below the foreground color is defined on the CSS stylesheet, however the background color is not defined. Therefore, the example fails the Success Criterion.

Example Code:


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">
       body {color:white}
    </style>
  </head>

  <body>
    <p>My foreground is white.</p>
  </body>
</html>
Failure Example 3: Specifying foreground color of link text with CSS

In the example below the link text (foreground) color is defined on the body element. However, the background color is not defined. Therefore, the example fails the Success Criterion.

Example Code:


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</TITLE>
 <style type="text/css">
  a:link { color: red }
  a:visited { color: maroon }
  a:active { color: fuchsia }
 </style>

</head>
<body>
  <p>... document body... <a href="foo.htm">Foo</a></p>
</body>
</html>
Failure Example 4: Specifying only background color with bgcolor in HTML

In the example below the background color is defined on the body element, however the foreground color is not defined. Therefore, the example fails the Success Criterion.

Note that the use of the bgcolor attribute is deprecated as of HTML 4, but this failure example is included as this usage is still found on some web sites.

Example Code:

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <html>
          <head>
              <title>A study of population dynamics</title>
          </head>
          <body bgcolor="white">
              <p> ... document body...</p>
          </body>
  </html>
Failure Example 5: Specifying only foreground color with the text attribute in HTML

In the example below the foreground color is defined on the body element, however the background color is not defined. Therefore, the example fails the Success Criterion.

Note that the use of the text attribute is deprecated as of HTML 4, but this failure example is included as this usage is still found on some web sites.

Example Code:


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</title>

</head>
<body text="white">
  <p>... document body...</p>
</body>
</html>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Examine the code of the Web page.

  2. Check to see if an author-specified foreground color is present

  3. Check to see if an author-specified background color is present

Note 1: Color and background color may be specified at any level in the cascade of preceding selectors, by external stylesheets or through inheritance rules.

Note 2: Background color may also be specified using a background image with the CSS property 'background-image' or with the CSS property 'background' (with the URI of the image, e.g., 'background: url("images/bg.gif")'). With background images, it is still necessary to specify a background color, because users may have images turned off in their browser. But the background image and the background color need to be checked.

Expected Results

If step #2 is true but step #3 is false, OR if step #3 is true but step #2 is false then this failure condition applies and content fails these Success Criteria.


F25: Failure of Success Criterion 2.4.2 due to the title of a Web page not identifying the contents

Applicability

All technologies.

This failure relates to:

Description

This describes a failure condition when the Web page has a title, but the title does not identify the contents or purpose of the Web page.

Examples

Failure Example 1

Examples of text that are not titles include:

  • Authoring tool default titles, such as

    • "Enter the title of your HTML document here,"

    • "Untitled Document"

    • "No Title"

    • "Untitled Page"

    • "New Page 1"

  • Filenames that are not descriptive in their own right, such as "report.html" or "spk12.html"

  • Empty text

  • Filler or placeholder text

Failure Example 2

A site generated using templates includes the same title for each page on the site. So the title cannot be used to distinguish among the pages.

Resources

No resources available for this technique.

Tests

Procedure
  1. Check whether the title of each Web page identifies the contents or purpose of the Web page .

Expected Results
  • If step #1 is false, then this failure condition applies and the content fails this Success Criterion.


F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information

Applicability

All technologies.

This failure relates to:

Description

The objective of this technique is to show how using a graphical symbol to convey information can make content difficult to comprehend. A graphical symbol may be an image, an image of text or a pictorial or decorative character symbol (glyph) which imparts information nonverbally. Examples of graphical symbols include an image of a red circle with a line through it, a "smiley" face, or a glyph which represents a check mark, arrow, or other symbol but is not the character with that meaning. Assistive technology users may have difficulty determining the meaning of the graphical symbol. If a graphical symbol is used to convey information, provide an alternative using features of the technology or use a different mechanism that can be marked with an alternative to represent the graphical symbol. For example, an image with a text alternative can be used instead of the glyph.

Examples

Failure Example 1: Glyphs Used to Indicate Status

A shopping cart uses two simple glyphs to indicate whether an item is available for immediate shipment. A check mark indicates that the item is in stock and ready to ship. An "x" mark indicates that the item is currently on back order and not available for immediate shipment. An assistive technology user could not determine the status of the current item.

Resources

No resources available for this technique.

Tests

Procedure
  1. Examine the page for non-text marks that convey information.

  2. Check whether there are other means to determine the information conveyed by the non-text marks.

Expected Results
  • If step #2 is false, then this failure condition applies and the content fails this Success Criterion.


F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)

Applicability

Applies to all technologies.

This failure relates to:

Description

This describes a failure condition for all techniques involving text alternatives. If the text in the "text alternative" cannot be used in place of the non-text content without losing information or function then it fails because it is not, in fact, an alternative to the non-text content.

Examples

Failure Example 1

Examples of text that are not text alternatives include:

  • placeholder text such as " " or "spacer" or "image" or "picture" etc that are put into the 'text alternative' location on images or pictures.

  • programming references that do not convey the information or function of the non-text content such as "picture 1", "picture 2" or "0001", "0002" or "Intro#1", "Intro#2".

  • filenames that are not valid text alternatives in their own right such as "Oct.jpg" or "Chart.jpg" or "sales\\oct\\top3.jpg"

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Check each text alternative to see if it is not actually a text alternative for the non-text content.

Expected Results
  • If step #1 is true then this failure condition applies and content fails the Success Criterion.


F31: Failure of Success Criterion 3.2.4 due to using two different labels for the same function on different Web pages within a set of Web pages

Applicability

Applies to all technologies.

This failure relates to:

Description

Components that have the same function in different Web pages are more easily recognized if they are labeled consistently. If the naming is not consistent, some users may get confused.

Note: Text alternatives that are "consistent" are not always "identical." For instance, you may have an graphical arrow at the bottom of a Web page that links to the next Web page. The text alternative may say "Go to page 4." Naturally, it would not be appropriate to repeat this exact text alternative on the next Web page. It would be more appropriate to say "Go to page 5". Although these text alternatives would not be identical, they would be consistent, and therefore would not be failures for this Success Criterion.

Examples

Failure Example 1:

One of the most common examples of using inconsistent labels for components with the same function is to use a button that says "search" in one page and to use a button that says "find" on another page when they both serve the identical function.

Failure Example 2:

An online authoring tool that uses a button with "Save page" on one page and "Save" on another page, in both cases for the same function.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. In a set of Web pages, find components with the same function that are repeated in multiple Web pages.

  2. For each component with the same function found in step #1, check that the naming is consistent.

Expected Results

If step #2 is false then this failure condition applies and content fails the Success Criterion.


F32: Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word

Applicability

All technologies.

This failure relates to:

Description

The objective of this technique is to describe how using white space characters, such as space, tab, line break, or carriage return, to format individual words visually can be a failure to present meaningful sequences properly. When blank characters are inserted to control letter spacing within a word, they may change the interpretation of the word or cause it not to be programmatically recognized as a single word.

Inserting white space characters into an initialism is not an example of this failure, since the white space does not change the interpretation of the initialism and may make it easier to understand.

The use of white space between words for visual formatting is not a failure, since it does not change the interpretation of the words.

Examples

Failure Example 1: Failure due to adding white space in the middle of a word

This example has white spaces within a word to space out the letters in a heading. Screen readers may read each letter individually instead of the word "Welcome."

Example Code:


<h1>W e l c o m e</h1>

&nbsp; can also be used to add white space, producing similar failures:

Example Code:


<h1>H&nbsp;E&nbsp;L&nbsp;L&nbsp;O</h1>
Failure Example 2: White space in the middle of a word changing its meaning

In Japanese, Han characters (Kanji) may have multiple readings that mean very different things. In this example, the word is read incorrectly because screen readers may not recognize these characters as a word because of the white space between the characters. The characters mean "Tokyo," but screen readers say "Higashi Kyo".

Example Code:


<h1>東 京</h1>
Failure Example 3: Using line break characters to format vertical text

In the row header cell of a data table containing Japanese text, authors often create vertical text by using line break characters. However screen readers are not able to read the words in vertical text correctly because the line breaks occur within the word. In the following example, "東京都"(Tokyo-to) will be read "Higashi Kyo Miyako".

Example Code:


<table>
<caption>表1. 都道府県別一覧表</caption>
<tr>
<td></td>
<th scope="col">(見出しセル 1.)</th>
<th scope="col">(見出しセル 2.)</th>
</tr>
<tr>
<th scope="row">東<br />京<br />都</th>
<td>(データセル 1.)</td>
<td>(データセル 2.)</td>
</tr>
・・・・・・
</table>

Resources

No resources available for this technique.

Tests

Procedure

For each word that appears to have non-standard spacing between characters:

  1. Check whether any words in the text of the content contain white space characters .

Expected Results
  • If step #1 is true, then this failure condition applies and the content fails this Success Criterion.


F33: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to create multiple columns in plain text content

Applicability

All technologies.

This failure relates to:

Description

The objective of this technique is to describe how using white space characters, such as space, tab, line break, or carriage return, to format columns of data in text content is a failure to use structure properly. Assistive technologies will interpret content in the reading order of the current language. Using white space characters to create multiple columns does not provide the information in a natural reading order. Thus, the assistive technology user will not be presented with the information in an understandable manner.

Plain text is not suitable for displaying multiple columns of text. Modify the content to present the data in a different layout. Alternatively, use a technology that provides structural elements to represent columnar data.

Examples

Failure Example 1

The following example incorrectly uses white space characters to format a paragraph into a two column format.

Example Code:


Web Content Accessibility Guidelines      including blindness and low vision, 
2.0 (WCAG 2.0) covers a wide range of     deafness and hearing loss, learning 
issues and recommendations for making     difficulties, cognitive limitations, limited 
Web content more accessible. This         movement, speech difficulties, and 
document contains principles,             others. Following these guidelines will 
guidelines, Success Criteria, benefits,   also make your Web content more 
and examples that define and explain      accessible to the vast majority of users, 
the requirements for making Web-based     including older users. It will also enable
information and applications accessible.  people to access Web content using 
"Accessible" means usable to a wide       many different devices - including a 
range of people with disabilities,        wide variety of assistive technologies.

If this table was to be interpreted and spoken by a screen reader it would speak the following lines:

  • Web Content Accessibility Guidelines including blindness and low vision,

  • 2.0 (WCAG 2.0) covers a wide range of deafness and hearing loss, learning

  • issues and recommendations for making difficulties, cognitive limitations, limited

  • Web content more accessible. This movement, speech difficulties, and

  • (additional lines eliminated for brevity)

If the text were reflowed, or changed from a fixed to a variable font, or increased in size until lines no longer fit on the page, similar interpretation issues would arise in the visual presentation.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Examine the document for data or information presented in columnar format.

  2. Check whether the columns are created using white space characters to lay out the information.

Expected Results
  • If step #2 is true, then this failure condition applies and the content fails these Success Criteria.


F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content

Applicability

All technologies.

This failure relates to:

Description

The objective of this technique is to describe how using white space characters, such as space, tab, line break, or carriage return, to format tables in text content is a failure to use structure properly. When tables are created in this manner there is no way to indicate that a cell is intended to be a header cell, no way to associate the table header cells with the table data cells, or to navigate directly to a particular cell in a table.

In addition, assistive technologies will interpret content in the reading order of the current language. Using white space to organize data in a visual table does not provide the information in a natural reading order in the source of the document. Thus, the assistive technology user will not be presented with the information in a logical reading order.

Plain text is not suitable for displaying complex information like tables because the structure of the table cannot be perceived. Rather than using visual formatting to represent tabular relations, tabular information would need to be presented using a different technology or presented linearly. (See Presenting tabular information in plain text)

Examples

Failure Example 1

The following example incorrectly uses white space to format a Menu as a visual table.

Example Code:


Menu
         Breakfast        Lunch           Dinner

Monday   2 fried eggs    tomato soup     garden salad
         bacon           hamburger       Fried Chicken
         toast           onion rings     green beans
                         Oatmeal cookie  mashed potatoes

Tuesday   Pancakes       vegetable soup  Caesar salad
          sausage        hot dogs        Spaghetti with meatballs
          orange juice   potato salad    Italian bread
                         brownie         ice cream

If this table was to be interpreted and spoken by a screen reader it would speak the following lines:

  • Menu

  • Breakfast Lunch Dinner

  • Monday 2 fried eggs tomato soup garden salad

  • bacon hamburger Fried Chicken

  • toast onion rings green beans

  • Oatmeal cookie mashed potatoes

This reading order does not make sense since there is no structure in the table for the assistive technology to identify it as a table. If the text were reflowed, or changed from a fixed to a variable font, or increased in size until lines no longer fit on the page, similar issues would arise in the visual presentation.

Resources

No resources available for this technique.

Tests

Procedure
  1. Examine the document for visually formatted tables.

  2. Check whether the tables are created using white space characters to layout the tabular data.

Expected Results
  • If step #2 is true, then this failure condition applies and the content fails these Success Criteria.


F36: Failure of Success Criterion 3.2.2 due to automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value

Applicability

HTML and XHTML

This failure relates to:

Description

Forms are frequently designed so that they submit automatically when the user has filled in all the fields, or when focus leaves the last field. There are two problems with this approach. First is that a disabled user who needs more context may move focus away from the field to the directions on how to fill in the form, or to other text, accidentally submitting the form. The other is that, with some form elements, the value of the field changes as each item is navigated with the keyboard, again accidentally submitting the form. It is better to rely on the standard form behavior of the submit button and enter key.

Examples

Failure Example 1:

This failure example submits a form when the user leaves the last field of a three-field telephone number form. The form will submit if the user leaves the field after editing it, even navigating backwards in the tab order. Developers should not use this method to submit a form, and should instead use a submit button, or rely on the form's default behavior of submitting when the user hits enter in a text field.

Example Code:

 
<form method="get" id="form1">
  <input type="text" name="text1" size="3" maxlength="3"> - 
  <input type="text" name="text2" size="3" maxlength="3"> - 
  <input type="text" name="text3" size="4" maxlength="4" onchange="form1.submit();">
</form> 
Failure Example 2:

This is a example that submits a form when the user selects an option from the menu when there is no warning of this behavior in advance. The form will submit as soon as an item from the menu is selected. A user using a keyboard will not be able to navigate past the first item in the menu. Blind users and users with hand tremors can easily make a mistake on which item on the dropdown menu to choose and they are taken to the wrong destination before they can correct it.

Example Code:

 
<form method="get" id="form2">
 <input type="text" name="text1">
  <select name="select1" onchange="form2.submit();">
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>
  </select>
</form>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Enter data in all fields on page starting at top.

  2. Enter data in last field and exit from it (tab out of it).

  3. Check whether leaving the last field causes change of context.

Expected Results
  • If step #3 is true, then this failure condition applies and content fails the Success Criterion.


F37: Failure of Success Criterion 3.2.2 due to launching a new window without prior warning when the selection of a radio button, check box or select list is changed

Applicability

HTML and XHTML

This failure relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for F37.

Description

This document describes a failure that occurs when changing the selection of a radio button, a check box or an item in a select list causes a new window to open. It is possible to use scripting to create an input element that causes a change of context (submit the form, open a new page, a new window) when the element is selected. Developers can instead use a submit button (see G80: Providing a submit button to initiate a change of context) or clearly indicate the expected action.

Examples

Failure Example 1:

The example below fails the Success Criterion because it processes the form when a radio button is selected instead of using a submit button.

Example Code:

  
<script type="text/JavaScript"> 
  function goToMirror(theInput) {
   var mirrorSite = "http://download." + theInput.value + "/"; 
   window.open(mirrorSite); 
  }
</script>
  …
<form name="mirror_form" id="mirror_form" action="" method="get">
       <p>Please select a mirror download site:</p> 
       <p> 
       <input type="radio" onclick="goToMirror(this);" name="mirror" 
       id="mirror_belnet" value="belnet.be" /> 
       <label for="mirror_belnet">belnet (<abbr>BE</abbr>)</label><br /> 
       <input type="radio" onclick="goToMirror(this);" name="mirror" 
       id="mirror_surfnet" value="surfnet.nl" /> 
       <label for="mirror_surfnet">surfnet (<abbr>NL</abbr>)</label><br /> 
       <input type="radio" onclick="goToMirror(this);" name="mirror" 
       id="mirror_puzzle" value="puzzle.ch" /> 
       <label for="mirror_puzzle">puzzle (<abbr>CH</abbr>)</label><br /> 
       <input type="radio" onclick="goToMirror(this);" name="mirror" 
       id="mirror_voxel" value="voxel.com" /> 
       <label for="mirror_voxel">voxel (<abbr>US</abbr>)</label><br /> 
       </p> 
</form>

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Find each form in a page.

  2. For each form control that is a radio button, check box or an item in a select list, check if changing the selection of the control launches a new window.

  3. For each new window resulting from step 2, check if the user is warned in advance.

Expected Results

If step #3 is false, then this failure condition applies and content fails the Success Criterion.


F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them

Applicability

HTML and XHTML

This failure relates to:

Description

This describes a failure condition for text alternatives for images that should be ignored by AT. If there is no alt attribute at all assistive technologies are not able to ignore the non-text content. The alt attribute must be provided and have a null value (i.e., alt="" ) to avoid a failure of this Success Criterion.

This describes a failure condition for text alternatives for images that should be ignored by assistive technology (AT). If an image has the attribute role="presentation", it will be ignored by AT. However, if it does not have role="presentation", and if there is no alt attribute at all assistive technologies are not able to ignore the image. For decorative images which need to be ignored by AT, either role="presentation" must be used or the alt attribute must be provided and have a null value (i.e., alt="") to avoid a failure of this Success Criterion.

Examples

  • Decorative images that have no alt attribute and no role attribute

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

For any img element that is used for purely decorative content:

  1. Check whether the element has no role attribute or has a role attribute value that is not "presentation".

  2. Check whether the element has no alt attribute or has an alt attribute with a value that is not null.

Expected Results
  • If step #1 is true and if step #2 is true, this failure condition applies and content fails the Success Criterion.


F39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology

Applicability

Applies to HTML and XHTML.

This failure relates to:

Description

This technique describes a failure condition for images that should be ignored by assistive technologies. A text alternative for an image should convey the meaning of the image. When an image is used for decoration, spacing or other purpose that is not part of the meaningful content in the page then the image has no meaning and should be ignored by assistive technologies.

Providing a null text alternative (i.e., alt="" ) will allow assistive technology to ignore the image and avoid a failure of this Success Criterion.

Examples

Failure Example 1: Decorative images that have no alt attribute

An image is used to create a blank space between content, where the spacing itself is not meaningful to the content. The image has an alt text value of "spacer". This image fails the Success Criterion because the text alternative does not serve an equivalent purpose. The image is meant to be ignored but its alternative text "spacer" is announced by screen readers and displayed in some alternate color schemes.

<div>Tree type: <img src="spacer.gif" width="100" height="1" alt="spacer"/>Cedrus deodara</div>

Resources

No resources available for this technique.

Tests

Procedure
  1. Identify any img elements that are used for decoration, spacing or other purpose that is not part of the meaningful content in the page

  2. Check that the alt attribute for these elements is null.

Expected Results
  • If step #2 is false, this failure condition applies and the content fails the Success Criterion.


F40: Failure of Success Criterion 2.2.1 and 2.2.4 due to using meta redirect with a time limit

Applicability

All pages

This failure relates to:

Description

meta http-equiv of {time-out}; url=... is often used to automatically redirect users. When this occurs after a time delay, it is an unexpected change of context that may interrupt the user.

It is acceptable to use the meta element to create a redirect when the time-out is set to zero, since the redirect is instant and will not be perceived as a change of context. However, it is preferable to use server-side methods to accomplish this. See SVR1: Implementing automatic redirects on the server side instead of on the client side (SERVER) .

Examples

Failure Example 1

The page below is a failure because it will redirect to the URI http://www.example.com/newpage after a time limit of 5 seconds.

Example Code:


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>     
      <title>Do not use this!</title>     
      <meta http-equiv="refresh"
      content="5; url=http://www.example.com/newpage" />   
   </head>   
   <body>     
      <p>       
         If your browser supports Refresh, you'll be       
         transported to our        
         <a href="http://www.example.com/newpage">new site</a>        
         in 5 seconds, otherwise, select the link manually.     
      </p>   
   </body> 
</html>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. View a page.

  2. Check that the page does not redirect after a time-out.

Expected Results
  1. If check #2 is false, this failure condition applies and content fails the Success Criterion.


F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page

Applicability

HTML and XHTML

This failure relates to:

Description

meta http-equiv of refresh is often used to periodically refresh pages or to redirect users to another page. If the time interval is too short, and there is no way to turn auto-refresh off, people who are blind will not have enough time to make their screen readers read the page before the page refreshes unexpectedly and causes the screen reader to begin reading at the top. Sighted users may also be disoriented by the unexpected refresh.

Examples

Failure Example 1

This is a deprecated example that changes the user's page at regular intervals. Content developers should not use this technique to simulate "push" technology. Developers cannot predict how much time a user will require to read a page; premature refresh can disorient users. Content developers should avoid periodic refresh and allow users to choose when they want the latest information. (The number in the content attribute is the refresh interval in seconds.)

Example Code:


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>     
    <title>HTML Techniques for WCAG 2.0</title>     
    <meta http-equiv="refresh" content="60" />   
  </head>   
  <body>
    ...     
  </body> 
</html>

(none currently listed)

Tests

Procedure
  1. Find meta elements in the document.

  2. For each meta element, check if it contains the http-equiv attribute with value "refresh" (case-insensitive) and the content attribute with a number (representing seconds) equals to or greater than 0 and without "; url=" (case-insensitive).

  3. check to see if there is a mechanism to turn off the refresh.

Expected Results
  • If step 2 is true and step 3 is false then this failure condition applies and content fails these Success Criteria.


F42: Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links

Applicability

HTML and XHTML

This failure relates to:

Description

This failure occurs when JavaScript event handlers are attached to elements to emulate links. A link created in this manner cannot be tabbed to from the keyboard and does not gain keyboard focus like other controls and/or links. If scripting events are used to emulate links, user agents including assistive technology may not be able to identify the links in the content as links. They may be recognized as interactive controls but still not recognized as links. Such elements do not appear in the links list generated by user agents or assistive technology.

It is possible to use the ARIA role attribute to identify an anonymous element as link control for assistive technologies. However, best practice for ARIA calls for making use of native elements whenever possible, so the use of the role attribute to identify anonymous elements as links is not recommended.

The a and area elements are intended to mark up links.

Examples

Failure Example 1: Scripting a span element

Scripted event handling is added to a span element so that it functions as a link when clicked with a mouse. Assistive technology does not recognize this element as a link.

Example Code:


<span onclick="location.href='newpage.html'">
    Fake link
</span>
Failure Example 2: Scripting an img element

Scripted event handling is added to an img element so that it functions as a link when clicked with a mouse. Assistive technology does not recognize this element as a link.

Example Code:


   <img src="go.gif" 
   alt="go to the new page" 
   onclick="location.href='newpage.html'">
Failure Example 3: Scripting an img element, with keyboard support

Scripted event handling is added to an img element so that it functions as a link. In this example, the link functionality can be invoked with the mouse or via the Enter key if the user agent includes the element in the tab chain. Nevertheless, the element will not be recognized as a link.

Example Code:


function doNav(url)
{
   window.location.href = url;
}

function doKeyPress(url)
{
   //if the enter key was pressed
   if (window.event.type == "keypress" &&
       window.event.keyCode == 13)
   {
      doNav(url);
   }
}

The markup for the image is:

Example Code:


<p>
	<img src="bargain.jpg"
		tabindex="0" 
		alt="View Bargains"
		onclick="doNav('viewbargains.html');"
		onkeypress="doKeyPress('viewbargains.html');">
</p>
Failure Example 4: Scripting a div element

This example uses script to make a div element behave like a link. Although the author has provided complete keyboard access and separated the event handlers from the markup to enable repurposing of the content, the div element will not be recognized as a link by assistive technology.

Example Code:


window.onload = init;

function init()
{
	var objAnchor = document.getElementById('linklike');

	objAnchor.onclick = function(event){return changeLocation(event,
'surveyresults.html');};
	objAnchor.onkeypress = function(event){return changeLocation(event,
'surveyresults.html');};
}

function changeLocation(objEvent, strLocation)
{
	var iKeyCode;

	if (objEvent && objEvent.type == 'keypress')
	{
		if (objEvent.keyCode)
			iKeyCode = objEvent.keyCode;
		else if (objEvent.which)
			iKeyCode = objEvent.which;

		if (iKeyCode != 13 && iKeyCode != 32)
			return true;
	}

	window.location.href = strLocation;
}

The markup for the div element is:

Example Code:


<div id="linklike">
View the results of the survey.
</div>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For all elements presented as links which use JavaScript event handlers to make the element emulate a link:

  1. Check if the programmatically determined role of the element is link.

  2. Check if the emulated link can be activated using the keyboard.

Expected Results
  • If check #1 is false then this failure condition applies and the content fails Success Criteria 1.3.1 and 4.1.2. If check #2 is false then this failure condition applies and the content fails Success Criteria 2.1.1 and 2.1.3.


F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content

Applicability

HTML and XHTML

This failure relates to:

Description

The objective of this technique is to describe a failure that occurs when structural markup is used to achieve a presentational effect, but indicates relationships that do not exist in the content. This is disorienting to users who are depending on those relationships to navigate the content or to understand the relationship of one piece of the content to another. Note that the use of HTML tables for layout is not an example of this failure as long as the layout table does not include improper structural markup such as <th> or <caption> elements.

Note: Though an element's semantic meaning is generally exposed to AT, the WAI-ARIA presentation role can be used to suppress the native semantics of an element so that they are not mapped to the accessibility API. Setting an element's role to presentation may avoid this failure by hiding that element's semantics from the user.

Examples

Failure Example 1: A heading used only for visual effect

In this example, a heading element is used to display an address in a large, bold font. The address does not identify a new section of the document, however, so it should not be marked as a heading.

Example Code:


<p>Interested in learning more? Write to us at</p> 
<h4>3333 Third Avenue, Suite 300 · New York City</h4>

<p>And we'll send you the complete informational packet absolutely Free!</p>
Failure Example 2: Using heading elements for presentational effect

In this example, heading markup is used in two different ways: to convey document structure and to create visual effects. The h1 and h2 elements are used appropriately to mark the beginning of the document as a whole and the beginning of the abstract. However, the h3 and h4 elements between the title and the abstract are used only for visual effect — to control the fonts used to display the authors' names and the date.

Example Code:


<h1>Study on the Use of Heading  Elements in Web Pages</h1>
<h3>Joe Jones and Mary Smith<h3>
<h4>March 14, 2006</h4>
<h2>Abstract</h2>
<p>A study was conducted in early 2006 ...
</p>
Failure Example 3: Using blockquote elements to provide additional indentation

The following example uses blockquote for text that is not a quotation to give it prominence by indenting it when displayed in graphical browsers.

Example Code:


<p>After extensive study of the company Web site, the task force 
identified the following common problem.</p>

<blockquote>
<p>The use of markup for presentational effects made Web 
pages confusing to screen reader users.</p>
</blockquote>

<p>The committee lists particular examples of the problems 
introduced by this practice below.</p>
Failure Example 4: Using the fieldset and legend elements to give a border to text

Example Code:


<fieldset>
<legend>Bargain Corner</legend>
<p>Buy today, and save 20%</p>
</fieldset>

Resources

No resources available for this technique.

Tests

Procedure
  1. Check that the element's semantic meaning is exposed to assistive technology and appropriate for the content of the element.

Expected Results
  • If check #1 is false then this failure condition applies.


F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability

Applicability

HTML and XHTML

This failure relates to:

Description

This document describes a failure that occurs when the tab order does not follow logical relationships and sequences in the content.

Focusable elements like links and form elements have a tabindex attribute. The elements receive focus in ascending order of the value of the tabindex attribute. When the values of the tabindex attribute are assigned in a different order than the relationships and sequences in the content, the tab order no longer follows the relationships and sequences in the content.

One of the most common causes of this failure occurs when editing a page where tabindex has been used. It is easy for the tab order and the content order to fall out of correspondence when the content is edited but the tabindex attributes are not updated to reflect the changes to the content.

Examples

Failure Example 1

The following example incorrectly uses tabindex to specify an alternative tab order:

Example Code:


<ol>
   <li><a href="main.html" tabindex="1">Homepage</a></li>
   <li><a href="chapter1.html" tabindex="4">Chapter 1</a></li>
   <li><a href="chapter2.html" tabindex="3">Chapter 2</a></li>
   <li><a href="chapter3.html" tabindex="2">Chapter 3</a></li>
</ol>

If this list is navigated by the tab key, the list is navigated in the order Homepage, chapter 3, chapter 2, chapter 1, which does not follow the sequence in the content.

Failure Example 2

The tab order has been set explicitly in a Web page by providing tabindex attributes for all fields. Later, the page is modified to add a new field in the middle of the page, but the author forgets to add a tabindex attribute to the new field. As a result, the new field is at the end of the tab order.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. If tabindex is used, check that the tab order specified by the tabindex attributes follows relationships in the content.

Expected Results
  • If check #1 is false, then this failure condition applies and content fails the Success Criterion.


F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables

Applicability

HTML and XHTML

This failure relates to:

Description

The objective of this technique is to describe a failure that occurs when a table used only for layout includes either th elements, a summary attribute, or a caption element. This is a failure because it uses structural (or semantic) markup only for presentation. The intent of the HTML and XHTML table elements is to present data.

Although not commonly used in a layout table, the following structural markup would also be failures of Success Criterion 1.3.1 if used in a layout table:

  • headers attributes

  • scope attributes

Assistive technologies use the structure of an HTML or XHTML table to present data to the user in a logical manner. The th element is used to mark the column and row headers of the table. A screen reader uses the information in th elements to speak the header information that changes as the user navigates the table. The summary attribute on the table element provides a textual description of the table that describes its purpose and function. Assistive technologies make the summary attribute information available to users. The caption element is part of the table and identifies the table.

Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. When a table is used for layout purposes the th element should not be used. Since the table is not presenting data there is no need to mark any cells as column or row headers. Likewise, there is no need for an additional description of a table which is only used to layout content. Do not include a summary attribute and do not use the summary attribute to describe the table as, for instance, "layout table". When spoken, this information does not provide value and will only distract users navigating the content via a screen reader. Empty summary attributes are acceptable on layout tables, but not recommended.

Examples

Failure Example 1

Here is a simple example that uses a table to layout content in a three column format. The navigation bar is in the left column, the main content in the middle column, and an additional sidebar is on the right. At the top is a page title. The example marks the page title as <th>, and provides a summary attribute indicating that the table is a layout table.

Example Code:


 <table summary="layout table">
 <tr>
   <th colspan=3>Page Title</th>
 </tr>
 <tr>
   <td><div>navigation content</div></td>
   <td><div>main content</div></td>
   <td><div>right sidebar content</div></td>
 </tr>
 <tr>
   <td colspan=3>footer</td>
 </tr>
 </table>

Resources

No resources available for this technique.

Tests

Procedure
  1. Examine the source code of the HTML or XHTML document for the table element

  2. If the table is used only to visually lay out elements within the content

    1. Check that the table does not contain any th elements.

    2. Check that the table element does not contain a non-empty summary attribute.

    3. Check that the table element does not contain a caption element.

Expected Results
  • If any check above is false, then this failure condition applies and the content fails the Success Criterion.


F47: Failure of Success Criterion 2.2.2 due to using the blink element

Applicability

HTML and XHTML

This failure relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for F47.

Description

The blink element, while not part of the official HTML or XHTML specification, is supported by many user agents. It causes any text inside the element to blink at a predetermined rate. This cannot be interrupted by the user, nor can it be disabled as a preference. The blinking continues as long as the page is displayed. Therefore, content that uses blink fails the Success Criterion because blinking can continue for more than three seconds.

Examples

Failure Example 1

A product list page uses the blink element to draw attention to sale prices. This fails the Success Criterion because users cannot control the blink.

Example Code:


<p>My Great Product <blink>Sale! $44,995!</blink></p>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Examine code for the presence of the blink element.

Expected Results
  • If #1 is true, the content fails the Success Criterion.


F48: Failure of Success Criterion 1.3.1 due to using the pre element to markup tabular information

Applicability

HTML and XHTML

This failure relates to:

Description

This document describes a failure caused by use of the HTML pre element to markup tabular information. The pre element preserves only visual formatting. If the pre element is used to markup tabular information, the visually implied logical relationships between the table cells and the headers are lost if the user cannot see the screen or if the visual presentation changes significantly.

Instead, the HTML table element is intended to present tabular data. Assistive technologies use the structure of an HTML table to present data to the user in a logical manner. This structure is not available when using the pre element.

Examples

Failure Example 1: A schedule formatted with tabs between columns

Example Code:


 <pre>
 	Monday	Tuesday	Wednesday	Thursday	Friday
 8:00-
 9:00	Meet with Sam				
 9:00-
 10:00			Dr. Williams	Sam again	Leave for San Antonio
 </pre>
Failure Example 2: Election results displayed using preformatted text

Example Code:


 <pre>
   CIRCUIT COURT JUDGE BRANCH 3
                                                  W
                                                   R
                                          M R E     I
                                           A . L     T
                                     M L    R   B     E
                                      I A    Y   E     -
                                       K N        R     I
                                        E G        T     N
                                       -----   -----   -----
0001 TOWN OF ALBION WDS 1-2               22      99       0
0002 TOWN OF BERRY WDS 1-2                52     178       0
0003 TOWN OF BLACK EARTH                  16      49       0
0004 TOWN OF BLOOMING GROVE WDS 1-3       44     125       0
0005 TOWN OF BLUE MOUNDS                  33     117       0
0006 TOWN OF BRISTOL WDS 1-3             139     639       1
0007 TOWN OF BURKE WDS 1-4                80     300       0
0008 TOWN OF CHRISTIANA WDS 1-2           22      50       0

 </pre>

Resources

No resources available for this technique.

Tests

Procedure
  1. Check to see if the pre element is used

  2. For each occurrence of the pre element, check whether the enclosed information is tabular.

Expected Results
  • If check #2 is true, then this failure condition applies and the content fails the Success Criterion.


F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized

Applicability

HTML and XHTML

This failure relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for F49.

Description

Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If a layout table is used, however, it is important that the content make sense when linearized.

This failure occurs when a meaningful sequence of content conveyed through presentation is lost because HTML tables used to control the visual placement of the content do not “linearize" correctly. Tables present content in two visual dimensions, horizontal and vertical. However, screen readers present this two-dimensional content in linear order of the content in the source, beginning with the first cell in the first row and ending with the last cell in the last row. The screen reader reads the table from top to bottom, reading the entire contents of each row before moving to the next row. The complete content of each cell in each row is spoken—including the complete content of any table nested within a cell. This is called linearization.

Suppose that a Web page is laid out using a table with 9 columns and 22 rows. The screen reader speaks the content of the cell at Column 1, Row 1 followed by the cells in columns 2, 3, 4 and so on to column 9. However, if any cell contains a nested table, the screen reader will read the entire nested table before it reads the next cell in the original (outer) table. For example, if the cell at column 3, row 6 contains a table with 6 columns and 5 rows, all of those cells will be read before Column 4, Row 6 of the original (outer) table. As a result, the meaningful sequence conveyed through visual presentation may not be perceivable when the content is spoken by a screen reader.

Examples

Failure Example 1: A layout table that does not linearize correctly

An advertisement makes clever use of visual positioning, but changes meaning when linearized.

Example Code:


<table>
<tr>
  <td ><img src="logo.gif" alt="XYZ mountaineering"></td>
  <td rowspan="2" valign="bottom">top!</td>
</tr>
<tr>
  <td>XYZ gets you to the</td>
</tr>
</table>

The reading order from this example would be:

  • XYZ mountaineering top!

  • XYZ gets you to the

Failure Example 2: A layout table that separates a meaningful sequence when linearized

A Web page from a museum exhibition positions a navigation bar containing a long list of links on the left side of the page. To the right of the navigation bar is an image of one of the pictures from the exhibition. To the right of the image is the kind of "placard" text you'd see on the wall next to the object if you were at the museum. Below that text is a heading that says "Description," and below that heading is a description of the image. The image, placard text, Description heading, and text of the description form a meaningful sequence.

A layout table is used to position the elements of the page. The links in the navigation bar are split into different cells in the leftmost column.

Example Code:


<table>
<tr>
	<td><a href="#">Link 1</a></td>
	<td rowspan="20"><img src="img.png" alt="Museum Picture"></td>
	<td rowspan="6"><img src="placard.png" alt="Placard text"></td> 
</tr> 
<tr>
	<td><a href="#">Link 2</a></td>
</tr>
<tr>
	<td><a href="#">Link 3</a></td>
</tr>
<tr>
	<td><a href="#">Link 4</a></td>
</tr>
<tr>
	<td><a href="#">Link 5</a></td>
</tr>
<tr>
	<td><a href="#">Link 6</a></td>
</tr>
<tr>
	<td><a href="#">Link 7</a></td>
	<td rowspan="2"><h2>Image Heading</h2></td> 
</tr> 
<tr>
	<td><a href="#">Link 8</a></td>
</tr>
<tr>
	<td><a href="#">Link 9</a></td>
	<td rowspan="12">Description of the image</td> 
</tr> 
<tr>
	<td><a href="#">Link 10</a></td>
</tr>
 ...
<tr>
	<td><a href="#">Link 20</a></td>
</tr>
</table>

The reading order from this example would be:

  • Link 1

  • Image

  • Placard Text

  • Link 2

  • Link 3

  • Link 4

  • Link 5

  • Link 6

  • Link 7

  • Image Heading

  • Link 8

  • Link 9

  • Link 10

  • ...

  • Link 20

Because the navigation bar links are interleaved with the content describing the image, screen readers cannot present the content in a meaningful sequence corresponding to the sequence presented visually.

Resources

No resources available for this technique.

Tests

Procedure
  1. Linearize the content in either of the following ways:

    • Present the content in source code order

    • Remove the table markup from around the content

  2. Check that the linear reading order matches any meaningful sequence conveyed through presentation.

Expected Results
  • If check #2 is false, then this failure condition applies and the content fails this Success Criterion.


F50: Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a mechanism to stop the blinking at 5 seconds or less

Applicability

Technologies that support script-controlled blinking of content.

This failure relates to:

Description

Scripts can be used to blink content by toggling the content's visibility on and off at regular intervals. It is a failure for the script not to include a mechanism to stop the blinking at 5 seconds or earlier. See SCR22: Using scripts to control blinking and stop it in five seconds or less (Scripting) for information about how to modify the technique to stop the blinking.

Examples

Failure Example 1

The following example uses script to blink content, but the blink continues indefinitely rather than stopping after five seconds.

Example Code:


...
<script type="text/javascript">
<!--
// blink "on" state
function show()
{
	if (document.getElementById)
	document.getElementById("blink1").style.visibility = "visible";
	settime-out("hide()", 450);
}
// blink "off" state
function hide()
{
	if (document.getElementById)
	document.getElementById("blink1").style.visibility = "hidden";
	settime-out("show()", 450);
}
// kick it off
show();
//-->
</script>
...
<span id="blink1">This content will blink</span>

Tests

Procedure

For each instance of blinking content:

  1. Determine if the blinking stops in 5 seconds or less.

Expected Results

If #1 is false, then the content fails the Success Criterion.


F52: Failure of Success Criterion 3.2.1 and 3.2.5 due to opening a new window as soon as a new page is loaded

Applicability

Applies when scripting is used to open new windows.

This failure relates to:

Description

Some Web sites open a new window when a page is loaded, to advertise a product or service. The objective of this technique is to ensure that pages do not disorient users by opening up one or more new windows that automatically attain focus as soon as a page is loaded.

Examples

Note: There are multiple methods by which this failure may be triggered. Two common examples that are supported differently in various versions of user agents are listed as examples below.

Failure Example 1:

The following example is commonly used in HTML 4.01 to open new windows when pages are loaded.

Example Code:


window.onload = showAdvertisement;
 function showAdvertisement()
 {
  window.open('advert.html', '_blank', 'height=200,width=150');
 }
Failure Example 2:

The following example commonly used in XHTML to open new windows when pages are loaded.

Example Code:


if (window.addEventListener) { 
    window.addEventListener("load", showAdvertisement, true);
}
if (window.attachEvent) {
    window.attachEvent("onload", showAdvertisement);
}
function showAdvertisement()
{
window.open('noscript.html', '_blank', 'height=200,width=150');
}

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. load a new page

  2. check to see whether a new window has been opened as a result of loading the new page

  3. Check to see whether the new window is automatically given focus

Expected Results
  • If step 2 and step 3 are true, then this failure condition applies and content fails the Success Criterion.


F54: Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event handlers (including gesture) for a function

Applicability

Technologies that have event handlers specific to pointing devices.

User Agent and Assistive Technology Support Notes

  • None listed.

This failure relates to:

Description

When pointing device-specific event handlers are the only mechanism available to invoke a function of the content, users with no vision (who cannot use devices such as mice that require eye-hand coordination) as well as users who must use alternate keyboards or input devices that act as keyboard emulators will be unable to access the function of the content.

Examples

Failure Example 1

The following example is of an image that responds to a mouse click to go to another page. This is a failure because the keyboard cannot be used to move to the next page. <p><img onmousedown="nextPage();" src="nextarrow.gif" alt="Go to next page"></p>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check to see whether pointing-device-specific event handlers are the only means to invoke scripting functions.

Expected Results
  • If any are found, then this failure condition applies and content fails the Success Criterion.


F55: Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received

Applicability

Applies to all content that supports script.

User Agent and Assistive Technology Support Notes

  • None listed.

This failure relates to:

Description

Content that normally receives focus when the content is accessed by keyboard may have this focus removed by scripting. This is sometimes done when designer considers the system focus indicator to be unsightly. However, the system focus indicator is an important part of accessibility for keyboard users. In addition, this practice removes focus from the content entirely, which means that the content can only be operated by a pointing device such as a mouse.

Examples

Failure Example 1

Example Code:

<input type="submit" onFocus="this.blur();"> 
Failure Example 2

Example Code:

<a onFocus="this.blur()" href="Page.html"><img src="myImage.gif"></a> 
Failure Example 3

Example Code:

<a href="link.html" onfocus="if(this.blur)this.blur();">Link Phrase</a> 

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Use the keyboard to verify that you can get to all interactive elements using the keyboard.

  2. Check that when focus is placed on each element, focus remains there until user moves it.

Expected Results
  • If #2 is false then this failure condition applies and content fails the Success Criterion.


F58: Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically redirect pages after a time-out

Applicability

  • Any server-side scripting language

  • Content does not meet the exceptions in the Success Criterion for permitted time limits.

This failure relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for F58.

Description

Server-side scripting languages allow developers to set the non-standard HTTP header "Refresh" with a time-out (in seconds) and a URI to which the browser is redirected after the specified time-out. If the time interval is too short, people who are blind will not have enough time to make their screen readers read the page before the page refreshes unexpectedly and causes the screen reader to begin reading at the top. Sighted users may also be disoriented by the unexpected refresh.

The HTTP header that is set is Refresh: {time in seconds}; url={URI of new location}. It is also possible to omit the URI and obtain a periodically refreshing page, which causes the same problem. The HTTP header that is set is Refresh: {time in seconds}.

Examples

Failure Example 1

The following example is a failure because a timed server-side redirect is implemented in Java Servlets or JavaServer Pages (JSP).

Example Code:


public void doGet (HttpServletRequest request, HttpServletResponse response)
      throws IOException, ServletException {
        response.setContentType("text/html");
	PrintWriter out = response.getWriter();
	response.setHeader("Refresh", "10; URL=TargetPage.html");
	out.println("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
	 \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
	out.println("<html><head><title>Redirect</title></head><body>");
	out.println("<p>This page will redirect you in 10 seconds.</p>");
	out.println("</body></html>");
  }
Failure Example 2

The following example is a failure because a timed server-side redirect is implemented in Active Server Pages (ASP) with VBScript.

Example Code:


 <% @Language = "VBScript" %>
 <% option explicit 
 Response.Clear
 Response.AddHeader "Refresh", "5; URL=TargetPage.htm"
 %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 …
 <!--HTML code for content that is shown before the redirect is triggered-->
 

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. When a Web page is rendered, check to see if it automatically redirects to another page after some period of time without the user taking any action.

Expected Results
  • If such a redirect is found then this failure condition applies and content fails the Success Criterion.


F59: Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control

Applicability

HTML and XHTML

This failure relates to:

Description

This failure demonstrates how using generic HTML elements to create user interface controls can make the controls inaccessible to assistive technology. Assistive technologies rely on knowledge of the role and current state of a component in order to provide that information to the user. Many HTML elements have well defined roles, such as links, buttons, text fields, etc. Generic elements such as div and span do not have any predefined roles. When these generic elements are used to create user interface controls in HTML the assistive technology may not have the necessary information to describe and interact with the control.

Attaching event handlers to elements that are not normally interactive, such as span and div, can be disorienting to users. Even if care is taken to provide keyboard access to such elements, users may have a difficult time discovering that there are interactive controls in the content or understanding what type of behavior to expect from them. For example, users may not know which keystrokes are supported by the script to activate the element. Additionally, these elements do not generate the same operating system events as interactive elements, so assistive technology may not be notified when the user activates them.

The W3C Candidate Recommendation "Accessible Rich Internet Applications (WAI-ARIA) 1.0" describes mechanisms to provide the necessary role and state information to create fully accessible user interface controls.

Examples

Failure Example 1

The following example fails because it creates a checkbox using a span and an image.


  <p> 
  <span  onclick="toggleCheckbox('chkbox')"> 
  <img src="unchecked.gif"  id="chkbox" alt=""> Include Signature 
  </span> 
  </p>

Here is the scripting code which changes the image source when the span is clicked with the mouse.

 
  var CHECKED = "check.gif"; 
  var UNCHECKED = "unchecked.gif"; 
  function toggleCheckbox(imgId) { 
  var theImg = document.getElementById(imgId); 
  if ( theImg.src.lastIndexOf(CHECKED)!= -1 ) { 
  theImg.src = UNCHECKED; 
  // additional code to implement unchecked action 
  } 
  else { 
  theImg.src = CHECKED; 
  // additional code to implement checked action 
  } 
  } 

A checkbox created in this manner will not work with assistive technology since there is no information that identifies it as a checkbox. In addition, this example is also not operable from the keyboard and would fail guideline 2.1.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Examine the parsed source code for elements which have event handlers assigned within the mark-up or via scripting (indicating that the element is a user interface control).

  2. Check if the role of the control is already defined natively in the mark-up language.

  3. Check if another valid method, such as the assignment of a fitting WAI-ARIA role, has been used to define the role of the control.

Expected Results

If check #2 AND check #3 are false, the failure condition applies.


F60: Failure of Success Criterion 3.2.5 due to launching a new window when a user enters text into an input field

Applicability

General

This failure relates to:

Description

This document describes a failure that occurs when a new window is created in response to a user filling in a text field for other than error reporting.

Examples

Failure Example 1:

This is a deprecated example showing a failure: A user is filling in his mailing address. When he fills in his postal code, a new window opens containing advertisements for services available in his city.

Failure Example 2:

This example is acceptable: A user is filling in his mailing address in a form. When he fills in the postal code field, a script runs to validate that it is a valid postal code. If the value is not valid, a window opens with instructions on how to fill in the field.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Find all text input form fields

  2. Change the value in each form field

  3. Check if new windows open

  4. For any new windows that open, check if they contain an error message and a button that closes the window returning focus to the initiating form element.

Expected Results
  • If #3 is true and #4 is false then failure condition applies and the content fails this Success Criterion.


F61: Failure of Success Criterion 3.2.5 due to complete change of main content through an automatic update that the user cannot disable from within the content

Applicability

General

This failure relates to:

Description

This document describes a failure that occurs when the content in the main viewport viewport is automatically updated, and there there is no option for a user to disable this behavior.

Two procedures are presented below to test for the existence of a failure against Success Criterion 3.2.5. Procedure 1 is the preferred procedure and assumes that content authors have access to the code that generates the viewport content.

However there may be instances where this may not be possible (eg: in certain content management systems, application environments such as django or ruby-on-rails, or content generated through scripting languages such as AJAX or PHP that are generated by third parties.) To that end, the second procedure is supplied to allow testing in these instances. Note that timeframes are indicative only, and that any change after any amount of time should be treated as a failure if the test otherwise does not pass the other step evaluations.

Examples

Failure Example 1:

A news site automatically refreshes itself to ensure that it has the newest headlines. There is no option to disable this behavior.

Failure Example 2:

A slideshow fills the entire viewport and advances to the next slide automatically. There is no stop button.

Failure Example 3:

A search engine automatically generates results and dynamically updates content based on user input. There is no option to disable this behavior.

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. Open the source code in an appropriate editing tool.

  2. Examine the source code thoroughly.

  3. Confirm that content is dynamically generated or the code will trigger a change of context for the viewport on an event or after a time period.

  4. Confirm that there does not exist an appropriate mechanism for users to disable this behavior.

Expected Results
  • If both checks 3 and 4 are true, then this failure condition applies and the content fails this Success Criterion

Tests

Procedure
  1. Measure or estimate the amount of time that the average user spends on the page.

  2. Go to the page

  3. Wait for 10 times the length of time the average user stays on the page. (From Step 1)

  4. Check to see if there is a change in context during this time.

  5. If there is no change of context STOP.

  6. If there is a change in context, then check to see if there is any mechanism on the page that would have prevented that change of context.

  7. If there IS a mechanism for preventing that change of context, use that mechanism to prevent that change of context and run the test over.

  8. If there is a change of context and there are no mechanism to prevent that change in context then you have a failure.

Note 1: One way to measure or estimate the amount of time in step 1 would be to check a web site's analytics to see how long the average user looks at the page.

Note 2: An example of step 6 would be a mechanism for turning off auto updates.

Expected Results
  • If you reach step 8 then the content fails this success criterion.


F63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link

Applicability

HTML and XHTML

This failure relates to:

Description

This describes a failure condition when the context needed for understanding the purpose of a link is located in content that is not programmatically determined link context. If the context for the link is not provided in one of the following ways:

  • in the same sentence, paragraph, list item, or table cell as the link

  • in the preceding heading

  • via a suitable ARIA property such as aria-label or aria-labelledby

then the user will not be able to find out where the link is going with any ease. If the user must leave the link to search for the context, the context is not programmatically determined link context and this failure condition occurs.

Examples

Failure Example 1: A Link in an Adjacent Paragraph

A news service lists the first few sentences of an article in a paragraph. The next paragraph contains the link "Read More...". Because the link is not in the same paragraph as the lead sentence, the user cannot easily discover what the link will let the user read more about.


<p>A British businessman has racked up 2 million flyer miles and plans to 
travel on the world's first commercial tourism flights to space.</p>

<p><a href="ff.html">Read More...</a></p>
Failure Example 2: A Link in an Adjacent Cell Within a Layout Table

An audio site provides links to where its player can be downloaded. The information about what would be downloaded by the link is in the preceding row of the layout table, which is not programmatically determined context for the link.


 <table>
   <tr> 
       <td>Play music from your browser</td>
   </tr>
   <tr>
       <td>
       <a href="http://www.example.com/download.htm">
       <img src="download.jpg" width="165" height="32" alt="Download now"></a>
       </td>
   </tr>
 </table>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

Locate links where some additional link context is needed to understand the purpose of the link. For each link:

  1. Check whether the context is contained in the same sentence, paragraph, list item, table cell, associated table headers, or preceding heading.

  2. Check whether the link context can be programmatically determined in some other way, for example, by using a WAI-ARIA property such as aria-label, aria-labelledby or aria-describedby on the link to provide sufficient context

Expected Results
  • If check #1 AND check #2 are false, the content fails the Success Criterion.


F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"

Applicability

HTML and XHTML

This failure relates to:

Description

This describes a failure condition for text alternatives on images. If there is no source of text to provide an alternative for the image then assistive technologies are not able to identify the image or to convey its purpose to the user. The alt attribute continues to be the preferred way to provide alternative text for images. Appropriate WAI-ARIA attributes may be used to provide alternative text, as long as they are accessibility supported. For more information about accessibility support, see Documenting Accessibility Support. The Accessible Rich Internet Applications (WAI-ARIA) 1.0 Specification describes the Text Alternative Computation, for computing the text alternative from the HTML and WAI-ARIA attributes of an element.

Some Assistive Technologies attempt to compensate for the missing text alternatives by reading the file name of the image. But it is insufficient to rely simply on the file name for many reasons. For example, file names may not be descriptive (e.g., images/nav01.gif), and technology specifications do not require descriptive file names. And some Assistive Technologies do not read the file name if there is no text alternative provided via HTML attributes.

Examples

Failure Example 1: Missing text alternative

In the code example below, the person using a screen reader would not know the purpose of the image.

Example Code:


<img src="../images/animal.jpg" />

Resources

Tests

Procedure

Identify img, area and input elements of type "image". For each of these elements:

  1. Check if the alt attribute is present.

  2. Check if aria-labelledby attribute is present AND references one or more id elements in the page AND check if aria-labelledby is accessibility supported.

  3. Check if the aria-label attribute is present AND check if aria-label is accessibility supported.

  4. Check if the title attribute is present AND check if title is accessibility supported.

Expected Results
  • If all of #1, #2, #3 and #4 are false then this failure condition applies.


F66: Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages

Applicability

Applies to all technologies

This failure relates to:

Description

This describes a failure condition for all techniques involving navigation mechanisms that are repeated on multiple Web pages within a set of Web pages (Success Criterion 3.2.3). If the mechanism presents the order of links in a different order on two or more pages, then the failure is triggered.

Examples

Failure Example 1: An XHTML menu presenting a series of links that are in a different relative order on two different pages

Examples of a navigation mechanism that presents links in a different order.

Page 1 Menu

Example Code:


<div id="menu"> 
    <a href="Brazil.htm">Brazil</a><br />
    <a href="Canada.htm">Canada</a><br />
    <a href="Germany.htm">Germany</a><br />
    <a href="Poland.htm">Poland</a> 
</div>

Page 2 Menu

Example Code:


<div id="menu"> 
    <a href="Canada.htm">Canada</a><br />
    <a href="Brazil.htm">Brazil</a><br />
    <a href="Germany.htm">Germany</a><br />
    <a href="Poland.htm">Poland</a> 
</div>

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Check to see if a navigation mechanism is being used on more than one Web page.

  2. Check the default presentation of the navigation mechanism on each page to see if the list of links are in the same relative order on each Web page.

Note: "Same relative order" means that secondary navigation items may be in between the link items on some pages. They can be present without affecting the outcome of this test.

Expected Results
  • If #1 is true and #2 is false, then this failure condition applies and content fails the Success Criterion.


F67: Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information

Applicability

All technologies.

This failure relates to:

Description

The objective of this technique is to describe the failure that occurs when the long description for non-text content does not serve the same purpose or does not present the same information as the non-text content. This can cause problems for people who cannot interpret the non-text content because they rely on the long description to provide the necessary information conveyed by the non-text content. Without a long description that provides complete information, a person may not be able to comprehend or interact with the Web page.

Examples

  • An image showing the locations of venues for events at the Olympic Games displayed on a street map. The image also contains an icon for each type of sporting event held at each venue. The long description states, "Map showing the location of each Olympic venue. Skating, hockey and curling are held at the Winter Park Ice Arena, Downhill skiing and jumping are held at Snow Mountain, Gymnastics is held at the JumpUp Arena, Cross Country Skiing is held at the Kilometer Forest". While this description provides useful information, it does not convey the same information as the image because it provides no specific location information such as the address or the distance of each location from some fixed point. Note that long descriptions do not always need to be in prose form; sometimes the information may best be presented in a table or other alternate format.

Resources

No resources available for this technique.

Tests

Procedure

For all non-text content that requires a long description

  1. Check that the long description serves the same purpose or presents the same information as the non-text content.

Expected Results
  • If step #1 is false, then this failure condition applies and the content fails this Success Criterion.


F68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name

Applicability

HTML controls

This failure relates to:

Description

This failure describes a problem that occurs when a form control does not have a name exposed to assistive technologies. The result is that some users will not be able to identify the purpose of the form control. The name can be provided in multiple ways, including the label element. Other options include use of the title attribute and aria-label which are used to directly provide text that is used for the accessibility name or aria-labelledby which indicates an association with other text on a page that is providing the name. Button controls can have a name assigned in other ways, as indicated below, but in certain situations may require use of label, title, aria-label, or aria-labelledby.

Note 1: Elements that can use an explicitly-associated label element are:

  • input

  • textarea

  • select

Note 2: The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button):

  • Submit and Reset buttons (input type="submit" or input type="reset")

  • Image buttons (input type="image")

  • Hidden input fields (input type="hidden")

  • Buttons (button elements or <input type="button">)

Examples

Failure Example 1:

The following example demonstrates a form that visually presents labels for form controls, but does not use the label element to associate them with their controls. The code example below is a failure because assistive technology may not be able to determine which label goes with which control.


<form>
 First name: 
 <input type="text" name="firstname">
 <br>
 Last name: 
 <input type="text" name="lastname">
 <br>
 I have a dog <input type="checkbox" name="pet" value="dog">
 I have a cat <input type="checkbox" name="pet" value="cat">
</form>
Failure Example 2:

In the following code example, label elements are present, but they are not programmatically linked to the corresponding input controls and may therefore not be properly determined by assistive technology.


<form action="..." method="post"> 
<p> 
<label>First Name</label>
<input type="text" name="firstname"> 
<label>Last Name</label> 
<input type="text" name="lastname"> 
</p> 
</form>
Failure Example 3:

The search text box in the following code example does not have a programmatically determinable name. The name can be supplied with any of the approaches mentioned above.


<input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For all input, textarea and select elements in the Web page (except inputs of type "hidden", "submit", "reset", or "button":

  1. Check that each element has a programmatically determined name using one of the following ways:

    1. the text label or labels are programmatically associated with the control element via the aria-labelledby attribute (each id given as a value in the aria-labelledby attribute matches the id of the text label element).

    2. the control is programmatically determined through the value of its aria-label attribute.

    3. the text label is contained in a label element that is correctly associated to the respective input element via the label's for attribute (the id given as value in the for attribute matches the id of the input element).

    4. the control is contained within a label element that also contains the label text.

    5. the control is an input of type "image" and the alt attribute provides a text label.

    6. the control is programmatically determined through the value of title attribute.

Expected Results
  • If all options of check #1 are false, then this failure condition applies and the content fails the Success Criteria.


F69: Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured

Applicability

HTML, XHTML and CSS

This failure relates to:

Description

The objective of this failure condition is to describe a problem that occurs when changing the size of text causes text to be clipped, truncated, or obscured, so that it is no longer available to the user. In general, this failure occurs when there is no way for a user agent's layout engine to honor all the layout hints in the HTML at the new font size. Some of the ways in which this can occur include:

  • Setting the overflow property of the enclosing element to hidden

  • Using absolutely positioned content

  • Creating popups that aren't big enough for their content at the new font size

Note: The Working Group has discovered many misunderstandings about how to test this failure. We are planning to revise this failure in a future update. Until then, if the content passes the success criterion using any of the listed sufficient techniques, then it does not meet this failure.

Examples

Failure Example 1:

The font size is set in a scalable way, but the container is set to a fixed pixel size. A gray border shows the boundaries of the text container. When the text is resized, it spills out of its container, and obsures the next paragraph.

Example Code:


<div style="font-size:100%; width:120px; height:100px; border: thin solid gray;"> 
  Now is the time for all good men to come to the aid of their country. 
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>

Illustration of example 1:

Example showing text that spills outside of its container, obscuring other text on the page.
Failure Example 2:

This example is identical to the last one, except that the container is set to clip the text. The text is no longer bleeding into the next paragraph, but now it is truncated. This is also a failure.

Example Code:


<div style="font-size:100%; width:120px; height:100px; overflow: hidden; border: thin solid gray;">
 Now is the time for all good men to come to the aid of their country. 
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>

Illustration of example 2:

Example showing text that truncated due to resized text.

(none currently listed)

Tests

Procedure

Note: The Working Group has discovered many misunderstandings about how to test this failure. We are planning to revise this failure in a future update. Until then, if the content passes the success criterion using any of the listed sufficient techniques, then it does not meet this failure.

  1. Increase the text size of the content by 200%.

  2. Check that no text is clipped, truncated, or obscured.

Expected Results
  • If check #2 is false, then the failure condition applies and the content fails these Success Criteria.


F70: Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup

Applicability

Markup languages: HTML, XHTML, and other SGML or XML-based technologies.

This failure relates to:

Description

The objective of this failure is to identify examples of markup errors in element tags that could cause assistive technology to be unable to generate a satisfactory model of the page. Different user agents may implement different heuristics to recover from errors, resulting in inconsistent presentations of the page between user agents.

Some common types of problems with start and end tags that lead to this failure condition (though this is not an exhaustive list):

  • Opening and closing tags that are missing the opening < and closing > brackets.

  • Closing tag missing the initial / to indicate it is a closing tag.

  • Attribute values that have an opening quote but not a closing quote. Attribute values must be either fully quoted or, in some markup languages, may be unquoted.

  • Lack of whitespace between attributes.

  • Unquoted attribute values that have whitespace in the value.

  • Failure to provide a closing element tag for elements that do not accept empty-element syntax.

Examples

Failure Example 1: Missing angle brackets in XHTML

The following code fails because the opening tag is missing an angle bracket, and the intended boundary of the tag is unclear.

Example Code:


<p This is a paragraph</p>
Failure Example 2: Missing slash on closing tag in XHTML

The following code fails because the closing tag is missing the slash, making it look like it is in fact another opening tag.

Example Code:


<p>This is a paragraph<p>
Failure Example 3: Unbalanced attribute quoting

The following code fails because the attribute value is missing the closing quote, which makes the boundary of the attribute-value pair unclear.

Example Code:


<input title="name type="text">
Failure Example 4: Lack of whitespace between attributes

The following code fails because the there is not whitespace between attributes, which makes the boundary between attribute-value pairs unclear.

Example Code:


<input title="name"type="text">
Failure Example 5: Unquoted attribute with whitespace value

The following code fails because an attribute value is not quoted and contains whitespace, which makes the boundary of the attribute-value pair unclear.

Example Code:


<input title=Enter name here type=text>
Failure Example 6: Missing end tags in XHTML

The following code fails because the closing tag of the first paragraph is missing, making it unclear whether the second paragraph is a child or sibling of the first.

Example Code:


<p>This is a paragraph
<p>This is another paragraph</p>

(none currently listed)

Tests

Procedure
  1. Check the source code of pages implemented in markup languages.

  2. Check whether any opening tags, closing tags or attributes are malformed.

Expected Results
  • If check #2 is true, then the failure condition applies and the content does not meet this Success Criterion.


F71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative

Applicability

Any technology.

This failure relates to:

Description

The objective of this failure condition is to avoid substituting characters whose glyphs look similar to the intended character, for that intended character. The Unicode character set defines thousands of characters, covering dozens of writing systems. While the glyphs for some of these characters may look like the glyphs for other characters in visual presentation, they are not processed the same by text-to-speech tools.

For example, the characters U+0063 and U+03F2 both look like the letter "c", yet the first is from the Western alphabet and the second from the Greek alphabet and not used in Western languages. The characters U+0033 and U+04E0 both look like the number "3", yet the second is actually a letter from the Cyrillic alphabet.

Note: This failure also applies to the use of character entities. It is the incorrect character used because of its glyph representation that comprises a failure, not the mechanism by which that character is implemented.

Examples

Failure Example 1: Characters

The following word looks, in browsers with appropriate font support, like the English word "cook", yet is composed of the string U+03f2 U+043E U+03BF U+006B, only one of which is a letter from the Western alphabet. This word will not be processed meaningfully, and a text alternative is not provided.

Example Code:


ϲоοk
Failure Example 2: Character entities

The following example, like the one above, will look like the English word "cook" when rendered in browsers with appropriate font support. In this case, the characters are implemented with character entities, but the word will still not be processed meaningfully, and a text alternative is not provided.

Example Code:


&#x03F2;&#x043E;&#x03BF;&#x006B;

Working Example: "ϲоοk"

(none currently listed)

Tests

Procedure
  1. Check the characters or character entities used to represent text.

  2. If the characters used do not match the appropriate characters for the displayed glyphs in the human language of the content, then look-alike glyphs are being used.

Expected Results
  • If look-alike glyphs are used, and there is not a text alternative for any range of text that uses look-alike glyphs, then the content does not meet the Success Criterion.


F72: Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative

Applicability

Any technology.

This failure relates to:

Description

The objective of this failure condition is to avoid the use of ASCII art when a text alternative is not provided. Although ASCII art is implemented as a character string, its meaning comes from the pattern of glyphs formed by a visual presentation of that string, not from the text itself. Therefore ASCII art is non-text content and requires a text alternative. Text alternatives, or links to them, should be placed near the ASCII art in order to be associated with it.

Examples

Failure Example 1: ASCII Art chart without a text alternative

The following ASCII art chart lacks a text alternative and therefore does not meet Success Criterion 1.1.1. Note this failure example does in fact cause this page to fail, but you may skip over the example.

Example Code:


<pre>
  %   __ __ __ __ __ __ __ __ __ __ __ __ __ __   
100 |             *                             |
 90 |                *  *                       |
 80 |          *           *                    |
 70 |             @           *                 |
 60 |          @                 *              |
 50 |       *        @              *           |
 40 |                   @              *        |
 30 |    *  @              @  @           *     |
 20 |                                           |
 10 |    @                       @  @  @  @     |
      0  5 10 15 20 25 30 35 40 45 50 55 60 65 70
      Flash frequency (Hz)
</pre>

(none currently listed)

Tests

Procedure
  1. Access a page with ASCII art.

  2. For each instance of ASCII art, check that it has a text alternative.

Expected Results
  • If check #2 is false, then this failure condition applies and the content fails this Success Criterion.


F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision

Applicability

Any technology.

This failure relates to:

Description

The objective of this failure is to avoid situations in which people who cannot perceive color differences cannot identify links (when people with color vision can identify links). Link underlines or some other non-color visual distinction are required (when the links are discernible to those with color vision).

While some links may be visually evident from page design and context, such as navigational links, links within text are often visually understood only from their own display attributes. Removing the underline and leaving only the color difference for such links would be a failure because there would be no other visual indication (besides color) that it is a link.

Note 1: Red and Pink are the same color (hue) but they have different lightness (which is not color ). So red and pink would pass the requirement for "not distinguished by color (hue) alone" since they differ by lightness (which is not color) - as long as the difference in lightness (contrast) is 3:1 or greater. (e.g. if surrounding text is RED and the link is PINK it would pass. Similarly a light green and a dark red differ BOTH by color AND by lightness so they would pass if the contrast (lightness) difference is 3:1 or greater) before focus or pointing. )

Note 2: There is no requirement that links be identifiable by people who cannot perceive color if they are not perceivable for those with color vision. (e.g. if the links are hidden for everyone – as in a game or test).

Note 3: If the non-color cue only happens when the mouse hovers over the link or when the link receives focus, it is still a failure.

Note 4: If the link is a different color and bold it would not fail because the boldness is not color dependent.

Examples

Failure Example 1:

A Web page includes a large number of links within the body text. The links are styled so that they do not have underlines and are very similar in color to the body text. This would be a failure because users would be unable to differentiate the links from the body text.

Failure Example 2:

The following code is an example of removing the underline from a link in a sentence or paragraph without providing another visual cue besides color.

Example Code:


<head>
<style type="text/css">
p a:link {text-decoration: none}
p a:visited {text-decoration: none}
p a:active {text-decoration: none}
p a:hover {text-decoration: underline; color: red;}
</style>
</head>

<body>

<p>To find out more about the <a href="rain_in_spain.htm">rain in spain</a>there are many resources.</p>

</body>

Note: If the visual cue is only provided on hover (as in the example above), it would still fail.

Tests

Procedure
  1. Check that each link in the page that is identifiable by color (hue) is visually identifiable via some other means (e.g., underlined, bolded, italicized, sufficient difference in lightness, etc).

Expected Results
  • If check #1 is false, then this failure condition applies and the content fails this Success Criterion.


F74: Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative

Applicability

Pages that provide synchronized media alternatives to text.

This failure relates to:

Description

The objective of this failure is to avoid situations in which synchronized media alternatives are not labeled with the text for which they are alternatives. Synchronized media alternatives provide enhanced access to users for whom synchronized media is a more effective format than text. Since they are alternatives to text, they do not need themselves to have redundant text alternatives. However, they need to be clearly labeled with the text for which they substitute, so users can find them and so users who normally expect text alternatives to synchronized media know not to look for them.

Examples

Failure Example 1: Synchronized media alternatives provided elsewhere on page

A page with instructions to complete a tax form provides a prose description of the fields to complete, data to provide, etc. Additionally, a synchronized media alternative provides spoken instructions, with video of a person completing the section being discussed in the audio. Although both versions are provided on the page, the synchronized media version is provided elsewhere on the page and is not clearly labeled with the part of the text for which it is a substitute. This makes it difficult for users encountering the text to find it, and users encountering the video do not know where its text alternative is.

(none currently listed)

Tests

Procedure
  1. Check pages that provide synchronized media alternatives to text.

  2. Check that synchronized media is clearly labeled with the text for which it is an alternative.

Expected Results
  • If check #2 is false, then this failure condition applies and the content fails these Success Criteria.


F75: Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page

Applicability

Any technology.

This failure relates to:

Description

The objective of this failure is to avoid situations in which synchronized media alternatives provide more information than the text for which they are alternatives, but do not provide their own text alternatives to provide access to the extra information. Synchronized media alternatives provide enhanced access to users for whom synchronized media is a more effective format than text. Since they are alternatives to text, they do not need themselves to have redundant text alternatives in the form of captions, audio descriptions or full text alternatives. However, if they provide more information than the text for which they are an alternative, then they are not just alternatives but are synchronized media content in their own right. In this case they are subject to the full requirements of Success Criterion 1.2.2 to provide captions and to Success Criterion 1.2. and 1.2.5.

Examples

(none currently listed)

Tests

Procedure
  1. Check for captions on synchronized media alternatives.

  2. Check that the synchronized media alternative does not provide more information than is presented on the page in text.

    Note: Synchronized media alternatives often use different words to present what is on the page but it should not present new information on the topic of the page.

Expected Results
  • If check #2 is false, then this failure condition applies and the content fails these Success Criteria.


F77: Failure of Success Criterion 4.1.1 due to duplicate values of type ID

Applicability

HTML5, and any XML-based markup languages including HTML 4 and SVG

This failure relates to:

Description

This describes a failure condition where duplicate ID errors are known to cause problems for assistive technologies when they are trying to interact with content. Duplicate values of type ID can be problematic for user agents that rely on this attribute to accurately convey relationships between different parts of content to users. For example, a screen reader may use ID values to identify the applicable header content for a data cell within a data table, or an input control to which a given label applies. If these values are not unique, the screen reader will be unable to programmatically determine which headers are associated with the data cell or which control is associated with which label or name.

Checking that ID attribute values are unique within a document can be done by validating the document against its specification, because the specification defines which attributes contain document-wide unique identifiers.

Note 1: In most markup languages, ID values are attribute values, for example in HTML and SVG.

Note 2: XML documents that use only the xml:id attribute as an ID attribute, parsing the XML document with a validating parser that supports the xml:id specification is sufficient.

Examples

Failure Example 1

An author uses an online validation service to check that all id attribute values are unique.

Failure Example 2

A developer utilizes features in their authoring tool to ensure that id attribute values are unique.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check that all values of type ID are unique in the Web page

Expected Results
  • If Step #1 is false, then this failure condition applies and the content fails the Success Criterion.


F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

Applicability

Any technology

This failure relates to:

Description

This describes a failure condition that occurs when the user agent's default visual indication of keyboard focus is turned off or rendered non-visible by other styling on the page without providing an author-supplied visual focus indicator. Turning off the focus indicator instructs the user agent not to present the focus indicator. Other styling may make it difficult to see the focus indicator even though it is present, such as outlines that look the same as the focus outline, or thick borders that are the same color as the focus indicator so it cannot be seen against them.

Examples

Failure Example 1: The focus indicator is turned off with CSS

The following CSS example will remove the default focus indicator, which fails the requirement to provide a visible focus indicator.

Example Code:

:focus {outline: none}
Failure Example 2: The outline of elements is visually similar to the focus indicator

The following CSS example will create an outline around links that looks the same as the focus indicator. This makes it impossible for users to determine which one in fact has the focus, even though the user agent does draw the focus indicator.

Example Code:

a {outline: thin dotted black}
Failure Example 3: Elements have a border that occludes the focus indicator

The following CSS example creates a border around links that does not have enough contrast for the focus indicator to be seen when drawn on top of it. In this case the focus indicator is drawn just ouside the border, but as both are black and the border is thicker than the focus indicator, it no longer meets the definition of "visible".

Example Code:

a {border: medium solid black}

Resources

No resources available for this technique.

Tests

Procedure
  1. Set the focus to all focusable elements on a page using the keyboard.

  2. Check that the focus indicator is visible.

Expected Results
  • #2 is true.


F79: Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available

Applicability

All technologies

This failure relates to:

Description

Whether a user interface component has focus is a particularly important facet of its state. Many types of assistive technology rely on tracking the current keyboard focus. Screen readers will move the user's point of regard to the focused user interface component, and screen magnifiers will change the display of the content so that the focused component is visible. If assistive technology is not notified when focus moves to a new component, the user will become confused when they attempt to interact with the wrong component.

While user agents usually handle this functionality for standard controls, custom-scripted user interface components are responsible for using accessibility APIs to make focus information and notifications available.

Examples

A custom menu displays menu items by rendering them explicitly, handling mouse and key events directly and highlighting the currently selected menu item. The programmer does not expose the menu item that has focus via the Accessibility API, so assistive technology can only determine that focus is somewhere within the menu and cannot determine which menu item has focus.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Using the accessibility checker for the technology (or if that is not available, inspect the code or test with an assistive technology), check the controls to see if they expose the focus state through the accessibility API.

  2. Using the accessibility checker for the technology (or if that is not available, inspect the code or test with an assistive technology), check whether assistive technology is notified when focus moves from one control to another.

Expected Results
  • If Check #1 or Check #2 is false, then this failure condition applies and the content fails this Success Criterion.


F80: Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%

Applicability

HTML, XHTML, and CSS

This failure relates to:

Description

The objective of this failure condition is to describe a problem that occurs when changing the size of text does not cause the text-based form controls to resize accordingly. This means that the user may have difficulty entering text and being able to read what they have entered because the text is not displayed at the text size required by the user.

Text-based form controls include input boxes (text and textarea) as well as buttons.

Examples

Failure Example 1: A Contact Form

A Contact Us form has some introductory information and then form controls for users to enter their first name, last name, telephone number and email address. The heading, introductory text and form control labels have been implemented in a scalable way but the form controls themselves have not.

The XHTML component:

Example Code:

 <h1>Contact Us</h1>
 <p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
 <label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
 <label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
 <label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
 <label for="email">Email</label><input type="text" name="email" id="email" /><br />
 <input type="submit" name="Submit" value="Submit" id="Submit" />

The CSS component:

Example Code:

 h1 { font-size: 2em; }
 p, label { font-size: 1em; }
 input {font-size: 12pt}

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Enter some text into text-based form controls that receive user entered text.

  2. Increase the text size of the content by 200%.

  3. Check that the text in text-based form controls has increased by 200%.

Expected Results
  • If check #3 is false, then the failure condition applies and the content fails these Success Criteria.


F81: Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only

Applicability

All technologies

This failure relates to:

Description

This objective of this technique is to describe the failure that occurs when a required field or an error field is marked with color differences only, without an alternate way to identify the required field or error field. This can cause problems for people who are blind or colorblind, because they may not be able to perceive the color differences that indicate which field is required or which field is causing an error.

Examples

  • A user is completing an online form, and the phone number field is required. To indicate that the phone number field is required, the label "Phone Number" is displayed in a color different from the color used for optional fields, without any other indication that "Phone Number" is a required field. A blind or colorblind user may not be able to identify that "Phone Number" is a required field.

  • A user submits an online form and leaves a required field blank, resulting in an error. The form field that caused the error is indicated by red text only, without an additional non-color indication that the field caused an error.

Note: In both examples, the color could be used without failure if the text was sufficiently different in visual presentation (e.g. bold or in a different font) that it would be easily differentiated from the surrounding text if the color were removed. It would also not fail if the color chosen had sufficient luminosity difference (lightness) from the other text that it would be easily be seen as different if viewed in black and white. In these cases - the information would not be displayed in color (hue) alone but also in "presentation" or "lightness" respectively.

Tests

Procedure

For all required fields or error fields in the Web page that are identified using color differences:

  1. Check that an non-color way to identify the required field or error field is provided.

Expected Results
  • If step #1 is false, then this failure condition applies and content fails the Success Criterion.


F82: Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label

Applicability

Any technology

This failure relates to:

Description

This failure ensures that people with visual or cognitive disabilities will recognize phone number fields and understand what information to provide to fill in the fields. Phone numbers are frequently formatted in fixed, distinctive ways, and authors may feel that just providing visual formatting of the fields will be sufficient to identify them. However, even if all the fields have programmatically determined names, a text label must also identify the set of fields as a phone number.

Examples

Failure Example 1:

In the United States, phone numbers are broken into a three digit area code, a three digit prefix, and a four digit extension. A web page creates fixed length text input fields for the three parts of the phone number, surrounding the first field with parenthesis and separating the second and third fields with a dash. Because of this formatting, some users recognize the fields as a phone number. However, there is no text label for the phone number on the web page. This is because the label for each field will be the closest preceding text, so the three fields would be labeled "(", ")" , and "-" respectively.

Tests

Procedure
  1. For each set of phone number fields in the web page that represents a single phone number, check that the set of fields are labeled with a visible text label that is positioned near the set of phone number fields.

  2. For each set of phone number fields in the Web page that represent a single phone number, instructions are provided about how to fill in the fields.

Expected Results
  • If both check #1 and check #2 are false, then this failure condition applies and the content fails this success criterion.


F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)

Applicability

Any technology

This failure relates to:

Description

This failure occurs when people with low vision are not able to read text that is displayed over a background image. When there is not sufficient contrast between the background image and the text, features of the background image can be confused with the text making it difficult to accurately read the text.

To satisfy Success Criterion 1.4.3 and 1.4.6, there must be sufficient contrast between the text and its background. For pictures, this means that there would need to be sufficient contrast between the text and those parts of the image that are most like the text and behind the text.

Examples

Failure Example 1: Failure Example 1

Black text overlays an image with black lines. The lines cross behind the letters making F's look like E's etc.

Failure Example 2: Failure Example 2

Black text overlays an image with with dark gray areas. Wherever the text crosses a dark gray area the contrast is so bad that the text cannot be read.

Tests

Procedure
  1. Quickcheck: First do a quick check to see if the contrast between the text and the area of the image that is darkest (for dark text) or lightest (for light text) meets or exceeds that required by the Success Criterion (1.4.3 or 1.4.5). If the contrast meets or exceeds the specified contrast, then there is no failure.

  2. If the Quickcheck is false, then check to see if the background behind each letter has sufficient contrast with the letter.

Expected Results
  • If Quickcheck is false and #2 is false as well then this failure condition applies and the content fails the contrast Success Criterion.


F84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.

Applicability

HTML and XHTML

This failure relates to:

Description

This failure describes a common condition where links such as "click here" or "more" are used as anchor elements where you need to have the surrounding text to understand their purpose and where there isn't any mechanism to make the destination clear by itself, such as a button to expand the link text.

Many blind people who use screen readers call up a dialog box that has a list of links from the page. They use this list of links to decide where they will go. But if many of the links in that list simply say "click here" or "more" they will be unable to use this feature in their screen reader, which is a core navigation strategy. That's why it's a failure of 2.4.9 to not provide any way of allowing them to know the destination from the link text alone. It is also true for people who tab through links. If all they hear as they tab through the document is "click here, click here, click here etc." they will become confused.

Examples

Failure Example 1

Example Code:

<a href="file110.htm">Click here</a> for more information on the Rocky Mountains.
Failure Example 2

Example Code:

<h2>News headlines</h2>
The middle east peace meetings have yielded fruitful dialogue. 
<a href="r4300.htm">read more</a>

Tests

Procedure
  1. Examine each link on the page.

  2. Check to see if it has non-descript link text such as "click here" or "more" whose purpose can be determined from the surrounding text but not from the link text alone.

  3. Check to see if there is a mechanism on the page which turns all non-descript links on the page into descriptive links.

Expected Results
  • If step #2 is true AND #3 is false, then this failure condition applies and content fails the success criterion.


F85: Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order

Applicability

All technologies.

This failure relates to:

Description

This describes the failure condition that results when a Web page opens a dialog or menu interface component embedded on the page in a way that makes it difficult for a keyboard user to operate because of its position in the sequential navigation order. When the user opens the dialog or menu embedded on the page by activating a button or link, his next action will be to interact with the dialog or menu. If focus is not set to the dialog or menu, and it is not adjacent to the trigger control in the sequential navigation order, it will be difficult for the keyboard user to operate the dialog or menu.

Examples

Failure Example 1: Adding a dialog or menu embedded on the page to the end of the sequential navigation order

When a DHTML menu or dialog is activated, it is created dynamically, positioned visually near the trigger, and appended to the end of the DOM. Because it is appended to the end of the DOM, it is at the end of the sequential navigation order. The user must tab through the rest of the web page before he can interact with the dialog or menu.

Failure Example 2: Setting focus to the document after dismissing a menu embedded on the page

When a menu is dismissed, it is removed or hidden from the web page and focus is set to the document. The user must tab from the beginning of the navigation sequence to reach the point from which the menu was opened.

Tests

Procedure

For each menu or dialog embedded on a Web page that is opened via a trigger control:

  1. Activate the trigger control via the keyboard.

    • Check whether focus is in the menu or dialog.

    • Check whether advancing the focus in the sequential navigation order puts focus in the menu or dialog.

  2. Dismiss the menu or dialog.

    • Check whether focus is on the trigger control.

    • Check whether advancing the focus backwards in the sequential navigation order puts focus in the trigger control.

Expected Results
  • If both points under step 1 are false, then this failure condition applies and the content fails this success criterion.

  • If both points under step 2 are false, then this failure condition applies and the content fails this success criterion.


F86: Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number

Applicability

General

This failure relates to:

Description

This describes a failure condition of Success Criterion 4.1.2 where some or all of the parts of multi-part form field do not have names. Often there is a label for the multi-part field, which is either programatically associated with the first part, or not programatically associated with any parts.

Note: A name does not necessarily have to be visible, but is visible to assistive technologies.

Examples

Failure Example 1

A US telephone number consists of a 3-digit area code, a 3-digit prefix, and a 4-digit suffix. They are typically formatted as follows ([area code]) [prefix]-[suffix], such as (206) 555-1212. Often, forms asking for a telephone number will include 3 separate fields, but with a single label, such as:

Phone number: 
(<input type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">

The failure occurs when there is not a name for each of the 3 fields in the Accessibility API. A user with assistive technology will experience these as three undefined text fields. Some assistive technologies will read the punctuation as identification for the text fields, which can be even more confusing. In the case of a 3-field US phone number, some assistive technologies would name the fields "(", ")" and "-", which is not very useful.

Failure Example 2

The same US telephone number. In this case, the label is not programatically associated with any of the parts.

Phone number: (<input type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">

A user with assistive technology will experience these as three undefined text fields.

Failure Example 3

The same US telephone number. In this case, the label is programatically associated with the first part.

<label for="area">Phone number:</label> 
(<input id="area" type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">

A user with assistive technology will be led to believe that the first field is for the entire phone number, and will experience the second and third fields as undefined text fields.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each subfield in the multi-part form field:

  1. Check that there is a programmatically determined name for the field.

Expected Results
  • If check #1 is false for any subfield, then the failure condition applies and the content fails the success criterion.


F87: Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS

Applicability

All technologies that support CSS.

This failure relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for F87.

Description

The CSS :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The content property, in conjunction with these pseudo-elements, specifies what is inserted. For users who need to customize or turn off style information in order to view content according to their needs, assistive technologies may not be able to access the information that is inserted using CSS. Therefore, it is a failure to use these properties to insert non-decorative content.

Examples

Failure Example 1

In the following example, :before and :after are used to indicate speaker changes and to insert quotation marks in a screenplay.

The CSS contains:

Example Code:

 p.jim:before {	content: "Jim: " }
p.mary:before { content: "Mary: " }

q:before { content: open-quote }
q:after  { content: close-quote }

It is used in this excerpt:

Example Code:

 <p class="jim">
 <q>Do you think he's going to make it?</q>
</p>
<p class="mary">
 <q>It's not looking good.</q>
</p>
Failure Example 2

In this example, :before is used to differentiate facts from opinions.

The CSS contains:

Example Code:

 p.fact:before { content: "Fact: "; font-weight: bold; }
 p.opinion:before { content: "Opinion: "; font-weight: bold; }

It is used in this excerpt:

Example Code:

 <p class="fact">
 The defendant was at the scene of the crime when it occurred. 
</p>
<p class="opinion">
 The defendant committed the crime. 
</p>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Examine all content inserted through use of the :before and :after pseudo-elements and the content property

  2. Verify that the content is decorative.

  3. If the inserted content is not decorative, check that the information is provided to assistive technologies and is also available when CSS is turned off.

Expected Results
  • If checks #2 or #3 are false, then this failure condition applies and the content fails this Success Criterion.


F88: Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)

Applicability

All technologies.

This failure relates to:

Description

Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create "rivers of white" running down the page, which can make the text difficult for some people to read. This failure describes situations where this confusing text layout occurs. The best way to avoid this problem is not to create text layout that is fully justified (aligned to both the left and the right margins).

Examples

Failure Example 1

In the following example of a failure, the HTML align attribute is used to create justified text.

Example Code:

 
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus 
nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec 
ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus. 
Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum 
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo 
justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.
</p>
Failure Example 2

In this example of a failure, the CSS text-align property is used to create justified text.

Example Code:

 
...
p {text-align: justify}

...

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus 
nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec 
ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus. 
Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum 
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo 
justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.</p>

Tests

Procedure
  1. Open the page in a common browser.

  2. Verify that content is not justified (aligned to both the left and the right margins).

Expected Results
  • If test procedure #2 is false, then this failure condition applies and the content fails to meet Success Criterion 1.4.8.


F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link

Applicability

Content that contains links.

This failure relates to:

Description

This failure condition occurs when a link contains only non-text content, such as an image, and that link cannot be identified by an accessible name. The accessible name for a link is defined according to the Accessible Name Calculation.

This also applies when both text and images are used separately on a page to link to the same target. In this case success technique H2: Combining adjacent image and text links for the same resource (HTML) is the recommended approach to reduce the number of separate links and the undesirable redundancy.

Examples

Failure Example 1: HTML Search Results

A search site returns search results that include both a text link and an image link to the match site. The image has a null alt attribute, since the result already contains a link with a text description. However, the screen reader does not ignore the image link but uses heuristics to find some text that might describe the purpose of the link. For example, the screen reader might announce, "football dot gif Football Scorecard."

Example Code:

 <a href="scores.html">
   <img src="football.gif" alt="" />
 </a>
 <a href="scores.html">
   Football Scoreboard
 </a>
}

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check whether the link contains only non-text content.

  2. Check whether the non-text content has been implemented in a way that it can be ignored by assistive technologies, such as using role="presentation" or alt="" .

  3. Check that the link does not have an accessible name provided in another way such as aria-label or aria-labelledby.

Expected Results
  • If all checks are true, then this failure condition applies and the content fails the success criteria.


F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes

Applicability

HTML and XHTML.

This failure relates to:

Description

One way for authors to explicitly associate header cells to data cells is by using the id and headers attributes. These allow the author to associate multiple header cells to a particular data cell, which can be necessary when complex data tables with more than one level of heading are used.

The failure occurs when the relationship between data cells and corresponding header cells cannot be programmatically determined correctly because the association of id and headers attributes is faulty. This can happen, for example, when copying code within tables and forgetting to update the code.

Examples

Note: The example below is based on the complex data table presented as example 1 of H43: Using id and headers attributes to associate data cells with header cells in data tables (HTML) .

Failure Example 1: Table content not correctly associated to nested headers

In this example, nested headers are used, but the content cells are incorrectly associated via the id and headers attributes. All cells reference top level header 'Exams' (id="e") - this isn't correct for the last three columns which should reference header 'Projects'. Also, the referencing of the second level column headers has been accidentally swapped even though in this example this makes no difference as the contents (1, 2, Final) are repeated.

Example Code:


<table>
   <tr>
     <th rowspan="2" id="h">Homework</th>
     <th colspan="3" id="e">Exams</th>
     <th colspan="3" id="p">Projects</th>
   </tr>
   <tr>
     <th id="e1" headers="e">1</th>
     <th id="e2" headers="e">2</th>
     <th id="ef" headers="e">Final</th>
     <th id="p1" headers="p">1</th>
     <th id="p2" headers="p">2</th>
     <th id="pf" headers="p">Final</th>
   </tr>
   <tr>
     <td headers="h">15%</td>       
     <td headers="e p1">15%</td>  // should be "e e1"
     <td headers="e p2">15%</td>  // should be "e e2"
     <td headers="e pf">20%</td>  // should be "e ef"
     <td headers="e e1">10%</td>  // should be "p p1"
     <td headers="e e2">10%</td>  // should be "p p2"
     <td headers="e ef">15%</td>  // should be "p pf"
   </tr>
</table>
							

Failure example of table incorrectly associating headers attributes in table content (td) to table headers (th).

Tests

Procedure
  1. For tables that associate data cells to header cells via the id and headers attributes, check that the programmatic association is correct.

Expected Results
  • If check #1 is false, then this failure condition applies and the content fails the Success Criterion.


F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers

Applicability

HTML and XHTML.

This failure relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for F91.

Description

This failure occurs when data tables do not use header elements (th) or other appropriate table mark-up (the scope attribute, headers and id or the ARIA roles columnheader / rowheader) to make the headers programatically determinable from within table content. Making headers programmatically determinable is especially important when data cells are only intelligible together with header information. When screen reader users navigate through the table content horizontally or vertically, the headers that change can be read out to provide the necessary context for the information in the data cells.

Examples

Failure Example 1: Headers not marked up appropriately

This table does not use th (or other appropriate header markup) for headers. Instead, it uses td elements for all cells. Navigating cell by cell, screen readers will often fail to read the header cells associated with content.

Example Code:


<table>
   
   <tr>
      <td>Name</td>
      <td>Age</td>
      <td>Height (cm)</td>
      <td>Weight (kg)</td>
   </tr>   
   
   <tr>
      <td>Linda</td>
      <td>33</td>
      <td>169</td>
      <td>59</td>
   </tr>   
   
   <tr>
      <td>Jack</td>
      <td>37</td>
      <td>184</td>
      <td>74</td>
   </tr>    
   
   <tr>
      <td>Kira</td>
      <td>8</td>
      <td>120</td>
      <td>21</td>
   </tr>   
   
   <tr>
      <td>Daniel</td>
      <td>3</td>
      <td>79</td>
      <td>14</td>
   </tr>  
</table>
							

View example 1 (opens in same browser window)

Tests

Procedure

For all data tables, check if table headers can be correctly programmatically determined by use of one of the following mechanisms:

  1. headers marked up with table header (th) elements

  2. scope attributes on th for tables with more than a single row or column of table headers.

  3. scope attributes on th for tables with more than a single row or column of table headers.

  4. headers and data cells associated using headers and id attributes

  5. headers marked up as td elements with the scope attribute

  6. headers marked up with ARIA role attributes rowheader or columnheader

Expected Results
  • If all checks are false, then this failure condition applies and the content fails the Success Criterion.


F92: Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information

Applicability

HTML and XHTML

This failure relates to:

Description

This failure occurs when a role of presentation is applied to an element whose purpose is to convey information or relationships in the content. Elements such as table, can convey information about the content contained in them via their semantic markup. The WAI-ARIA role of "presentation" on the other hand, is intended to suppress semantic information of content from the accessibility API and prevent user agents from conveying that information to the user. Use of the "presentation" role for content which should convey semantic information may prevent the user from understanding that content.

Examples

Failure Example 1:

In this example, tabular data is marked up with role=presentation. Though design layout tables can be marked up in such a way, data tables need to retain their semantic information and should therefore not be marked up with role=presentation.

Example Code:


<table role="presentation">
   <caption>Fruits and their colors</caption>
   <tr>
     <th>Name</th>
     <th>Color</th>
   </tr>
   <tr>
    <td scope="row">banana</td>
    <td>yellow</td>
   </tr>
   <tr>
    <td scope="row">orange</td>
    <td>orange</td>
   </tr>
  </table>
                            

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Check if an element which conveys information, structure, or relationships through its semantic markup

  2. Element has the attribute role="presentation".

Expected Results
  • If check #2 is true, then this failure condition applies and the content fails the Success Criterion.


F93: Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays

Applicability

HTML5

This failure relates to:

Description

This failure occurs when an audio or video element with an audio track contains the autoplay attribute and does not contain the muted attribute, and no controls or commands have been provided to pause or stop the media resource.

When the autoplay attribute is present, the user agent will automatically begin playback of the media resource as soon as it can do so without stopping. When the muted attribute is present, the user agent will initially mute the media resource's audio output, overriding any user preference.

If the media element is shorter than 3 seconds, the failure does not occur. If the user agent provides user preferences to override autoplay behavior, the failure does not occur.

The HTML spec contains the following notes:

  • User agents do not need to support autoplay, and it is suggested that user agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the video to play, so as to allow the user to override the behavior if so desired.

  • Authors are urged to use the autoplay attribute rather than using script to trigger automatic playback, as this allows the user to override the automatic playback when it is not desired, e.g. when using a screen reader. Authors are also encouraged to consider not using the automatic playback behavior at all, and instead to let the user agent wait for the user to start playback explicitly.

Examples

Example 1: An auto-playing audio track

In this example, the advertising video contains an audio track. The video will play continuously because of the loop attribute, and the video will start automatically because of the autoplay attribute and because there does not appear to be any controls to allow the user to stop the video.

Example Code:


				 <video src="ads.cgi?kind=video" autoplay loop></video>
            

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. Check if an audio or video element has an active audio track.

  2. Check if the audio or video lasts longer than 3 seconds.

  3. Check if the element has an autoplay attribute.

  4. Check if the element does not have a muted attribute.

  5. Check if no command or control has been provided to stop or pause the media element.

Expected Results
  • If checks 1-5 are true, then this failure condition applies and the content fails the Success Criterion.


Appendix A: Acknowledgements

This publication has been funded in part with U.S. Federal funds from the Department of Education, National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR), initially under contract number ED-OSE-10-C-0067 and currently under contract number HHSP23301500054C. The content of this publication does not necessarily reflect the views or policies of the U.S. Department of Education, nor does mention of trade names, commercial products, or organizations imply endorsement by the U.S. Government.

Additional information about participation in the Web Content Accessibility Guidelines Working Group (WCAG WG) can be found on the Working Group home page.

A.1 Participants of the WCAG WG active in the development of this document:

  • Paul Adam (Deque)

  • Kathleen Anderson

  • Jon Avila (SSB Bart Group)

  • Bruce Bailey (U.S. Access Board)

  • Laura Carlson

  • Louis Cheng (Google)

  • Michael Cooper (W3C)

  • Wayne Dick

  • Eric Eggert (W3C)

  • Michael Elledge

  • Detlev Fischer

  • John Foliot (Deque)

  • Loretta Guarino Reid (Google)

  • Jon Gunderson

  • Katie Haritos-Shea

  • Marc Johlic (IBM)

  • Barry Johnson (Deque)

  • Andrew Kirkpatrick (Adobe)

  • David MacDonald

  • Erich Manser (IBM)

  • James Nurthen (Oracle)

  • Joshue O Connor

  • Jan Richards

  • Alan Smith

  • Adam Solomon

  • Makoto Ueki

  • Gregg Vanderheiden

  • Kathleen Wahlbin

  • Can Wang (Zhejiang University)

  • Jason White (Educational Testing Service)

  • Kenny Zhang (W3C)

A.2 Other previously active WCAG WG participants and other contributors to WCAG 2.0 or supporting resources

Shadi Abou-Zahra, Jim Allan, Jenae Andershonis, Wilhelm Joys Andersen, Andrew Arch, Avi Arditti, Aries Arditi, Jon Avila, Mark Barratt, Mike Barta, Sandy Bartell, Kynn Bartlett, Chris Beer, Charles Belov, Marco Bertoni, Harvey Bingham, Chris Blouch, Paul Bohman, Frederick Boland, Denis Boudreau, Patrice Bourlon, Judy Brewer, Andy Brown, Dick Brown, Doyle Burnett, Raven Calais, Ben Caldwell, Alastair Campbell, Laura Carlson, Tomas Caspers, Roberto Castaldo, Sofia Celic-Li, Sambhavi Chandrashekar, Mike Cherim, Jonathan Chetwynd, Wendy Chisholm, Alan Chuter, David M Clark, Joe Clark, Darcy Clarke, James Coltham, Vivienne Conway, Earl Cousins, James Craig, Tom Croucher, Pierce Crowell, Nir Dagan, Daniel Dardailler, Geoff Deering, Sébastien Delorme, Pete DeVasto, Wayne Dick, Iyad Abu Doush, Sylvie Duchateau, Cherie Eckholm, Roberto Ellero, Don Evans, Gavin Evans, Neal Ewers, Steve Faulkner, Bengt Farre, Lainey Feingold, Wilco Fiers, Michel Fitos, Alan J. Flavell, Nikolaos Floratos, Kentarou Fukuda, Miguel Garcia, P.J. Gardner, Alistair Garrison, Greg Gay, Becky Gibson, Al Gilman, Kerstin Goldsmith, Michael Grade, Karl Groves, Jon Gunderson, Emmanuelle Gutiérrez y Restrepo, Brian Hardy, Eric Hansen, Benjamin Hawkes-Lewis, Sean Hayes, Shawn Henry, Hans Hillen, Donovan Hipke, Bjoern Hoehrmann, Allen Hoffman, Chris Hofstader, Yvette Hoitink, Martijn Houtepen, Carlos Iglesias, Jonas Jacek, Ian Jacobs, Phill Jenkins, Duff Johnson, Jyotsna Kaki, Shilpi Kapoor, Leonard R. Kasday, Kazuhito Kidachi, Ken Kipness, John Kirkwood, Jason Kiss, Johannes Koch, Marja-Riitta Koivunen, Maureen Kraft, Preety Kumar, Kristjan Kure, Andrew LaHart, Gez Lemon, Chuck Letourneau, Aurélien Levy, Harry Loots, Scott Luebking, Tim Lacy, Jim Ley, Alex Li, William Loughborough, Greg Lowney, N Maffeo, Mark Magennis, Kapsi Maria, Luca Mascaro, Matt May, Sheena McCullagh, Liam McGee, Jens Meiert, Niqui Merret, Jonathan Metz, Alessandro Miele, Steven Miller, Mathew J Mirabella, Matt May, Marti McCuller, Sorcha Moore, Mary Jo Mueller, Charles F. Munat, Robert Neff, Charles Nevile, Liddy Nevile, Dylan Nicholson, Bruno von Niman, Tim Noonan, Sebastiano Nutarelli, Graham Oliver, Sean B. Palmer, Sailesh Panchang, Devarshi Pant, Nigel Peck, Anne Pemberton, David Poehlman, Ian Pouncey, Charles Pritchard, Kerstin Probiesch, W Reagan, Adam Victor Reed, Chris Reeve, Chris Ridpath, Lee Roberts, Mark Rogers, Raph de Rooij, Gregory J. Rosmaita, Matthew Ross, Sharron Rush, Joel Sanda, Janina Sajka, Roberto Scano, Gordon Schantz, Tim van Schie, Wolf Schmidt, Stefan Schnabel, Lisa Seeman, Cynthia Shelly, Glenda Sims, John Slatin, Becky Smith, Jared Smith, Andi Snow-Weaver, Neil Soiffer, Jeanne Spellman, Mike Squillace, Michael Stenitzer, Diane Stottlemyer, Christophe Strobbe, Sarah J Swierenga, Jim Thatcher, Terry Thompson, Justin Thorp, David Todd, Mary Utt, Jean Vanderdonckt, Carlos A Velasco, Eric Velleman, Gijs Veyfeyken, Dena Wainwright, Paul Walsch, Daman Wandke, Richard Warren, Elle Waters, Takayuki Watanabe, Léonie Watson, Gian Wild, David Wooley, Wu Wei, Leona Zumbo.

Appendix B: References

CSS1
"Cascading Style Sheets, level 1," B. Bos, H. Wium Lie, eds., W3C Recommendation 17 Dec 1996, revised 11 Jan 1999. Available at http://www.w3.org/TR/REC-CSS1/.
CSS2
"Cascading Style Sheets, level 2," B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., W3C Recommendation 12 May 1998. Available at http://www.w3.org/TR/CSS2/.
CSS21
"Cascading Style Sheets, level 2 revision 1," B. Bos, T. Çelik, I. Hickson, H. Wium Lie, eds., W3C Candidate Recommendation 25 February 2004. Available at: http://www.w3.org/TR/CSS21/
CSS3
[CSS 2.1 and CSS 3] Roadmap, CSS WG's table of modules and publication dates.
FLASH
"Flash", Adobe Systems. Available at http://www.adobe.com/devnet/swf.html.
HTML4
"HTML 4.01 Specification," D. Raggett, A. Le Hors, I. Jacobs, eds., W3C Recommendation 24 December 1999. Available at http://www.w3.org/TR/html401/
ISO32000
"Document management - Portable document format - Part 1: PDF 1.7", ISO/TC 171/SC 2. ISO. Available at http://www.iso.org/iso/home/store/catalogue_tc/catalogue_detail.htm?csnumber=51502. ISO-approved copy available at: http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf.
PDF
"PDF", Adobe Systems. Available at http://www.adobe.com/devnet/pdf.html.
WCAG20
"Web Content Accessibility Guidelines 2.0," B. Caldwell, M Cooper, L Guarino Reid, and G. Vanderheiden, eds., W3 Recommendation 12 December 2008, http://www.w3.org/TR/2008/REC-WCAG20-20081211. The latest version of WCAG 2.0 is available at http://www.w3.org/TR/WCAG20/.
XHTML1
"XHTML 1.0 The Extensible HyperText Markup Language (Second Edition)," S. Pemberton, et al., W3C Recommendation 26 January 2000, revised 1 August 2002. Available at: http://www.w3.org/TR/xhtml1/.