Yale University Library

 

Workstation and Technology Services

Quick Links
Designing Accessible Web Sites
Following the W3C Guidelines (Priority 1 Issues)

Note: The Guidelines listed below are summarization's of information available on the W3C site. For the Complete Guidelines and Checklist see: www.w3.org/WAI . Information from the W3C site: Copyright © 1994-2000 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved.

Although the purpose of these guidelines is to make the web more accessible to individuals with disabilities, following these guidelines will help make the information found on your pages more accessible to all users. As you read them, you will find that many of these guidelines are common sense rules of good web design.

Click on the links to see examples in HTML and detailed information for each category.

Note: The there are proposed changes to section 508 of the Federal Rehabilitation act that outline web accessibility issues. The topics covered are similiar to the W3C Guidelines, you can see the Federal Guidelines here:

http://www.access-board.gov/indexes/rules&notices.htm.

General Formatting Issues
Images & animations:Use the alt attribute to describe the function of each visual. Provide a text equivalent for every non-text element.      If you have images, graphic representations of text, image maps, animations, applets, frames, scripts, images as list bullets, etc., make sure you use an Alt tag to describe the image. When a user moves their mouse over the image, a box will then pop up and display that description. This text will be read to a visually impaired user by a text reader.
Use of Color: Ensure that information is not conveyed through color alone.

Use context or markup to convey information that is also conveyed in color.

Do not use color to describe an item on your page.

For example, when asking for input from users, do not write "Please select an item from those listed in green." Instead, ensure that information is available through other style effects (e.g., a font effect) and through context (e.g., comprehensive text links).

Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions). If you use multiple languages on a page, use the 'lang' tag to clearly identify changes.
Organize documents so they may be read without style sheets. When a document is rendered without associated style sheets, it must be possible to still read the document. When content is organized logically, it will be rendered in a meaningful order when style sheets are turned off or not supported.
Ensure that text equivalents for dynamic content are updated when dynamic content changes. Note that as the contents of a frame change, so must change any description. This is not possible if an IMG is inserted directly into a frame. Thus, content developers should always make the source ("src") of a frame an HTML file. Images may be inserted into the HTML file and their text alternatives will evolve correctly.
Avoid causing the screen to flicker or blink.  
Use the clearest and simplest language appropriate for the site's content. Strive for clear and accurate headings and link descriptions.
Images and Image Maps
Provide redundant text links for each active region of a server-side image map. We do not use server-side image maps on LSOUnix1.
Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape. We do not use server-side image maps on LSOUnix1.b
Tables
Identify row and column headers. For example, in HTML, use TD to identify data cells and TH to identify headers. b
For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. Use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the "axis", "scope", and "headers" attributes, to describe more complex relationships among data.b
Frames
Title each frame to facilitate frame identification and navigation. Use the "title" attribute on FRAME elements.
Applets and Scripts
Ensure that pages are usable with scripts, applets, or other programmatic objects are turned off or not supported. Provide equivalent information on an alternative accessible page if necessary. If it is not possible to make the page usable without scripts, provide a text equivalent with the NOSCRIPT element.
Multimedia
Provide an auditory description of the important information of the visual track of a multimedia presentation. Auditory description of the key visual elements of a presentation: the description is either a prerecorded human voice or a synthesized voice (recorded or generated on the fly). The auditory description is synchronized with the audio track of the presentation, usually during natural pauses in the audio track. Auditory descriptions include information about actions, body language, graphics, and scene changes.
For any time-based multimedia presentation (movie or animation) synchronize equivalent alternatives (e.g. captions or auditory descriptions of the visual track) with the presentation.  
If all else fails!
If, after best efforts, you cannot create an accessible page, provide a link to an alternative page that uses W3C technologies, is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible (original) page.

Images & animations: Use the alt attribute to describe the function of each visual:[Back to Top]

Simple Explanation: If you have an image or graphic on your page, make sure you use an Alt tag to describe it. When a user moves their mouse over the image, a box will then pop up and display that description. This text will be read to a visually impaired user by a text reader.

A good test to determine if a text equivalent is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?

Detailed Information:

Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.

For example, in HTML:
-Use "alt" for the IMG, INPUT, and APPLET elements, or provide a text equivalent in the content of the OBJECT and APPLET elements.
-For complex content (e.g., a chart) where the "alt" text does not provide a complete text equivalent, provide an additional description using, for example, "longdesc" with IMG or FRAME, a link inside an OBJECT element, or a description link.
-For image maps, either use the "alt" attribute with AREA, or use the MAP element with A elements (and other text) as content.

A text equivalent describes the function or purpose of content. For complex content (charts, graphs, etc.), the text equivalent may be longer and include descriptive information.

Examples:

