This Web page lists General Techniques from Techniques for WCAG 2.0: Techniques and Failures for Web Content Accessibility Guidelines 2.0. For information about the techniques, see Introduction to Techniques for WCAG 2.0. For a list of techniques for other technologies, see the Table of Contents.
All technologies that contain links
This technique relates to:
The objective of this technique is to provide a mechanism to bypass blocks of material that are repeated on multiple Web pages by skipping directly to the main content of the Web page. The first interactive item in the Web page is a link to the beginning of the main content. Activating the link sets focus beyond the other content to the main content. This technique is most useful when a Web page has one main content area, rather than a set of content areas that are equally important.
Note: Visible links are necessary for those navigating with a keyboard including switch users, those using techniques that generate keyboard strokes slowly, screen magnification software users, screen reader users working with sighted colleagues, keyboard only users and those navigating using voice recognition software.
An on-line newspaper contains many sections of information: a search function, a corporate banner, sidebars, minor stories, how to contact the newspaper, etc. The lead story is located in the middle of the page. The first link that the user reaches when tabbing through the page is titled "Skip to Lead Story". Activating the link moves visual focus to the story. Pressing tab again takes the user to the first link in the main story.
A Web page includes a variety of navigation techniques on each page: a bread crumb trail, a search tool, a site map, and a list of related resources. The first link on the page is titled "Skip to Main Content". A user activates the link to skip over the navigation tools.
Resources are for information purposes only, no endorsement implied.
Check that a link is the first focusable control on the Web page.
Check that the description of the link communicates that it links to the main content.
Check that the link is either always visible or visible when it has keyboard focus.
Check that activating the link moves the focus to the main content.
Check that after activating the link, the keyboard focus has moved to the main content
All checks above are true.
Any technology that includes moving or scrolling content.
This technique relates to:
The objective of this technique is to provide a way to pause movement or scrolling of content. If the user needs to pause the movement, to reduce distraction or to have time to read it, they can do so, and then restart it as needed. This mechanism can be provided either through interactive controls that conform to WCAG or through keyboard shortcuts. If keyboard shortcuts are used, they are documented.
A site contains a scrolling news banner at the top of the page. Users who need more time to read it can press the Escape key to pause the scrolling. Pressing Escape again restarts it.
A Web page contains a link labeled "How to tie a shoe" which links to a Flash animation. Text immediately preceding the link informs the user that pressing the spacebar will pause the animation and restart it again.
On a page with moving or scrolling content,
Use the mechanism provided in the Web page or by the user agent to pause the moving or scrolling content.
Check that the moving or scrolling has stopped and does not restart by itself.
Use the mechanism provided to restart the moving content.
Check that the movement or scrolling has resumed from the point where it was stopped.
#2 and #4 are true.
This technique applies to any technologies or methods supporting the implementation of an activity which does not require timed interaction for its functionality.
This technique relates to:
The objective of this technique is to provide users with all the time they need to complete an activity. This technique involves providing a specified activity which does not require timed interaction. Users are allowed as much time as they need to interact with the activity.
An interactive exam for a course provides all questions on one Web page. Users can take as much time as they need to complete it.
In an interactive game, users can take as much time as they like on their turn instead of having to complete their move within a limited amount of time.
In an online auction, each bidder can submit only one bid rather than submitting multiple competitive bids based on timing. The bidding is open for a full day, providing enough time for anyone to complete the simple bid form. Once bidding is closed, the best bid wins.
Resources are for information purposes only, no endorsement implied.
Determine if any timed interactions are present.
#1 is false.
Any technology that supports audio and video.
This technique relates to:
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 dialog. Extended audio description temporarily pauses the audio and video to allow critical information to be delivered when pauses in dialog 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 dialog but also the context and other aspects of the video that are not communicated by the characters' dialog alone, and for which there is insufficient time during the natural dialog.
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.
An alternate version of an online video of a family escaping from a burning building, there is a continuous dialog between the husband and wife about where the children are. Meanwhile, in the background, a wall caves in, which is important information in the story because it will block their exit from that part of the building. The video track halts (same frame is repeated) while a narrator gives the details about the wall falling and the video continues.
A training film has narrative that runs almost continuously throughout. An alternate version is available for people who have difficulty viewing the video portion. The alternate version freezes the video and provides audio description of key information.
Resources are for information purposes only, no endorsement implied.
Open the version of the movie that includes extended audio descriptions.
Check that the video halts for extended audio description when there is not enough space to include necessary narration between the natural dialog.
Check that the necessary information is in the audio description.
Checks #2 and #3 are true.
Applies to all technologies that present Audio Visual information
This technique relates to:
The objective of this technique is to allow users who cannot hear to be able to access real-time 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.
Example 1: A television studio uses a real-time captioning service to create captions for its evening news online.
Resources are for information purposes only, no endorsement implied.
a procedure and policy are in place to ensure that captions are delivered in real-time
#1 is true
programming technologies that have standard components that are programmed to interface with accessibility APIs
This technique relates to:
The objective of this technique is to allow assistive technology to understand Web content so that it can convey equivalent information to the user through an alternate user interface.
Sometimes content is not created using markup language but rather using a programming language or tools. In many cases, these technologies have interface components that are already programmed to interface with accessibility APIs. If and author uses these components and fills in the properties (e.g. name, etc) the resulting user interface components in the content will be accessible to assistive technology.
However, if an author wants to create a user interface component that is new and they cannot use standard components, then they need to be sure to add the accessibility provisions themselves - and implement them in a way that is compatible with the accessibility API.
Example 1: A Web page uses java to create an applet. A group of authors wants to create an entirely new type of interface component so they cannot use existing Java objects. They use Java swing classes to create their component because the Java swing classes already have provisions for connecting to different accessibility APIs. Using the Java swing classes they are able to create an interface component that exposes its name and role, is able to be set by AT and alerts AT to any updates.
Example 2: A Web page uses an original ActiveX control that is written in the C++ programming language. The control is written to explicitly support the Microsoft Active Accessibility (MSAA) API to expose information about accept commands. The control then interacts directly with assistive technology running the user agent on systems that support MSAA.
Resources are for information purposes only, no endorsement implied.
(none currently listed)
Render content using an accessible User Agent
Use an Accessibility Tool designed for the Accessibility API of the User agent to evaluate each user interface component
Check that name and role for each user interface component is found by the tool.
Change the values on the component
Check that the Accessibility tool is alerted.
Step #3 and #5 are true for each user interface component
Technologies that support blinking content.
This technique relates to:
The objective of this technique is to minimize the distraction caused by blinking content and enable users to re-focus on the other content on the page.
Blinking content can be created using a variety of technologies, many of which include options to loop blinking content continuously or to otherwise specify the amount of time the blinking content is displayed. Limiting the blinking of content to five seconds minimizes the distraction that blinking can cause. This will benefit people with certain types of learning disabilities and people with low vision.
An animated image is used to highlight items on sale. Within a list of items for purchase, an image of a red tag followed by the phrase "On sale" is used to indicate items being offered at a reduced price. The image of the red tag blinks on loading of the page and stops within five seconds.
Find all items that blink.
For each item that blinks, determine if the interval between the start and end of the blinking is less than five seconds.
#2 is true.
Applies to all technologies.
This technique relates to:
The objective of this technique is to provide information to users about what will happen when a change to a form control results in a change of context. Because changing the value of a form control does not typically result in a change of context, it is important that authors provide instructions that make the user aware of the behavior in advance. Where possible, it is a good idea to programmatically associate the instructions describing the change with the form control itself.
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.
A series of radio buttons at the top of a page include options for German, French and Spanish. Instructions precede the buttons that instruct the user that the language will be changed upon selecting an option.
A 50 question online survey displays one question at a time. Instructions appear at the beginning of the survey that explain that users will be taken to the next question of the survey upon selecting an answer to each question.
Resources are for information purposes only, no endorsement implied.
Locate content where changing the setting of a form control results in a change of context
Check to see that an explanation of what will happen when the control is changed is available prior to the controls activation
Check #2 is true.
All technologies that support color and text.
This technique relates to:
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.
The schedule for sessions at a technology conference is organized into three tracks. Sessions for Track 1 are displayed over a blue background. Sessions in Track 2 are displayed over a yellow background. Sessions in Track 3 are displayed on a green background. After the name of each session is a code identifying the track in text: T1 for Track 1, T2 for Track 2, and T3 for Track 3.
The schedule for sessions at a technology conference is organized into three tracks. Next to the title of each session is a colored icon showing what track it belongs to: blue icons represent track 1, yellow icons represent Track 2, and green icons represent Track 3. Each icon is associated with a text alternative reading "Track 1," "Track 2," or "Track 3," as appropriate.
A form contains several required fields. The labels for the required fields are displayed in red. In addition, at the end of each label is an asterisk character, *. The instructions for completing the form indicate that "all required fields are displayed in red and marked with an asterisk *", followed by an example.
An on-line loan application explains that green buttons advance in the process and red buttons cancel the process. A form contains a green button containing the text Go. The instructions say "Press the button labeled Go to submit your results and proceed to the next step."
No resources available for this technique.
For each item where a color difference is used to convey information:
Check that the information conveyed is also available in text and that the text is not conditional content.
Check #1 is true.
Applies to any technology
This technique relates to:
The purpose of 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.
Note 1: There are some simple tests that can be run for particular simple types of flashing. For example:
If material flashes 3 times per second or less then the simple test in G19: Ensuring that no component of the content flashes more than three times in any 1-second period can be used.
If material flashes in only one place on screen at a time and is quite small then the simple test in technique G176: Keeping the flashing area small enough can be used.
Note 2: For all other types, a tool is needed to keep track of all the factors and apply them to the video on a time-continuous basis.
An animation of a thunderstorm shows six flashes of lightning. The flashes are so fast and large that the general flash threshold is violated when tested with a flash analysis tool. The animation is modified to create a short pause after each pair of lightning flashes. After the changes are made, the animation does not violate the general flash threshold.
Resources are for information purposes only, no endorsement implied.
Check to see to see that content does not violate the general flash and/or red flash threshold
use a tool that to determine that neither the General Flash nor Red Flash threshold were exceeded
Check #1 is true.
Any technology that produces visual output.
This technique relates to:
The objective of this technique is to make sure that users can read text that is presented over a background. This technique goes beyond the 5:1 contrast technique to provide a higher level of contrast to make it easier for people with low vision to read.
If the background is a solid color (or all black or all white) then the contrast ratio of the text can be maintained by making sure that each of the text letters have a 7:1 contrast ratio with the background.
If the background or the letters vary in relative luminance (or are patterned), then the background around the letters can be chosen or shaded so that the letters maintain a 7:1contrast ratio with the background behind them even if they do not have that contrast ratio with the entire background.
The contrast ratio can sometimes be maintained by changing the relative luminance of the letters as the relative luminance of the background changes across the page.
Another method is to provide a halo around the text that provides the necessary contrast ratio if the background image or color would not normally be sufficiently different in relative luminance.
A black background is chosen so that light colored letters that match the company's logo can be used.
Text is placed over a picture of the college campus. Since a wide variety of colors and darknesses appear in the picture the area behind the text is fogged white so that the picture is very faint and the maximum darkness is still light enough to maintain a 7:1 contrast ratio with the black text written over the picture.
Resources are for information purposes only, no endorsement implied.
(none currently listed)
Measure the relative luminance of each letter (unless they are all uniform) using the formula:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:
if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
and RsRGB, GsRGB, and BsRGB are defined as:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
The "^" character is the exponentiation operator.
Note: For aliased letters, use the relative luminance value found two pixels in from the edge of the letter.
Measure the relative luminance of the background pixels immediately next to the letter using same formula.
Calculate the contrast ratio using the following formula.
(L1 + 0.05) / (L2 + 0.05), where
L1 is the relative luminance of the lighter of the foreground or background colors, and
L2 is the relative luminance of the darker of the foreground or background colors.
Check that the contrast ratio is equal to or greater than 7:1
#4 is true
Any technology that produces visual output.
This technique relates to:
The objective of this technique is to make sure that users can read text that is presented over a background. For Success Criterion 1.4.3, this technique describes the minimum contrast ratio for text that is less than 18 point (if not bold) and less than 14 point (if bold). For Success Criterion 1.4.5, this technique relaxes the 7:1 contrast ratio requirement for text that is at least 18 point (if not bold) or at least 14 point (if bold).
If the background is a solid color (or all black or all white) then the relative luminance of the text can be maintained by making sure that each of the text letters have 5:1 contrast ratio with the background.
If the background or the letters vary in relative luminance (or are patterned) then the background around the letters can be chosen or shaded so that the letters maintain 5:1 contrast ratio with the background behind them even if they do not have that contrast ratio with the entire background.
The contrast ratio can sometimes be maintained by changing the relative luminance of the letters as the relative luminance of the background changes across the page.
Another method is to provide a halo around the text that provides the necessary contrast ratio if the background image or color would not normally be sufficiently different in relative luminance.
A black background is chosen so that light colored letters that match the companies logo can be used.
Text is placed over a picture of the college campus. Since a wide variety of colors and darknesses appear in the picture, the area behind the text is fogged white so that the picture is very faint and the maximum darkness is still light enough to maintain a 5:1 contrast ratio with the black text written over the picture.
See also the contrast samples in related resources.
Resources are for information purposes only, no endorsement implied.
(none currently listed)
Measure the relative luminance of each letter (unless they are all uniform) using the formula:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:
if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
and RsRGB, GsRGB, and BsRGB are defined as:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
The "^" character is the exponentiation operator.
Note: For aliased letters, use the relative luminance value found two pixels in from the edge of the letter.
Measure the relative luminance of the background pixels immediately next to the letter using same formula.
Calculate the contrast ratio using the following formula.
(L1 + 0.05) / (L2 + 0.05), where
L1 is the relative luminance of the lighter of the foreground or background colors, and
L2 is the relative luminance of the darker of the foreground or background colors.
Check that the contrast ratio is equal to or greater than 5:1
The contrast ratio is equal to or greater than 5:1
#4 is true.
Applies to any technology
This technique relates to:
The objective of this technique is to avoid flashing at rates that are known to cause seizures if the flashes are bright and large enough. Since some users may be using screen enlargers, this technique limits the flashing of any size content to no more than three flashes in any 1-second period.
Note 1: This technique is stricter than the Level 1 Success Criteria but is easier to test and can be used to meet the Level 1 Success Criteria because all failure thresholds in the Level 1 Success Criteria involve flashing 3.5 flashes or more within one second. Most content does not flash at all and even content that blinks does not blink this fast except on rare occasions. Therefore, in order to avoid having to carry out the more complex testing specified by the Success Criteria, one could follow this technique to ensure that content only flashes one, two, or at most three times in any 1-second period.
Note 2: Regarding 3.5 Flashes; if there are seven transitions from dark to light or light to dark, it would be 3.5 flashes, which is more than the allowed three flashes (six transitions).
Examples of 3.5 flashes or seven transitions:
STARTING DARK-LIGHT-DARK-LIGHT-DARK-LIGHT-DARK-LIGHT or
STARTING LIGHT-DARK-LIGHT-DARK-LIGHT-DARK-LIGHT-DARK.
Content has lightning flashes. Content is designed so that lightning only flashes two or three times without a pause in flashing.
Resources are for information purposes only, no endorsement implied.
Check that there are no more than three flashes during any 1-second period.
If there are three flashes, check that the Light/Dark status at the end of the 1-second period is the same as at the start.
Both Step 1 and Step 2 are true.
All technologies which support interactive operation.
This technique relates to:
The objective of this technique is to ensure that keyboard users do not become trapped in a subset of the content that can only be exited using a mouse or pointing device. A common example is content rendered by plug-ins. Plug-ins are user agents that render content inside the user agent host window and respond to all user actions that takes place while the plug-in has the focus. If the plug-in does not provide a keyboard mechanism to return focus to the parent window, users who must use the keyboard may become trapped in the plug-in content.
This problem can be avoided by using one of the following mechanisms to provide a way for users to escape the subset of the content:
Ensuring that the keyboard function for advancing focus within content (commonly the tab key) exits the subset of the content after it reaches the final navigation location.
Providing a keyboard function to move the focus out of the subset of the content. Be sure to document the feature in an accessible manner within the subset.
If the 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.
Once a user tabs into an applet, further tabs are handled by the applet preventing the person from tabbing out. However, the applet is designed so that it returns keyboard focus back to the parent window when the person finishes tabbing through the tab sequence in the applet.
A page that includes content that is not accessibility-supported contains instructions about how to move focus back to the accessibility-supported content via the keyboard. The instructions precede the non accessibility-supported content.
The help information available from the content that is not accessibility supported documents how to move focus back to the accessibility-supported content via the keyboard, and the help information can be accessed via the keyboard.
The help information available for the Web page documents how to move focus from the content that is not accessibility supported to the accessibility-supported content via the keyboard, and the help information can be accessed via the keyboard.
No resources available for this technique.
(none currently listed)
tab through content from start to finish.
check to see if keyboard focus is trapped in any of the content such that the person cannot move out of any part of the content and continue through the rest of the content.
#2 is false
All technologies that contain links.
This technique relates to:
JAWS 5.0 and later includes the following keystrokes:
alt+leftArrow: read previous sentence
alt+rightArrow: read next sentence
alt+NumPad 5: read current sentence
Ctrl+NumPad5: read current paragraph
Window-Eyes 5.5 has hotkeys to read the current sentence and current paragraph.
To surf the internet with WindowEyes you must be in browse mode. Current sentence and current paragraph hot keys do not work in browse mode in version 6.1.
The factory default settings for reading surrounding link context are as follows:
Desktop settings:
Character = CTRL-NUMPAD-LEFT ARROW
Word = CTRL-NUMPAD-RIGHT ARROW
Line = CTRL-NUMPAD-CENTER
Sentence = Not available in Browse mode
(Next Sentence command is undefined by default on Desktop mode but the next line is the DOWN Arrow.)
Next Paragraph = P
Prior Paragraph = Shift P
Current Paragraph = Not Available in Browse mode
Laptop
Character = ALT-SHIFT-LESS THAN
Word Prior = ALT-SHIFT-J
Word = ALT-SHIFT-K
Word Next = ALT-SHIFT-L
Sentence Prior = ALT-SHIFT-7
Sentence = unavailable in browse mode
Sentence Next = unavailable in browse mode
Paragraph = Undefined on Laptop by default
Line Prior = ALT-SHIFT-U
Line = ALT-SHIFT-I
Line Next = ALT-SHIFT-O
The objective of this technique is to identify the purpose of a link from the link and its sentence context. The sentence enclosing the link provides context for an otherwise unclear link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the URI of the destination is generally not sufficiently descriptive.
Note: These descriptions will be most useful to the user if the additional information needed to understand the link precedes the link. If the additional information follows the link, there can be confusion and difficulty for screen reader users who are reading through the page in order (top to bottom).
A Web page contains the sentence "To advertise on this page, click here."
Although the link phrase 'click here' is not sufficient to understand the link, the information needed precedes the link in the same sentence.
A Web page contains the sentence "The first pilgrims came to America on the Mayflower."
In the news summary containing the sentence "The Smallville Times reports that the School Board chose a 2007 school calendar that starts on August 27.", the words "reports that" are a link to an article in the Smallville Times about the School Board meeting.
Note: Although this example satisfies the Success Criterion, putting information needed to understand the link after the link in this way is awkward for those who are reading through the document with a screen reader.
No resources available for this technique.
For each link in the content that uses this technique:
Check that the link is part of a sentence
Check that text of the link combined with the text of its enclosing sentence describes the purpose of the link
The above checks are true.
Applies to all technologies that present synchronized media information
This technique relates to:
The objective of this technique is to allow users who cannot hear or read text rapidly to be able to access 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.
Note 1: If the video stream is too small, the sign language interpreter will be indiscernible. When creating a video steam that includes a video of a sign language interpreter, make sure there is a mechanism to play the video stream full screen in the accessibility-supported content technology. Otherwise, be sure the interpreter portion of the video is adjustable to the size it would be had the entire video stream been full screen.
Note 2: Since sign language is not usually a signed version of the printed language, the author has to decide which sign language to include. Usually the sign language of the primary audience would be used. If intended for multiple audiences, multiple sign languages may be used. Refer to advisory techniques for multiple sign languages.
Example 1: A television station provides a sign language interpreter in the corner of its on-line news video.
Resources are for information purposes only, no endorsement implied.
Guidelines for the Production of Signing Books
"Sign Language presentation" gives a broad overview of issues to consider when filming sign language interpreters. Includes discussion of signing both written and spoken originals.
Techniques for filming are discussed in chapter 12, “Filming the Signer(s)".
Useful information about how to display the sign language interpreter in relation to the original synchronized media content is provided in Chapter 13, "Editing"
Note: These techniques may need to be adapted for Web-based presentation.
(none currently listed)
Have someone watch the program who can hear and is familiar with the sign language being used.
Check to see if there is a sign language interpreter on screen.
Check to see that dialog and important sounds are being conveyed by the interpreter visible on screen.
#2 and #3 are true
All technologies that include links.
This technique relates to:
The objective of this technique is to make the definition of a word, phrase, or abbreviation available by providing the definition, either within the same Web page or in a different Web page, and establishing a link between the item and its definition.
Links are a powerful option for providing access to the definition of a word, phrase, or abbreviation. A user can use the link to find the definition quickly and easily, and then return to his place in the content via the user agent's Back button.
Technical terms and abbreviations in an article about sports injuries are linked to definitions in a medical dictionary.
A textbook contains a glossary of new vocabulary words introduced in each chapter. The first occurrence of each of these words is linked to its definition in the glossary.
A general glossary of abbreviations is provided. All occurrences of abbreviations are linked directly to the appropriate definition within that glossary.
The word jargon is linked to its definition in the WCAG2 Glossary.
The word "modulo" is jargon used in Web content about mathematics. A definition for modulo is included within the Web page. Each occurrence of the word modulo is linked to its definition.
A Japanese idiom is linked to its definition. This example uses a link within the page to navigate to the definition of an idiomatic expression.
<p>....<a href="#definition">さじを投げる</a>....</p> <h3>脚注：</h3> <dl> <dt id="definition" name="definition">さじを投げる</dt> <dd>どうすることもできなくなり、あきらめること。</dd> </dl>
No resources available for this technique.
(none currently listed)
For each word, phrase, or abbreviation to be defined:
Check that at least the first instance of the item is a link.
Check that each link navigates to the definition of the item.
Checks #1 and #2 are true.
Any technology
This technique relates to:
The objective of this technique is to allow authors to include sound behind speech without making it too hard for people with hearing problems to understand the speech. Making sure that the foreground speech is 20 db louder than the backgound sound makes the speech 4 times louder than the background audio. For information on Decibels (dB), refer to About Decibels.
A narrator is describing a riot scene. The volume of the riot scene is adjusted so that it is 20 db lower than the announcer's volume before the scene is mixed with the narrator.
The following is a link to an mp3 file. It is an audio track that has been mixed so that there is sufficient contrast between the foreground and background sounds. When it is listened to, the foreground is heard clearly above the background.
Example of good audio contrast (MP3)
Here is a transcript of the speaking voice on this good contrast example:
"Usually the foreground refers to a voice that is speaking and should be understood. My speaking voice right now is 20 decibels above the background which is the music. This is an example of how it should be done."
After the foreground and the background sound tracks have been mixed to one single file, that single file can be opened in any popular audio editing software package and viewed in an editing window that renders a visual representation of the audio content. This can be used to help determine the contrast level between the foreground and background of an audio track.
The graphic below (figure 1) is a visual representation of the mp3 audio file above that has sufficient contrast between the foreground and the background. Both the foreground and the background are in the selected portion of the wave file.
The selected region of the wave file in figure 1 above which contains both the foreground and background sound is a very large wave. The selected region of Figure 2 below which contains only background sound is a much smaller wave.
The following is a link to an MP3 audio example of insufficient contrast between a narrator and background music:
Example of bad audio contrast (MP3)
Here is the transcript of the voice on the insufficient contrast example:
"This is an example of a voice that is not loud enough against the background. The voice, which is the foreground sound, is only about 2 decibels above the background sound. Therefore is difficult to understand for a person who is hard of hearing. It is hard to discern one word from the next. This is an example of what not to do."
Resources are for information purposes only, no endorsement implied.
About Decibels by Gregg Vanderheiden
(none currently listed)
Locate loud values of background content between foreground speech
Measure the volume in dB(A) SPL
Measure the volume of the foreground speech in dB(A) SPL
Subtract the values
Check that the result is 20 or greater.
#5 is true
All technologies.
This technique relates to:
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 if the underlying order of the content is confusing.
For example, when mixing languages with different directionality in HTML, the bidirectional algorithm may place punctuation in the wrong place. Correctly ordered content maintains the punctuation in the correct sequence in the content stream and uses markup to override the bidirectional algorithm, rather than moving the punctuation in the content stream so that the default rendering positions it correctly.
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.
A Web page from a museum exhibition contains a navigation bar containing a long list of links. The page also contains an image of one of the pictures from the exhibition, a heading for the picture, and a detailed description of the picture. The links in the navigation bar form a meaningful sequence. The heading, image, and text of the description also form a meaningful sequence. CSS is used to position the elements on the page.
Markup:
<h1>My Museum Page</h1>
<ul id="nav">
<li><a href="#">Link 1</a></li>
...
<li><a href="#">Link 10</a></li>
</ul>
<div id="description">
<h2>Mona Lisa</h2>
<p>
<img src="img.png" alt="Mona Lisa">
</p>
<p>...detailed description of the picture...</p>
</div>
CSS:
ul#nav
{
float: left;
width: 9em;
list-style-type: none;
margin: 0;
padding: 0.5em;
color: #fff;
background-color: #063;
}
ul#nav a
{
display: block;
width: 100%;
text-decoration: none;
color: #fff;
background-color: #063;
}
div#description
{
margin-left: 11em;
}
No resources available for this technique.
Linearize content using a standard approach for the technology (e.g., removing layout styles or running a linearization tool)
Check to see if the order of content yields the same meaning as the original
Check #2 is true.
This technique is not technology specific and can be used in any technology that supports links.
This technique relates to:
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.
Code on a page called "Olympic_Sports.htm"
<a name="Olympic_Wrestling"></a> <p><a href="http://www.example.com/movies/olympic_wrestling.mov">Olympic Wrestling movie</a>, <a href="http://www.example.com/transcripts/olympic_wrestling_transcript.htm>Olympic Wrestling collated Transcript</a></p>
Code on the page olympic_wrestling_transcript.htm
<p>Sports announcer 1: This is a great battle tonight between England's "Will Johnson" and "Theodore Derringo" from Argentina</p> <p>Scenery: There is a mat set out in the middle of the stadium with 500 people in the stands...</p> <p> ...more dialogue ...<p> <p> ...more scenery...</p> <p> ...etc...</p> <p>Sports announcer 2: And that is all for tonight, thank you for joining us tonight where Will Johnson is the new Gold Medalist. <a href="../movies/Olympic_Sports.htm#Olympic_Wrestling>Return to Movie page</a> </p>
No resources available for this technique.
(none currently listed)
Check for the presence of a link immediately before or after the non-text content
Check that it is a valid link that points directly to the collated document of this particular synchronized media.
Check for the availability of a link or back function to get the user back to the original location of the synchronized media content
Items #1 through 3 are all true.
All technologies that contain interactive elements and define a default tab order for interactive elements.
This technique relates to:
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.
A form contains two text input fields that are to be filled in sequentially. The first text input field is placed first in the content, the second input field is placed second.
A form contains two, side-by-side sections of information. One section contains information about an applicant; the other section contains information about the applicant's spouse. All the interactive elements in the applicant section receive focus before any of the elements in the spouse section. The elements in each section receive focus in the reading order of that section.
No resources available for this technique.
Determine the order of interactive elements in the content.
Determine the logical order of interactive elements.
Check that the order of the interactive elements in the content is the same as the logical order.
Check #3 is true.
Applies to all technologies except those for voice interaction.
This technique relates to:
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.
Example 1: A Web page opens with a trumpet fanfare and then goes silent
Example 2: A homepage opens with the chairman saying "Binfor, where quality is our business." then going silent.
Example 3: A Web page opens with instructions on how to get started: "To begin, press the enter key."
Example 4: A Web page opens with a warning and then goes silent.
Resources are for information purposes only, no endorsement implied.
(none)
(none currently listed)
Load the Web page
Check that all sound that plays automatically stops in 3 seconds or less
#2 is true