A.   Modality independence

Provide alternative representations of all non-text information so that a page may be perceived and used without being seen and without being heard.

1.  Alternative text

Each visual element should have a textual alternative that represents the function of the visual element. Aim for a functional label based on the context in which it is used rather than a visual description.  For example, if an image of a magnifying glass is used as a search button, the alt-text would be "Search." A good test to determine if alternative text 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?

The "alt" attribute is mandatory for the AREA and IMG elements. It should also be used for buttons used as submit buttons on forms (INPUT and BUTTON elements).

Providing alternative text for:

A.1.1 Images (IMG)

Use the "alt" attribute of the IMG element.

Example:  <IMG src="magnifyingglass.gif" alt="Search">.

Supported by:  Netscape 1.0, 2.0, 3.0, & 4.0, MS IE 1.0, 2.0, 3.0, & 4.0, Lynx 1 & 2, Opera, etc. etc. ???. (BrowserCaps results)

However, the recommendations for alt-text vary depending on how the graphic is used (decoration, button, bullet, illustration, etc.).  Please see Appendix B - Alt-text authoring guidelines for more information.


A.1.2 Applets (APPLET)

There are three options to choose from to attach alternative text to the APPLET element.  Notice that the third option is supported on the largest number of browsers.

Option 1 - "alt"     NC3 NC4     IE3 IE4   L2 O2 ???
Option 2 - content NC1 NC2     IE1 IE2     L1     ???
Option 3 - both "alt" and content NC1 NC2 NC3 NC4 IE1 IE2 IE3 IE4 L1 L2 O2 ???

Option1 - Use the "alt" attribute of the APPLET element.  Note. The APPLET element is deprecated in HTML 4.0, see OBJECT below.

<APPLET code="Duke.class" width="50" height="50"
        alt="Duke waving (Java applet).">
Supported by:  Netscape 3.0 & 4.0, MS IE 3.0 & 4.0, Lynx 2.x, Opera, etc. etc.???

Option 2 - Use the content of the APPLET element.  Note. The APPLET element is deprecated in HTML 4.0, see OBJECT below.

<APPLET code="Duke.class" width="50" height="50">
Duke waving (Java applet).
Supported by:  Netscape 1.0 & 2.0, MS IE 1.0 & 2.0, Lynx 1.x, Opera, etc. etc. ???

Option 3 - Use both the content  and the "alt" attribute of the APPLET element.  Note. The APPLET element is deprecated in HTML 4.0, see OBJECT below.

<APPLET code="Duke.class" width="50" height="50"
alt="Duke waving (Java applet).">
Duke waving (Java applet).
Supported by:  Netscape 1.0, 2.0, 3.0, & 4.0, MS IE 1.0, 2.0, 3.0, & 4.0, Lynx 1 & 2, Opera, etc. etc. ???

*** The rest of this section has not been cleaned up yet and is mostly notes. PLEASE ADVANCE TO THE NEXT SECTION, B. DISPLAY INDEPENDENCE.***

A.1.3 Image map links (AREA)

See keyboard operation.

A.1.4 Graphical buttons (INPUT type="image")

  Provide alternative text for images used as "submit" buttons.
For example: <INPUT type="image" name="submit" src="button.gif" alt="Submit">

A.1.5 If OBJECT is used

Specify alternative text within the "title" attribute or within the body of the OBJECT element.

<OBJECT classid="Duke.class"
width="50" height="50"  
        title="Java applet: Duke waving.">
Supported by: None as of June 1998.

Text can be provided in the body of the OBJECT element.

<OBJECT data="magnifyingglass.gif" type="image/gif">Search</OBJECT>
Supported by: None as of June 1998.

2.  Descriptions

Alternative text (see strategy 2.1 above) is usually short and defines the basic purpose of a graphic element. To describe an image, script, applet, or frame in more detail, supply a longer description with one of the following mechanisms:

  1. [Interim] Provide a description-link (D-link) next to the graphic.  The D-link links to a separate page or a paragraph at the bottom of the current page that gives a longer description of the graphic. For example:
    <IMG src="97sales.gif" alt="Sales for 1997">
    <A href="sales.html" title="Description of 1997 sales figure">D</A> need to show how to attach d-link to element it is describing (w/class or rel)
  2. [New] Use the "longdesc" attribute of the IMG element. For example:
    <IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales.html">
  3. [New] Provide text within the body of the OBJECT element:
    <OBJECT data="sales.gif" type="image/gif" >
    Sales in 1997 were down subsequent to ...
  4. Include internal text in image data file when the image data file format supports it, e.g., PNG.

