Techniques for WCAG 2.0

F1: Failure of SC 1.3.2 due to changing the meaning of content by positioning information with CSS

Applicability

All technologies that support CSS.

This failure relates to:

Description

This describes the failure condition that results when CSS, rather than structural markup, is used to modify the visual layout of the content, and the modified layout changes the meaning of the content. Using the positioning properties of CSS2, content may be displayed at any position on the user's viewport. The order in which items appear on a screen may be different than the order they are found in the source document. Assistive technologies rely on the source code or other programmatically determined order to render the content in the correct sequence. Thus, it is important not to rely on CSS to visually position content in a specific sequence if this sequence results in a meaning that is different from the programmatically determined reading order. [LC-600]

Examples

Failure Example 1

The following example demonstrates how CSS has been improperly used to create a set of columns. In addition, the text appears visually in the browser in a different order than in the markup.

In this example a class is defined for each object that is being positioned. When style sheets are applied, the text appears in two columns. Elements of class "menu1" (Products) and "menu2" (Locations) appear as column headings. "Telephones, Computers, and Portable MP3 Players" are listed under Products and "Idaho" and "Wisconsin" are listed under Locations (note the different order for Idaho and Wisconsin in the source code order).

Since appropriate structural elements have not been used, when style sheets are not applied, all of the text appears in one line in the source order, "Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho."

Here is the HTML content:

<div class="box">      
     <span class="menu1">Products</span>       
     <span class="menu2">Locations</span>       
     <span class="item1">Telephones</span>       
     <span class="item2">Computers</span>       
     <span class="item3">Portable MP3 Players</span>       
     <span class="item5">Wisconsin</span>       
     <span class="item4">Idaho</span>
</div>

Here are the styles for the above content:

.menu1 { 
     position: absolute; 
     top: 3em; 
     left: 0em;     
     margin: 0px; 
     font-family: sans-serif;     
     font-size: 120%; 
     color: red; 
     background-color: white 
}        
.menu2 { 
     position: absolute; 
     top: 3em; 
     left: 10em;     
     margin: 0px; 
     font-family: sans-serif;     
     font-size: 120%; 
     color: red; 
     background-color: white 
}      
.item1 { 
     position: absolute; 
     top: 7em; 
     left: 0em; 
     margin: 0px 
}      
.item2 { 
     position: absolute; 
     top: 8em; 
     left: 0em; 
     margin: 0px 
}      
.item3 { 
     position: absolute; 
     top: 9em; 
     left: 0em; 
     margin: 0px 
}      
.item4 { 
     position: absolute; 
     top: 7em; 
     left: 14em; 
     margin: 0px 
}      
.item5 { 
     position: absolute; 
     top: 8em; left: 14em; 
     margin: 0px 
}      
#box { 
     position: absolute; 
     top: 5em; 
     left: 5em 
}

A better solution for this content would be to use more meaningful elements, such as a table or a definition list.

Resources

No resources available for this technique.

C6: Positioning content based on structural markup

Tests

Procedure

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.

Expected Results

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

F2: Failure of SC 1.3.1 due to using CSS to create variations in presentation of text that conveys information without also using the appropriate markup or text

Applicability

All technologies that support CSS.

This failure relates to:

Description

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

Examples

Failure Example 1: Emphasis in written dialogue.

Here is a CSS class to specify bold.

 .yell {
   font-weight:bold;
 }

The following example fails because the information conveyed by using the CSS font-weight property to change to a bold font is not conveyed through semantic markup or stated explicitly in the text.

<p>
 &quot;I said, <span class="yell">NO</span>, not before dinner!&quot;, 
 was the exasperated response when Timmy asked his mother for the 
 fourth time for an ice cream cone. 
</p>

Resources

No resources available for this technique.

H49: Using semantic markup to mark emphasized or special text

Tests

Procedure

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.

Expected Results

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

F3: Failure of SC 1.1.1 due to using CSS to include images that convey important information

Applicability

All technologies that support CSS.

This failure relates to:

Description

The CSS background-image property provides a way to include images in the document with CSS without any reference in the HTML code. The CSS background-image property was designed for decorative purposes and it is not possible to associate text alternatives with images that are included via CSS. Text alternatives are necessary for people who cannot see images that convey important information. Therefore, it is a failure to use this property to add images to convey important information.

Examples

Failure Example 1:

In the following example, part of the content is contained in an image that is presented by CSS alone. In this example, the image TopRate.png is a 180 by 200 pixel image that contains the text, "19.3% APR Typical Variable."

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

It is used in this excerpt:

 
<p id="bestinterest">
  Where else would you find a better interest rate?
</p>

Failure Example 2:

A book distributor uses background images to provide icons against a list of book titles to indicate whether they are new, limited, in-stock, or out of stock.

The CSS contains:

ul#booklist li {
  padding-left: 20px;
}

ul#booklist li.new {
  background: transparent url(new.png) no-repeat top left; 
}
                            
ul#booklist li.limited {
  background: transparent url(limited.png) no-repeat top left; 
}
                            
ul#booklist li.instock {
  background: transparent url(instock.png) no-repeat top left; 
}

ul#booklist li.outstock {
  background: transparent url(outstock.png) no-repeat top left; 
}

It is used in this excerpt:

<ul id="booklist">
  <li class="new">Some book</li>
  <li class="instock">Some other book</li>
  <li class="limited">A book we desperately want to get rid of</li>
  ...
  <li class="outstock">A book you actually want </li>
</ul>

Resources

No resources available for this technique.

H37: Using alt attributes on img elements

Tests

Procedure

Examine all images added to the content via CSS.
Check that the images do not convey important information.

Expected Results

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

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

Applicability

Cascading Style Sheets.

This failure relates to:

User Agent and Assistive Technology Support Notes

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

Description

CSS defines the blink value for the text-decoration property. When used, it causes any text in elements with this property to blink at a predetermined rate. This cannot be interrupted by the user, nor can it be disabled as a user agent preference. The blinking continues as long as the page is displayed. Therefore, content that uses text-decoration:blink fails the success criterion because blinking can continue for more than three seconds.

Examples

Failure Example 1

A product list page uses the text-decoration:blink style on an element to draw attention to sale prices. This fails the success criterion because users cannot control the blink.

<p>My Great Product <span style="text-decoration:blink">Sale! $44,995!</span></p>

Resources

Resources are for information purposes only, no endorsement implied.

CSS 2 text-decoration property

SCR22: Using scripts to control blinking and stop it in three seconds or less

Tests

Procedure

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.

Expected Results

If step #1 and step #2 are true, the content fails the success criterion.

F7: Failure of SC 2.2.2 due to an object or applet, such as Java or Flash, that has blinking content without a mechanism to pause the content that blinks for more than three seconds

Applicability

Technologies that support blinking content within an object, applet, or a plug-in.

This failure relates to:

Description

When content that is rendered by a plug-in or contained in an applet blinks, there may be no way for the user agent to pause the blinking. If neither the plug-in, applet, nor the content itself provides a mechanism to pause the content, the user may not have sufficient time to read the content between blinks or it may be so distracting that the user will not be able to read other content on the page.

Examples

An applet displays an advertisement on a news site. The applet blinks key words in the advertisement in order to call the user's attention to it. The blinking cannot be paused through any user agent settings and the applet does not provide a mechanism to stop it.

SCR22: Using scripts to control blinking and stop it in three seconds or less

Tests

Procedure

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.

Expected Results

If step #1 is true and step #2 is false, the content fails the success criterion.

F8: Failure of SC 1.2.1 due to captions omitting some dialogue or important sound effects

Applicability

Applies to all technologies.

This failure relates to:

Description

This describes a failure condition for all techniques involving captions. If the "caption" does not include all of the dialog (either verbatim or in essence) as well as all important sounds then the 'Captions' are not real captions.

NOTE: Captions sometimes simplify the spoken text both to make it easier to read and to avoid forcing the viewer to read at very high speed. This is standard procedure and does not invalidate a caption.

Examples

Failure Example 1

Examples of text streams that are not captions include:

text that contains the dialog (possibly simplified dialog) but that does not describe important sounds [LC-774]
text that omits dialog during portions of the material

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

View the material with captioning turned on.
Check that all dialog is accompanied by a caption.
Check that all important sounds are captioned.

Expected Results

