[contents]

W3C

Techniques for WCAG 2.0

Techniques and Failures for Web Content Accessibility Guidelines 2.0

W3C Working Draft 17 May 2007

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

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


Abstract

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

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

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

Status of this Document

May Be Superseded

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

Public Working Draft of "Techniques for WCAG 2.0"

This is a Public Working Draft of "Techniques for WCAG 2.0." These techniques are produced by the Web Content Accessibility Guidelines Working Group to provide guidance about how to conform to the Web Content Accessibility Guidelines 2.0 (WCAG 2.0).

This Working Draft provides additional techniques to clarify existing WCAG 2.0 success criteria and to support new success criteria. Some techniques have been clarified or changed in response to comments received. Information about the relationship of success criteria is primarily indicated in Understanding WCAG 2.0, but advisory information is included in techniques as well.

Please Comment by 29 June 2007

The Working Group encourages review and comments on this document, in particular:

Your comments on this Working Draft will help the WCAG Working Group improve the document before it is published as a Working Group Note when WCAG 2.0 becomes a W3C Recommendation.

Comments on this working draft are due on or before 29 June 2007. The Working Group requests that comments be made using the provided online or downloadable comment form. If this is not possible, comments can also be sent to public-comments-wcag20@w3.org. The archives for the public comments list are publicly available. Archives of the WCAG WG mailing list discussions are also publicly available.

Please refer to Issue tracking for WCAG 2.0 Techniques for a list of open issues related to this Working Draft. The History of Changes to Techniques for WCAG 2.0 Working Drafts is also available.

Web Accessibility Initiative

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.

No Endorsement

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

Patents

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


Table of Contents

Appendix


1. Common Failures


F1: Failure of SC 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. [LC-600]

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:

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

.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 SC 1.3.1 due to using CSS to create variations in presentation of text that conveys information without also using the appropriate markup or text

Applicability

All technologies that support CSS.

This failure relates to:

Description

It is a failure to use CSS to style text to convey information instead of conveying the information by using the appropriate markup or text. An HTML example is to use CSS to style text in bold for emphasis rather than using the strong element.

Examples

Failure Example 1: Emphasis in written dialogue.

Here is a CSS class to specify bold.

 .yell {
   font-weight:bold;
 }

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.

<p>
 &quot;I said, <span class="yell">NO</span>, not before dinner!&quot;, 
 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. Find visually styled elements on the page that convey information.

  2. Check that the appropriate semantics of the technology are used and that the information is not conveyed only by variations in presentation through CSS.

Expected Results
  • If step #2 is false, then this failure condition applies and the content fails this success criterion.


F3: Failure of SC 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.

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

 The CSS contains: 
p#bestinterest {
  padding-left: 200px;
  background: transparent url(/images/TopRate.png) no-repeat top left;
}

It is used in this excerpt:

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

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:

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

Resources

No resources available for this technique.

Tests

Procedure
  1. Examine all images added to the content via CSS.

  2. Check that the images do not convey important information.

Expected Results
  • Step #2. If it is true then this failure condition applies and content fails the success criterion.


F4: Failure of SC 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than three seconds

Applicability

Cascading Style Sheets.

This failure relates to:

User Agent and Assistive Technology Support Notes

The blink value of the text-decoration property is not supported by Internet Explorer. It is supported in Netscape/Mozilla family browsers. Not tested in others (e.g., Safari, Opera).

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.

