Techniques for WCAG 2.0

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.

Resources are for information purposes only, no endorsement implied.

• Skip Navigation Links

• G123: Adding a link at the beginning of a block of repeated content to go to the end of the block
• G124: Adding links at the top of the page to each area of the content

Procedure

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

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

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

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

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

Expected Results

• All checks above are true.

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.

• G75: Providing a mechanism to postpone any updating of content
• G76: Providing a mechanism to request an update of the content instead of updating automatically
• G186: Using a control in the Web page that stops moving, blinking, or auto-updating content
• SCR33: Using script to scroll content, and providing a mechanism to pause it

Procedure

On a page with moving or scrolling content,

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

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

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

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

Expected Results

• #2 and #4 are true.

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.

Resources are for information purposes only, no endorsement implied.

• Resource-Oriented vs. Activity-Oriented Web Services

• Top Ten Web Design Mistakes of 2005

• G75: Providing a mechanism to postpone any updating of content
• G76: Providing a mechanism to request an update of the content instead of updating automatically
• G80: Providing a submit button to initiate a change of context
• G198: Providing a way for the user to turn the time limit off

Procedure

1. Determine if any timed interactions are present.

Expected Results

• #1 is false.

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

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

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

Resources are for information purposes only, no endorsement implied.

• Accessible SMIL Templates

• Extended Audio Description

• G78: Providing a second, user-selectable, audio track that includes audio descriptions
• G69: Providing an alternative for time based media
• G173: Providing a version of a movie with audio descriptions
• SM1: Adding extended audio description in SMIL 1.0
• SM2: Adding extended audio description in SMIL 2.0
• SM6: Providing audio description in SMIL 1.0
• SM7: Providing audio description in SMIL 2.0

Procedure

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

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

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

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

Expected Results

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

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

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

Resources are for information purposes only, no endorsement implied.

• CaptionCaster

• G87: Providing closed captions
• G93: Providing open (always visible) captions
• G157: Incorporating a live audio captioning service into a Web page

Procedure

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

Expected Results

• Check #1 is true.

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.

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

• H91: Using HTML form controls and links

Procedure

1. Render content using an accessible User Agent.

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

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

4. Change the values on the component.

5. Check that the Accessibility tool is alerted.

6. Check that the component works with assistive technologies.

Expected Results

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

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

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

• G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)
• G186: Using a control in the Web page that stops moving, blinking, or auto-updating content
• G187: Using a technology to include blinking content that can be turned off via the user agent
• G191: Providing a link, button, or other mechanism that reloads the page without any blinking content
• SCR22: Using scripts to control blinking and stop it in five seconds or less

Procedure

1. Find all items that blink.

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

Expected Results

• #2 is true.

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

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

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

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

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

Resources are for information purposes only, no endorsement implied.

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

Procedure

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

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

Expected Results

• Check #2 is true.

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

No resources available for this technique.

• H92: Including a text cue for colored form control labels
• G138: Using semantic markup whenever color cues are used
• G182: Ensuring that additional visual cues are available when text color differences are used to convey information
• G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them

Procedure

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

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

Expected Results

• Check #1 is true.

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

Resources are for information purposes only, no endorsement implied.

• Harding FPA Web Site

• Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)

• G19: Ensuring that no component of the content flashes more than three times in any 1-second period
• G176: Keeping the flashing area small enough

Procedure

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

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

Expected Results

• Check #1 is true.

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

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

If the background or the letters vary in relative luminance (or are patterned), then the background around the letters can be chosen or shaded so that the letters maintain a 7: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.

Resources are for information purposes only, no endorsement implied.

• Contrast Analyser – Application

• Contrast Ratio Analyser - online service

• Colour Contrast Analyser - Firefox Extension

• Color Contrast Samples

• Atypical colour response

• Colors On the Web Color Contrast Analyzer

• Tool to convert images based on color loss so that contrast is restored as luminance contrast when there was only color contrast (that was lost due to color deficiency)

• List of color contrast tools

• G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults
• G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast

Procedure

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

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

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

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

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

     and R_sRGB, G_sRGB, and B_sRGB are defined as:

     • R_sRGB = R_8bit/255

     • G_sRGB = G_8bit/255

     • B_sRGB = B_8bit/255

     The "^" character is the exponentiation operator.

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

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

3. Calculate the contrast ratio using the following formula.

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

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

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

Expected Results

• #4 is true

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 4.5:1 contrast ratio with the background.

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

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.

