WAI Accessibility Guidelines: Page Authoring

Rating and Classification

This guideline must be implemented by an author, or one or more groups of users will find it impossible to access information in the document. Implementing this guideline is a basic requirement for some groups to be able to use WWW documents.
This guideline should be implemented by an author, or one or more groups of users will find it difficult to access information in the document. Implementing this guideline will significantly improve access to WWW documents.
This guideline should be implemented by an author to make it easier for one or more groups of users to access information in the document. Implementing this guideline will improve access to WWW documents.

Each Guideline and each Technique has a priority listed. For the guidelines, the priority refers to the importance of addressing the issue identified by the guideline. For Techniques, there may be a number of techniques used to improve accessibility with respect to this guideline. For example a priority 1 Guideline may have a priority 1 Technique, which MUST be done to provide accessibility, and a priority 3 Technique, which MAY also be done to help address the issue.

A. Ensure that information is accessible via different senses

Provide alternative representations of all non-text information so that a page may be perceived and used without needing to be seen and without needing to be heard.
Guideline Rationale Techniques
1. 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] 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.
  1. For all images (IMG) provide alt-text ("alt") [Priority 1]
  2. For all applets (APPLET)provide alt-text and content [Priority 1]
  3. For all image map links (AREA)
    • Provide alt-text [Priority 1].
    • Also provide redundant links [Priority 2].
  4. Don't use server-side image maps unless the same function or information is available in an alternative accessible format. [Priority 1]
  5. For all graphical buttons (INPUT type="image") provide alt-text ("alt") [Priority 1]
  6. 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).
  7. 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].
2. 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] 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.
  1. Provide a long description of all graphics which convey important information by using "longdesc". [Priority 1]
  2. Until most browsers support "longdesc", also use d-links (or invisible d-links). [Priority 1]
  3. 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]
3. 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] 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.
  1. For stand alone audio files provide a textual transcript of all words spoken or sung and significant sounds. [Priority 1]
  2. For audio associated with video, provide a textual transcript (of dialog and sounds) synchronized with the video (e.g., captions). [Priority 1]
  3. Where sounds are played automatically, provide visual notification and transcripts. [Priority 1 if the sound is important, Priority 2 if not ]
4. 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] 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.)
  1. For short animations such as animated .gifs, provide alternative text...(See A-1) [Priority 1]
  2. For movies, provide auditory descriptions that are synchronized with the original audio. [Priority 1]
  3. Provide a text version of the auditory description that is collated with the text transcript (captions) of the primary audio track. [Priority 2]
5. Use HTML in a way that allows you to provide alternative presentations easily. [Priority 1] 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).
  1. The source of a frame should be an HTML file. [Priority 1]
6. Avoid using color to convey information that is not also presented through other means. [Priority 1] 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.
  1. 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?

B. Ensure that the information can be displayed effectively on different technologies.

Enable the document to be reformatted for the purpose of presentation in different media and on different output devices.

Guideline Rationale Techniques
1. 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] 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.
  1. Mark up structure with structural elements (headings, lists, sections, etc.) [Priority 2]
  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]
  3. Use relative sizing and positioning (e.g., percent) rather than absolute (e.g., pixels or point). [Priority 2]
2. Use elements and attributes appropriately. [Priority 2] 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.
  1. Nest headings properly (H1 - H6). [Priority 2]
  2. Encode list structure and list items properly (UL, OL, DL, LI). [Priority 2]
  3. Avoid using a button with an image on it as a server side image map. Use separate buttons or images instead. [Priority 2]

3. 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] 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.
  1. Avoid using movement where possible. [Priority 3]
  2. 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 ??]
  3. 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]
  4. 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

4 Ensure that text and graphics are perceivable and understandable when viewed without color. [Priority 1] 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.
  1. 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?

5. If you use a number of different languages on a page, make sure that any changes in language are clearly identified. [Priority 2] This is a particular problem for braille translators, especially when multiple languages appear on the same page.
  1. Use the "lang" attribute to identify the language of the text. [Priority 2]

C. Make sure that you page will be operable with different devices.

Ensure all elements on a page are operational in a device independent fashion.
Guideline Rationale Techniques
1. Ensure that pages using newer technology will fail gracefully if the technology is not supported or is turned off. [Priority 1]
To "fail gracefully" means that either a) alternatives to important presentations or functions on a page (that make use of new features) are provided or b) that the rest of the page is usable without a presentation or function that relies on a new feature.
With each release of HTML new features have been added. In the recent past, new features have incorporated new technologies such as the ability to attach style sheets to a page or to embed scripts and applets in a page. Older browsers ignore new features and some users configure their browser not to make use of new features. These users often see nothing more than a blank page or an unreadable page when new features do not fail gracefully.
  1. New features must fail gracefully and accessibly. [Priority 1]
  1. For forms and tables, provide a phone number, fax number, e-mail, or postal address. [Priority 2] {DROP THIS ONE SINCE COVERED IN E-5???}