<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 SC 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 three 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 3 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 SC 1.2.1 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 dialog (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 dialog (possibly simplified dialog) but that does not describe important sounds [LC-774]

  • text that omits dialog 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 dialog is accompanied by a caption.

  3. Check that all important sounds are captioned.

Expected Results
  • Step #2 and step #3 are true.


F9: Failure of SC 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 filed 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 SC 2.1.1 and Conformance Requirement 6 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 can not 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 (X)HTML, 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 inaccessible plug-ins, leaving a keyboard-only user with no way to return to the accessible 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.


F12: Failure of SC 2.2.6 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 SC 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

This objective of this technique is to describe the failure that occurs when an image uses color 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.

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 :

  1. Check that the information conveyed by color 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 SC 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 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 cannot determine which button is square, triangular, or round. The buttons must have additional information to indicate their functions.

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

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

Resources are for information purposes only, no endorsement implied.

(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 SC 2.2.3 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 steps step #1, step #3, step #4, or step #6 are false, then the content fails the success criterion.


F17: Failure of SC 1.3.1 due to insufficient information in DOM to determine one-to-one relationships (e.g., between labels with same id) in HTML

Applicability

Applies to the Document Object Model (DOM) for HTML 4.01 and XHTML 1.x.

This failure relates to:

Description

The objective of this technique is to ensure that Web pages can be interpreted consistently by user agents, including assistive technology. If it is ambiguous, different user agents including assistive technologies could present different information to their users. Users of assistive technology for example may have different information presented to them than users of other mainstream user agents. Some elements and attributes in markup languages are required to have unique values, and if this requirement is not honored, the result can be irregular or not uniquely resolvable content. For example, when id attribute values are not unique, they are particularly problematic when referenced by labels, headers in data tables, or used as fragment identifiers, as user agents do not have enough information to provide determine essential relationships (i.e. to determine which label goes with which item).

Examples

Failure Example 1
  • A label element whose for attribute value is an idref that points to a non-existent id

  • An id attribute value that is not unique.

  • An accesskey attribute value that is not unique

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Check for id and accesskey values which are not unique within the document.

  2. Check that attribute values that have an idref value have a corresponding id value.

  3. For tables that use the axis attribute, check that all values listed in the axis attribute have a corresponding id value in a table header cell in the same table.

  4. For client-side image maps, check that the value of the usemap attribute has a corresponding id value if the usemap attribute is not a URL.

Expected Results
  • If step #1, step #3 or step #4 is true or step #2 is false, then this failure condition applies and the content fails the success criterion.


F19: Failure of Conformance Requirement 4 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 SC 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 can not 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 SC 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 dialog. 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. [LC-779]

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 SC 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 SC involving sound. If sound does not turn off automatically within 3 seconds and there is no way to turn the sound off then SC 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

Example 1
  • a site that plays continuous background music

Example 2
  • a site with a narrator that lasts more than 3 seconds before stopping.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Check that there is a way in content 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


[LC-511]

F24: Failure of SC 1.4.3 and 1.4.5 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 challenges often require specific foreground and background color combinations. For instance, many people with low vision find it much easier to see a Web page that has white text on a black background, so they may have set their user agent to create this contrast. If the author specifies that the text must be black, then it may override the settings of the user agent and render a page that has black text (specified by the author) on black background (that was set in the user agent). This principle also works in reverse. If the Webmaster forces the background to be white, then the white background specified by the author would be the same color as the white text (which was set in the user agent) rendering the page unusable to the user. Therefore, if the author specifies a foreground text color then they should also specify a background color which has sufficient contrast (link) with the foreground and vice versa.

Note: All states of the text should be included. For example, text, link text, visited link text etc. [LC-700]

Examples

Failure Example 1: 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.

   
<!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 2: Specifying only foreground color with color 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.

 <!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 color="white">
  <p>... document body...</p>
</body>
</html>
Failure Example 3: 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.

  <!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 4: Specifying only background 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.

 <!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 5: 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.

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

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. Examine the code of the Web page.

  2. Check to see if a foreground color is specified

  3. Check to see if a background color is specified

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 URL 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. [LC-767]

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 SC 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 SC 1.3.3 due to using a graphical symbol alone to convey information [LC-780]

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. [LC-780]

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. [LC-763]

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 SC 1.1.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 SC 3.2.4 due to using two different labels for the same function on different Web pages within a set of Web pages [LC-711]

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 SC 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. [LC-781]

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

<h1>W e l c o m e</h1>

&nbsp; can also be used to add white space, producing similar failures:

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

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

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

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 SC 1.3.2 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) [LC-672]

Examples

Failure Example 1

The following example incorrectly uses white space to format a Menu as a visual table.

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 SC 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 4.x and XHTML 1.x.

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.

 
<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. [LC-1450]

 
<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 SC 3.2.2 due to launching a new window without prior warning when the status of a radio button, check box or select list is changed

Applicability

HTML 4.x and XHTML 1.x.

This failure relates to:

User Agent and Assistive Technology Support Notes

Internet Explorer 6 also triggers the onclick event when a radio button with onclick receives focus; adding other event handlers (onxxx attributes) to prevent this does not work.

Description

This document describes a failure that occurs when changing the status 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.

  
<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 status 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 SC 1.1.1 due to omitting the alt-attribute for non-text content used for decorative purposes only in HTML

Applicability

Applies to HTML 4.x and XHTML 1.x.

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 proved and have a null value (i.e. alt="" or alt=" ") to avoid a failure of this success criterion.

Note: Although alt=" " is valid, alt="" is recommended.

Examples

  • Failure Example 1: Decorative images that have no alt attribute

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Identify any img and applet elements that are used for purely decorative content;

  2. Check that the alt attribute for these elements exists.

  3. Check that the alt attribute for these elements is null.

Expected Results
  • if step #2 or step #3 is false, this failure condition applies and content fails the success criterion.


F39: Failure of SC 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 4.x and XHTML 1.x.

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 proved and have a null value (i.e. alt="" or alt=" ") to avoid a failure of this success criterion.

Note: Although alt=" " is valid, alt="" is recommended.

Examples

  • Failure Example 1: Decorative images that have no alt attribute

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Identify any img and applet elements that are used for purely decorative content;

  2. Check that the alt attribute for these elements exists.

  3. Check that the alt attribute for these elements is null.

Expected Results
  • If step #2 or step #3 is false, this failure condition applies and content fails the success criterion.


F40: Failure of SC 2.2.1 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 URL http://www.example.com/newpage after a time limit of 5 seconds.

<html xmlns="http://www.w3.org/1999/xhtml">
   <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. #2 is true.


F41: Failure of SC 2.2.1, 2.2.5, and 3.2.5 due to using meta refresh with a time-out

Applicability

HTML 4.x and XHTML 1.x.

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

<html xmlns="http://www.w3.org/1999/xhtml">   
  <head>     
    <title>HTML Techniques for WCAG 2.0</title>     
    <meta http-equiv="refresh" content="60" />   
  </head>   
  <body>
    ...     
  </body> 
</html>
Failure Example 2

This is a deprecated example that redirects the user to another page after a number of seconds. Content developers are recommended to user server-side redirects instead. (The number in the content attribute is the refresh interval in seconds.)

<html xmlns="http://www.w3.org/1999/xhtml">   
  <head>     
    <title>The Tudors</title>     
    <meta http-equiv="refresh" content="10;URL='http://thetudors.example.com/'" />   
  </head>   
  <body>
    <p>This page has moved to a <a href="http://thetudors.example.com/">
    theTudors.example.com</a>. Please note that we now have our own 
    domain name and will redirect you in a few seconds. Please update 
    your links and bookmarks.</p>
  </body> 
</html>

Tests

Procedure
  1. Find 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 (representing seconds) greater than 0.

Expected Results
  • If step 2 is true then this failure condition applies and content fails these success criteria.


F42: Failure of SC 1.3.1 due to using scripting events to emulate links

Applicability

HTML 4.01 and XHTML 1.x with Scripting.

This failure relates to:

Description

This failure occurs when JavaScript event handlers are attached to elements to ''emulate 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 not be recognized as interactive controls by assistive technology, or 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.

The <a href> and <area> elements are intended to mark up links.

Attaching event handlers to elements that are not normally interactive, such as span and div, can be quite 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.

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.

<span onclick="this.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.

   src="go.gif" 
   alt="go to the new page" 
   onclick="this.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.

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:

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

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:

<div id="linklike">
View the results of the survey.
</div>

Resources

No resources available for this technique.

Tests

Procedure
  1. Check whether there are JavaScript event handlers on an element that emulates a link.

  2. Check whether the programmatically determined role of the element is link.

Expected Results
  • If check #1 is true and check #2 is false, then this failure condition applies and content fails the success criterion.


F43: Failure of SC 1.3.1 due to using structural markup in a way that does not represent relationships in the content

Applicability

(X)HTML

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.

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.

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

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

<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
<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 each element's semantic meaning is appropriate for the content of the element.

Expected Results
  • If check #1 is false, then this failure condition applies and the content fails the success criterion.


F44: Failure of SC 2.4.4 due to using tabindex to create a tab order that does not follow relationships and sequences in the content

Applicability

(X)HTML

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:

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

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 SC 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables

Applicability

(X)HTML

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 table element 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 [LC-679]

Assistive technologies use the structure of an HTML 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. [LC-1407] 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.

 <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 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 SC 2.2.2 due to using the blink element

Applicability

HTML and XHTML.

This failure relates to:

User Agent and Assistive Technology Support Notes

The blink element is not supported by Internet Explorer 6 on Windows. It is supported in Netscape/Mozilla family of user agents and Opera on Windows. [LC-770]

Description

The blink element, while not part of the official HTML 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.

<p>My Great Product <blink>Sale! $44,995!</blink></p>

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 SC 1.3.1 due to using the pre element to markup tabular information

Applicability

HTML 4.01, XHTML 1.x

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
 <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
 <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 SC 1.3.2 due to using an HTML layout table that does not make sense when linearized [LC-674]

Applicability

HTML, XHTML 1.x

This failure relates to:

User Agent and Assistive Technology Support Notes

Early screen readers literally read Web content from the screen, which lead to problems when tables were used for layout where one table cell was meant to be read in its entirety before reading the next table cell. Today's screen readers work with the underlying markup, which means that they do read a table cell in its entirety before moving on to the next cell, but layout tables may still inadvertently introduce problems with the natural reading order of the content.

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. [LC-1407]

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.

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

<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 SC 2.2.2 due to a script that causes a blink effect without a mechanism to stop the blinking at 3 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 3 seconds or earlier. See SCR22: Using scripts to control blinking and stop it in three seconds or less (SCRIPT) 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 three seconds.

...
<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 3 seconds or less.

Expected Results

If #1 is false, then the content fails the success criterion.


F52: Failure of SC 3.2.1 due to opening a new window as soon as a new page is loaded without prior warning

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 as soon as a page is loaded. Unless instructions that describe the behavior are provided before the request to open the new page is made, opening a new window as soon as a new page is loaded is a failure condition for this success criterion.

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.

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.

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

Expected Results
  • If step 2 is true, then this failure condition applies and content fails the success criterion.


F54: Failure of SC 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 SC 2.1.1 and 3.2.1 due to using script to remove focus when focus is received [LC-1130]

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. While this is done to remove an undesired visual focus indicator, it removes the keyboard focus completely. This typically means the content can only be accessed by a pointer device, such as a mouse.

Examples

Failure Example 1
<input type="submit" onFocus="this.blur();"> 
Failure Example 2
<a onFocus="this.blur()" href="Page.html"><img src="myImage.gif"></a> 
Failure Example 3
<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 SC 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

The Refresh header is not defined in HTTP/1.1 or HTTP/1.0, but it is widely supported by browsers (tested in Firefox 1.0 and IE 6 on Windows).

Description

Server-side scripting languages allow developers to set the non-standard HTTP header "Refresh" with a time-out (in seconds) and a URL 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 URL 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).

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.

 <% @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 SC 4.1.2 due to using script to make div or span a user interface control in HTML