Resources are for information purposes only, no endorsement implied.

• Contrast Analyser – Application

• Contrast Ratio Analyser - online service

• Colour Contrast Analyser - Firefox Extension

• Color Contrast Samples

• Atypical colour response

• Colors On the Web Color Contrast Analyzer

• Tool to convert images based on color loss so that contrast is restored as luminance contrast when there was only color contrast (that was lost due to color deficiency)

• List of color contrast tools

(none currently listed)

Procedure

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

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

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

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

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

     and R_sRGB, G_sRGB, and B_sRGB are defined as:

     • R_sRGB = R_8bit/255

     • G_sRGB = G_8bit/255

     • B_sRGB = B_8bit/255

     The "^" character is the exponentiation operator.

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

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

3. Calculate the contrast ratio using the following formula.

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

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

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

Expected Results

• #4 is true.

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.

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.

Resources are for information purposes only, no endorsement implied.

• Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)

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

Procedure

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

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

Expected Results

• Both Step 1 and Step 2 are true.

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

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

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

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

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

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

No resources available for this technique.

(none currently listed)

Expected Results

• #2 is false

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.

No resources available for this technique.

• G91: Providing link text that describes the purpose of a link
• H2: Combining adjacent image and text links for the same resource
• H30: Providing link text that describes the purpose of a link for anchor elements
• H33: Supplementing link text with the title attribute
• H77: Identifying the purpose of a link using link text combined with its enclosing list item
• H78: Identifying the purpose of a link using link text combined with its enclosing paragraph
• H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings
• H80: Identifying the purpose of a link using link text combined with the preceding heading element
• H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested
• C7: Using CSS to hide a portion of the link text
• ARIA1: Using the aria-describedby property to provide a descriptive label for input controls

Procedure

For each link in the content that uses this technique:

1. Check that the link is part of a sentence

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

Expected Results

• The above checks are true.

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

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

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

Resources are for information purposes only, no endorsement implied.

• Guidelines for the Production of Signing Books

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

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

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

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

• G81: Providing a synchronized video of the sign language interpreter that can be displayed in a different viewport or overlaid on the image by the player
• SM13: Providing sign language interpretation through synchronized video streams in SMIL 1.0
• SM14: Providing sign language interpretation through synchronized video streams in SMIL 2.0

Procedure

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

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

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

Expected Results

• #2 and #3 are true

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.

No resources available for this technique.

• G62: Providing a glossary
• G70: Providing a function to search an online dictionary
• G101: Providing the definition of a word or phrase used in an unusual or restricted way
• G102: Providing the expansion or explanation of an abbreviation
• G112: Using inline definitions
• H40: Using definition lists
• H60: Using the link element to link to a glossary
• H64: Using the title attribute of the frame and iframe elements

Procedure

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

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

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

Expected Results

• Checks #1 and #2 are true.

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.

Resources are for information purposes only, no endorsement implied.

• About Decibels by Gregg Vanderheiden

• Audio creation / contrast tutorial

Procedure

1. Locate loud values of background content between foreground speech

2. Measure the volume in dB(A) SPL

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

4. Subtract the values

5. Check that the result is 20 or greater.

Expected Results

• #5 is true

The objective of this technique is to ensure that the order of content presented to assistive technologies allows the user to make sense of the content. Some techniques permit the content to be rendered visually in a meaningful sequence even [begin change]if this is different from the order in which the content is encoded in the underlying source file[end change].

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

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

No resources available for this technique.

• G59: Placing the interactive elements in an order that follows sequences and relationships within the content
• C6: Positioning content based on structural markup
• C27: Making the DOM order match the visual order
• F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS
• F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized

Procedure

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

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

Expected Results

• Check #2 is true.

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

No resources available for this technique.

• G69: Providing an alternative for time based media
• G159: Providing an alternative for time-based media for video-only content
• H46: Using noembed with embed
• H53: Using the body of the object element

Procedure

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

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

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

Expected Results

• Items #1 through 3 are all true.

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

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

No resources available for this technique.

• G57: Ordering the content in a meaningful sequence
• H4: Creating a logical tab order through links, form controls, and objects
• C27: Making the DOM order match the visual order
• SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element
• SCR27: Reordering page sections using the Document Object Model
• SCR37: Creating Custom Dialogs in a Device Independent Way

Procedure

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

2. Determine the logical order of interactive elements.

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

Expected Results