3.  Auditory presentations

  1. Provide a text transcript of all audio information.
    Full audio transcripts include spoken dialogue as well as any other significant sounds including on-screen and off-screen sounds, music, laughter, applause, etc. When these transcripts are presented synchronously with a video presentation they are called "captions" and are used by people who cannot hear the audio track of the video material.
  2. Synchronize text equivalents with visual presentation.
    Some media formats, such as QuickTime 3.0, allow captions and video descriptions to be added to the multimedia clip.
    1. [Interim] Until the format in question supports alternative tracks, two versions of the movie could be made available, one with captions and descriptive video, and one without.
    2. [New] Future technologies will allow separate audio/visual files to be combined with text files via a synchronization file to create captioned audio and movies. It will also allow the user to choose from multiple sets of captions to match their reading skills.  For more information see the SMIL specification.
  3.   Provide visual notification of sounds that are played automatically.
    This can be provided in the form of a text phrase on the page that links to a text transcript or description of the sound file. The link to the transcript should appear in a highly visible location such as at the top of the page. However, if a script is automatically loading a sound, it should also be able to automatically load a visual indication that the sound is currently being played and provide a description or transcript of the sound. The controversy surrounding this recommendation is that the browser should load the visual form of the  information instead of the auditory form if the user preferences are set to do so. However, strategies must also work with today's browsers.
  4.   Use the "title" attribute to provide a brief description of a very short sound.
    For example: <A href="mittens.wav" title="meow">Calico says "hello"</A>

4.  Visual presentations (video & animation)

  1. Provide descriptions of all video information in an auditory form, synchronized with the audio track.
    Video descriptions are used  primarily by people who are blind to follow the action and other non-auditory information in video material. The description  provides narration of the key visual elements without interfering with the audio or dialogue of a movie. Key visual elements include actions, settings, body language,  graphics, and displayed text.
  2. Provide descriptions of all video information in a text format.
    A text transcript of the video description provides the same information as in recommendation 4.2, but in a text format. This text transcript, in conjunction with the full audio transcript (4.1), allows access by people with both visual and hearing disabilities.  This also provides everyone with the ability to index and search for  information contained in audio/visual materials.
  3. Synchronize text and video description information with audio/video information, either directly or via a synchronization file.
    Some media formats, such as QuickTime 3.0, allow captions and video descriptions to be added to the multimedia clip.
    1. [Interim] Until the format in question supports alternative tracks, two versions of the movie could be made available, one with captions and descriptive video, and one without.
    2. [New] Future technologies will allow separate audio/visual files to be combined with text files via a synchronization file to create captioned audio and movies. It will also allow the user to choose from multiple sets of captions to match their reading skills.  For more information see the SMIL specification.

5.  Sources of frames

Do not include an image directly in a frame -- put it in a separate document.
[New] Otherwise, if the frame contents change, the frame title -- the only alternative text available in this case -- will no longer make sense. Including the image in its own file allows authors to specify alt-text with the IMG or OBJECT elements.

6.  Moving, blinking, and scrolling

  Provide a mechanism for the user to freeze all moving or blinking objects, particularly those that contain text.
In an example created by Mark Novak, if the user presses the escape key while the Java marquee has focus, the text will be displayed statically. View the example.

???also discuss refresh. META element w/http-equiv="refresh" and the content attribute defines a delay time and an URL.  The syntax is valid, but the spec. does not require ua's to support it.

  Avoid moving, blinking, or scrolling text.