Applicability

HTML and scripting

User Agent and Assistive Technology Support Notes

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.

See the resources section below for links to specifications which describe mechanisms to provide the necessary role and state information to create fully accessible user interface controls.

Examples

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

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 source code for elements which have event handlers assigned within the markup or via scripting.

  2. If those elements are acting as user interface controls, check that the role of the control is defined.

Expected Results

If check #2 is false and the created user interface control does not have role information, this failure condition applies.


F60: Failure of SC 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.

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 SC 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 filling the user's entire viewport is automatically updated, and the content does not contain options for disabling this behavior.

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.

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. open the content

  2. leave the content open for 24 hours

  3. check if the content changed

  4. check if there are settings within the content to disable automatic changes

Expected Results
  1. If both 3 and 4 are true, then this failure condition applies and the content fails this success criterion.


F62: Failure of SC 1.3.1 due to insufficient information in DOM to determine specific relationships in XML

Applicability

Applies to the Document Object Model (DOM) for XML.

This failure relates to:

Description

The objective of this technique is to ensure that Web pages can be interpreted consistently by user agents, including assistive technology. If specific relationships in a Web page are ambiguous, different user agents, including assistive technologies, could present different information to their users. Users of assistive technology, for example, may have different information presented to them than users of other mainstream user agents. Some elements and attributes in markup languages are required to have unique values, and if this requirement is not honored, the result can be irregular or not uniquely resolvable content.

Examples