• Check #3 is true.

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

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

Resources are for information purposes only, no endorsement implied.

(none)

• G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically
• G171: Playing sounds only on user request

Procedure

1. Load the Web page

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

Expected Results

• #2 is true

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

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

Resources are for information purposes only, no endorsement implied.

Procedure

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

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

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

Expected Results

• #2 is true.

• #3 is true.

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

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

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

No resources available for this technique.

• G55: Linking to definitions
• G70: Providing a function to search an online dictionary
• H40: Using definition lists
• H60: Using the link element to link to a glossary

Procedure

1. Check that either

   • The glossary is included in the Web page, or

   • A mechanism is available to locate the glossary.

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

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

Expected Results

• All three checks above are true.

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

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

The site map serves several purposes.

• It provides an overview of the entire site.

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

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

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

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

Resources are for information purposes only, no endorsement implied.

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

• Usability Glossary: sitemap

• G64: Providing a Table of Contents
• G125: Providing links to navigate to related Web pages
• G126: Providing a list of links to all other Web pages
• G185: Linking to all of the pages on the site from the home page

Procedure

1. Check that the site contains a site map.

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

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

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

Expected Results

• All of the checks above are true.

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

The table of contents serves two purposes:

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

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

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

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

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

No resources available for this technique.

• G63: Providing a site map
• G125: Providing links to navigate to related Web pages
• G126: Providing a list of links to all other Web pages

Procedure

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

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

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

Expected Results

• All checks above are true.

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

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

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

No resources available for this technique.

• G63: Providing a site map
• G128: Indicating current location within navigation bars

Procedure

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

1. Navigate to a Web page.

2. Check that a breadcrumb trail is displayed.

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

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

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

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

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

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

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

Expected Results

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

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

  • Either check #4 or #5 is true.

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

Resources are for information purposes only, no endorsement implied.

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

Procedure

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

2. display the text alternative(s)

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

Expected Results

• #3 is true.

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

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

• dialogue,

• sounds (natural and artificial),

• the setting and background,

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

• text or graphics,

• and more.

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

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

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

No resources available for this technique.

• G8: Providing a movie with extended audio descriptions
• G58: Placing a link to the alternative for time-based media immediately next to the non-text content
• G78: Providing a second, user-selectable, audio track that includes audio descriptions
• G158: Providing an alternative for time-based media for audio-only content
• G159: Providing an alternative for time-based media for video-only content

Procedure

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

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

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

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

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

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

Expected Results

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

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

No resources available for this technique.

• G55: Linking to definitions
• G62: Providing a glossary
• G112: Using inline definitions

Procedure

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

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

2. Check that the result of the search of the dictionary for the word, phrase, or abbreviation [begin add]is[end add] the correct definition.

Expected Results

• Checks #1 and #2 are true.

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

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

• G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input
• G193: Providing help by an assistant in the Web page

Procedure

1. Identify a Web page that contains forms.

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

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

Expected Results

• Either #2 or #3 are true.

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

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

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

Resources are for information purposes only, no endorsement implied.

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

Procedure

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

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

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

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

Expected Results

All 4 of the above are true

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

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

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

Resources are for information purposes only, no endorsement implied.

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

Procedure

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

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

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

Expected Results

All 3 of the above are true

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

• G76: Providing a mechanism to request an update of the content instead of updating automatically
• SCR14: Using scripts to make nonessential alerts optional

Procedure

1. Find pages with content that automatically updates.

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

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

Expected Results

• #3 is true.

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

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

Resources are for information purposes only, no endorsement implied.

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

• G75: Providing a mechanism to postpone any updating of content
• SCR14: Using scripts to make nonessential alerts optional

Procedure

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

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

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

Expected Results

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

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

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

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

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

Resources are for information purposes only, no endorsement implied.

• Synchronized Multimedia Integration Language (SMIL) 1.0

• Synchronized Multimedia Integration Language (SMIL 2.0)

• Accessibility Features of SMIL

• NCAM Rich Media Accessibility, Accessible SMIL Templates

• Realtext

• SAMI 1.0

• G69: Providing an alternative for time based media
• SM6: Providing audio description in SMIL 1.0
• SM7: Providing audio description in SMIL 2.0
• G173: Providing a version of a movie with audio descriptions

Procedure

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

2. Listen to the synchronized media

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

Expected Results

• Checks #1 and #3 are true.

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