Text equivalents for images:

When using IMG, specify a short text equivalent with the "alt" attribute. Note. The value of this attribute is referred to as "alt-text".
Example:
     <img src="magnifyingglass.gif" alt="Search"/>
When using OBJECT, specify a text equivalent in the body of the OBJECT element:
Example:
     <object data="magnifyingglass.gif" type="image/gif">
        Search
     </object>
When a short text equivalent does not suffice to adequately convey the function or role of an image, provide additional information in a file designated by the "longdesc" attribute:
Example:
     <img src="97sales.gif" alt="Sales for 1997" longdesc="sales97.html"/>
In sales97.html:
     "A chart showing how sales in 1997 progressed. The chart is a 
     bar-chart showing percentage increases in sales by month. Sales 
     in January were up 10% from December 1996, sales in February dropped 3%, .."
For user agents that don't support "longdesc", provide a description link as well next to the graphic:
Example:
     <img src="97sales.gif" alt="Sales for 1997" longdesc="sales.html"/> 
     <a href="sales.html" title="Description of 1997 sales figures">[D]</a>
When using OBJECT, specify the the longer text equivalent within the element's content:
Example:
     <object data="97sales.gif" type="image/gif"> 
        Sales in 1997 were down subsequent to our 
        <a href="anticipated.html">anticipated purchase</a>
     </object>
Note that OBJECT content, unlike "alt" text, can include markup. Thus, content developers can provide a link to additional information from within the OBJECT element.
Example:
     <object data="97sales.gif" type="image/gif"> 
       Chart of our Sales in 1997 <a href="desc.html">
       textual description</a> is available. 
     </object>

Ensure that information is not conveyed through color alone: [Back to Top]

Simple Explanation: Do not use color to describe an item on your page.

For example, when asking for input from users, do not write "Please select an item from those listed in green." Instead, ensure that information is available through other style effects (e.g., a font effect) and through context (e.g,. comprehensive text links).

Detailed Information:

Quicktest! To test whether your document still works without colors, examine it with a monochrome monitor or browser colors turned off. Also, try setting up a color scheme in your browser that only uses black, white, and the four browser-safe grays and see how your page holds up.

Quicktest! To test whether color contrast is sufficient to be read by people with color deficiencies or by those with low resolution monitors, print pages on a black and white printer (with backgrounds and colors appearing in grayscale). Also try taking the printout and copying it for two or three generations to see how it degrades. This will show you where you need to add redundant cues (example: hyperlinks are usually underlined on Web pages), or whether the cues are two small or indistinct to hold up well.

Use these CSS properties to specify colors:

'color', for foreground text color.
'background-color', for background colors.
'border-color', 'outline-color' for border colors.
For link colors, refer to the :link, :visited, and :active pseudo-classes.


Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions): [Back to Top]

Simple Explanation: If you use multiple languages on a page, use the 'lang' tag to clearly identify changes.

Detailed Information:

In HTML use the "lang" attribute. In XML, use "xml:lang".

If you use a number of different languages on a page, make sure that any changes in language are clearly identified by using the "lang" attribute:

Example:
     <p>And with a certain 
     <span lang="fr">je ne sais quoi</span>,
     she entered both the room, and his life, forever. 
     <q>My name is Natasha,</q> she said. 
     <q lang="it">Piacere,</q> he replied in impeccable Italian.</p>
Identifying changes in language are important for a number of reasons:

-Users who are reading the document in Braille will be able to substitute the appropriate control codes (markup) where language changes occur to ensure that the Braille translation software will generate the correct characters (accented characters, for instance). These control codes also prevent Braille contractions from being generated, which could further confuse the user. Braille contractions combine commonly used groups of characters that usually appear in multiple cells into a single cell. For example, "ing" which usually takes up three cells (one for each character) can be contracted into a single cell.

-Similarly, speech synthesizers that "speak" multiple languages will be able to generate the text in the appropriate accent with proper pronunciation. If changes are not marked, the synthesizer will try its best to speak the words in the primary language it works in. Thus, the French word for car, "voiture" would be pronounced "voter."

-Users who are unable to translate between languages themselves, will be able to have unfamiliar languages translated by machine translators.

-It is also good practice to identify the primary language of a document, either with markup (as shown below) or through HTTP headers.

Example:
     <html lang="fr"> 
     ....rest of an HTML document written in French... 
     </html>


Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.[Back to Top]

Short Description: When content is organized logically, it will be rendered in a meaningful order when style sheets are turned off or not supported. Organize your site in a logical manner!


Ensure that equivalents for dynamic content are updated when the dynamic content changes.[Back to Top]