Failure Example 1
  • An id attribute value that is not unique.

  • An SVG document uses id attributes on title elements (for alternative text) in order to reuse in other locations in the document. However, one of the title elements has an id that is also used elsewhere in the document, so the document is ambiguous.

  • A DAISY document uses the imgref attribute on the caption element to link captions with images. However, imgref attribute value does not refer to the id attribute of the img element to which it belongs, so the user agent cannot find the caption for that image.

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. Check that all id values within the document (as defined by the schema) are unique.

  2. Check that elements or attributes that refer to unique identifiers inside the same document have a corresponding id value.

Note that for XML document types defined by a DTD, this refers to attributes of type ID, IDREF or IDREFS. For XML document types defined by a W3C XML Schema, this refers to elements or attributes of type ID, IDREF or IDREFS. (For compatibility, the types ID, IDREF and IDREFS should only be used on attributes, but using them for elements is possible, according to XML Schema Part 2: Datatypes Second Edition.) For other schema languages, check the corresponding mechanisms for specifying IDs and references to IDs.

Expected Results
  • If #1 or #2 is false, then this failure condition applies and the content fails the success criterion.


F63: Failure of SC 2.4.6 due to providing link context only in content that is not related to the link

Applicability

All technologies.

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 in the same sentence, paragraph, list item, or table cell as the link, 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 News Service

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 him 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: Links to Census Data

An genealogy site contains links to census data for different years. The heading describes the kind of information (U.S. Census Data) found at the link for each year. However, since assistive technology does not provide a reliable way to ask for the heading for a paragraph, the heading is not programmatically determined context for the links.

<h3>U.S. Census Data</h3>
<ul>
    <li><a href="MyURL/1950">1950</a></li>
    <li><a href="MyURL/1940">1940</a></li>
    <li><a href="MyURL/1930">1930</a></li>
    <li><a href="MyURL/1920">1920</a></li> 
    <li><a href="MyURL/1910">1910</a></li> 
       ...
</ul>
Failure Example 3: Downloading a Free Player

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 with Rhapsody.com</td>
   </tr>
   <tr>
       <td>
       <a href="http://www.mysite.com/download.htm">
       <img src="download.jpg" width="165" height="32" alt="Download now"></a>
       </td>
   </tr>
 </table>
Failure Example 4: Using a Definitions List

In HTML, definition lists provide a programmatic association between the term and its definition. So theoretically, a link provided in a definition could use the definition term as its context. However, support is particularly bad for definitions lists, and there would be no way for users of today's assistive technology to discover the context using a definition list alone. Definition lists are a useful mechanism for providing associative relationships, but at this moment in time could not be considered sufficient for Success Criterion 2.4.2.

<dl>
    <dt>Harry Potter and the Chamber of Secrets</dt>
    <dd>Story of a boy with magical powers who has to face Lord Voldemort.</dd>
    <dd><a href="potter.php?id=123">Buy now</a></dd>
    <dt>Harry Potter and the Goblet of Fire</dt>
    <dd>Harry finds himself selected as an underaged competitor in a dangerous multi-wizardry school competition.</dd>
    <dd><a href="potter.php?id=124">Buy now</a></dd>
    <dt>Harry Potter and the Prisoner of Azkaban</dt>
    <dd>
Something wicked this way comes. It's Harry's third year at Hogwarts; 
not only does he have a new "Defense Against the Dark Arts" teacher, 
but there is also trouble brewing. Convicted murderer Sirius Black has 
escaped the Wizards' Prison and is coming after Harry.
    </dd>
    <dd><a href="potter.php?id=125">Buy now</a></dd>
</dl>            

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. Locate content needed to understand how link text describes the purpose of the link.

  2. Check whether the content is contained in the same sentence, paragraph, list item, or table cell.

Expected Results
  • If check 2 is false, the content fails the success criterion.


F64: Failure of SC 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text [LC-1531]

Applicability

All technologies that support images.

This failure relates to:

Description

The objective of this technique is to describe how using text shown with a presentation that gives that text special meaning without also including the semantic markup is a failure. This includes text within the HTML or text within images.

Examples

Failure Example 1: Text styled with increased font size and weight used as headings

This is a failure because the text is styled to look like a header but is just a styled div element. A better solution would be to use a header element and style it as desired using CSS.

<style type="text/css">
 .sectionTitle {
        font-family:"Century Schoolbook", Times, serif;
        font-size:200%;
        font-weight:bolder;
 }
 </style>

 <div class="sectionTitle">Introduction</div>
 <p>This introduction provides detailed information about how to use this 
 ...
 </p>
Failure Example 2: Images of text used as Headers 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 eliminate the image and to enclose the text within a header element which has been styled using CSS.

<img src="Chapter1.gif" alt="Chapter One">
 
<p>Once upon a time in the land of the Web.....
</p>
Failure Example 3: The p element styled as a heading

This is a failure for similar reason to Example 1. The text is styled to look like a header but is just a styled p element. A better solution would be to use a header element and style is as desired using CSS.

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

Tests

Procedure
  1. Find any images of text on the page and any styled text which conveys information.

    1. Check that the images of text are not used to convey information which should be conveyed using markup.

    2. Check that in addition to styling, the proper semantic structure is used with the text to convey the information.

Expected Results
  • Checks 1.1 and 1.2 are true.


F65: Failure of SC 1.1.1 due to omitting the alt attribute on img elements, area elements, and input elements of type "image"

Applicability

Applies to HTML 4.x and XHTML 1.x.

This failure relates to:

Description

This describes a failure condition for text alternatives on images. If there is no alt attribute, then assistive technologies are not able to identify the image or to convey its purpose to the user.

Some Assistive Technology might attempt to compensate for the missing alt text 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. Some assistive technology may not read the file name if alt text is absent.

