WAI Accessibility Guidelines: Page Authoring

 

Rating and Classification

[PRIORITY 1]
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 will significantly improve access to WWW documents.
[PRIORITY 2]
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 improve access to WWW documents.
[PRIORITY 3]
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 is not critical to accessibility, however.

 

A.   Provide alternative representations of all non-text information so that a page may be perceived and used without being seen and without being heard. 
Guideline Rationale Techniques Priority
1. Provide alternative text for all  images, applets, and image maps, including images used as submit buttons and all of the links within a client-side image map. 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. 1
2. Provide descriptions for graphics, scripts, or applets that provide important information. 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. Associate descriptions via d-links with the object they describe ("rel" or "class" on A).
  2. Also associate the description directly with the object ("longdesc")
1
3. Provide textual equivalents of all audio information.  If the audio is associated with a visual presentation (movie or animation), synchronize the textual equivalents with the visual presentation. Otherwise, users who are deaf, or hard of hearing, or who have turned sound off cannot perceive the information presented through sounds such as speech, sound effects, and music.
  1. For short auditory clips use "title" on A.
  2. For stand alone audio files provide a textual transcript of all words spoken or sung and significant sounds
  3. For audio associated with video, provide a textual transcript of dialog and sounds syncrhonized with the video. 
  4. ???BGSOUND goes here?
1
4. Provide textual and auditory descriptions of moving visual information (movies, animations, etc.). If the visual presentation is associated with an auditory presentation, synchronize the auditory descriptions with the existing auditory presentation. 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.).
  1. For short animations such as animated .gifs See A-1 (Provide alternative text...)
  2. For movies, provide auditory descriptions that are synchronized with the original audio.
1
5. The source of a frame should be an HTML file. If other types of information, such as images, are used as the source of a frame there is no way to attach alternative information to the information.  In the image example, there is no way to attach alt-text (.see A-1). How to include information in a frame. 1
6. Ensure that moving, blinking, or scrolling objects, particularly those that contain text, may be paused or frozen. 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.
  1. Avoid BLINK and MARQUEE.
  2. Use Style Sheets and scripting to create movement.
  3. Provide a mechanism to allow users to freeze movement in Applets and Scripts.
1
7. Avoid ASCII art and non-letter characters within words. Since characteres are used to create a visual image there is no way to attach alt-text as with other images (see A-1).   Character spacing and non-letter characters cause problems for screen readers.
  1. For ASCII art, use Style sheets with descriptions or replace art with images with alt-text and descriptions 
  2. To create letter spacing, use style sheets
2 ???
8. Provide visual notification of sounds that are played automatically. If a user is accessing the page without sound, information presented through sounds played automatically will go unnoticed. When the sound is played, display a visual equivalent. 2 ???

   

B.   Enable the document to be presented in a variety of media types with a variety of output devices.

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

Guideline Rationale Techniques Priority
1. Separate content and structure from presentation. 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.
  1. Mark up structure with structural elements (headings, lists, sections, etc.)
  2. Once a majority of users use browsers that support the key aspects of CSS-2, style sheets should be used to control layout and presentation. Until then tables (to control layout) and bit-mapped text (for special text effects) may be used with alternative pages as necessary.
2
2. Use elements and attributes appropriately. When elements and attributes are used inappropriately, such as using structural elements for presentation purposes  (e.g., H1 to create large, bold face text), 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).
  2. Encode list structure and list items properly (UL, OL, DL, LI).
  3. Avoid deprecated elements and attributes, especially presentation elements (TT and FONT) and attributes ("background" and "align").  Use Style Sheets.
2
3. If, after best efforts, any page is still not accessible, provide a link to an alternative page that is accessible, has equivalent information, and is updated as often as the inaccessible page. 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:
  • Complex tables, such as those of text and numbers - convert into a linear fashion.
  • Others??