Step #2 and step #3 are true.

F9: Failure of SC 3.2.5 due to changing the context when the user removes focus from a form element

Applicability

General.

This failure relates to:

Description

This document describes a failure that occurs when removing focus from a form element, such as by moving to the next element, causes a change of context.

Examples

Failure Example 1:

The user is going through the form filling out the fields in order. When he moves from the third field to the forth, the form submits.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

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.

Expected Results

If step #3, step #4, or step #5 is true, then this failure condition applies and the content fails the success criterion.

F10: Failure of SC 2.1.1 and Conformance Requirement 6 due to combining multiple content formats in a way that traps users inside one format type

Applicability

Applies when content creates a situation where the user can enter the content using the keyboard, but can not exit the content using the keyboard.

This failure relates to:

Description

When content includes multiple formats, one or more user agents or plug-ins are often needed in order to successfully present the content to users. For example, a page that includes (X)HTML, SVG, SMIL and XForms may require a browser to load as many as three different plug-ins in order for a user to successfully interact with the content. Some plug-ins create a common situation in which the keyboard focus can become "stuck" in inaccessible plug-ins, leaving a keyboard-only user with no way to return to the accessible content.

Examples

A plug-in traps the user A user tabs into a plug-in and is unable to return to content outside the plug-in content with the keyboard. The user has to restart their browser in order to regain control and navigate to a new page and is unable to access any content that appears beyond the plug-in content.

Resources

No resources available for this technique.

Tests

Procedure

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.

Expected Results

If the keyboard focus becomes "trapped," then this failure condition applies and content fails the success criterion and conformance requirement.

F12: Failure of SC 2.2.6 due to having a session time limit without a mechanism for saving user's input and re-establishing that information upon re-authentication

Applicability

Sites that require user login to submit input and that terminate the session after a some period of inactivity.

This failure relates to:

Description

Web servers that require user authentication usually have a session mechanism in which a session times out after a period of inactivity from the user. This is sometimes done for security reasons, to protect users who are assumed to have left their computer exposed in a state where someone could do something harmful to them such as transfer bank funds or make an unauthorized purchase. A user with a disability may actually still be working to complete the form as it may take him or her longer to complete the form than would normally be expected. Upon re-authentication, if the state of the user's session is not restored, including all data that had been previously entered into the form, he or she will have to start over. And for these users, it is likely that the session will time out again before they can complete the form. This sets up a situation where a user who needs more time to complete the form can never complete it.

Examples

A user submits a form on an authenticated site after their login has expired. On submitting the form, they are prompted to log in again, and then taken to a general welcome page. The data is not processed and they must try again.
A user submits a form on an authenticated site after their login has expired. On submitting the form, they are prompted to log in again, and then taken back to the page they were on just before the login, which in this case contains the form they attempted to submit. However, the form is not populated with the data they just entered, and they must re-enter it.

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

Tests

Procedure

On a site where authentication is required, user input is collected, and which ends the user's session after a known period of inactivity:

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.

Expected Results

If step #3 is false, the site fails the success criterion.

F13: Failure of SC 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image

Applicability

All technologies.

This failure relates to:

Description

This objective of this technique is to describe the failure that occurs when an image uses color to convey information, but the text alternative for the image does not convey that information. This can cause problems for people who are blind or colorblind because they will not be able to perceive the information conveyed by the color.

Examples

A bar chart of sales data is provided as an image. The chart includes yearly sales figures for four employees in the Sales Department. The text alternative for the image says, "The following bar chart displays the yearly sales figures for the Sales Department. Mary sold 3.1 Million; Fred, 2.6 Million; Bob, 2.2 Million; and Andrew, 3.4 Million. The red bars indicate sales that were below the yearly quota". This text alternative fails to provide the information which is conveyed by the color red in the image. The alternative should indicate which people did not meet the sales quota rather than relying on color.

Resources

No resources available for this technique.

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

Tests

Procedure

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.

Expected Results

If step #1 is true, then this failure condition applies and content fails the success criterion.

F14: Failure of SC 1.3.3 due to identifying content only by its shape or location

Applicability

All technologies.

This failure relates to:

Description