Examples

Example 1: Missing alt text

In the code example below, the person using a screen reader would not know the purpose of the image.

<img src="../images/animal.jpg" />

Resources

No resources available for this technique.

Tests

Procedure
  1. identify any img, area and input elements of type "image"

  2. check that the alt attribute for these elements exists.

Expected Results
  • If check #2 is false, this failure condition applies and content fails the success criterion.


F66: Failure of SC 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

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

<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

<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 SC 1.1.1 due to providing long description 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 SC 1.3.1 and 4.1.2 due to the association of label and user interface controls not being programmatically determinable

Applicability

HTML and XHTML controls that use visible labels

This failure relates to:

Description

This failure describes a problem that occurs when no label element is used to explicitly associate a form control with a label where the visual design uses a label.

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). [LC-675]

  • 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

Failure Example 1:

The following example demonstrates a form that visually presents labels for form controls, but does 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>

Tests

Procedure

For all input elements of type radio, checkbox, text, file or password, for all textareas, and for all select elements in the Web page:

  1. Check that the visual design uses a text label that identifies the purpose of the control

  2. Check that a label element associates the text with the input element

Expected Results
  • If check #1 is true and check #2 is false, then this failure condition applies and the content fails these success criteria.


F69: Failure of SC 1.4.4 and 1.4.7 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured

Applicability

(X)HTML, 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

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.

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

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

The following code fails because the opening tag is missing an angle bracket, and the intended boundary of the tag is unclear.

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

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

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

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

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

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

ϲоο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.

&#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 SC 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 SC 1.1.1. Note this failure example does in fact cause this page to fail, but you may skip over the example.

<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 SC 1.4.1 due to creating links that are not visually evident without color vision

Applicability

Any technology.

This failure relates to:

Description

This failure helps ensure that people who cannot perceive color can identify links. Link underlines or some other non-color visual distinction are required. 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 for such links would be a failure because there would be no other visual indication (besides color) that it is a link.

Note 1: 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 2: 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.

<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 clue is only provided on hover (as in the example above), it would still fail.

(none currently listed)

Tests

Procedure
  1. Check that each link within text that is part of a sentence or paragraph (or other area where they could be mistaken as non-linked text) in the page is underlined or otherwise visually identifiable (i.e. bolded, italicized) as a link without relying on on color.

Expected Results
  • If check #1 is false, then this failure condition applies and the content fails this success criterion.


F74: Failure of SC1.2.1 and 1.2.7 due to not labeling a multimedia alternative to text as an alternative

Applicability

Pages that provide multimedia alternatives to text.

This failure relates to:

Description

The objective of this failure is to avoid situations in which multimedia alternatives are not labeled with the text for which they are alternatives. Multimedia alternatives provide enhanced access to users for whom multimedia 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 multimedia know not to look for them.

Examples

Failure Example 1: Multimedia alternative 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 multimedia 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 multimedia 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 multimedia alternatives to text.

  2. Check that multimedia 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 SC 1.2.1 and 1.2.7 by providing multimedia without captions when the multimedia 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 multimedia 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. Multimedia alternatives provide enhanced access to users for whom multimedia is a more effective format than text. Since they are alternatives to text, they are 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 more than simply alternatives but are multimedia content in their own right. In this case they are subject to the full requirements of Success Criterion 1.2.1 to provide captions and to Success Criterion 1.2.2 and 1.2.3.

Examples

(none currently listed)

Tests

Procedure
  1. Check for captions on multimedia alternatives.

  2. Check that the multimedia alternative does not provide more information than is presented on the page in text.

    Note: Multimedia 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.


2. 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 than default time limit, the script can provide a form (for example) allowing the user to enter a larger default time limit. Making this available as a preference setting allows users to indicate their requirements in advance. If warning the user a time limit is about to expire (see SCR16: Providing a script that warns the user a time limit is about to expire (SCRIPT) ), this form can be made available from the warning dialog.

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

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.


SCR14: Using scripts to make nonessential alerts optional

Applicability

Scripting technologies which use scripting alerts for non-emergency communication.

This technique relates to:

User Agent and Assistive Technology Support Notes

This technique was tested successfully with JAWS 6.2

This technique was tested successfully with WindowEyes 5.5

This technique was tested successfully with HomePage Reader 3.04

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

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

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

Here is a 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.


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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<url>http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</title>">
<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.


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

The following script will check that a valid date has been entered in the form control.

<label for="date">Date:</label>
<input type="text" name="date" id="date" 
onchange="if(isNaN(Date.parse(this.value))) 
<pre>alert('This control is not a valid date. 
Please re-enter the value.');" /></pre>

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


SCR19: Using an onchange event on a select element without causing a change of context

Applicability

(X)HTML with support for scripting. This technique uses the try/catch construct of JavaScript 1.4.

User Agent and Assistive Technology Support Notes

This technique has been tested on Windows XP using JAWS 7.0 and WindowEyes 5.5 with both Firefox 1.5 and IE 6. This also works with Home Page Reader 3.04. Note that JavaScript must be enabled in the browser.

This technique relates to:

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.

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


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 SC 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'). The 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 user agents process this event when the control 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. It is included here for completeness since non-HTML user agents do have this issue.

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.

<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 an image for which 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.

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

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


SCR21: Using functions of the Document Object Model (DOM) to add content to a page

Applicability

ECMAScript used inside HTML 4.x or XHTML 1.x

This technique relates to:

User Agent and Assistive Technology Support Notes

This example was successfully tested on Windows XP with IE 6 and Firefox 1.5.0.1 using both JAWS 7 and WindowEyes 5.5. This technique will not work with Home Page Reader. Note that when adding new content onto a page, the screen readers may not automatically speak the new content. In order to insure that new content is spoken, set focus to the new element or make certain that it is added below the current location and will be encountered as the user continues to traverse the page.

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 and validation will occur on the server.

 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.

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;
   }
 }
 // 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.

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

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