• Spoken versions of short texts and static text content

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

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

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

  3. Provide a link to the audio version.

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

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

• Spoken versions of text that changes

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

No resources available for this technique.

(none currently listed)

Procedure

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

Expected Results

• Check #1 is true.

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

Resources are for information purposes only, no endorsement implied.

• H32: Providing submit buttons
• H84: Using a button with a select element to perform an action

Procedure

1. Find all forms in the content

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

Expected Results

• #2 is true

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

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

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

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

Resources are for information purposes only, no endorsement implied.

• Guidelines for the Production of Signing Books

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

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

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

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

(none)

• G54: Including a sign language interpreter in the video stream
• SM13: Providing sign language interpretation through synchronized video streams in SMIL 1.0
• SM14: Providing sign language interpretation through synchronized video streams in SMIL 2.0

Procedure

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

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

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

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

Expected Results

• #3 and #4 are true

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

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

Resources are for information purposes only, no endorsement implied.

• G196: Using a text alternative on one item within a group of images that describes all items in the group
• H35: Providing text alternatives on applet elements
• H36: Using alt attributes on images used as submit buttons
• H37: Using alt attributes on img elements
• H53: Using the body of the object element
• H86: Providing text alternatives for ASCII art, emoticons, and leetspeak

Procedure

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

2. replace it with the text alternative

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

Expected Results

• #3 is true.

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

• G85: Providing a text description when user input falls outside the required format or values
• SCR18: Providing client-side validation and alert

Procedure

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

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

Expected Results

• #2 is true

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

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

Procedure

1. Enter invalid data in a form field.

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

Expected Results

• #2 is true.

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

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

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

• Describe the correct data entry for the field,

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

• SCR18: Providing client-side validation and alert

Procedure

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

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

Expected Results

• #2 is true

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

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

The following steps can be used to prepare the summary:

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

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

3. Measure the readability of the summary.

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

5. Repeat steps 3 and 4 as needed.

No resources available for this technique.

• G79: Providing a spoken version of the text
• G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes
• G153: Making the text easier to read
• G160: Providing sign language versions of information, ideas, and processes that must be understood in order to use the content

Procedure

For each summary provided as supplemental content:

1. Measure the readability of the summary.

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

Expected Results

• # 2 is true.

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

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

Resources are for information purposes only, no endorsement implied.

Guides to Captioning

• Captioning Key: Guidelines and Preferred Techniques

• Best Practices in Online Captioning

SMIL

• Synchronized Multimedia Integration Language (SMIL) 1.0

• Synchronized Multimedia Integration Language (SMIL 2.0)

• Accessibility Features of SMIL

• NCAM Rich Media Accessibility, Accessible SMIL Templates

Other Captioning

• National Center for Accessible Media

• Quicktime Captioning Tutorial

• RealPlayer Captioning Tutorial

• Windows Media Player Captioning Tutorial

• G93: Providing open (always visible) captions
• SM11: Providing captions through synchronized text streams in SMIL 1.0
• SM12: Providing captions through synchronized text streams in SMIL 2.0

Procedure

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

2. View the synchronized media content

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

Expected Results

• #3 is true

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

The title of each Web page should:

• Identify the subject of the Web page

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

• Be short

It may also be helpful for the title to

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

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

No resources available for this technique.

• H25: Providing a title using the title element

Procedure

1. Check that the Web page has a title

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

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

Expected Results

• All checks above are true.

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

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

Procedure

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

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

Expected Results

• #2 is true.

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

No resources available for this technique.

• SCR2: Using redundant keyboard and mouse event handlers
• SCR20: Using both keyboard and other device-specific functions
• SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons

Procedure

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

Expected Results

• #1 is true

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

No resources available for this technique.

• H30: Providing link text that describes the purpose of a link for anchor elements

Procedure

For each link in the content that uses this technique:

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

Expected Results

• The above check is true.

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

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

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

• Why is this non-text content here?

• What information is it presenting?

• What purpose does it fulfill?

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

Resources are for information purposes only, no endorsement implied.

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

Procedure

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

2. Display the long description

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

Expected Results

• #3 is true.

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

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

Resources are for information purposes only, no endorsement implied.

(none listed)

• G87: Providing closed captions

Procedure

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

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

Expected Results

• #2 is true

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

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

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

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

• Why is this non-text content here?

• What information is it presenting?

• What purpose does it fulfill?

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

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

No resources available for this technique.