[Interim] Authors should avoid the BLINK and MARQUEE elements. First of all, these elements are not part of HTML 4.0 (they are proprietary extensions and should be avoided.  See item 1). Second, blinking and moving text  is either read incorrectly or not at all by screen readers, can adversely affect people with cognitive disabilities, and is often annoying to people in general (see Jared Spool's book, "Web Site Usability"). Authors should use style sheets to draw attention to text in other ways, such as different fonts, sizes, or colors.
[New]  Use animated gifs or the style sheet blink property to create moving or blinking text whose movement can be suspended by the browser for people that have trouble with it.

7.  ASCII art and non-letter characters within words

  Avoid ASCII art and non-letter characters within words.

8.  Sounds that are played automatically

subset of audio - stand alone sounds?? - if played automatically provide visual notification...

B.  Display Independence

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

B.1.  Content, structure, and presentation separation

B.1.1 Structural elements (headings, lists, sections, etc.)

Structural elements enforce consistency in documents and supply information to other tools (e.g., indexing tools, search engines, programs that extract tables to databases, navigation tools that use header elements, and automatic translation software that translates text from one language into another.

For example, while a horizontal rule (HR) might convey a structural change to some users, it may not to all users. Instead, specify structure with DIV and SPAN as in the following example:
<DIV class="navigation-bar"> <HR title="Navigation bar"> [ <A rel="Next" href="next.html">Next page</A> | <A rel="Previous" href="previous.html">Previous page</A> | <A rel="First" href="first.html">First page</A>] </DIV>

Structural elements include:  ABBR, ACRONYM, BLOCKQUOTE, CITE, CODE, DIV, DFN, EM, DL, H1-6, KBD, LI, OL, P, Q, SAMP, SPAN, STRONG, SUB, SUP, TABLE, UL, and VAR

B.1.2 Layout and presentation

Once a majority of users use browsers that support CSS-2, the following style sheet techniques should be used to control layout and presentation.

  1. Use style sheets for text formatting rather than converting text to images.
    For example, stylized text on a colored background can be created with style sheets instead of as an image. This provides flexibility for people to view the text in a form that is most readable to them including magnified, in a particular color combination such as white on black, or in a particular font.
  2. Use style sheets rather than invisible or transparent images to force layout.
  3. Use style sheets instead of deprecated presentation elements and attributes that control visual presentation (elements {BASEFONT, CENTER, FONT, S, STRIKE, and U}. attributes {"align," "background," "bgcolor," "color,"and "face"}). Authors are encouraged to use elements (such as STRONG, EM, H1, H2, ABBR, etc.) that add structure to documents.

Until then tables (to control layout) and bit-mapped text (for special text effects) may be used with alternative pages as necessary.

Here we need to put examples and explanations of tables, what to look for, and suggested techniques. We also need to categorize when we need to suggest using an alternative page.

***The rest of the document is notes and is very much under construction.***

B.2.  Appropriate use of elements and attributes

Nest headings properly.
Since some users skim through a document by navigating its headings, it is important to increment heading levels correctly (H1 followed by H2, rather than H1 followed by H3). Headings used for other purposes, such as formatting text in a larger font size, may disorient users; use style sheets for formatting.

Encode list structure and list items properly.
The HTML list elements (DL, UL, OL, LI) should only be used to create lists.   Avoid using list elements for presentation effects such as  indentation.

Do not misuse structural elements and attributes for purposes of layout.
For example, do not use the BLOCKQUOTE element to indent a paragraph that is not a quotation; use style sheets. Do not use PRE to create a tabular layout of text; use tables.

B.3.  Alternative pages i.e., "If All Else Fails..."

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 maintained with the same frequency as the inaccessible page. Alternative pages are not a recommended practice because maintenance costs increase the likelihood that the alternative pages will become outdated. If alternative pages are created they must be updated as frequently as the main pages and provide equivalent information.

Methods for linking to alternative pages:

  1. Provide a link at the top of each page to allow a user to move back and forth between the graphic and alternative versions of the page.
  2. Once a majority of users use browsers that support the LINK element, provide the appropriate information in the header of the principal page (with the LINK element) so that the browser loads it automatically. If the user has set their default media type to "aural," "braille," or "tty" the user agent should load the alternative page automatically. For example:
<HEAD> <TITLE>Welcome to the Virtual Mall!</TITLE> <LINK title="Text-only version" rel="alternate" href="text_only.html" media="aural, braille, tty"> </HEAD>

C. Control Device Independence

1. Failing Gracefully

How frames can fail gracefully

  Ensure that pages are readable and usable without frames.
Authors should include a NOFRAMES element at the end of each FRAMESET. Please refer to the example in the Central Reference Document.

How scripts can fail gracefully

  1.  Provide alternative presentations of content for each script and applet that conveys information.
    1. [New] The NOSCRIPT element allows authors to supply alternative presentations of content for scripts. For example:
    <SCRIPT type="text/tcl">
     ...some Tcl script to show a billboard of sports scores...  </SCRIPT>  <NOSCRIPT>
     <P>Results from yesterday's games:   Bulls 91, Sonics 80  <A
    href="bullsonic.html">Bulls v. Sonics game recap</A>  ...more
    scores...  </NOSCRIPT>
  2. [Interim] Supply a description as content of the APPLET element.

<APPLET code="Press.class" width="500" height="500"
        alt="Java applet: how temperature affects pressure.">
As temperature increases the molecules in the balloon...

Note. The APPLET element is deprecated in HTML 4.0.

<OBJECT classid="java:Press.class" width="500" height="500"
        title="Java applet: how temperature affects pressure.">
As temperature increases the molecules in the balloon...

A more complex version takes advantage of the fact the OBJECT elements may be embedded to provide for alternative representations of information:

<!-- First, try the pressure applet -->  <OBJECT
title="How temperature affects pressure" 
width="500" height="500"> 
   <!-- Else, try the MPEG video --> 
   <OBJECT data="pressure.mpeg" type="video/mpeg">
      <!-- Else, try the GIF image --> 
      <OBJECT data="Pressure.gif"> 
         <!-- Else render the
description and an alternative --> 
         As temperature increases the
molecules in the balloon...  </OBJECT></OBJECT></OBJECT>

How style sheets can fail gracefully

  Ensure that pages are readable and usable without style sheets
for browsers that do not support them or users who deactivate them. Since style sheets are a new phenomenon, older browsers will not support them and it will take a while for new browsers to support them in a standard way.

2.  Keyboard operation

Keyboard shortcuts

Provide keyboard shortcuts for links.
The "accesskey" attribute of the LABEL, A, CAPTION, and LEGEND elements allows an author to associate a keyboard shortcut with the phrase. In the following example, if the accesskey is activated doc.html is retrieved by the browser. <A accesskey="C" href="doc.html">XYZ company home page</A>

  Furnish keyboard shortcuts for form elements.
[New] Keyboard shortcuts are assigned with the "accesskey" attribute. This example assigns "U" as the access key. Typing "U" gives focus to the label,  which gives focus to the control, so that the user can input text.

<FORM action="submit" method="post">
 <LABEL for="user" accesskey="U">user name</label>
 <INPUT type="text" name="user">  </FORM>

Logical tab order

  Specify a logical tab order among form controls.
[New] The "tabindex" attribute specifies the tabbing navigation order among form controls. For example:

<INPUT tabindex="1" type="text"
name="field1">  <INPUT tabindex="2" type="text"
name="field2">  <INPUT tabindex="3" type="submit"

Client-side Image maps

  Ensure that image map information is accessible and keyboard navigable.

The easiest way to satisfy this recommendation is to use a client-side image map since browsers that are not displaying graphics can use "alt" or "title" attribute values of AREA elements to present a list of links in place of the image map graphic.   Keyboard navigation to areas within the image map is also possible since the browser knows the coordinates of the defined areas.

For client-side image maps, there are several solution strategies:

  1. If the MAP element has been used with AREA, set the "alt" attribute of the AREA element. For example, with the IMG element:
<IMG src="welcome.gif" alt="Image
map of areas in the library" 
     usemap="#map1">  <MAP name="map1">
  <AREA shape="rect" coords="0,0,30,30" href="reference.html" 
  <AREA shape="rect" coords="34,34,100,100" href="media.html"
        alt="Audio Visual lab"> 
<OBJECT data="welcome.gif" type="image/gif"
 There are several areas in the library  including  
 <A href="reference.html">Reference</A> 
 and <A href="media.html"> the Audio VisualLab</A>.  
 More text can follow or precede.  <MAP name="map1">
   <AREA shape="rect" coords="0,0,30,30"  
         href="ref.html" alt="Reference">
   <AREA shape="rect" coords="34,34,100,100" 
alt="Audio Visual Lab">  </MAP></OBJECT>
<OBJECT data="navbar1.gif" type="image/gif"
usemap="#map1">  <MAP name="map1">  <P>Navigate
the site: 
 <A href="guide.html"  
    shape="rect" coords="0,0,118,28">Access
Guide</a> | 
 <A href="shortcut.html"  
    shape="rect" coords="118,0,184,28">Go</A>
 <A href="search.html"  
    shape="circle" coords="184,200,60">Search</A>
 <A href="top10.html"  
    shape="poly" coords="276,0,373,28,50,50">Top
Ten</A>  </MAP>  </OBJECT>

Note in this example that the MAP element is the content of the OBJECT element so that the alternative links will only be displayed if the image map (navbar1.gif) is not.

Server-side image maps

When a server-side image map must be used, authors should provide an alternative list of image map choices.  If an alternative list of links follows the image map, authors should indicate with the "alt" attribute of the IMG element the existence and location of the alternative list.  A more straightforward solution, although newer and less backwards compatible, is to include the alternative links within the body of an OBJECT element (see examples below). One final possibility is to create an alternative page that is accessible.

3.  Interim solutions for older technologies

  Place non-link,  printable characters (surrounded by spaces)  between links that occur consecutively to keep separate links from being read as one by screen readers (e.g., " | ").
[Interim] Please consult the example provided in guideline 5.3.

[Interim]   Include default, place-holding characters in edit boxes and text areas.

D.  Meta-information

1.  Complex relationships between frames

Describe the layout and purpose of frames and how multiple frames relate to each other.
[New] Use the "longdesc" attribute on the FRAME and IFRAME elements to designate a long description.

2.  Titles

  Provide titles for horizontal rules, acronyms, and abbreviations.
For example:
<HR title="new section">
<ABBR title="Idaho">ID</ABBR>
<ACRONYM title="World Wide Web">WWW</ACRONYM>

Titles for frames

  Give each frame a title.
[New] People accessing the page aurally will more easily keep track of how many frames exist and which is the current one. For example:

<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">
to go to the electronic library</A>  </NOFRAMES>  </FRAMESET>

Images used as links

Provide descriptive titles for images used as links.

Use the "title" attribute of the A element to provide more information about images used as links. For example:

<A href="home.html" title="Search
the whole XYZ company site"> 
   <IMG src="magnifyingglass.gif" alt="Search">

3.  Abbreviations of lengthy labels

  Provide abbreviations for lengthy row or column labels.
[New] Row and column header abbreviations (the "abbr" attribute) should be short but meaningful.  This 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.  Please refer to the examples in the appendix.

4.  Grouping into semantic units

Group form controls

  Group related controls semantically and label each group.
[New] The new FIELDSET element groups form controls while the LEGEND element labels each group. Please see the example in guideline 10.2.

Create a hierarchy oflong lists of choices

For long lists of selections, group items into a hierarchy.
[New] In the near future, browsers will display grouped lists with expanding and collapsing levels of detail.   To group items, use the OPTGROUP element (with the SELECT element). For example:

<FORM action="http://somesite.com/prog/someprog"
      method="post">  <P><SELECT
name="ComOS">  <OPTGROUP label="Comm Servers">  <OPTGROUP
label="PortMaster 3">  <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster
3 with ComOS 3.7.1 
  <OPTION label="3.7" value="pm3_3.7">PortMaster
3 with ComOS 3.7 
  <OPTION label="3.5" value="pm3_3.5">PortMaster
3 with ComOS 3.5  </OPTGROUP>  <OPTGROUP label="PortMaster 2">
  <OPTION label="3.7" value="pm2_3.7">PortMaster
2 with ComOS 3.7 
  <OPTION label="3.5" value="pm2_3.5">PortMaster
2 with ComOS 3.5  </OPTGROUP>  </OPTGROUP>  <OPTGROUP label="Routers">
 <OPTGROUP label="IRX"> 
  <OPTION label="3.7R" value="IRX_3.7R">IRX with
ComOS 3.7R 
  <OPTION label="3.5R" value="IRX_3.5R">IRX with

Associate labesl with their controls

  Associate labels with their form controls.
[New] This can be achieved using the  "for" attribute of the LABEL element. For example:

<FORM action="http://somesite.com/adduser"
    <LEGEND>Personal information</LEGEND> 
    <LABEL for="firstname">First name:</LABEL>
    <INPUT type="text" id="firstname"
    <LABEL for="lastname">Last name:</LABEL>
    <INPUT type="text" id="lastname"
    ...more personal information... 
    <LEGEND>Medical History</LEGEND> 
    ...medical history information... 

5.  Meta-information for complex tables

Include discussion about the algorithm included in the HTML 4.0 spec.

11.4.3 Algorithm to find heading information In the absence of header information from either the scope or headers attribute, user agents may construct header information according to the following algorithm. The goal of the algorithm is to find an ordered list of headers. (In the following description of the algorithm the table directionality is assumed to be left-to-right.) First, search left from the cell's position to find row header cells. Then search upwards to find column header cells. The search in a given direction stops when the edge of the table is reached or when a data cell is found after a header cell. Row headers are inserted into the list in the order they appear in the table. For left-to-right tables, headers are inserted from left to right. Column headers are inserted after row headers, in the order they appear in the table, from top to bottom. If a header cell has the headers attribute set, then the headers referenced by this attribute are inserted into the list and the search stops for the current direction. TD cells that set the axis attribute are also treated as header cells. from http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.4.3

5.1  Provide summaries of tables.

[New] Summaries of table structure and purpose (the "summary" attribute of the TABLE element) are especially useful for non-visual readers.  Please refer to the examples in the appendix.

5.2  Associate cells with row and column headers

Future browsers and assistive technologies will be able to automatically translate tables into linear sequences if tables are labeled appropriately.
[New] One way of labeling cells is with the "headers" and "scope" attributes. Please refer to the first two table examples in the appendix.
Note.  "Complex" refers to tables that are generally larger than three columns by three rows and that can not be automatically translated into a linear sequence.  A linear sequence is usually generated by reading a row left to right and proceeding each cell with the label of its column.

5.3  Group cells into categories.

[New] Future browsers will allow users to select data from a table by filtering on categories.  Please refer to the third example (the "axis" attribute) in the appendix.

E.  General Recommendations

1.  Complete link phrases

  Create link phrases that make sense when read out of context, but that are not too verbose.
Users who are blind often jump from link to link when skimming a page or looking for information. When they do this, only the text of the link ("link text") is read. Therefore, it is important that link text make sense when read without surrounding text.   For example, authors should not use "click here" as link text several times on the same page; this requires a user browsing the page with a screen reader to step through each link and read the surrounding text to determine the purpose of the link. Instead, link text should carry sufficient information, as in "download this document in ASCII text," "view the full version in HTML," or "for the text version select this link."

2.  W3C specification compliance

  Use elements and attributes that comply with an HTML 4.0 Document Type Definition (DTD) and CSS-1.
The W3C offers an HTML validation service at  http://validator.w3.org/ that can be used to determine if a site complies with one of the HTML 4.0 Document Type Definitions (there are three: strict, transitional, and frameset - see the validation service for more information).  It is  recommended, but not currently required, that pages comply with the strict definition.

10. Good Web Site Design Practices

Following the general site design guidelines will further improve accessibility.

  1. Create a consistent style for pages.
  2. Use a clear, consistent navigation structure.
  3. Offer navigation bars for easy access to the navigation structure.
  4. Provide a description of the general layout of the site, the access features used, and how to use them.
  5. Offer a site map.
  6. Offer different types of searches for different skill levels and preferences.
  7. Ensure that nothing within the site prevents keyboard operation.
  8. Ensure that text and background colors or patterns contrast well.   (A good test is to print your page to a black and white printer).
  9. Use a design tool that supports access features (and does not remove access when you close, or reopen your page using the tool).
  10. Place distinguishing information at the beginning of headings, paragraphs, lists, etc., to decrease the amount of sifting readers perform to find important information.  This is commonly referred to as "front-loading" and is especially helpful for people accessing information serially.
  11. Create a single downloadable file for documents that exist as a series of separate pages. This helps people reading documents off-line.  Currently, an archival or compression program is needed to create the single file.  In the near future, user agents will be able to collate separate pages based on information  in page headers.  The following example shows how to indicate where the first page of the reference manual exists as well as  which page follows the current one.
<HEAD><TITLE>Reference manual -- Chapter
   <LINK rel="Start" title="The first page of the
   <LINK rel="Next" title="Chapter 2"  

For more information:

Good Web Site Design Practices - Chapter 25 in the Central Reference Document

Appendix A - Table examples

  1. "headers" - The following example shows how to associate data cells with their corresponding headers by means of the "headers" attribute defined in HTML 4.0.  The "headers" attribute specifies a list of header cells (row and column labels) associated with the current data cell.  This requires each header cell to have an "id".
<TABLE border="border" summary="This
table charts the number of cups of   coffee consumed by each senator, the
type of coffee (decaf or regular),   and whether taken with sugar.">
 <CAPTION>Cups of coffee consumed by each senator</CAPTION>  <TR>
 <TH id="t1">Name</TH>  <TH id="t2">Cups</TH>
 <TH id="t3" abbr="Type">Type of Coffee</TH>  <TH
id="t4">Sugar?</TH>  <TR>  <TD headers="t1">T.
Sexton</TD>  <TD headers="t2">10</TD>  <TD
headers="t3">Espresso</TD>  <TD headers="t4">No</TD>
 <TR>  <TD headers="t1">J. Dinnen</TD>  <TD
headers="t2">5</TD>  <TD headers="t3">Decaf</TD>
 <TD headers="t4">Yes</TD>  </TABLE>

A speech synthesizer might render this tables as follows:

           Caption: Cups of coffee consumed by each senator

           Summary: This table charts the number of cups of coffee

                    consumed by each senator, the type of coffee

                    (decaf or regular), and whether taken with sugar.

           Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No

           Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes

<TABLE border="border"   summary="This
table charts the number of cups of coffee consumed by each senator, the  type of
coffee (decaf or regular), and whether taken with sugar.">  <CAPTION>Cups
of coffee consumed by each senator</CAPTION>  <TR>  <TH scope="col">Name</TH>
 <TH scope="col">Cups</TH>  <TH scope="col"
abbr="Type">Type of Coffee</TH>  <TH scope="col">Sugar?</TH>
 <TR>  <TD>T. Sexton</TD>  <TD>10</TD>  <TD>Espresso</TD>
 <TD>No</TD>  <TR>  <TD>J. Dinnen</TD>  <TD>5</TD>
 <TD>Decaf</TD>  <TD>Yes</TD>  </TABLE>
<TABLE border="border">  <CAPTION>
Travel Expense Report </CAPTION>  <TR>  <TH></TH>  <TH
id="a2" axis="expenses">Meals</TH>  <TH id="a3"
axis="expenses">Hotels</TH>  <TH id="a4"  axis="expenses">Transport</TH><TD>subtotals</
TD>  </TR>  <TR>  <TH id="a6" axis="location">San
Jose</TH>  <TH></TH><TH></TH><TH></TH><TD>
</TD>  </TR>  <TR>  <TD id="a7" axis="date">25-Aug-97</TD>
 <TD headers="a6 a7 a2">37.74</TD>  <TD headers="a6
a7 a3">112.00</TD>  <TD headers="a6 a7 a4">45.00</TD><TD></TD>
 </TR>  <TR>  <TD id="a8" axis="date">26-Aug-97</TD>
 <TD headers="a6 a8 a2">27.28</TD>  <TD headers="a6
a8 a3">112.00</TD>  <TD headers="a6 a8 a4">45.00</TD><TD></TD>
 </TR>  <TR>  <TD>subtotals</TD><TD>65.02</TD><TD>224.00&
 </TD><TD>90.00</TD><TD>379.02</TD>  </TR>  <TR>
 <TH id="a10" axis="location">Seattle</TH>  <TH></TH><TH></TH><TH></TH><TD>
</TD>  </TR>  <TR>  <TD id="a11" axis="date">27-Aug-97</TD>
 <TD headers="a10 a11 a2">96.25</TD>  <TD headers="a10
a11 a3">109.00</TD>  <TD headers="a10 a11 a4">36.00</TD><TD></TD>
 </TR>  <TR>  <TD id="a12" axis="date">28-Aug-97</TD>
 <TD headers="a10 a12 a2">35.00</TD>  <TD headers="a10
a12 a3">109.00</TD>  <TD headers="a10 a12 a4">36.00</TD><TD></TD>
 </TR>  <TR>  <TD>subtotals</TD><TD>131.25</TD><TD>218.00
 </TD><TD>72.00</TD><TD>421.25</TD>  </TR>  <TR>
 <TH>Totals</TH><TD>196.27</TD><TD>442.00  </TD><TD>162.00</TD><TD>800.27</TD>
 </TR>   </TABLE>

Appendix B - Alt-text authoring guidelines

General recommendation

In general, authors should specify alternative text that acts as a replacement for the function of the image and does not describe its visual appearance.  Authors should ask themselves this question:  if you were reading the document aloud over the telephone, what would you say upon encountering this image to make the page comprehensible to the listener?

There are three attributes of IMG that can be used to provide textual information about an image:

Note.  Providing alternative text for images embedded with the OBJECT element is covered in the Images and Image Maps section.


Decorative graphics

Provide a brief textual equivalent of the image. Providing alt-text is required, while providing a longer description is recommended.
Example:  <IMG src="sailboats.gif" alt="Sailboats in calm water" longdesc="sailboatsdesc.html">
Then, within sailboatsdesc.html:

A picture of ten sailboats docked in calm water at the edge of busy street in a small town.

Since some users may not want to see even a short description of the graphic, keep them as short as possible.  In the future, we will make recommendations for the use of style sheets, class values, and XML that will allow users to select types of images they wish to download and view.



  1. Mark up list items correctly.
  2. For unordered lists use style sheets to provide alternative bullets (Example 1).   If images are not loaded, the browser will draw a default bullet.  Avoid using images as bullets (Example 2).  However, if this method is used, the alternative text for the image should be "Item:".  In the future, aural style sheets may be used to provide audible cues preceeding bullets.

Example 1:
<STYLE ...><!-- UL { list-style: url(star.gif) }--></STYLE>
<LI> Audrey</LI>
<LI> Laurie</LI>
<LI> ... </LI>

Example 2:  (Deprecated)
<DD><IMG src="star.gif" alt="Item:">Audrey
<DD><IMG src="star.gif" alt="Item:">Laurie
<DD> ...

Example 1:
<STYLE ...><!-- .newtxt { font-weight : bold; color : red;  background : yellow }
                            .newbullet {list-style : url(yellow.gif) }--></STYLE>
<LI class="newbullet">Roth IRA <SPAN class="newtxt">New</SPAN></LI>
<LI>401 K</LI>
<LI> ... </LI>

Example 2: (Deprecated)
<DD><IMG src="red.gif" alt="New:">Roth IRA</DD>
<DD><IMG src="yellow.gif" alt="Old:">401 K</DD>
<DD> ... </DD>

Links and buttons

Provide the equivalent textual link phrase in the alt-text  (i.e., if the link were text instead of graphical what would it say).
Example:  <A href="routes.html"><IMG src="topo.html" alt="Current routes at Boulders Climbing Gym"></A>


Section separators

For graphics used as section separators (e.g., horizontal rules) provide information about what the graphic represents.  In other words, provide an equivalent textual cue as to what the visual reader perceives (Example 1).  However, we recommend using the HR element with style sheets and the "title" attribute (Example 2).

Example 1:
<IMG src="redline.gif" "End of Chapter 7 - Visual Displays">
<H1>Chapter 8 - Auditory and Tactile Displays</H1>

Example 2:
<STYLE ...><!-- HR.red { color : Red }--></STYLE>
<HR class="red" title="End of Chapter 7 - Visual Displays">
<H1>Chapter 8 - Auditory and Tactile Displays</H1>

Bitmap text

If the image is a picture of stylized or colorful text, then the alt-text must be the same as the text in the image.  <P>This is an <IMG src="BigRedExample.gif" alt="Example"> of what we mean.</P>

This is true of Drop Caps (large first letter of a paragraph) as well. However, we recommend using style sheets to create the effect, as the following example illustrates.

Example using style sheets to create drop caps:
<STYLE ...><!-- .dropcap { font-size : 120%; font-family : Helvetica } --></STYLE>
<SPAN class="dropcap">O</SPAN>nce upon a time...

Invisible images used as spacers

Invisible or transparent images are often used to force the layout of a page.   Provide "null" (alt="") or "white space" (alt="&nbsp;") alt-text, whichever the context requires.  Note that the HTML 4.0 specification recommends that attribute values do not contain leading or trailing spaces. It states,   "User agents may ignore leading and trailing white space in CDATA attributes values (e.g., "  myval  " may be interpreted as "myval")."  Therefore, empty alt-text (alt="  ") might be ignored.

Example 1:  An image is used to create a carefully defined space between words or graphics.  "White space" alt-text is used to prevent the words from running together when the image is not loaded.
my poem requires a big space<IMG src="10pttab.gif alt="&nbsp;&nbsp;&nbsp;">here

Example 2: An image is used to force a graphic to appear in a certain position
<IMG src="spacer.gif" alt=""><IMG src="colorfulwheel" alt="The wheel of fortune">


Future notes

  1. Alternative text for images included with OBJECT is a backwards compatible solution but not consistent across newer browsers.
  2. As suggested earlier, future technologies, such as XML will allow authors to label objects and images as decorative, charts, bullets, etc.
  3. Predefined class types will also allow authors to attach literal values such as wallpaper, navigation bar, etc. to images and objects.  This will then allow users to select which types of predefined class types they want to see, which they would like descriptions for, or which they would like to ignore.  This can be controlled with personal style sheets.


WAI Markup Guidelines Working Group Co-Chairs:
Chuck Letourneau, Starling Access Services

Gregg Vanderheiden, Trace Research and Development

Staff contacts:
Judy Brewer and Daniel Dardailler
Special thanks to the following people who have made major contributions to shaping the content of this Working Draft:
Harvey Bingham, Daniel Dardailler, Al Gilman, Jason White
In addition we would like to thank the following people who have contributed through review and comment:
Judy Brewer, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Larry Goldberg, Jon Gunderson, Phill Jenkins, Leonard Kasday, George Kerscher, Josh Krieger, Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile, MegaZone (Livingston Enterprises), Masafumi Nakane, Charles Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam Quinn, Dave Raggett, T.V. Raman, Robert Savellis, Jutta Treviranus, Steve Tyler, Jaap van Lelieveld

The original draft of this W3C working document is based on The Unified Web Site Accessibility Guidelines compiled by the Trace R & D Center, University of Wisconsin under funding from the National Institute on Disability and Rehabilitation Research (NIDRR),  U.S. Dept. of Education.

For a full list of Contributors to the Unified Guidelines is available at http://trace.wisc.edu/docs/html_guidelines/version7.htm .

We would also like to thank the people listed in the References section below whose works were used in the compilation of the unified guidelines on which this document is based.


Normative References

  1. HTML 4.0 Recommendation.
  2. Unified HTML Accessibility Guidelines -- Previous version of this document

Informative References

  1. Accessible Design for Users with Disabilities. -- Sun Microsystems
  2. The Accessible Web: Web Access Through Adaptive Technology -- Kevin Nguyen, University of Toronto
  3. ALT text recommendations, and notes on viewing situation -- A.J. Flavell, University of Glasgow
  4. Alternative Access to the World Wide Web -- University of Toronto
  5. Any Browser Table Format -- Department of Missions, Abilene Christian University
  6. Best Viewed With Any Browser -- Accessible Site Design
  7. Compatibility & Accessibility -- All Things Web
  8. Composing Good HTML -- James "Eric" Tilton.
  9. Design Considerations: Readers with Visual Impairments -- Arthur R. Murphy
  10. Designing Access to WWW Pages - Alliance for Technology Access.
  11. Designing HTML Tables to Work with HTML 2.0 Browsers -- Stanton McCandlish
  12. DO-IT HTML Guidelines -- University of Washington
  13. Experiences Implementing Web Accessibility Guidelines in IBM -- Phill Jenkins
  14. For Web Page Designers -- Microsoft
  15. GSA HTML Accessibility Guidelines -- Paul Fontaine
  16. Guide to Writing Accessible HTML -- University of Toronto
  17. Hints for designing accessible Websites -- Royal National Institute for the Blind
  18. IBM Web Design Guidelines  -- IBM Human Computer Interaction (HCI)
  19. IBM Guidelines for Writing Accessible Applications Using 100% Pure Java -- IBM Special Needs Systems
  20. Increasing Access to World Wide Web Sites for Blind and Visually Impaired Computer Users -- Dena Shumila, Jan Richards
  21. InfoUse Web Accessibility Guidelines -- Jane Berliss, Lewis Kraus, Susan Stoddard
  22. LEVELLING THE ROAD AHEAD: GUIDELINES FOR THE CREATION OF WWW PAGES ACCESSIBLE TO BLIND AND VISUALLY HANDICAPPED USERS, Judith M. Dixon, Ph.D., Consumer Relations Officer, National Library Service for the Blind and Physically Handicapped
  23. The Lynx Manifesto -- Dehanced for Lynx
  24. Making Your Site Speech Friendly -- Cathy Anne Murtha, Web Design and Access Specialist, Magical Mist Creations
  25. NCSA Mosaic Access Page
  26. Nimble Document Navigation Using Alternative Access Tools -- Jutta Treviranus, University of Toronto
  27. Starling Access Services Accessible Web Page Design -- Chuck Letourneau
  28. Tables on non-table browsers -- A.J. Flavell, Glasgow University
  29. Universal Accessibility -- Government of Canada Internet Guide
  30. Universal Design of WWW Pages -- a DO-IT (University of Washington) Brochure
  31. Universal Information Access on the WWW (COCA)
  32. "Universal Specifications" Accessibility Standards for Web Design -- New South Wales Attorney General's Department
  33. Usability of Information and the WWW -- UCLA Disabilities and Computing Program
  34. IBM Web Accessibility Guidelines -- IBM Special Needs Systems
  35. World Wide Web Access: Disability Discrimination Act Advisory Notes -- Australia

For more information:

  1. From the Central Reference Document
  1. 13.1 Introduction to the issues
  2. 13.2 General recommendations
  3. 13.3 Viewing and interacting with static images and image maps

3. Applets and Scripts

For more information:

  1. From the Central Reference Document
  1. 13.1 Introduction to the issues
  2. 13.2 General recommendations
  3. 13.4 Applets
  4. 18 Scripts

5. Tables

  1. [Required]

  2.   Avoid using tables to format text documents in columns.
  3. [Recommended]

  4.   For tables of text and numbers, provide an alternative page that presents the table information in a linear fashion.
  5. [Recommended]

  6.   Avoid using tables to layout a page.
    [New] Authors should use style sheets to position graphics and text.
  7. [Recommended]

  8.   Provide a phone number, fax number or e-mail address if tables cannot be made accessible.

Tips and Tricks

For more information:

  1. Tables - Chapter 11 in the Central Reference Document
  2. Tables - the HTML 4.0 specification

6. Links

For more information:

  1. Links - Chapter 12 in the Central Reference Document
  2. Links - the HTML 4.0 specification

7. Frames

For more information:

  1. Frames - Chapter 16 in the Central Reference Document
  2. Frames - the HTML 4.0 specification

8. User-Input Forms

  1. [Required]

  2.   Do not use image maps to create graphical "submit" buttons.
    Instead, use the BUTTON or INPUT elements with alternative text.
  3. [Recommended]

  4. [Interim]  Include a phone number, fax number, e-mail address, or postal address as an alternative way to submit information.

For more information:

  1. Forms - Chapter 17 in the Central Reference Document
  2. Forms - the HTML 4.0 specification

1. Style and Structure

Tips and Tricks

For more information:

  1. Style Sheets - Chapter 14 in the Central Reference Document
  2. Style Sheets - the HTML 4.0 specification
  3. Cascading Style Sheets, level 2 -- Working Draft from the World Wide Web Consortium
  4. Text - Chapter 9 in the Central Reference Document
  5. Text - the HTML 4.0 specification
  6. Lists and Outlining - Chapter 10 in the Central Reference Document
  7. Lists - the HTML 4.0 specification

For more information:

  1. From the Central Reference Document
  1. 13.1 Introduction to the issues
  2. 13.2 General recommendations
  3. 13.5 Audio and video