Note that the sample form will not submit. This example only demonstrates the creation of error messages when client side validation fails.

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.


SCR22: Using scripts to control blinking and stop it in three 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 three 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 three 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 three seconds.

Examples

Example 1

This example uses JavaScript to control blinking of some (X)HTML 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 three seconds.

...
<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 2700 ms (less than three seconds)
for(var i=900; i < 2700; i=i+900)
{
	setTimeout("hide()",i);
	setTimeout("show()",i+450);
}
-->
</script>
...

Tests

Procedure

For each instance of blinking content:

  1. Start a timer for 3 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.


SCR24: Using script to open a new window 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.

<script type="text/javascript" src="popup.js"></script>
…
<a href="help.html" id="newwin">Show Help</a

Script:

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

Expected Results
  • #2 is true.


SCR25: Using Dynamic Web Content Accessibility to programmatically identify form fields as required

Applicability

HTML and XHTML with scripting and Dynamic Web Content Accessibility.

Editorial Note: This technique will be applicable when Dynamic Web Content Accessibility specifications reach W3C recommendation status.

This technique relates to:

User Agent and Assistive Technology Support Notes

As of October, 2006, Dynamic Web Content Accessibility is fully supported in Firefox 1.5 or later on Windows and Window-Eyes version 5.5 or later. Support in other user agents and assistive technologies is in progress. Since this is not yet supported in all technologies, it is important to also use other sufficient techniques to mark a field as required. This particular technique relies on updates made to Firefox 2.0 to allow the use of the required attribute by itself without also defining a role for the element.

Description

The purpose of this technique is to demonstrate how to use Dynamic Web Content Accessibility to programmatically identify form components for which user input or selection are required. Dynamic Web Content Accessibility techniques provide the ability to add additional information about elements which can be programmatically determined. The user agent can provide this additional information to assistive technology for presentation to the user.

Examples

Example 1

This example uses scripting to add the required state to a form element. In user agents which support namepaces, the required state is assigned using the setAttributeNS() application programming interface (API). For other user agents the required state is assigned using the setAttribute() API and the namespace is simulated by adding a static text string to the front of the required attribute.

In the example below an array variable, requiredIds, is created with the ids of the elements which need to marked as required. The setRequired() function is called from the onload event of window object.

The setRequired() function loops through all of the ids provided, retrieves the element and assigns the required state of true using the setAttrNS() function.

The setAttrNS() function will call the setAttributeNS() API when it is available to set the required attribute. It uses the appropriate namespace URI, "http://www.w3.org/2005/07/aaa", for the Dynamic Web Content Accessibility States and Properties Module. If the setAttributeNS() API is not available in the user agent, a static, simulated namespace of, "aaa:" is added to the required attribute name and it is set using the setAttribute() API.

When this page is accessed using Firefox 2.0 or later or Window-Eyes 5.5 or later, Window-Eyes will speak "required" when reading the label for the input fields.

<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 required role 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]);
 			setAttrNS(field, "required", "true");
 		}
 	}
 }
 
 // method to set the attribute values based on the capability of the browser.  
 // Use setAttributeNS if it is available,
 // otherwise append a namespace indicator string to the attribute and set its value.
 function setAttrNS(elemObj, theAttr, theValue){
 	if (typeof document.documentElement.setAttributeNS != 'undefined') {
 		elemObj.setAttributeNS("http://www.w3.org/2005/07/aaa", theAttr, theValue);
 	}else{
 		elemObj.setAttribute("aaa:" + theAttr, theValue);
 	}
 }
 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.

Editorial Note: These URIs will need to be updated to the public drafts when they become available.

(none currently listed)

Tests

Procedure
  1. Load the page using an user agent and/or assistive technology that supports Dynamic Web Content Accessibility.

  2. Navigate to each required form element and verify that "required" is spoken.

Expected Results
  • Check #2 is true


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:

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

 .item1 {
   left: 0em;
   margin: 0px;
   position: absolute;
   top: 7em;
 }
 .item2 {
   left: 0em;
   margin: 0px;
   position: absolute;
   top: 8em;
 }
 .item3 {
   left: 0em;
   margin: 0px;
   position: absolute;
   top: 9em;
 }
 .item4 {
   left: 14em;
   margin: 0px;
   position: absolute;
   top: 7em;
 }
 .item5 {
   left: 14em;
   margin: 0px;
   position: absolute;
   top: 8em;
 }
 .menu1 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 0em;
   margin: 0px;
   position: absolute;
   top: 3em;
 }
 .menu2 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 10em;
   margin: 0px;
   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.

Resources

Resources are for information purposes only, no endorsement implied.

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.


C7: Using CSS to hide a portion of the link text [LC-497]

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

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.

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

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

No resources available for this technique.

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.


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:

h2
{
	letter-spacing: 1em;
}

So for the markup:

<h2>Museum</h2>

the rendered result might look something like:

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.


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.

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

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.

…
<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">
   <p class="cite"><a href="http://example.com/">anonymous coward</a> from Elbonia</p>
  </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.


C12: Using percent for font sizes

Applicability

CSS

This technique relates to:

User Agent and Assistive Technology Support Notes

When font size is specified in any absolute units of measurement, such as points or pixels, the Text Size menu commands in Internet Explorer 7 and earlier do not resize the text.