The objective of this technique is to show how identifying content only by its shape or location makes content difficult to understand and operate. When only visual identification or location is used, users with visual disabilities may find it difficult to locate content since they cannot see the screen or may perceive only a small portion of the screen at one time. Also, location of content can vary if page layout varies due to variations in font, window, or screen size.

Examples

The navigation instructions for a site state, "To go to next page, press the button to the right. To go back to previous page, press the button to the left."
A user is reading a news article in an on-line newspaper. The article contains an illustration and additional links for more information. Within the text of the article is a statement, "Please see sidebar to the left of the illustration for links to additional information." An assistive technology user would have difficulty finding the illustration and the sidebar. Some alternatives would be to include the list of links within the text; to provide an in-page link within the text which links to the sidebar; to provide a heading for the sidebar which can be used for navigation and refer to the heading in the instructions.
A user is completing an on-line survey. There are three buttons at the bottom of the survey form. The instructions state, "Press the square button to exit the survey without saving, Press the triangle button to save in-progress survey results. You may return later to complete the survey. Press the round button to submit the survey results." A screen reader user cannot determine which button is square, triangular, or round. The buttons must have additional information to indicate their functions.

Resources

No resources available for this technique.

G96: Providing textual identification of items that otherwise rely only on shape and/or position to be understood

Tests

Procedure

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.

Expected Results

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

F15: Failure of SC 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely

Applicability

Applies to all technologies that support an accessibility API.

This failure relates to:

Description

When standard controls from accessible technologies are used, they usually are programmed in a way that uses and supports the accessibility API. If custom controls are created, however, then it is up to the programmer to be sure that the newly created control supports the accessibility API. If this is not done, then assistive technologies will not be able to understand what the control is or how to operate it or may not even know of its existence.

Examples

Failure Example 1

A music player is designed with custom controls that look like musical notes that are stretched for volume, tone etc. The programmer does not make the new control support the Accessibility API. As a result - the controls cannot be identified or controlled from AT.

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure

Using the accessibility checker for the technology (or if that is not available, inspect the code or test with an assistive technology), check the controls to see if they support the accessibility API.

Expected Results

If step #1 is false, then this failure condition applies and the content fails this success criterion

F16: Failure of SC 2.2.3 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content

Applicability

All technologies that support visual movement or scrolling.

This failure relates to:

Description

In this failure technique, there is moving or scrolling content that cannot be paused and resumed by users. In this case, some users with low vision or cognitive disabilities will not be able to perceive the content.

Examples

A page has a scrolling news ticker without a mechanism to pause it. Some users are unable to read the scrolling content.

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

Tests

Procedure

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.

Expected Results

If steps step #1, step #3, step #4, or step #6 are false, then the content fails the success criterion.

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

Applicability

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

This failure relates to:

Description

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

Examples

Failure Example 1

A label element whose for attribute value is an idref that points to a non-existent id
An id attribute value that is not unique.
An accesskey attribute value that is not unique

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

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.

Expected Results

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

F19: Failure of Conformance Requirement 4 due to not providing a method for the user to find the alternative conforming version of a non-conforming Web page

Applicability

Sites that provide alternative, WCAG conforming versions of nonconforming primary content.

This failure relates to:

Conformance Requirement 4 (Alternate Versions)

Description

This failure technique describes the situation in which an alternate, conforming version of the content is provided, but there is no direct way for a user to tell that it is available or where to find it. Such content fails the success criterion because the user cannot find the conforming version.

Examples

A link or a search takes a user directly to one of the nonconforming pages in the Web site. There is neither an indication that an alternate page is available, nor a path to the alternate page from the nonconforming page.
Nonconforming pages on the Web site inform the user that a conforming version is available and provide a link to the home page. However, the user must search the site for the conforming version of the page, so the functionality does not meet the requirements of the success criterion.
A user is able to use the nonconforming Web site for most pages. But when the user is not able to access a particular page, there is no way to find the conforming version of the page.

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

Tests

Procedure

Identify a nonconforming page that has an alternative conforming version.
Determine if the nonconforming page provides a link to the conforming version.

Expected Results

If step #2 is false, the content fails the success criterion.

F20: Failure of SC 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur

Applicability

Applies to all technologies.

This failure relates to:

Description