Content developers must provide text equivalents of frames so that their contents and the relationships between frames make sense. Note that as the contents of a frame change, so must change any description. This is not possible if an IMG is inserted directly into a frame. Thus, content developers should always make the source ("src") of a frame an HTML file. Images may be inserted into the HTML file and their text alternatives will evolve correctly.


Until user agents allow users to control flickering, avoid causing the screen to flicker. [Back to Top]

People with photosensitive epilepsy can have seizures triggered by flickering or flashing in the 4 to 59 flashes per second (Hertz) range with a peak sensitivity at 20 flashes per second as well as quick changes from dark to light (like strobe lights).


Use the clearest and simplest language appropriate for a site's content. [Back to Top]

The following writing style suggestions should help make the content of your site easier to read for everyone, especially people with reading and/or cognitive disabilities.

-Strive for clear and accurate headings and link descriptions. This includes using link phrases that are terse and that make sense when read out of context or as part of a series of links (Some users browse by jumping from link to link and listening only to link text.) Use informative headers so that users can scan page quickly for information rather than reading it in detail.

-State the topic of the sentence or paragraph at the beginning of the sentence or paragraph (this is called "front-loading"). This will help both people who are skimming visually, but also people who use speech synthesizers. "Skimming" with speech currently means that the user jumps from heading to heading, or paragraph to paragraph and listens to just enough words to determine whether the current chunk of information (heading, paragraph, link, etc.) interests them. If the main idea of the paragraph is in the middle or at the end, speech users may have to listen to most of the document before finding what they want. Depending on what the user is looking for and how much they know about the topic, search features may also help users locate content more quickly.

-Limit each paragraph to one main idea.

-Avoid slang, jargon, and specialized meanings of familiar words, unless defined within your document.

-Favor words that are commonly used. For example: use "begin" rather than "commence" or use "try" rather than "endeavor."

-Use active rather than passive verbs.

-Avoid complex sentence structures


For data tables, identify row and column headers. [Back to Top]

For example, in HTML, use TD to identify data cells and TH to identify headers.

For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.

For example, in HTML, use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the "axis", "scope", and "headers" attributes, to describe more complex relationships among data.

Content developers may make HTML 4.0 data tables more accessible in a number of ways:

  • Identify structural groups of rows (THEAD for repeated table headers, TFOOT for repeated table footers, and TBODY for other groups of rows) and groups of columns (COLGROUP and COL). Label table elements with the "scope", "headers", and "axis" attributes so that future browsers and assistive technologies will be able to select data from a table by filtering on categories. This markup will also help browsers linearize tables (also called table "serialization". A row-based linear version may be created by reading the row header, then preceding each cell with the cell's column header. Or, the linearization might be column-based. Note that the natural language writing direction may affect column layout (and thus ordering). In HTML, the "dir" attribute specifies column layout order (e.g., dir="rtl" specifies right-to-left layout).
  • Do not use PRE to create a tabular layout of text -- use the TABLE element so that assistive technologies may recognize that it is a table.
  • Provide a caption via the CAPTION element.
  • Provide a summary via the "summary" attribute. Summaries are especially useful for non-visual readers.
  • Provide terse substitutes for header labels with the "abbr" attribute on TH. These will be particularly useful for future speaking technologies that can read row and column labels for each cell. Abbreviations cut down on repetition and reading time.
  • Future browsers and assistive technologies will be able to automatically translate tables into linear sequences or navigate a table cell by cell if data is labeled appropriately.

This markup will allow accessible browsers and other user agents to restructure or navigate tables in a non-visual manner.


Title each frame to facilitate frame identification and navigation. [Back to Top]

In HTML use the "title" attribute on FRAME elements.

Example:

Use the "title" attribute to name frames.
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> 
     <html> 
       <head> 
         <title>A simple frameset document</title> 
       </head> 
       <frameset cols="10%, 90%" title="Our library of electronic  documents"> 
         <frame src="nav.html" title="Navigation bar">  
         <frame src="doc.html" title="Documents"> 
         <noframes> 
           <a href="lib.html" title="Library link">
              Select to go to the electronic library
           </a> 
         </noframes> 
       </frameset>
     </html>


Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported.[Back to Top]

If this is not possible, provide equivalent information on an alternative accessible page.

Example: Ensure that links that trigger scripts work when scripts are turned off or not supported (e.g., do not use "javascript:" as the link target). If it is not possible to make the page usable without scripts, provide a text equivalent with the NOSCRIPT element, or use a server-side script instead of a client-side script, or provide an alternative accessible page.


Provide an auditory description of the important information of the visual track of a multimedia presentation. [Back to Top]

For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation.


If all else fails: [Back to Top]

If, after best efforts, you cannot create an accessible page, provide a link to an alternative page that uses W3C technologies, is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible (original) page.