• G92: Providing long description for non-text content that serves the same purpose and presents the same information
• G95: Providing short text alternatives that provide a brief description of the non-text content
• G196: Using a text alternative on one item within a group of images that describes all items in the group
• H2: Combining adjacent image and text links for the same resource
• H24: Providing text alternatives for the area elements of image maps
• H36: Using alt attributes on images used as submit buttons
• H35: Providing text alternatives on applet elements
• H37: Using alt attributes on img elements
• H53: Using the body of the object element
• H86: Providing text alternatives for ASCII art, emoticons, and leetspeak

Procedure

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

2. Replace it with the text alternative

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

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

Expected Results

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

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

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

• Why is this non-text content here?

• What information is it presenting?

• What purpose does it fulfill?

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

Resources are for information purposes only, no endorsement implied.

• G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description
• G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content
• G92: Providing long description for non-text content that serves the same purpose and presents the same information
• G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

Procedure

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

Expected Results

• Check #1 is true.

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

No resources available for this technique.

(none currently listed)

Procedure

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

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

Expected Results

• Check #1 is true.

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

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

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

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

Resources are for information purposes only, no endorsement implied.

• Chicago Manual of Style - Q&A - Abbreviations

• G55: Linking to definitions
• G102: Providing the expansion or explanation of an abbreviation
• H28: Providing definitions for abbreviations by using the abbr and acronym elements

Procedure

For each abbreviation in the content,

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

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

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

Expected Results

• Checks #2 and #3 are true.

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

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

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

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

• G155: Providing a checkbox in addition to a submit button
• G168: Requesting confirmation to continue with selected action
• SCR18: Providing client-side validation and alert

Procedure

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

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

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

Expected Results

• Either #1 or #2 is true.

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

Procedure

1. Identify functionality that allows deleting content

2. Delete content and attempt to recover it.

3. Check if deleted information can be recovered.

Expected Results

• #3 is true.

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

Resources are for information purposes only, no endorsement implied.

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

Procedure

1. Check that alternate text provides a descriptive name

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

Expected Results

• #1 or #2 is true

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

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

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

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

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

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

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

No resources available for this technique.

• G55: Linking to definitions
• G62: Providing a glossary
• G70: Providing a function to search an online dictionary
• G112: Using inline definitions

Procedure

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

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

Expected Results

• Check #1 is true.

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

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

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

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

Resources are for information purposes only, no endorsement implied.

• G55: Linking to definitions
• G62: Providing a glossary
• G70: Providing a function to search an online dictionary
• G97: Providing the abbreviation immediately following the expanded form
• H28: Providing definitions for abbreviations by using the abbr and acronym elements

Procedure

For each abbreviation in the content,

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

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

3. Otherwise, the expanded form is provided.

Expected Results

• All the checks above are true.

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

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

• Charts and graphs help users understand complex data.

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

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

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

Resources are for information purposes only, no endorsement implied.

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

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

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

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

(none currently listed)

Procedure

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

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

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

Expected Results

• Checks #2 and #3 are true.

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

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

Procedure

On a site that requires user login to submit data,

1. Log in and begin the timed activity.

2. Allow the session to time out.

3. Submit the data.

4. Re-authenticate.

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

Expected Results

• #5 is true.

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

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

No resources available for this technique.

(none currently listed)

Procedure

1. Using a keyboard, cycle focus through all content

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

Expected Results

• #2 is true

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

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

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

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

Resources are for information purposes only, no endorsement implied.

• G135: Using the accessibility API features of a technology to expose names and roles, to allow user-settable properties to be directly set, and to provide notification of changes
• H44: Using label elements to associate text labels with form controls
• H88: Using HTML according to spec
• H91: Using HTML form controls and links
• SCR21: Using functions of the Document Object Model (DOM) to add content to a page

Procedure

1. Visually inspect the markup or use a tool.

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

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

Expected Results

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

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

Resources are for information purposes only, no endorsement implied.

• H76: Using meta refresh to create an instant client-side redirect
• SVR1: Implementing automatic redirects on the server side instead of on the client side

Procedure

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

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

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

Expected Results

Step 2 is false or step 3 is true.

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

No resources available for this technique.

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

Procedure

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

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

Expected Results

• Check #1 is true.

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

No resources available for this technique.

• G55: Linking to definitions
• G62: Providing a glossary
• G70: Providing a function to search an online dictionary
• H54: Using the dfn element to identify the defining instance of a word

Procedure

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

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