The objective of this failure condition is to address situations where the non-text content is updated, but the text alternative is not updated at the same time. If the text in the text alternative can not still be used in place of the non-text content without losing information or function, then it fails because it is no longer a text alternative for the non-text content.

Examples

Failure Example 1: A Sales chart is updated to October results, but the text alternative still describes September results.
Failure Example 2: Pictures on a home page change daily, but text alternatives are not updated at the same time.
Failure Example 3: The source attribute of images on a page is updated periodically using script, but the text alternatives are not updated at the same time.

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

Check each text alternative to see if it is describing content other than the currently-displayed non-text content.

Expected Results

If step #1 is true then the text alternative is not up to date with current item, this failure condition applies, and content fails these success criteria.

F22: Failure of SC 3.2.5 due to opening windows that are not requested by the user

Applicability

General

This failure relates to:

Description

Failure due to opening new windows when the user does not expect them. New windows take the focus away from what the user is reading or doing. This is fine when the user has interacted with a piece of User Interface and expects to get a new window, such as an options dialog. The failure comes when pop-ups appear unexpectedly.

Examples

Failure Example 1:

When a user navigates to a page, a new window appears over the existing user agent window, and the focus is moved to the new window.

Failure Example 2:

A user clicks on a link, and a new window appears. The original link has no associated text saying that it will open a new window.

Failure Example 3:

A user clicks on the body of a page and a new window appears. No indication that the area that was clicked has functionality is present.

Failure Example 4:

A user clicks on undecorated text within the page and a new window appears. The page has no visible indication that the area is functional. [LC-779]

Resources

No resources available for this technique.

SCR24: Using script to open a new window on user request

Tests

Procedure

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.

Expected Results

If step #2 is true, the failure condition applies and the content fails the success criterion
If step #5 is true and step #6 is false, the failure condition applies and the content fails the success criterion

F23: Failure of SC 1.4.2 due to playing a sound longer than 3 seconds where there is no mechanism to turn it off

Applicability

Applies to all technologies except those for voice interaction.

This failure relates to:

Description

This describes a failure condition for SC involving sound. If sound does not turn off automatically within 3 seconds and there is no way to turn the sound off then SC 1.4.2 would not be met. Sounds that play over 3 seconds when there is no mechanism to turn off the sound included in the content would fall within this failure condition.

Examples

Example 1

a site that plays continuous background music

Example 2

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

Resources

No resources available for this technique.

(none currently listed)

Tests

Procedure

Check that there is a way in content to turn off any sound that plays automatically for more than three seconds.

Expected Results

If step #1 is not true then content fails Success Criterion 1.4.2

[LC-511]

F24: Failure of SC 1.4.3 and 1.4.5 due to specifying foreground colors without specifying background colors or vice versa

Applicability

All technologies that allow user agents to control foreground and background colors through personal stylesheets or other means.

This failure relates to:

Description

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

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

Examples

Failure Example 1: Specifying only background color with bgcolor in HTML

In the example below the background color is defined on the body element, however the foreground color is not defined. Therefore, the example fails the Success Criterion.

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <html>
          <head>
              <title>A study of population dynamics</title>
          </head>
          <body bgcolor="white">
              <p> ... document body...</p>
          </body>
  </html>

Failure Example 2: Specifying only foreground color with color in HTML

In the example below the foreground color is defined on the body element, however the background color is not defined. Therefore, the example fails the Success Criterion.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</title>

</head>
<body color="white">
  <p>... document body...</p>
</body>
</html>

Failure Example 3: Specifying only background color with CSS

In the example below the background color is defined on the CSS stylesheet, however the foreground color is not defined. Therefore, the example fails the Success Criterion.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">

       body {background-color:white}
    </style>
  </head>
  <body>
    <p>My background is white.</p>
  </body>
</html>

Failure Example 4: Specifying only background color with CSS

In the example below the foreground color is defined on the CSS stylesheet, however the background color is not defined. Therefore, the example fails the Success Criterion.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">
       body {color:white}
    </style>
  </head>

  <body>
    <p>My foreground is white.</p>
  </body>
</html>

Failure Example 5: Specifying foreground color of link text with CSS

