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.

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

Procedure

1. Determine if any timed interactions are present.

Expected Results

• #1 is false.

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

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

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

Resources are for information purposes only, no endorsement implied.

• SM1: Adding extended audio description in SMIL 1.0
• SM2: Adding extended audio description in SMIL 2.0

Procedure

1. Play synchronized media with extended audio description enabled

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

Expected Results

• #2 is 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

Procedure

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

Expected Results

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

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

4. Change the values on the component

5. Check that the Accessibility tool is alerted.

Expected Results

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

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.

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.

Resources are for information purposes only, no endorsement implied.

(none currently listed)

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.

• G122: Including a text cue whenever color cues are used

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 this technique is to allow people who have photosensitive seizures to view Web sites without encountering material that is likely to cause a seizure. Warnings can be provided but people may miss them and children may not be able to read or understand them. With this technique all material is checked and if it violates flash or red flash thresholds it is either not put on the site or it is modified so that it does not violate the thresholds.

Resources are for information purposes only, no endorsement implied.

• Harding FPA Web Site

• Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)

(none currently listed)

Procedure

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

1. determine (with or without instruments) that there are no more than three flashes (6 transitions) of any kind in any one second period

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

   OR

2. determine that flashing is greater than 50 hz OR

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

Expected Results

• Any one of the steps above 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 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

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

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

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

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

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

Expected Results

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

• #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: Ensuring 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.