Expected Results

• Check #1 is true.

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

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

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

Resources are for information purposes only, no endorsement implied.

• HTML 4.01 specification

• HTML 4.01 specification, using phrase elements

• Mathematical Markup Language (MathML) Version 2.0, Second Edition

• Jeffrey Zeldman's book "Designing with Web standards"

• Web Design Group's article "Document style: Use the right tag for the job"

• H39: Using caption elements to associate data table captions with data tables
• H42: Using h1-h6 to identify headings
• H44: Using label elements to associate text labels with form controls
• H48: Using ol, ul and dl for lists or groups of links
• H49: Using semantic markup to mark emphasized or special text
• H51: Using table markup to present tabular information
• H71: Providing a description for groups of form controls using fieldset and legend elements

Procedure

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

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

Expected Results

• Check #2 is true.

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

No resources available for this technique.

• H49: Using semantic markup to mark emphasized or special text
• C22: Using CSS to control visual presentation of text

Procedure

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

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

Expected Results

• Check #2 is true.

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

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

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

No resources available for this technique.

• G121: Linking to pronunciations
• G163: Using standard diacritical marks that can be turned off
• H62: Using the ruby element

Procedure

For each word that requires pronunciation information:

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

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

Expected Results

• Check #2 is true.

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

No resources available for this technique.

• G62: Providing a glossary
• G120: Providing the pronunciation immediately following the word
• G163: Using standard diacritical marks that can be turned off
• H62: Using the ruby element

Procedure

For each word that requires pronunciation information:

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

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

Expected Results

• All checks are true.

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

Resources are for information purposes only, no endorsement implied.

• Skip Navigation Links

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

Procedure

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

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

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

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

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

Expected Results

• All checks above are true.

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

Resources are for information purposes only, no endorsement implied.

• Skip Navigation Links

• G1: Adding a link at the top of each page that goes directly to the main content area
• G123: Adding a link at the beginning of a block of repeated content to go to the end of the block

Procedure

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

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

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

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

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

Expected Results

• All checks above are true.

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

Resources are for information purposes only, no endorsement implied.

• Architecture of the World Wide Web, Volume One

• G63: Providing a site map
• G64: Providing a Table of Contents
• G126: Providing a list of links to all other Web pages
• G185: Linking to all of the pages on the site from the home page

Procedure

For each link in the Web page:

1. Check whether the link leads to related information.

Expected Results

• Check #1 is true.

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

No resources available for this technique.

• G1: Adding a link at the top of each page that goes directly to the main content area
• G63: Providing a site map
• G64: Providing a Table of Contents
• G123: Adding a link at the beginning of a block of repeated content to go to the end of the block
• G125: Providing links to navigate to related Web pages

Procedure

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

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

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

Expected Results

• All of the checks above are true.

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

No resources available for this technique.

• G65: Providing a breadcrumb trail
• G88: Providing descriptive titles for Web pages

Procedure

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

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

Expected Results

• Check #1 or check #2 is true.

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

No resources available for this technique.

• H92: Including a text cue for colored form control labels

Procedure

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

1. Check that the user is [begin change]given[end change] an indication of the currently selected item within the navigational unit.

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

Expected Results

• Checks #1 and #2 are true.

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

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

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

Resources are for information purposes only, no endorsement implied.

• Quick tips for accessible headings

Procedure

1. Determine if the Web page contains headings.

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

Expected Results

• Check #2 is true.

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

No resources available for this technique.

Procedure

For each interface component in the content:

1. Identify the purpose of the interface component.

2. Check that any required label is present.

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

Expected Results

• Checks #2 and #3 are true.

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

Procedure

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

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

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

Expected Results

1. All checks are true.

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

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

Resources are for information purposes only, no endorsement implied.

• Do not forget to add a doctype by the W3C Quality Assurance Initiative explains what doctypes are and why you should use them.

• Recommended DTDs to use in your Web document by the W3C Quality Assurance Initiative is a list of commonly used declarations.

• How do I validate my code or check for possible errors? describes the tools in the free editor HTML-Kit for checking HTML, CSS and XML.

Validating HTML and XHTML

• The W3C Markup Validation Service by the World Wide Web Consortium allows you to validate HTML and XHTML files by URI, by file upload and by direct input of complete HTML or XHTML documents. There are also separate pages with an extended interface for file upload and for validating by URI (advanced options such as encodings and document types).