See also E-5 - text-only pages.

2. Enable keyboard operation of all page elements. [Priority 1] This allows all manner of alternative interfaces to access and operate the elements. Someone who is using the page without sight, with voice input, or with a keyboard (or input device other than a mouse) will have a difficult time navigating a page if keyboard shortcuts are not provided for objects on the page. Access to image maps is impossible for these users if alternatives are not provided.
  1. For image maps, provide alternative text for links (as discussed in A-1 above.) [Priority 1]
  2. Provide keyboard shortcuts to links (including those in client-side image maps), form controls, and groupings of form controls. ("accesskey"). [Priority 3]
  3. Create a logical tab order through links and form controls. ("tabindex"). [Priority 3]
  4. See also E-3 for Access to Elements that Have Their Own Interfaces.
3. Provide interim solutions to facilitate operation via assistive technologies and older browsers. [Priority 2] Older browsers are unable to "Tab" to edit boxes, text areas and lists of consecutive links, making it difficult to impossible for users to access them.
Users not operating in a graphical environment are disoriented by being transferred to a new window without warning.
Until most users are able to secure newer technologies that address these issues:
  1. Include default, place-holding characters in edit boxes and text areas. [Priority 3]
  2. Include non-link, printable characters (surrounded by spaces) between links that occur consecutively. [Priority 3]
  3. Do not use pop-up windows, new windows, or change active window unless the user is aware that this is happening. [Priority 2]

D. Provide Context and Orientation Information for Complex Pages or Elements.

Provide orientation and contextual cues to facilitate understanding of complex pages or elements.
Guideline Rationale Techniques
1. For frames, provide sufficient information to determine the purpose of the frames and how they relate to each other. [Priority 1] 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.
  1. Provide titles for frames ("title" on FRAME) so that users can keep track of frames by name. [Priority 1]
  2. 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]
2. Properly markup abbreviations and acronyms. [Priority 2]

Unless expansions for abbreviations and acronyms are provided they may be indecipherable when spoken or brailled.

  1. For abbreviations use ABBR with "title" to specify the expansion. [Priority 2]
  2. For acronyms use ACRONYM with "title" to specify the expansion. [Priority 2]
3. Group controls, selections, and labels into semantic units. [Priority 2] This provides contextual information about the relationship between controls, which is useful for all users.
  1. Group form controls (FIELDSET and "legend") [Priority 2 for radio buttons and checkboxes, Priority 3 for other controls.]
  2. Associate labels to their controls (LABEL and "for") [Priority 2]
  3. Create a hierarchy of long lists of choices (OPTGROUP) [Priority 2]
4. 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]

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)

  1. Provide summaries for tables ("SUMMARY" on TABLE) [Priority 3]
  2. Identify headers for Rows and Columns (TD and TH) [Priority 2]
  3. 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]
  4. Provide abbreviations for header labels ("abbr" on TH) [Priority 3]
5. 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] 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.
  1. Create link phrases that make sense when read out of context and that are not too verbose. [Priority 3]

E. General Recommendations

Guideline Rationale Techniques
1. Use only
- elements or attributes in the HTML 2.0 (or higher) specification
- style rules in a W3C CSS specification.
[Priority 1]
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].
  1. HTML specifications(HTML 2.0 and higher).
  2. CSS specifications
2 Do not use non-html technologies to display text unless an an accessible version of the page(s) is provided as well. [Prioity 1] Needs some work since "non-html" could include CSS, applets and scripts which are covered elsewhere. PDF and other page rendering technologies often create pages that cannot be viewed or navigated using standard web access tools.
  1. 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)
3. Elements that contain their own user interface should have accessibility built in. [Priority 2] 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..
  1. 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]
4. Ensure that there are accessible alternatives to information or functionality provided by active content such as scripts and applets. [Priority 1] 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.
  1. Provide accessible alternatives to functions or information in the content of NOSCRIPT, APPLET, or OBJECT.
5. 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:
  1. accessible,
  2. has equivalent information,
  3. and is updated as often as the inaccessible page.
[Priority 1]
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]:
    1. Create a second (accessible) page manually that is updated as frequently as the inaccessible page.
    2. Use a server-side script that creates an accessible version of the page on demand (may require special formatting or markup of page).
    3. Use a database to write pages on the fly in desired format.
    4. If an accessible version is not possible then provide a phone number, fax number, e-mail, or postal address.