In the example below the link text (foreground) color is defined on the body element. However, the background color is not defined. Therefore, the example fails the Success Criterion.

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</TITLE>
 <style type="text/css">
  a:link { color: red }
  a:visited { color: maroon }
  a:active { color: fuchsia }
 </style>

</head>
<body>
  <p>... document body... <a href="foo.htm">Foo</a></p>
</body>
</html>

Resources

Resources are for information purposes only, no endorsement implied.

Assigning property values, Cascading, and Inheritance [LC-767]

(none currently listed)

Tests

Procedure

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]

Expected Results

If step #2 is true but step #3 is false, OR if step #3 is true but step #2 is false then this failure condition applies and content fails these success criteria.

F25: Failure of SC 2.4.2 due to the title of a Web page not identifying the contents

Applicability

All technologies.

This failure relates to:

Description

This describes a failure condition when the Web page has a title, but the title does not identify the contents or purpose of the Web page.

Examples

Failure Example 1

Examples of text that are not titles include:

Authoring tool default titles, such as
- "Enter the title of your HTML document here,"
- "Untitled Document"
- "No Title"
- "Untitled Page"
- "New Page 1"
Filenames that are not descriptive in their own right, such as "report.html" or "spk12.html"
Empty text
Filler or placeholder text

Failure Example 2

A site generated using templates includes the same title for each page on the site. So the title cannot be used to distinguish among the pages.

Resources

No resources available for this technique.

H25: Providing a title using the title element

Tests

Procedure

Check whether the title of each Web page identifies the contents or purpose of the Web page .

Expected Results

If step #1 is false, then this failure condition applies and the content fails this success criterion.

F26: Failure of SC 1.3.3 due to using a graphical symbol alone to convey information [LC-780]

Applicability

All technologies.

This failure relates to:

Description

The objective of this technique is to show how using a graphical symbol to convey information can make content difficult to comprehend. A graphical symbol may be an image, an image of text or a pictorial or decorative character symbol (glyph) which imparts information nonverbally. Examples of graphical symbols include an image of a red circle with a line through it, a "smiley" face, or a glyph which represents a check mark, arrow, or other symbol but is not the character with that meaning. Assistive technology users may have difficulty determining the meaning of the graphical symbol. If a graphical symbol is used to convey information, provide an alternative using features of the technology or use a different mechanism that can be marked with an alternative to represent the graphical symbol. For example, an image with a text alternative c

Techniques for WCAG 2.0

Techniques and Failures for Web Content Accessibility Guidelines 2.0

W3C Working Draft 17 May 2007

Abstract

Status of this Document

May Be Superseded

Public Working Draft of "Techniques for WCAG 2.0"

Please Comment by 29 June 2007

Web Accessibility Initiative

No Endorsement

Patents

Table of Contents

Appendix

1. Common Failures

F1: Failure of SC 1.3.2 due to changing the meaning of content by positioning information with CSS

Applicability

Description

Examples

Failure Example 1

Resources

Related Techniques

Tests

Procedure

Expected Results

F2: Failure of SC 1.3.1 due to using CSS to create variations in presentation of text that conveys information without also using the appropriate markup or text

Applicability

Description

Examples

Failure Example 1: Emphasis in written dialogue.

Resources

Related Techniques

Tests

Procedure

Expected Results

F3: Failure of SC 1.1.1 due to using CSS to include images that convey important information

Applicability

Description

Examples

Failure Example 1:

Failure Example 2:

Resources

Related Techniques

Tests

Procedure

Expected Results

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

Applicability

User Agent and Assistive Technology Support Notes

Description

Examples

Failure Example 1

Resources

Related Techniques

Tests

Procedure

Expected Results

F7: Failure of SC 2.2.2 due to an object or applet, such as Java or Flash, that has blinking content without a mechanism to pause the content that blinks for more than three seconds

Applicability

Description

Examples

Related Techniques

Tests

Procedure

Expected Results

F8: Failure of SC 1.2.1 due to captions omitting some dialogue or important sound effects

Applicability

Description

Examples

Failure Example 1

Resources

Related Techniques

Tests

Procedure

Expected Results

F9: Failure of SC 3.2.5 due to changing the context when the user removes focus from a form element

Applicability

Description

Examples

Failure Example 1:

Resources