1 (yet don't want this as the first item in this section) ???

   

C.   Ensure all elements on a page are operational in a device independent fashion.
Guideline Rationale Techniques Priority
1. Ensure that pages using newer technologies will fail gracefully. With each release of HTML new features have been added.  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 technologies do not fail gracefully.
  1. How frames can fail gracefully (NOFRAME)
  2. How scripts can fail gracefully (NOSCRIPT)
  3. How style sheets can fail gracefully
  4. How applets can fail gracefully (OBJECT, APPLET)
  5. How to make applets directly accessible
  6. For forms and tables, provide a phone number, fax number, e-mail, or postal address.
  7. See E-1 - text-only pages.
1
2. Enable keyboard operation of all page elements. Someone who is using the page without sight, with voice input, or with a keyboard (or other 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 client-side image maps, provide alternative text for links ("alt" on AREA)
  2. For server-side image maps, provide a list of text links.
1
  1. Provide keyboard shortcuts to links (including those in client-side image maps), form controls, and groupings of form controls. ("accesskey")
  2. Create a logical tab order through links and form controls. ("tabindex") 
2
3. Provide interim solutions to facilitate operation via assistive technologies and older browsers. 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.
  1. Include default, place-holding characters in edit boxes and text areas.
  2. Include non-link, printable characters (surrounded by spaces) between links that occur consecutively.
3

   

D.   Provide meta-information for complex elements as orientation and contextual cues. 
Guideline Rationale Techniques Priority
1. For complex frames, describe the layout and purpose of frames and how multiple frames and their elements relate to each other.  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. Associate descriptions via d-links with the frame they describe ("rel" or "class" on A).
  2. Also associate the description directly with the frame ("longdesc")
1
2. Provide titles for 
  • images (used as links), 
  • frames, 
  • horizontal rules, 
  • acronyms, 
  • and abbreviations.
  • Titles on images provide information about the destination of the link (whereas the alt-text should provide the basic function of the image, see A-1). 
  • Titles on frames allow user agents (browsers) to create a list of frames so users can keep track of them by name.
  • Abbreviations and acronyms may be expanded.
  • Titles can provide information about the purpose of  horizontal rules that may be obvious visually but not auditorally.
  1. Titles for frames ("title" on FRAME)
  2. Titles for images ("title" on IMG)
  3. Titles for abbreviations ("title" on ABBR)
  4. Titles for acronyms ("title" on ACRONYM)
  5. Titles for horizontal rules ("title" on HR)
2
3. Provide abbreviations for lengthy row and column labels. Without abbreviations, a user who is using an auditory browser to navigate a table may hear the lengthy labels each time a cell is entered.  Abbreviations decrease reading time and repetition. Abbreviations for header labels ("abbr" on TH) 2
4. Group controls, selections, and labels into semantic units. Groupings provide meta-information about relationships between controls that are useful for all users.
  1. Group form controls (FIELDSET and "legend")
  2. Create a hierarchy of long lists of choices (OPTGROUP)
  3. Associate labels to their controls (LABEL and "for")
2
5. For complex tables, provide summaries, associate cells with row and column headers, and group cells into categories.
  • Tables summaries provide an overview of the table and are useful by people who are unable to see the whole table. 
  • Similarly, associating cells explicitly with their row and column headers allows a user to view the table cell by cell. 
  • Grouping cells into categories will allow future user agents to create various views of the table. 

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. Summaries for tables ("summary" on TABLE)
  2. Associate cells with row and column headers ("headers," and "scope" on TD)
  3. Group cells into categories ("axis" on TD)
2

   

E.   General Recommendations
Guideline Rationale Techniques Priority
1. Create link phrases that make sense when read out of context, but that are not too verbose. Users that access a page auditorally (users with blindness, low vision, or those using an auto-pc) often tab through the links on a page.  If a link does not make sense when read out of context, they will have to stop to read around the link to gather the context. Creating link phrases 2
2. Use elements and attributes that comply with a W3C HTML, CSS, or XML specification. By avoiding proprietary elements and complying with a W3C specification you increase the likelihood that your page will be more consistent across platforms as well as more usable by a variety of populations.
  1. HTML 2.0, 3.2, 4.0 
  2. CSS-1 or -2
  3. XML 1.0
2
3. recommend against absolute font sizes and absolute positioning.  Related as layout techniques...(from Charles McN)      
4. Avoid color combinations that cause problems for people with color blindness in its various forms  
  • point to lighthouse site for more info.  
  • how conflict w/style sheets (sep struct from pres.)??
  • web safe colors - ds.dial.pipex.com/pixelp/wpdesign/ & www.anybrowser.org/campaign
 

  

Unsure:

  1. Do not use image maps to create graphical "submit" buttons.
  2. Provide alternative presentations of content for each script and applet that conveys information (i.e., a still image for a movie).
  3. C-1 now contains the following three guidelines.  C-1 is the previous E1.

 

1. Provide an alternative mechanism for all scripts or applets that perform an important function.  If possible, also make the script or applet cross disability accessible.  This is the same as the "fail gracefully" (E-1).  Include it here also?
  1. content of NOSCRIPT
  2. content of OBJECT
  3. See sites x, y, and z for to develop directly accessible of scripts and applets.
2. If an applet requires user interaction (e.g., the ability to manipulate a physics experiment) that cannot be duplicated in an alternative format, make the applet directly accessible. See C-1 above.
  1. See sites x, y, and z for to develop directly accessible of scripts and applets.
  2. See also "content of NOSCRIPT"
3. Provide alternative mechanisms for each script and applet that performs an important function, other than presentation of information. How differ from C-1??
  1. content of NOSCRIPT
  2. content of OBJECT
  3. content of APPLET

 The following, was taken from C since it is a technique for C-1 

3. Provide a phone number, fax number, e-mail address or postal address as an alternative method to submit or receive information.
  1. Forms
  2. Scripts
  3. Tables
  4. Applets
2

  Notes:

The key aspects of CSS-2 that we are anxiously awaiting implementation by browsers and adoption by users are: