HTML QUICK REFERENCE PAGE

April 1996 - Gregg C Vanderheiden Ph.D., Wendy A. Chisholm, Neal Ewers

This page provides a quick reference of the ideas you should consider while designing HTML pages to maximize the number of users that can view then TODAY. This includes people with text-based browsers, people with slow (modem) connections, people without A/V capabilities, people with helper applications missing, and people with disabilities. The goal is to make pages accessible while maintaining or increasing their attractiveness. Several strategies are suggested for each area to allow you to select a strategy or combination of strategies that match your needs.

TEXT ANCHORS

  1. Make text anchors descriptive enough so that they make sense when read out of context.

  2. Place a dividing character between links which occur consecutively. Vertical bars are often used to prevent a list of links from being read as one link by a screen reader.

GIF and other IN LINE GRAPHICS

  1. Provide an alternate text description ( ALT-TEXT ). This includes all graphics - even decorative ones. Otherwise, the user with a text-based browser sees a note saying there is a graphic but doesn't know what it is.

  2. Include a text anchor to a page describing the graphic ( recommend a capital "D" or a short phrase located next to the picture) which takes you to a separate page with a full description of significant graphic elements, pictures etc.

  3. Provide an alternate text-only page which translates all of the graphic and text information into text only. This can provide a fast access method for all users. You may have text-only pages for just troublesome pages or all pages at your site. Users should be able to switch back and forth between text-only and graphic versions of the page.
Style suggestions:


JPEG and other EXTERNAL VIEWER GRAPHICS

Three alternate strategies which can also be used together.

  1. Include a text anchor to a page describing the graphic ( Recommend a capital "D" or short phrase located next to a thumbnail picture) which takes you to a separate page with a full description of graphic elements, pictures etc.

  2. Provide an alternate text-only page which translates all of the graphic and text information into text only. This can provide a fast access method for all users. You may have text-only pages for just troublesome pages or all pages at your site. Users should be able to switch back and forth between text-only and graphic versions of the page.
Note: It is possible to embed text descriptions in some picture formats such as JPEG. Someday, external viewers will be available which allow you to view either the picture or the description from such formats - if the text description is there. It is a good idea to include it now - but it is not sufficient for access yet.


AUDIO CLIPS

Maintain a link to a page with a transcript or description of the sound file. Use a phrase such as "or a transcript of xxxx" or "hear the speech or read the transcript" with "read the transcript" acting as the link to the transcript.

Note: Someday audio file formats and players may include the ability to handle text as part of the sound file.

MOVIES

  1. Include Caption or Text Tracks with a description of the sounds and words of the movie. Quicktime for example allows text tracks which can be viewed at the user's discretion

  2. Include an alternate sound track which includes an audio description of the video mixed with the regular audio track. (If your movie format does not support alternate audio tracks then you can provide a second copy of the movie with audio description included)

  3. Provide an alternate text file with a description of the movie and a transcript of the audio.

Note: If the movie format permits multiple video tracks then a secondary video track with an interpreter signing American Sign Language could also be provided.


IMAGE MAPS

  1. Provide text anchors for all links accessible through an image map. Usually provide by a list of text anchors just below the Image Map.

  2. Provide an alternate text-only page which translates all of the graphic and text information into text only. This can provide a fast access method for all users. Users should be able to switch back and forth between text-only and graphic versions of the page.

Note: Client side image maps are rapidly coming to the fore. As soon as a standard is defined and non-image modes of graphic browsers support them this will be another solution strategy. Currently, LYNX displays the text descriptions for each URL in a client side image map. Text descriptions are defined with alt attribute of the USEMAP tag.


FORMS

  1. Provide a form which can be downloaded then mailed or e-mailed, or a phone number someone can call to provide the requested information

Note: To make edit boxes accessible by users viewing pages with screen readers, some sites are experimenting with place-holding information in edit boxes, like short descriptions or cues, so that screen readers can detect the presence of the edit boxes. Screen reader and browser designers are also addressing this problem.

TABLES

Tables cause problems for screen reading software (used by people who are blind) since the screen readers tend to read across the screen in a way that runs all of the text on a line together. If an entry in a cell occupies more that one line the first line of each cell would be read, then the second etc. No good solutions exist at this time. If you can avoid using the TABLE structure that is best. You could also present the data on an alternate text page without tables. Work is in process on this problem, including screen readers that can read by columns.


NON-STANDARD PAGE AND DOCUMENT FORMATS

  1. Avoid non-standard HTML formats, special tags etc. They often cause problems for Braille translation, screen readers and some browsers.

    OR Provide an alternate text-only page which translates all of the information included in the original page to text only. This can provide a fast access method for all users. Users should be able to switch back and forth between text-only and graphic versions of the page.

  2. Always provide HTML, or at least ASCII forms, of all documents presented in PDF, PS, WORD or other formats.


CUSTOM DATA STRUCTURES AND VIEWERS

Avoid non-standard data structures and viewers. The only way for custom data and views to be accessible is if the access is built directly into the viewer. Standard access tools do not generally work with special viewers.

COLOR

  1. Background patterns and color should contrast well with the lettering to maintain readability (background refers to both backgrounds of pages and backgrounds of images).

  2. Select colors that will make your pages easy to read by people with color blindness. One good test is to see if your pages are readable in black and white.


TESTING

Always test your pages using a variety of text browsers and platforms (PC, MAC, UNIX). Be sure to include text-based browsers and use graphic browsers with images turned off.

APPENDIX


To Table of Contents
To Previous Section -General Comments
To Next Section -In-Line Graphic Elements

Please send comments and suggestions to: web-team@trace.wisc.edu