Guideline: Provide alternative text for all images, applets, and image maps, including images used as submit buttons and all of the links within an image map. [Priority 1]
Rationale: Otherwise, users who are blind, have low vision, or have chosen not to view graphics will not know the purpose of the visual components on the page. Example
Since ASCII art uses characteres to create a visual image there is no way to attach alt-text as with other images.
Techniques:
- For all images (IMG) provide alt-text ("alt") [Priority 1]
- For all applets (APPLET)provide alt-text and content [Priority 1]
- For all image map links (AREA)
- Provide alt-text [Priority 1].
- Also provide redundant links [Priority 2].
- Don't use server-side image maps unless the same function or information is available in an alternative accessible format. [Priority 1]
- For all graphical buttons (INPUT type="image") provide alt-text ("alt") [Priority 1]
- Replace ASCII art with an image and alt-text. [Priority 2 unless the art conveys important information (e.g., a chart) then it would be Priority 1]. Note. If the description of (important) ASCII art does not fit in "alt" then use a d-link (see A-2).
- If OBJECT is used to embed any of the above components, provide text within the OBJECT element (since OBJECT does not have "alt") [Priority 1].
Guideline: Provide descriptions for graphics, scripts, or applets that convey important information (unless it is already fully presented in the alt-text or accompanying text on page). [Priority 1]
Rationale: Otherwise, important information presented graphically (charts, billboards, diagrams) will not be perceivable to people with blindness, some people with low vision, and users who have chosen not to view graphics, scripts, or applets or whose browser does not support scripts or applets.
Techniques:
- Provide a long description of all graphics which convey important information by using "longdesc". [Priority 1]
- Until most browsers support "longdesc", also use d-links (or invisible d-links). [Priority 1]
- If OBJECT is used to incorporate an image into a page, and it presents important information, there are many ways to convey the information presented by the image when it is not viewable. [Priority 1]
Guideline: Provide textual equivalents (captions) for all audio information. If the audio is associated with a visual presentation (movie or animation), synchronize the textual equivalents with the visual presentation. [Priority 1]
Rationale: Otherwise, users who are deaf, or hard of hearing, or who have sound turned off cannot perceive the information presented through sounds such as speech, sound effects, and music.
Techniques:
- For stand alone audio files provide a textual transcript of all words spoken or sung and significant sounds. [Priority 1]
- For audio associated with video, provide a textual transcript (of dialog and sounds) synchronized with the video (e.g., captions). [Priority 1]
- Where sounds are played automatically, provide visual notification and transcripts. [Priority 1 if the sound is important, Priority 2 if not ]
Guideline: Provide verbal descriptions of moving visual information in both auditory and text form (movies, animations, etc.). If the visual presentation is associated with an auditory presentation (e.g., movies), synchronize the auditory descriptions with the existing auditory presentation and collate the text version of the descriptions with the text transcript (captions) of the primary audio track. [Priority 1]
Rationale: Otherwise, users who cannot see (or look at) the page will not be able to perceive information presented through action, body language, or other visual cues that are not available through the auditory information (dialogue, sound effects, etc.). The collated text version allows access to the information by devices that do not play movies, by people who are deaf-blind. (It also allows all of the content to be accessed by indexing engines.)
Techniques:
- For short animations such as animated .gifs, provide alternative text...(See A-1) [Priority 1]
- For movies, provide auditory descriptions that are synchronized with the original audio. [Priority 1]
- Provide a text version of the auditory description that is collated with the text transcript (captions) of the primary audio track. [Priority 2]
Guideline: Use HTML in a way that allows you to provide alternative presentations easily. [Priority 1]
Rationale: For example, if you use an image as the source of a frame, then there is no simple way to attach alternative text for that image. But, if you use an HTML file as the source of a frame with the image included in that, providing the alternative text becomes easy. (see A-1 for more information about alt-text).
Techniques:
- The source of a frame should be an HTML file. [Priority 1]
Guideline: Avoid using color to convey information that is not also presented through other means. [Priority 1]
Rationale: If color is used to convey information, those who cannot differentiate between certain colors (and those with devices that have non-color or non-visual displays) will not receive the information.
Techniques:
- Don't use color to convey information, unless the information is also clear from the markup and/or text. [Priority 1]
Quick test: Is your page viewable and understandable in monochrome?
Guideline: Separate content and structure from the presentation of that content and structure. Always separate the content on your site (what you say), and the way you choose to structure that content (how you say it), from the way the content and structure are presented (how you want people to "see" it).[Priority 2]
Rationale: When content is tied to presentation, such as color-coding list items to distinguish between them in some way, it is difficult to impossible to transform the information into a different modality. Example.
Character spacing and non-letter characters cause problems for screen readers.
Techniques:
- Mark up structure with structural elements (headings, lists, sections, etc.) [Priority 2]
- Style sheets should be used to control layout and presentation wherever and as soon as possible. Until then, tables (to control layout) and bit-map text with alt-text (for special text effects) may be used, with alternative pages used as necessary to ensure that the information on the page is accessible. [Priority 2]
- Use relative sizing and positioning (e.g., percent) rather than absolute (e.g., pixels or point). [Priority 2]
Guideline: Use elements and attributes appropriately. [Priority 2]
Rationale: When elements and attributes are used inappropriately, such as using structural elements for presentation purposes (e.g., H1 to create large, bold face text on some location other than a heading), user agents that allow users to navigate through the structure will be unable to do so properly. Reformatting the page for other media and devices can also be difficult.
Techniques:
- Nest headings properly (H1 - H6). [Priority 2]
- Encode list structure and list items properly (UL, OL, DL, LI). [Priority 2]
- Avoid using a button with an image on it as a server side image map. Use separate buttons or images instead. [Priority 2]
Guideline: Ensure that moving, blinking, scrolling, or auto-updating objects or pages may be paused or frozen. This is particularly important for objects that contain text. Note. Does not apply to instant redirection. [Priority 1]
Rationale: Some people with cognitive limitations or visual disabilities are unable to read moving text quickly enough or at all. Movement can also cause such a distraction that the rest of the page becomes unreadable for people with cognitive disabilities. Screen readers are unable to read moving text. People with physical disabilities might not be able to move quickly or accurately enough to interact with moving objects. People with photosensitive epilepsy can have seizures triggered by flickering or flashing in the 4 to 59 hertz range with a peak sensitivity at 20hz.
Techniques:
- Avoid using movement where possible. [Priority 3]
- Provide a mechanism to allow users to freeze movement or updating in applets and scripts or use Style Sheets and scripting to create movement. [Priority 1 ??]
- For auto-refreshing pages, provide a second copy of the page where refreshing is done by clicking on a link (until user agents provide this ability themselves). [Priority 1]
- Avoid blinking or updating of the screen which can cause flicker between 4 and 59 hertz [Priority 1]
Note. Avoid BLINK and MARQUEE since they are proprietary elements. See E-1
Guideline: Ensure that text and graphics are perceivable and understandable when viewed without color. [Priority 1]
Rationale: When forground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color blindness.
Techniques:
- Use foreground and background color combinations that provide sufficient contrast when viewed by someone with color blindness (or on a black and white screen). [Priority 1]
Quick test: Is your page viewable and understandable in monochrome?
Guideline: If you use a number of different languages on a page, make sure that any changes in language are clearly identified. [Priority 2]
Rationale: This is a particular problem for braille translators, especially when multiple languages appear on the same page.
Techniques:
- Use the "lang" attribute to identify the language of the text. [Priority 2]
Guideline: For frames, provide sufficient information to determine the purpose of the frames and how they relate to each other. [Priority 1]
Rationale: Users with blindness and low vision often access the screen with "tunnel vision" and are unable to get an overview understanding of the page. Complex intertwinings of frames may also be difficult for people with cognitive disabilities to use.
Techniques:
- Provide titles for frames ("title" on FRAME) so that users can keep track of frames by name. [Priority 1]
- Use "longdesc" (where needed) to associate a fuller description (than is provided by the title) directly with the frame. Until longdesc is widely supported, use d-links or invisible d-links as well. [Priority 2]
Guideline: Properly markup abbreviations and acronyms. [Priority 2]
Rationale: Unless expansions for abbreviations and acronyms are provided they may be indecipherable when spoken or brailled.
Techniques:
- For abbreviations use ABBR with "title" to specify the expansion. [Priority 2]
- For acronyms use ACRONYM with "title" to specify the expansion. [Priority 2]
Guideline: Group controls, selections, and labels into semantic units. [Priority 2]
Rationale: This provides contextual information about the relationship between controls, which is useful for all users.
Techniques:
- Group form controls (FIELDSET and "legend") [Priority 2 for radio buttons and checkboxes, Priority 3 for other controls.]
- Associate labels to their controls (LABEL and "for") [Priority 2]
- Create a hierarchy of long lists of choices (OPTGROUP) [Priority 2]
Guideline: Ensure that tables (not used for layout) have necessary markup to be properly restructured or presented by accessible browsers and other user agents. [Priority 1]
Rationale:
Many user agents restructure tables to present them. Without appropriate markup the tables will not make sense when restructured. Tables also present special problems to users of screen-readers.
These guidelines benefit users that are accesing the table auditorally or viewing only a portion of the page at a time (users with blindness and low vision, or using an auto-pc, or devices with small displays)
Techniques:
- Provide summaries for tables ("SUMMARY" on TABLE) [Priority 3]
- Identify headers for Rows and Columns (TD and TH) [Priority 2]
- Where tables have structural divisions beyond those implicit in the rows and columns (see HTML 4.0 table algorithm), use appropriate mark-up to identify those divisions (THEAD TFOOT TBODY AXIS SCOPE COLGROUP etc) [Priority 2]
- Provide abbreviations for header labels ("abbr" on TH) [Priority 3]
Guideline: Create link phrases that strike a balance between being an accurate description of the link, even when read out of context while at the same time, not being too long. [Priority 3]
Rationale: Otherwise people who use your site who are blind, or have difficulty seeing, or are using devices that do not have displays or very small displays will have difficulty. If they are moving from link to link, and a link phrase does not make sense, they will then have to stop and read the text around the link in order to discover what it means.
Techniques:
- Create link phrases that make sense when read out of context and that are not too verbose. [Priority 3]
Guideline: Use only
- elements or attributes in the HTML 2.0 (or higher) specification
- style rules in a W3C CSS specification. [Priority 1]
Rationale: By avoiding elements that can only be interpreted by a specific browser type, your pages will be able to be accessed by more people across a larger number of hardware and software devices.
Use a "composit" checker that can test for multiple HTML specifications simultaneouly such as_______________ or Bobby [Priority 1].
Techniques:
- HTML specifications(HTML 2.0 and higher).
- CSS specifications
-
Rationale: PDF and other page rendering technologies often create pages that cannot be viewed or navigated using standard web access tools.
Techniques:
- If a non-html technology must be used to display information for some reason, provide one of the following
- an accessible HTML version of the page(s)
- an automatic translated version of the page (which fully and clearly represents the information in the original document) or
- a text only version of the page(s)
Guideline: Elements that contain their own user interface should have accessibility built in. [Priority 2]
Rationale: The accessibility of objects with their own interface is independent of the accessibility of the user agent. Accessibility must therefore be built into the objects or an alternative must be provided..
Techniques:
- Where possible make applets directly accessible. or provide alternate ways to achieve the same information or functionality. [ Priority 1 if information or functionality is important, otherwise Priority 2]
Guideline: Ensure that there are accessible alternatives to information or functionality provided by active content such as scripts and applets. [Priority 1]
Rationale: Many users can not run scripts or applets at all. The "fail gracefully" provisions would cover this situation. However, some users who can, but rely on assistive technology such as screen readers or special input devices may not be able to receive the information, or activate the functions that the content provides.
Techniques:
- Provide accessible alternatives to functions or information in the content of NOSCRIPT, APPLET, or OBJECT.
Guideline: If, after all of your best efforts, any page is still not accessible then you MUST provide a link to an alternative page that is:
- accessible,
- has equivalent information,
- and is updated as often as the inaccessible page.
[Priority 1]
Rationale: Some pages will be unable to fail gracefully at this time either because the visual components are too complex, or because assistive technologies or user agents (browsers) are lacking a specific feature.
Known instances when a text-only page will be needed (not a definitive list):
- Complex tables, such as those of text and numbers - convert into a linear fashion.
- Until user agents and screen readers are able to handle text presented side-by-side, any tables (data or layout) that layout text in parallel, word-wrapped columns require a linear text alternative on the page or on an alternative page. [Priority 1]
- If you can not make a page accessible then do one of the following [Priority 1]:
Techniques:
- Create a second (accessible) page manually that is updated as frequently as the inaccessible page.
- Use a server-side script that creates an accessible version of the page on demand (may require special formatting or markup of page).
- Use a database to write pages on the fly in desired format.
- If an accessible version is not possible then provide a phone number, fax number, e-mail, or postal address.