• Installation Documentation for the W3C Markup Validation Service explains how to install this service (for example for use on an intranet).

• HTML Validator is a German version of the W3C Markup Validation Service.

• WDG HTML Validator by the Web Design Group allows you to enter a URI to validate single pages or entire sites. There are also versions to validate Web pages in batch mode (by specifying one or more URIs of HTML documents to validate), by file upload and by direct input of HTML code.

• Offline HTMLHelp.com Validator is a tool for Unix users; it is the off-line version of the online WDG HTML Validator.

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

• Off-line HTML Validator for Windows by Jan Kacur is another validator based on James Clark's open-source SGML parser. Source code (in Delphi) is also available.

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

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

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

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

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

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

• Modifying Dreamweaver to Produce Valid XHTML by Carrie Bickner.

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

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

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

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

Validating XML

• HTML/XHTML/WML/XML Validator allows you to validate documents by URI or by file upload. An extended interface is also available.

• HTML/XHTML/WML/XML Validator is a German version of the same validator.

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

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

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

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

• STG XML Validation Form by the Scholarly Technology Group of Brown University allows you to validate XML files by URI, by file upload and by direct input of complete XML documents.

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

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

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

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

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

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

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

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

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

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

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

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

Validating CSS

• The W3C CSS Validation Service allows you to validate CSS files by URI, by file upload and by direct input of CSS code.

• The W3C CSS Validation Service: Validate by URI is an extended interface that allows you to specify a CSS stylesheet or an HTML page with CSS, specify the CSS profile and medium, and choose the types of warnings that should be displayed.

• CSSCheck by the Web Design Group allows you to validate CSS files by URI and by direct input of CSS code. Note that it is primarily a CSS 1 checker.

• CSSCheckUp by the Web Design Group allows you to validate CSS files by file upload. Note that it is primarily a CSS 1 checker.

• CSS (Cascading Style Sheets) Validator allows you to validate CSS files by URI.

• Off-line CSS Validator – A clipbook for NoteTab

(none currently listed)

Procedure

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

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

2. Check that no validation errors are found.

For CSS:

1. Load each external or internal stylesheet into a CSS validator.

2. Check that no validation errors are found.

For other technologies:

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

Expected Results

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

Step 2 is true.

For CSS:

Step 2 is true.

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

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

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Procedure

1. Render content using an accessible User Agent

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

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

Expected Results

• Step #3 is true for each user interface component

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

conforming alternate version

version that

1. conforms at the designated level, and

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

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

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

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

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

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

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

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

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

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

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

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

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

See Understanding Conforming Alternate Versions

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

• SVR2: Using .htaccess to ensure that the only way to access non-conforming content is from conforming content

Procedure

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

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

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

Expected Results

• Both #2 and #3 are true.

The objective of this technique is to combine color and semantic markup to convey information. Most users can quickly scan the content to locate information conveyed by using color. For users who cannot see color, semantic markup can provide a different type of cue. User agents can then make this type of structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.

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

Resources are for information purposes only, no endorsement implied.

• Screen Readers lack emphasis

• Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM

• H92: Including a text cue for colored form control labels
• H49: Using semantic markup to mark emphasized or special text

Procedure

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

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

Expected Results

• Check #1 is true.

The objective of this technique is to help users find input errors where the information supplied by the user is not accepted. This includes fields with missing required information and fields with incorrect information. When users enter data input that is checked, and input errors are detected, a link to that error is provided so that the user does not have to search for it. One approach is to use server-side validation, and to re-display the form (including any previously entered data), and a text description at the top of the page that indicates the fact that there was an input error, describes the nature of the problem, and provides a link the field(s) with a problem.

• G83: Providing text descriptions to identify required fields that were not completed
• G85: Providing a text description when user input falls outside the required format or values
• SCR18: Providing client-side validation and alert

Procedure

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

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

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

4. Check that there is a link to each field that [begin delete]has [end delete]is missing required data from the missing data message

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

Expected Results

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

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

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

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

Following this technique allows user agents to:

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

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

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

• C29: Using a style switcher to provide a conforming alternate version

Procedure

1. Examine the encoding of a document.

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

Expected Results

• Check #2 is true

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

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

Resources are for information purposes only, no endorsement implied.

• Quick tips for accessible headings

• H42: Using h1-h6 to identify headings

Procedure

1. Examine a page with content organized into sections.

2. Check that a heading for each section exists.

Expected Results

• Check #2 is true.

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

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

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