When High Contrast Mode has been set from the Accessibility Control Panel on Windows, IE6 increases the size of the page text as if a percentage change had been set for the outermost window via CSS. Standard CSS layout behavior causes relative scaling to be multiplied, so the scaling of text within elements will be different in subtle ways. Firefox and IE7 do not change the scaling of the content based on the system settings in a way that affects CSS layout, so this effect does not occur in those browsers.

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.

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. Examine all CSS properties that define font size for each rule set.

  2. Check that the value is a percentage.

Expected Results
  • Check #2 is true


C13: Using named font sizes

Applicability

CSS

This technique relates to:

User Agent and Assistive Technology Support Notes

When font size is given in absolute units of measurement, such as points or pixels, the Text Size menu commands in Internet Explorer 7 and earlier do not resize the text.

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.

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. Examine all CSS properties that define font size of the CSS rule set.

  2. Check that the value is one of xx-small, xx-small, x-small, small, medium, large, x-large, xx-large, xsmaller, or larger.

Expected Results
  • Check #2 is true


C14: Using em units for font sizes

Applicability

CSS

This technique relates to:

User Agent and Assistive Technology Support Notes

In Internet Explorer 6, using ems for font sizes will cause the text to grow more than using % or named font sizes. So, text-size/largest, might cause the text to grow more than 200% and have clipping problems.

When font size is given in absolute units of measurement, such as points or pixels, the Text Size menu commands in Internet Explorer 7 and earlier do not resize the text.

Internet Explorer 7 only changes the text size when the CSS is defined in a style element, keyed off an element as in the examples. When using inline style with the "style" attribute, the text size change is not supported.

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.

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. Examine all CSS properties that define font size for each rule set.

  2. Check that the value is expressed in em units.

Expected Results
  • Check #2 is true


4. 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. [LC-701]

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.

Note: When possible, a visible link is preferred over a hidden link. Visible links are necessary for those navigating with a keyboard including switch users, those using techniques that generate keyboard strokes slowly, screen magnification software users, screen reader users working with sighted colleagues, keyboard only users and those navigating using voice recognition software. [LC-567] [LC-1292]

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

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 activating the link moves the focus to the main content.

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

Expected Results
  • All checks above are true.


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

Applicability

Any technology that includes moving or scrolling content.

This technique relates to:

Description

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

Examples

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

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

Tests

Procedure

On a page with moving or scrolling content,

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

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

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

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

Expected Results
  • #2 and #4 are true.


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

Applicability

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

This technique relates to:

Description

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

Examples

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

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

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

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure
  1. Determine if any timed interactions are present.

Expected Results
  • #1 is false.


G8: Creating an extended audio description for the multimedia content

Applicability

Any audio multimedia technology

This technique relates to:

Description

The objective of this technique is to all additional audio description to be inserted into a multimedia presentation when there is not enough time in the gaps int the dialog. This is done by simply freezing the image so that additional audio description of the video can be played. When the description is finished, the multimedia continues.

This technique provides people who are blind or who otherwise would miss information presented visually with additional audio description beyond that which can be provided by standard audio description. Often the gaps in dialog are insufficient to allow enough audio description to be inserted to cover all the important visual information being presented. This technique freezes the multimedia presentation to allow additional audio description to be played. The multimedia presentation is then resumed.

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

Example 1: 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. Play multimedia with extended audio description enabled

  2. Check to see if multimedia freezes from time to time to allow audio description to convey important information regarding visual content

Expected Results
  • #2 is true


G9: Creating captions for live multimedia

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 multimedia broadcasts. It is more difficult to create accurate real-time captions because there is little time to correct mistakes or to listen a second time or consult someone to be sure the words are accurately reproduced. It is also harder to simplify or paraphrase information if it is flowing too quickly.

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

Examples

Example 1

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

Resources

Resources are for information purposes only, no endorsement implied.

(none)

Tests

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

Expected Results
  • #1 is true


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

Applicability

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

This technique relates to:

Description

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

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

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

Examples

Example 1

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

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

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure
  1. Render content using an accessible User Agent

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

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

  4. Change the values on the component

  5. Check that the Accessibility tool is alerted.

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


G11: Creating content that blinks for less than 3 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 three 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 three 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 three seconds.

Expected Results
  • #2 is true.


G13: Describing what will happen before a change to a form control is made

Applicability

Applies to content that includes forms.

User Agent and Assistive Technology Support Notes

(none listed)

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.

Examples

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

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

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

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

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

Expected Results
  • Check #2 is true.


G14: Ensuring that color-encoded information is also available in text

Applicability

All technologies that support color.

This technique relates to:

Description

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

Examples

Example 1: A color-coded schedule

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

Example 2: A color-coded schedule with icons

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

Example 3: A table showing the conference schedule

The schedule for sessions at a technology conference is organized into three tracks. The schedule for each day is shown in a data table with headers for Time, Title, and Track. 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.

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

Example 5: 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.

(none currently listed)

Tests

Procedure

For each item where color is used to convey information:

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

Expected Results
  • Check #1 is true.


G15: Ensuring 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 this technique 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.

Examples

  • An animation of a thunderstorm shows six flashes of lightning. The flashes are so fast that the general flash threshold is violated. 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.

(none currently listed)

Tests

Procedure
  1. Check to see if content violates the flash and/or red flash thresholds by either

    • visually checking that there are no more than 2 flashes of any kind in a row OR

    • using a tool that will check for General Flash or Red Flash thresholds automatically

Expected Results
  • Step 1 is false


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

Applicability

Any technology that produces visual output.

This technique relates to:

Description

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

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

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

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

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

Examples

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

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

Resources

(none currently listed)

Tests

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

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

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

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

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

      and RsRGB, GsRGB, and BsRGB are defined as:

      • RsRGB = R8bit/255

      • GsRGB = G8bit/255

      • BsRGB = B8bit/255

      The "^" character is the exponentiation operator.

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

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

  3. Calculate the contrast ratio using the following formula.

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

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

