[contents]
This document is also available in these non-normative formats:
Copyright © 2007 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
"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.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
This is a Public Working Draft of "Techniques for WCAG 2.0." These techniques are produced by the Web Content Accessibility Guidelines Working Group to provide guidance about how to conform to the Web Content Accessibility Guidelines 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.
The Working Group encourages review and comments on this document, in particular:
Is the format of the techniques clear?
Is the information useful?
Is the relationship to the normative document (WCAG 2.0) clear?
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.
This document has been produced as part of the W3C Web Accessibility Initiative (WAI). The goals of the WCAG Working Group are discussed in the WCAG Working Group charter. The WCAG Working Group is part of the WAI Technical Activity.
Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. The group does not expect this document to become a W3C Recommendation. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
All technologies that support CSS.
This failure relates to:
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]
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.
No resources available for this technique.
For content which uses CSS for positioning:
Remove the style information from the document or turn off use of style sheets in the user agent.
Check that the reading order of the content is correct and the meaning of the content is preserved.
If step #2 is false, then this failure condition applies and the content fails this success criterion.
All technologies that support CSS.
This failure relates to:
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.
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> "I said, <span class="yell">NO</span>, not before dinner!", was the exasperated response when Timmy asked his mother for the fourth time for an ice cream cone. </p>
No resources available for this technique.
Find visually styled elements on the page that convey information.
Check that the appropriate semantics of the technology are used and that the information is not conveyed only by variations in presentation through CSS.
If step #2 is false, then this failure condition applies and the content fails this success criterion.
All technologies that support CSS.
This failure relates to:
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.
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>
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>
No resources available for this technique.
Examine all images added to the content via CSS.
Check that the images do not convey important information.
Step #2. If it is true then this failure condition applies and content fails the success criterion.
Cascading Style Sheets.
This failure relates to:
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).
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.
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 are for information purposes only, no endorsement implied.
Examine inline styles, internal stylesheets, and external
stylesheets for the text-decoration property with a
value of "blink".
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.
If step #1 and step #2 are true, the content fails the success criterion.
Technologies that support blinking content within an object, applet, or a plug-in.
This failure relates to:
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.
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.
For each page that has blinking content in a plugin or applet:
Determine if the content continues to blink for longer than 3 seconds.
Determine if there is a means to pause the blinking content.
If step #1 is true and step #2 is false, the content fails the success criterion.
Applies to all technologies.
This failure relates to:
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 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
No resources available for this technique.
(none currently listed)
View the material with captioning turned on.
Check that all dialog is accompanied by a caption.
Check that all important sounds are captioned.
Step #2 and step #3 are true.
General.
This failure relates to:
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.
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 are for information purposes only, no endorsement implied.
Find all form elements.
Go through them in order.
Check if the form submits when you move from one field to the next.
Check if moving from one field to the next launches any new windows.
Check if moving from one filed to the next navigates to another screen.
If step #3, step #4, or step #5 is true, then this failure condition applies and the content fails the success criterion.
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:
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.
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.
No resources available for this technique.
Using a keyboard, navigate through the content.
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.
If the keyboard focus becomes "trapped," then this failure condition applies and content fails the success criterion and conformance requirement.
Sites that require user login to submit input and that terminate the session after a some period of inactivity.
This failure relates to:
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.
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.
On a site where authentication is required, user input is collected, and which ends the user's session after a known period of inactivity:
Provide user input as required but allow the session to time out, then submit the form.
When requested, re-authenticate with the server.
Determine if the function is performed using the previously submitted data.
If step #3 is false, the site fails the success criterion.
All technologies.
This failure relates to:
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.
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.
No resources available for this technique.
For all images in the content that convey information by way of color :
Check that the information conveyed by color is not included in the text alternative for the image.
If step #1 is true, then this failure condition applies and content fails the success criterion.
All technologies.
This failure relates to:
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.
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.
No resources available for this technique.
Examine the Web page for textual references to content within the Web page.
Check that the references do not rely on only the shape or location of the content.
If step #2 is false, then this failure condition applies and the content fails this success criterion.
Applies to all technologies that support an accessibility API.
This failure relates to:
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.
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 are for information purposes only, no endorsement implied.
(none currently listed)
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.
If step #1 is false, then this failure condition applies and the content fails this success criterion
All technologies that support visual movement or scrolling.
This failure relates to:
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.
A page has a scrolling news ticker without a mechanism to pause it. Some users are unable to read the scrolling content.
On a page with moving or scrolling content,
Check that a mechanism is provided in the Web page or user agent to pause moving or scrolling content.
Use the pause mechanism to pause the moving or scrolling content.
Check that the moving or scrolling has stopped and does not restart by itself.
Check that a mechanism is provided in the Web page or user agent to restart the paused content.
Use the restart mechanism provided to restart the moving content.
Check that the movement or scrolling has resumed from the point where it was stopped.
If steps step #1, step #3, step #4, or step #6 are false, then the content fails the success criterion.
Applies to the Document Object Model (DOM) for HTML 4.01 and XHTML 1.x.
This failure relates to:
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).
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
No resources available for this technique.
(none currently listed)
Check for id and accesskey values which are not unique within the document.
Check that attribute values that have an idref value have a corresponding id value.
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.
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.
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.
Sites that provide alternative, WCAG conforming versions of nonconforming primary content.
This failure relates to:
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.
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.
Identify a nonconforming page that has an alternative conforming version.
Determine if the nonconforming page provides a link to the conforming version.
If step #2 is false, the content fails the success criterion.
Applies to all technologies.
This failure relates to:
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.
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.
No resources available for this technique.
(none currently listed)
Check each text alternative to see if it is describing content other than the currently-displayed non-text content.
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.
General
This failure relates to:
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.
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.
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.
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.
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]
No resources available for this technique.
Load the Web page.
Check if new (additional) windows open.
Find every actionable element, such as links and buttons, in the Web page.
Activate each element.
Check if activating the element opens a new window.
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.
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
Applies to all technologies except those for voice interaction.
This failure relates to:
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.
a site that plays continuous background music
a site with a narrator that lasts more than 3 seconds before stopping.
No resources available for this technique.
(none currently listed)
Check that there is a way in content to turn off any sound that plays automatically for more than three seconds.
If step #1 is not true then content fails Success Criterion 1.4.2
All technologies that allow user agents to control foreground and background colors through personal stylesheets or other means.
This failure relates to:
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]
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>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>
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>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>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 are for information purposes only, no endorsement implied.
(none currently listed)
Examine the code of the Web page.
Check to see if a foreground color is specified
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]
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.
All technologies.
This failure relates to:
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 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
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.
No resources available for this technique.
Check whether the title of each Web page identifies the contents or purpose of the Web page .
If step #1 is false, then this failure condition applies and the content fails this success criterion.
All technologies.
This failure relates to:
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]
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]
No resources available for this technique.
Examine the page for non-text marks that convey information.
Check whether there are other means to determine the information conveyed by the non-text marks.
If step #2 is false, then this failure condition applies and the content fails this success criterion.
Applies to all technologies.
This failure relates to:
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 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"
No resources available for this technique.
(none currently listed)
Check each text alternative to see if it is not actually a text alternative for the non-text content.
If step #1 is true then this failure condition applies and content fails the success criterion.
Applies to all technologies.
This failure relates to:
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.
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.
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.
No resources available for this technique.
(none currently listed)
In a set of Web pages, find components with the same function that are repeated in multiple Web pages.
For each component with the same function found in step #1, check that the naming is consistent.
If step #2 is false then this failure condition applies and content fails the success criterion.
All technologies.
This failure relates to:
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.
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>
can also be used to add white space, producing similar failures:
<h1>H E L L O</h1>
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>
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>
No resources available for this technique.
For each word that appears to have non-standard spacing between characters:
Check whether any words in the text of the content contain white space characters .
If step #1 is true, then this failure condition applies and the content fails this success criterion.
All technologies.
This failure relates to:
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.
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.
No resources available for this technique.
(none currently listed)
Examine the document for data or information presented in columnar format.
Check whether the columns are created using white space characters to lay out the information.
If step #2 is true, then this failure condition applies and the content fails these success criteria.
All technologies.
This failure relates to:
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]
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.
No resources available for this technique.
Examine the document for visually formatted tables.
Check whether the tables are created using white space characters to layout the tabular data.
If step #2 is true, then this failure condition applies and the content fails these success criteria.
HTML 4.x and XHTML 1.x.
This failure relates to:
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.
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>
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 are for information purposes only, no endorsement implied.
Enter data in all fields on page starting at top.
Enter data in last field and exit from it (tab out of it).
Check whether leaving the last field causes change of context.
If step #3 is true, then this failure condition applies and content fails the success criterion.
HTML 4.x and XHTML 1.x.
This failure relates to:
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.
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.
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>No resources available for this technique.
(none currently listed)
Find each form in a page.
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.
For each new window resulting from step 2, check if the user is warned in advance.
If step #3 is false, then this failure condition applies and content fails the success criterion.
Applies to HTML 4.x and XHTML 1.x.
This failure relates to:
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.
Failure Example 1: Decorative images that have no alt
attribute
No resources available for this technique.
(none currently listed)
Identify any img and applet elements
that are used for purely decorative content;
Check that the alt attribute for these elements
exists.
Check that the alt attribute for these elements is
null.
if step #2 or step #3 is false, this failure condition applies and content fails the success criterion.
Applies to HTML 4.x and XHTML 1.x.
This failure relates to:
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.
Failure Example 1: Decorative images that have no alt
attribute
No resources available for this technique.
(none currently listed)
Identify any img and applet elements
that are used for purely decorative content;
Check that the alt attribute for these elements
exists.
Check that the alt attribute for these elements is
null.
If step #2 or step #3 is false, this failure condition applies and content fails the success criterion.
All pages
This failure relates to:
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)
.
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 are for information purposes only, no endorsement implied.
View a page.
Check that the page does not redirect after a time-out.
#2 is true.
HTML 4.x and XHTML 1.x.
This failure relates to:
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.
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>
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> Find meta elements in the document.
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.
If step 2 is true then this failure condition applies and content fails these success criteria.
HTML 4.01 and XHTML 1.x with Scripting.
This failure relates to:
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.
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>
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'"
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>
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>
No resources available for this technique.
Check whether there are JavaScript event handlers on an element that emulates a link.
Check whether the programmatically determined role of the element is link.
If check #1 is true and check #2 is false, then this failure condition applies and content fails the success criterion.
(X)HTML
This failure relates to:
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.
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>
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>
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>
<fieldset> <legend>Bargain Corner</legend> <p>Buy today, and save 20%</p> </fieldset>
No resources available for this technique.
Check that each element's semantic meaning is appropriate for the content of the element.
If check #1 is false, then this failure condition applies and the content fails the success criterion.
(X)HTML
This failure relates to:
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.
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.
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 are for information purposes only, no endorsement implied.
HTML 4.01 Tabbing navigation
If tabindex is used, check that the tab order
specified by the tabindex attributes follows
relationships in the content.
If check #1 is false, then this failure condition applies and content fails the success criterion.
th elements,
caption elements, or non-empty summary attributes in
layout tables(X)HTML
This failure relates to:
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.
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>
No resources available for this technique.
Examine the source code of the HTML document for the
table element
If the table is used only to visually lay out elements within the content
Check that the table does not contain any th
elements.
Check that the table element does not
contain a non-empty summary attribute.
Check that the table element does not
contain a caption element.
If any check above is false, then this failure condition applies and the content fails the success criterion.
HTML and XHTML.
This failure relates to:
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]
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.
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>
Examine code for the presence of the blink
element.
If #1 is true, the content fails the success criterion.
pre element to markup
tabular informationHTML 4.01, XHTML 1.x
This failure relates to:
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.
<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>
<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>
No resources available for this technique.
Check to see if the pre element is used
For each occurrence of the pre element, check
whether the enclosed information is tabular.
If check #2 is true, then this failure condition applies and the content fails the success criterion.
HTML, XHTML 1.x
This failure relates to:
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.
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.
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
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.
No resources available for this technique.
Linearize the content in either of the following ways:
Present the content in source code order
Remove the table markup from around the content
Check that the linear reading order matches any meaningful sequence conveyed through presentation.
If check #2 is false, then this failure condition applies and the content fails this success criterion.
Technologies that support script-controlled blinking of content.
This failure relates to:
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.
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>
For each instance of blinking content:
Determine if the blinking stops in 3 seconds or less.
If #1 is false, then the content fails the success criterion.
Applies when scripting is used to open new windows.
This failure relates to:
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.
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.
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');
}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 are for information purposes only, no endorsement implied.
load a new page
check to see whether a new window has been opened as a result of loading the new page
If step 2 is true, then this failure condition applies and content fails the success criterion.
Technologies that have event handlers specific to pointing devices.
User Agent and Assistive Technology Support Notes
None listed.
This failure relates to:
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.
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 are for information purposes only, no endorsement implied.
Check to see whether pointing-device-specific event handlers are the only means to invoke scripting functions.
If any are found, then this failure condition applies and content fails the success criterion.
Applies to all content that supports script.
User Agent and Assistive Technology Support Notes
None listed.
This failure relates to:
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.
<input type="submit" onFocus="this.blur();">
<a onFocus="this.blur()" href="Page.html"><img src="myImage.gif"></a>
<a href="link.html" onfocus="if(this.blur)this.blur();">Link Phrase</a>
No resources available for this technique.
(none currently listed)
Use the keyboard to verify that you can get to all interactive elements using the keyboard.
Check that when focus is placed on each element, focus remains there until user moves it.
If #2 is false then this failure condition applies and content fails the success criterion.
Any server-side scripting language
Content does not meet the exceptions in the success criterion for permitted time limits.
This failure relates to:
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).
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}.
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>");
}
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 are for information purposes only, no endorsement implied.
Hypertext Transfer Protocol -- HTTP/1.0 (IETF Request for Comments 1945) (plain text)
Hypertext Transfer Protocol -- HTTP/1.1 (IETF Request for Comments 2616) (plain text)
An Exploration of Dynamic Documents by Netscape describes the nonstandard Refresh header that was introduced with Netscape Navigator 1.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.
If such a redirect is found then this failure condition applies and content fails the success criterion.
HTML and scripting
User Agent and Assistive Technology Support Notes
This failure relates to:
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.
The following example fails because it creates a checkbox using a span and an image.
<p>
<span onclick="toggleCheckbox('chkbox')">
<img src="unchecked.gif" id="chkbox" alt=""> Include Signature
</span>
</p> Here is the scripting code which changes the image source when the
span is clicked with the mouse.
var CHECKED = "check.gif";
var UNCHECKED = "unchecked.gif";
function toggleCheckbox(imgId) {
var theImg = document.getElementById(imgId);
if ( theImg.src.lastIndexOf(CHECKED)!= -1 ) {
theImg.src = UNCHECKED;
// additional code to implement unchecked action
}
else {
theImg.src = CHECKED;
// additional code to implement checked action
}
} A checkbox created in this manner will not work with assistive technology since there is no information that identifies it as a checkbox. In addition, this example is also not operable from the keyboard and would fail guideline 2.1.
Resources are for information purposes only, no endorsement implied.
Examine the source code for elements which have event handlers assigned within the markup or via scripting.
If those elements are acting as user interface controls, check that the role of the control is defined.
If check #2 is false and the created user interface control does not have role information, this failure condition applies.
General
This failure relates to:
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.
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.
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 are for information purposes only, no endorsement implied.
Find all text input form fields
Change the value in each form field
Check if new windows open
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.
If #3 is true and #4 is false then failure condition applies and the content fails this success criterion.
General
This failure relates to:
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.
A news site automatically refreshes itself to ensure that it has the newest headlines. There is no option to disable this behavior.
A slideshow fills the entire viewport and advances to the next slide automatically. There is no stop button.
Resources are for information purposes only, no endorsement implied.
(none currently listed)
open the content
leave the content open for 24 hours
check if the content changed
check if there are settings within the content to disable automatic changes
If both 3 and 4 are true, then this failure condition applies and the content fails this success criterion.
Applies to the Document Object Model (DOM) for XML.
This failure relates to:
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.
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 are for information purposes only, no endorsement implied.
(none currently listed)
Check that all id values within the document (as defined by the schema) are unique.
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.
If #1 or #2 is false, then this failure condition applies and the content fails the success criterion.
All technologies.
This failure relates to:
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.
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>
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>
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>
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>
No resources available for this technique.
(none currently listed)
Locate content needed to understand how link text describes the purpose of the link.
Check whether the content is contained in the same sentence, paragraph, list item, or table cell.
If check 2 is false, the content fails the success criterion.
All technologies that support images.
This failure relates to:
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.
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>
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>
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>
Find any images of text on the page and any styled text which conveys information.
Check that the images of text are not used to convey information which should be conveyed using markup.
Check that in addition to styling, the proper semantic structure is used with the text to convey the information.
Checks 1.1 and 1.2 are true.
Applies to HTML 4.x and XHTML 1.x.
This failure relates to:
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.
In the code example below, the person using a screen reader would not know the purpose of the image.
<img src="../images/animal.jpg" />
No resources available for this technique.
identify any img, area and input elements of type "image"
check that the alt attribute for these elements exists.
If check #2 is false, this failure condition applies and content fails the success criterion.
Applies to all technologies
This failure relates to:
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 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>
No resources available for this technique.
(none currently listed)
Check to see if a navigation mechanism is being used on more than one Web page.
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.
If #1 is true and #2 is false, then this failure condition applies and content fails the success criterion.
All technologies.
This failure relates to:
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.
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.
No resources available for this technique.
For all non-text content that requires a long description
Check that the long description serves the same purpose or presents the same information as the non-text content.
If step #1 is false, then this failure condition applies and the content fails this success criterion.
HTML and XHTML controls that use visible labels
This failure relates to:
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">)
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>
For all input elements of type radio, checkbox, text, file or password, for all textareas, and for all select elements in the Web page:
Check that the visual design uses a text label that identifies the purpose of the control
Check that a label element associates the text with the input element
If check #1 is true and check #2 is false, then this failure condition applies and the content fails these success criteria.
(X)HTML, CSS
This failure relates to:
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
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:
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:
(none currently listed)
Increase the text size of the content by 200%.
Check that no text is clipped, truncated, or obscured.
If check #2 is false, then the failure condition applies and the content fails these success criteria.
Markup languages: HTML, XHTML, and other SGML or XML-based technologies.
This failure relates to:
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.
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>
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>
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">
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">
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>
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)
Check the source code of pages implemented in markup languages.
Check whether any opening tags, closing tags or attributes are malformed.
If check #2 is true, then the failure condition applies and the content does not meet this success criterion.
Any technology.
This failure relates to:
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.
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
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.
ϲоοk
Working Example: "ϲоοk"
(none currently listed)
Check the characters or character entities used to represent text.
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.
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.
Any technology.
This failure relates to:
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.
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)
Access a page with ASCII art.
For each instance of ASCII art, check that it has a text alternative.
If check #2 is false, then this failure condition applies and the content fails this success criterion.
Any technology.
This failure relates to:
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.
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.
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)
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.
If check #1 is false, then this failure condition applies and the content fails this success criterion.
Pages that provide multimedia alternatives to text.
This failure relates to:
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.
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)
Check pages that provide multimedia alternatives to text.
Check that multimedia is clearly labeled with the text for which it is an alternative.
If check #2 is false, then this failure condition applies and the content fails these success criteria.
Any technology.
This failure relates to:
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.
(none currently listed)
Check for captions on multimedia alternatives.
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.
If check #2 is false, then this failure condition applies and the content fails these success criteria.
Time limits that are controlled by client-side scripting.
This technique relates to:
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.
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 are for information purposes only, no endorsement implied.
On a Web page that uses scripts to enforce a time limit, wait until the time limit has expired.
Determine if an option was provided to extend the time limit.
#2 is true and more time is provided to complete the interaction.
Scripting technologies which use scripting alerts for non-emergency communication.
This technique relates to:
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
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.
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.
For a Web page that supports non-emergency interruptions using a JavaScript alert:
Load the Web page and verify that no non-emergency alerts are displayed.
Verify there is a mechanism to activate the non-emergency alerts.
Activate the non-emergency alerts and verify that the alerts are displayed.
For a Web page that supports non-emergency interruptions using a JavaScript alert, checks 1, 2, and 3 above are true.
Time limits exist that are controlled by script.
This technique relates to:
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.
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>
On a Web page that has a time limit controlled by a script:
load the page and start a timer that is 20 seconds less than the time limit.
when the timer expires, check that a confirmation dialog is displayed warning of the impending time limit.
#2 is true.
Content that validates user input.
This technique relates to:
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.
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>
For form fields that require specific input:
enter invalid data
determine if an alert describing the error is provided.
#2 is true
(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:
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.
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 are for information purposes only, no endorsement implied.
(none currently listed)
Navigate to the trigger select element (in this example, the one to select continents) and change the value of the select.
Navigate to the select element that is updated by the trigger (in this example, the one to select countries).
Check that the matching option values are displayed in the other select element.
Navigate to the trigger select element, navigate through the options but do not change the value.
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.
Step #3 and #5 are true.
Applies to all content that uses Script to implement functionality.
This technique relates to:
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.
| 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).
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>
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 are for information purposes only, no endorsement implied.
Find all interactive functionality
Check that all interactive functionality can be accessed using the keyboard alone
#2 is true
ECMAScript used inside HTML 4.x or XHTML 1.x
This technique relates to:
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.
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.
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 are for information purposes only, no endorsement implied.
HTML 4.01 The Document Object Model, More methods from Webreference.com
(none currently listed)
For pages that dynamically create new content:
Examine the source code and check that the new content is not created using document.write(), innerHTML, outerHTML, innerText or outerText.
Check #1 is true.
Technologies that support script-controlled blinking of content.
This technique relates to:
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.
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>
...
For each instance of blinking content:
Start a timer for 3 seconds at the start of the blink effect.
When the timer expires, determine if the blinking has stopped.
For each instance of blinking content, #2 is true.
HTML 4.01 and XHTML 1.0
This technique relates to:
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.
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 are for information purposes only, no endorsement implied.
Activate each link in the document to check if it opens a new window.
For each link that opens a new window, check that it uses script.
#2 is true.
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:
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.
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.
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 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)
Load the page using an user agent and/or assistive technology that supports Dynamic Web Content Accessibility.
Navigate to each required form element and verify that "required" is spoken.
Check #2 is true
All technologies that support CSS
This technique relates to:
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.
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 are for information purposes only, no endorsement implied.
For content which uses CSS for positioning
Remove the style information from the document or turn off use of style sheets in the user agent.
Check that the structural relations and the meaning of the content are preserved.
Check #2 is true.
All technologies that support CSS .
This technique relates to:
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.
The following examples use the CSS selector and rule set below:
a span {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
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>
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>
No resources available for this technique.
For each anchor element using this technique:
Check that an element has been defined that confines its display to a pixel and positions text outside the display with overflow hidden
Check that the element of that class is included in the content of the anchor
Check that the combined content of the anchor describes the purpose of the link
All checks above are true.
All technologies that support CSS.
This technique relates to:
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.
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 are for information purposes only, no endorsement implied.
For each word that appears to have non-standard spacing between characters:
Check whether the CSS letter-spacing property was used to control spacing.
Check #1 is true.
Any technology that can use CSS to include images.
This technique relates to:
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.
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>
… 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;
} 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 are for information purposes only, no endorsement implied.
The HTML 4.01 specification states that the
background attribute of the body
element is deprecated
Check for the presence of decorative images
Check that they are included with CSS
If #1 is true, then #2 is true.
CSS
This technique relates to:
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.
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.
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 are for information purposes only, no endorsement implied.
Examine all CSS properties that define font size for each rule set.
Check that the value is a percentage.
Check #2 is true
CSS
This technique relates to:
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.
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.
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 are for information purposes only, no endorsement implied.
Examine all CSS properties that define font size of the CSS rule set.
Check that the value is one of xx-small, xx-small, x-small, small, medium, large, x-large, xx-large, xsmaller, or larger.
Check #2 is true
CSS
This technique relates to:
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.
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.
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 are for information purposes only, no endorsement implied.
Examine all CSS properties that define font size for each rule set.
Check that the value is expressed in em units.
Check #2 is true
All technologies that contain links
This technique relates to:
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]
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.
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 are for information purposes only, no endorsement implied.
(none currently listed)
Check that a link is the first focusable control on the Web page.
Check that the description of the link communicates that it links to the main content.
Check that activating the link moves the focus to the main content.
Check that after activating the link, the keyboard focus has moved to the main content
All checks above are true.
Any technology that includes moving or scrolling content.
This technique relates to:
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.
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.
On a page with moving or scrolling content,
Use the mechanism provided in the Web page or by the user agent to pause the moving or scrolling content.
Check that the moving or scrolling has stopped and does not restart by itself.
Use the mechanism provided to restart the moving content.
Check that the movement or scrolling has resumed from the point where it was stopped.
#2 and #4 are true.
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:
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.
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 are for information purposes only, no endorsement implied.
Determine if any timed interactions are present.
#1 is false.
Any audio multimedia technology
This technique relates to:
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.
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 are for information purposes only, no endorsement implied.
Play multimedia with extended audio description enabled
Check to see if multimedia freezes from time to time to allow audio description to convey important information regarding visual content
#2 is true
Applies to all technologies that present Audio Visual information
This technique relates to:
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.
Example 1: A television studio uses a real-time captioning service to create captions for its evening news online.
Resources are for information purposes only, no endorsement implied.
(none)
a procedure and policy are in place to ensure that captions are delivered in real-time
#1 is true
programming technologies that have standard components that are programmed to interface with accessibility APIs
This technique relates to:
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.
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 are for information purposes only, no endorsement implied.
(none currently listed)
Render content using an accessible User Agent
Use an Accessibility Tool designed for the Accessibility API of the User agent to evaluate each user interface component
Check that name and role for each user interface component is found by the tool.
Change the values on the component
Check that the Accessibility tool is alerted.
Step #3 and #5 are true for each user interface component
Technologies that support blinking content.
This technique relates to:
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.
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.
Find all items that blink.
For each item that blinks, determine if the interval between the start and end of the blinking is less than three seconds.
#2 is true.
Applies to content that includes forms.
User Agent and Assistive Technology Support Notes
(none listed)
This technique relates to:
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.
A series of radio buttons at the top of a page include options for German, French and Spanish. Instructions precede the buttons that instruct the user that the language will be changed upon selecting an option.
A 50 question online survey displays one question at a time. Instructions appear at the beginning of the survey that explain that users will be taken to the next question of the survey upon selecting an answer to each question.
Resources are for information purposes only, no endorsement implied.
(none currently listed)
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
Check #2 is true.
All technologies that support color.
This technique relates to:
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.
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.
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.
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.
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.
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."
No resources available for this technique.
(none currently listed)
For each item where color is used to convey information:
Check that the information conveyed is also available in text and that the text is not conditional content.
Check #1 is true.
Applies to any technology
This technique relates to:
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.
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 are for information purposes only, no endorsement implied.
(none currently listed)
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
Step 1 is false
Any technology that produces visual output.
This technique relates to:
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.
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 are for information purposes only, no endorsement implied.
(none currently listed)
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.
Measure the relative luminance of the background pixels immediately next to the letter using same formula.
Calculate the contrast ratio using the following formula.
(L1 + 0.05) / (L2 + 0.05), where
L1 is the relative luminance of the lighter of the foreground or background colors, and
L2 is the relative luminance of the darker of the foreground or background colors.
Check that the contrast ratio is equal to or greater than 7:1
#4 is true
Any technology that produces visual output.
This technique relates to:
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.
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 are for information purposes only, no endorsement implied.
(none currently listed)
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.
Measure the relative luminance of the background pixels immediately next to the letter using same formula.
Calculate the contrast ratio using the following formula.
(L1 + 0.05) / (L2 + 0.05), where
L1 is the relative luminance of the lighter of the foreground or background colors, and
L2 is the relative luminance of the darker of the foreground or background colors.
Check that the contrast ratio is equal to or greater than 5:1
The contrast ratio is equal to or greater than 5:1
#4 is true.
Applies to any technology
This technique relates to:
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.
Content has lightning flashes. Content is designed so that lightning only flashes two or three times without a pause in flashing.
Resources are for information purposes only, no endorsement implied.
Check that there are no more than three flashes during any 1-second period.
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.
Both Step 1 and Step 2 are true.
Content where a nonconforming and conforming version are provided as alternatives to each other.
This technique relates to:
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.
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.
Where WCAG conforming alternatives are provided for nonconforming content:
Check that there is a link to the nonconforming content from the conforming content.
Check that the nonconforming content does not appear in search engine results, site maps, and the site's regular navigation.
#1 and #2 are true.
All technologies which support interactive operation.
This technique relates to:
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.
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]
No resources available for this technique.
(none currently listed)
tab through content from start to finish.
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.
#2 is false
All technologies that contain links.
This technique relates to:
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).
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.
A Web page contains the sentence "The first pilgrims came to America on the Mayflower."
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.
No resources available for this technique.
For each link in the content that uses this technique:
Check that the link is part of a sentence
Check that text of the link combined with the text of its enclosing sentence describes the purpose of the link
The above checks are true.
Applies to all technologies that present multimedia information
This technique relates to:
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.
Example 1: A television station provides a sign language interpreter in the corner of its on-line news video.
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)
Have someone watch the program who can hear and is familiar with the sign language being used.
Check to see if there is a sign language interpreter on screen.
Check to see that dialog and important sounds are being conveyed by the interpreter visible on screen.
#2 and #3 are true
All technologies that include links.
This technique relates to:
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.
Technical terms and abbreviations in an article about sports injuries are linked to definitions in a medical dictionary.
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.
A general glossary of abbreviations is provided. All occurrences of abbreviations are linked directly to the appropriate definition within that glossary.
The word jargon is linked to its definition in the WCAG2 Glossary.
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.
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>
No resources available for this technique.
(none currently listed)
For each word, phrase, or abbreviation to be defined:
Check that at least the first instance of the item is a link.
Check that each link navigates to the definition of the item.
Checks #1 and #2 are true.
Any technology
This technique relates to:
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
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.
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."
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."
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.
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.