(none currently listed)

Procedure

1. Display content in a user agent

2. Zoom content to 200%

3. Check whether all content and functionality is available

Expected Results

• Check #3 is true.

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

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

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

Procedure

1. Remove, hide, or mask the CAPTCHA.

2. Replace it with the text alternative.

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

Expected Results

• Check #3 is true.

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

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

Procedure

For each CAPTCHA in a Web page

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

Expected Results

• Check #1 is true.

The objective of this technique is to make sure that users can read text that is presented over a background. This technique relaxes the 4.5:1 contrast ratio requirement for text that is at least 18 point (if not bold) or at least 14 point (if bold).

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

If the background or the letters vary in relative luminance (or are patterned), then the background around the letters can be chosen or shaded so that the letters maintain a 3: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.

Resources are for information purposes only, no endorsement implied.

• Contrast Analyser – Application

• Contrast Ratio Analyser - online service

• Colour Contrast Analyser - Firefox Extension

• Color Contrast Samples

• Atypical colour response

• Colors On the Web Color Contrast Analyzer

• Tool to convert images based on color loss so that contrast is restored as luminance contrast when there was only color contrast (that was lost due to color deficiency)

• List of color contrast tools

(none currently listed)

Procedure

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

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

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

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

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

     and R_sRGB, G_sRGB, and B_sRGB are defined as:

     • R_sRGB = R_8bit/255

     • G_sRGB = G_8bit/255

     • B_sRGB = B_8bit/255

     The "^" character is the exponentiation operator.

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

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

3. Calculate the contrast ratio using the following formula.

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

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

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

Expected Results

• #4 is true

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

The basic principles of liquid layouts are to:

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

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

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

Resources are for information purposes only, no endorsement implied.

• CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns

• Liquid Designs

• C12: Using percent for font sizes
• C13: Using named font sizes
• C14: Using em units for font sizes

Procedure

1. Display content in a user agent.

2. Increase text size to 200%.

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

Expected Results

• Check #3 is true.

The objective of this technique is to make sure that users can read text that is presented over a background. With this technique the author avoids having to do any contrast measures by simply not specifying the text color and not specifying the background. As a result the colors of both are completely determined by the user agent.

Resources are for information purposes only, no endorsement implied.

• Contrast Analyser – Application

• Contrast Ratio Analyser - online service

• Colour Contrast Analyser - Firefox Extension

• Color Contrast Samples

• Atypical colour response

• Colors On the Web Color Contrast Analyzer

• Tool to convert images based on color loss so that contrast is restored as luminance contrast when there was only color contrast (that was lost due to color deficiency)

• List of color contrast tools

• G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text

Procedure

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

2. Check that text color is not specified

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

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

Expected Results

• # 2 and 4 are true

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

Resources are for information purposes only, no endorsement implied.

• User Agent Accessibility Guidelines 10.2: Highlight selection, content focus, enabled elements, visited links

Procedure

For each focusable component in the Web page:

1. Set focus to the control

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

Expected Results

• #2 is true

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

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

• G9: Creating captions for live synchronized media

Procedure

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

Expected Results

• #1 is true

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

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

• G150: Providing text based alternatives for live audio-only content
• G58: Placing a link to the alternative for time-based media immediately next to the non-text content
• G69: Providing an alternative for time based media
• G157: Incorporating a live audio captioning service into a Web page

Procedure

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

2. Check that the live audio follows the script.

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

Expected Results

• All checks above are true.

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

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

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

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

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

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

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

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

Procedure

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

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

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

Expected Results

• Check #3 is true

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

In order to reduce the complexity of the text:

• Develop a single topic or subtopic per paragraph.

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

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

• Consider dividing longer sentences into two.

• Use sentences that contain no more than two conjunction.

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

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

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

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

• Use single nouns or short noun-phrases.

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

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

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

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

• Use verb tenses consistently.

• Use names and labels consistently.

Procedure

1. Measure the readability of the text.

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

Expected Results

• Check #2 is true.

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

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

• G98: Providing the ability for the user to review and correct answers before submitting
• G99: Providing the ability to recover deleted information

Procedure

For user input pages that cause irreversible transactions to occur:

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

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

Expected Results

• Checks #1 and #2 are true

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

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

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

Resources are for information purposes only, no endorsement implied.

• BBC's Web page with instructions how to change the browser colors in most browsers

Procedure

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

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

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

Expected Results

• Check #3 is true.

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