Expected Results
  • #4 is true


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

Applicability

Any technology that produces visual output.

This technique relates to:

Description

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

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

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

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

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

Examples

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

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

    See also the contrast samples in related resources.

Resources

(none currently listed)

Tests

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

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

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

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

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

      and RsRGB, GsRGB, and BsRGB are defined as:

      • RsRGB = R8bit/255

      • GsRGB = G8bit/255

      • BsRGB = B8bit/255

      The "^" character is the exponentiation operator.

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

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

  3. Calculate the contrast ratio using the following formula.

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

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

Expected Results

The contrast ratio is equal to or greater than 5:1

  • #4 is true.


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

Applicability

Applies to any technology

This technique relates to:

Description

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

Note 1: This technique is stricter than the Level 1 success criterion but is easier to test and can be used to meet the Level 1 success criterion because all failure thresholds in the Level 1 success criterion 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 criterion, 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.


G20: Ensuring that the only way to get to an inaccessible version is from a link from the accessible version

Applicability

Content where a nonconforming and conforming version are provided as alternatives to each other.

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 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. The conformance criterion requires that alternate versions are available "from the nonconforming content or its URI." It is the intent of that wording that it can be sufficient to provide a link to conforming content from the nonconforming content (see G136: Providing a link at the beginning of the nonconforming content that points to an alternate version that does meet WCAG 2.0 at the level claimed ).

In order for the link to alternate content to fulfill its intent, the link needs to conform to WCAG requirements, that is, be accessible. In some technologies, even though the content as a whole may not conform, a link can be provided that does conform. In other technologies, however, it is not even possible to provide a link to alternate content within that technology that conforms. Users may be unable to find the alternate content if the only pointer is in an inaccessible technology.

This technique describes how to provide alternate content in such a situation. In this technique, the WCAG conforming version contains a link to the nonconforming version. This way, users access the conforming content, and only access the nonconforming content if they wish, via a link. In order to ensure users do not accidentally get "stuck" in inaccessible content, the nonconforming version is excluded from search engine results, site maps (unless the conforming version is also included), etc.

Examples

  • An online physics course uses a proprietary modeling language to provide interactive demonstrations of physical processes. Because the technology is new and not widely used, it does not provide accessibility features supported by user agents. Students in the course access a WCAG conforming description of the processes and models, but that is not interactive. A link is provided to the nonconforming enhanced interactive version. Students may choose to access the interactive version, but those who do not are still able to learn about the process.

Tests

Procedure

Where WCAG conforming alternatives are provided for nonconforming content:

  1. Check that there is a link to the nonconforming content from the conforming content.

  2. Check that the nonconforming content does not appear in search engine results, site maps, and the site's regular navigation.

Expected Results
  • #1 and #2 are true.


G21: Ensuring that users are not trapped in content

Applicability

All technologies which support interactive operation.

This technique relates to:

Description

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

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

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

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

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

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.

  • Content that is not accessibility-supported contains a link to information about how to move focus back to the accessibility-supported content via the keyboard.

  • The help information available from the content that is not accessibility supported technologies 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. [LC-1139]

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure
  1. tab through content from start to finish.

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

Expected Results
  • #2 is false


G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence [LC-497]

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 sentence context. The sentence enclosing the link provides context for an otherwise unclear link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the URI of the destination is generally not sufficiently descriptive.

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

Examples

Example 1:

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

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

Example 2:

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

Example 3:

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

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

Resources

No resources available for this technique.

Tests

Procedure

For each link in the content that uses this technique:

  1. Check that the link is part of a sentence

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

Expected Results
  • The above checks are true.


[LC-594]

G54: Including a sign language interpreter in the video stream

Applicability

Applies to all technologies that present multimedia 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 multimedia material.

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

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

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

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

Examples

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

Resources

Resources are for information purposes only, no endorsement implied.

  • Guidelines for the Production of Signing Books

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

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

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

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

(none currently listed)

Tests

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

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

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

Expected Results
  • #2 and #3 are true


G55: Linking to definitions

Applicability

All technologies that include links.

This technique relates to:

Description

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

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

Examples

Example 1

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

Example 2

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

Example 3

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

Example 4

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

Example 5

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

Example 6

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

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

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

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

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

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

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

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


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

Applicability

Any technology

This technique relates to:

Description

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

Examples

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

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

The following is a link to an mp3 file. It is an audio track that has been mixed so that there is sufficient contrast between the foreground and background. When it is listend to, the foreground is heard clearly above the background.

Example of good audio contrast (MP3)

Here is a transcript of the speaking voice on this good contrast example:

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

Example 3 (failure): Insufficient Audio Contrast between a narrator and background music

The the following is a link to an MP3 audio example of insufficient contrast between a narrator and background music:

Example of bad audio contrast (MP3)

Here is the transcript of the voice on the insufficient contrast example:

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

Example 4: Audio track that has been mixed with sufficient contrast between the foreground and background as seen in a popular audio editing program.

After the foreground and the background tracks have been mixed to one single file, that single file can be opened in any popular audio editing software package and viewed in an editing window that renders a visual representation of the audio content. This can be used to help determine the contrast level between the foreground and background of an audio track.

The graphic below (figure 1) is a visual representation of the mp3 audio file above that has sufficient contrast between the foreground and the background. Both the foreground and the background are in the selected portion of the wave file.

Figure 1
Figure 1: visual representation of sufficient contrast both foreground and background are selected.

The selected region of the wave file in figure 1 above which contains both the foreground and background sound is a very large wave. The selected region of Figure 2 below which contains only background sound is a much smaller wave.

Figure 2