Writing Accessible HTML Documents

Because of the structured nature of HTML, the WWW provides tremendous power and flexibility in presenting information in multiple formats (text, audio, video, graphic, etc.). However, the features that provide power and elegance for some users present potential barriers for others. For example, servers which require the viewing of graphic images are inaccessible to blind users. Careful design and coding of information can alleviate access barriers. The following technical guidelines should be followed in designing and coding accessible HTML documents.

It is important to note that implementing these guidelines does not compromise the aesthetics or functionality of the server.

Guideline: Every graphic image should have associated text.

Rationale:

If the person viewing the information is using a character-based program (e.g. Lynx) or has graphics turned off in other browsers, the link will be lost.

Strategy:

Use ALT attribute in image reference anchors and include selection text within the anchor.

Example of inaccessible code:

On January 20, 1993, William Jefferson Clinton
<A HREF="/images/raw/bill-portrait.gif" >
<IMG SRC="/images/small/bill-portrait.gif" > < /A >
was sworn in as the 42nd President of the United States, and moved into the White House with his wife.
< A HREF="/images/raw/hillary-portrait.gif" > < IMG SRC="/images/small/hillary-portrait.gif" > < /A >
Hillary Rodham Clinton and their daughter Chelsea.

In this example, the graphics convey no information about the link. A user with a character-based application would not know the nature of the link.

Accessible code would look like this:

Example of accessible code:

On January 20, 1993,
<A HREF="/images/raw/bill-portrait.gif" >
<IMG SRC="/images/small/bill-portrait.gif" alt="Picture of President Clinton..." >
William Jefferson Clinton < /A > was sworn in as the 42nd President of the United States, and moved into the White House with his wife, < A HREF="/images/raw/hillary-portrait.gif" > < IMG SRC="/images/small/hillary-portrait.gif" Alt="Picture of Hillary Rodham Clinton and their daughter Chelsea." > Hillary Rodham Clinton and their daughter Chelsea. < /A >

This example adds both the "alt" image expression and a text descriptor within the anchor.

Guideline: If image maps are used, there should be an alternate method of selecting options.

Rationale:

If the person viewing the information is using a character-based program (e.g. Lynx) or is using a computer which is not capable of displaying graphics, the image will be completely lost; there will be no way to select options.

Example of inaccessible code:

< TITLE > Map of Washington, DC. < /TITLE > < H1 > Click on a building below < /H1 > < A HREF="http://www.whitehouse.gov/img/dcmap" > < IMG SRC="http://www.whitehouse.gov/images/large/DC_map.gif" ISMAP > < /A >

In this example, the entire page is lost for character-based viewers. An alternative way to handle this would be to present an option for a list of buildings. This would give all viewers a better understanding of what information was available.

Example of accessible code:

< TITLE > Map of Washington, DC. < /TITLE > < H1 > Click on a building in the map below or select from < A HREF="http://www.whitehouse.gov/dcmap_list.html" > list of buildings < /A >< /H1 > < A HREF="http://www.whitehouse.gov/img/dcmap" > < IMG SRC="http://www.whitehouse.gov/images/large/DC_map.gif" ISMAP alt=map of Washington"> < /A >

In this example, the user is given the choice of an alternate page "dcmap_list.html" which might look something like this:

< TITLE > Buildings in Washington, DC. < /TITLE >
<H1> Select from the list of buildings below </H1 >
<UL>
<LI> <A HREF="http://www.doc.gov"> Department of Commerce </A > 16th St. N.W
< LI > < A HREF="http://www.DOI.gov/Parks/Washington_Monument.html" > Washington Monument < /A > Between 15th and 17th south of Constitution Ave.< LI > < A HREF="http://www.doi.gov">
Department of Interior < /A > 14th St. N.W < LI >
...
< LI > ...
< /UL >


There are two ways to implement this guideline. The first way is to modify every page which contains an ISMAP so that on each page the user is offered a choice of graphic or text selection. Another method however, is to offer the user a choice at the home page. With this method if the user selects "no graphics" at the home page, a separate set of pages with no ISMAPs will be selected.

Inclusion of a second home page would allow the user to select "no graphics" The code would look like this:

Select <A HREF="http://www.whitehouse.gov/Welcome-no_graphics.html" > no graphics < /A > if you would like to browse without pictures.

Guideline: Include detailed descriptive "comments" with all JPEG images.

Rationale:

Although JPEG files are used for high resolution images, there is still useful information that can be conveyed to blind users. One example of this would be JPEG images of pages in a manuscript. In this case, a full transcript of text contained in the image should be included.

Strategy:

Use a JPEG file editor to include information in the "comments" section of the JPEG file. Alternatively, a separate "text" file could be linked to the image.

Guideline: Provide text transcriptions or descriptions for all audio clips.

Rationale:

Audio clips are of no use to users with hearing impairments or who are connecting through systems which do not support audio.

Inaccessible code:

The President asked
< A HREF="http://www.whitehouse.gov/images/raw/al-portrait.gif" >
< IMG SRC="http://www.whitehouse.gov/images/small/al-portrait.gif" >
Vice President Gore < /A > to head up the
< A HREF="http://www.npr.gov/" > National Performance Review (NPR)
< /A > a project to make government work better and cost less.
< A HREF="http://www.whitehouse.gov/Sounds/Gore.au" >
< IMG SRC="http://www.whitehouse.gov/icons/audio.gif"> < /A >

This code has two problems. First, the sound clip icon does not have associated text and therefore can not be seen with text browsers. Second, the link is of no use to users who are hearing impaired or do not have sound equipped viewers.

Suggested code:

The President asked
< A HREF="http://www.whitehouse.gov/images/raw/al-portrait.gif" >
< IMG SRC="http://www.whitehouse.gov/images/small/al-portrait.gif"
alt="Picture of Al Gore" >
Vice President Gore < /A > to head up the
< A HREF="http://www.npr.gov/" > National Performance Review (NPR)
< /A > a project to make government work better and cost less.
< A HREF="http://www.whitehouse.gov/Sounds/Gore.au" > You can hear
< IMG SRC="http://www.whitehouse.gov/icons/audio.gif" alt="audio icon">
< /A > or < A HREF="http://www.npr.gov/Al_NPR_intro.html" >
read < /A > Mr. Gore's speech introducing the NPR.

With this code, the user is given the choice of "hearing" the audio clip, or reading the text. The second option links to the text file Al_NPR_intro.html

Guideline: Make link text descriptive but not verbose.

Rationale:

Words like "this", "here", or "click" do not convey information about the nature of the link. Link text should consist of substantive, descriptive words which can be quickly reviewed by users. Conversely, link text which is too long, bogs down efficient browsing.

Inaccessible code:

<A HREF="/White_House/html/White_House_Home-plain.html"> this </A> for a textual representation of this page.

In this example, the link text "this" gives no indication of the nature of the link.

Example of accessible code

A <A HREF="/White_House/html/White_House_Home-plain.html"> text version of this page </A> is also available.

In this example, the link text "text version of this page" describes exactly what the link will do if selected.

Guideline: File formats other than HTML should be used only as alternatives to rather than replacements for HTML files

Rationale:

Some file formats such as Portable File Format (PDF) from Adobe Inc. are strictly graphic in nature and are therefore, inaccessible to users operating in a text mode or to users who do not have an appropriate viewer for the format. Other file formats such as Microsoft Word (TM) or Word Perfect (TM) require proprietary software to view.

Strategy:

If documents must be provided in a specialized format (e.g. PDF) provide the equivalent text file in HTML or text format.

Inaccessible code:

Select <A HREF=http://www.gsa.gov/coca/PDDF_RPT.pdf "> "Report to NIST From the Blue Ribbon Panel on Requirements and Recommendations for a Final Form Portable Document Delivery Format" to view the report. </A>

Notice in this example that only the PDF version of the file is available.

Suggested code:

The "Report to NIST From the Blue Ribbon Panel on Requirements and Recommendations for a Final Form Portable Document Delivery Format" is available in <A HREF=http://www.gsa.gov/coca/ PDDF_RPT.pdf">graphics format </A>or <A HREF=http://www.gsa.gov/coca/PDDF_RPT.HTMl">text format. </A>

In this example, the user can select the document in either PDF or HTML format.

Guideline: Provide alternate mechanism for on-line forms.

Rationale:

Forms are not supported on all browsers.

Strategy:

Provide the user an opportunity to select alternate methods to perform the same task.

Suggested code:

<H2> Click here to <A HREF="net-ordr.html">place an order</A></H2> <P>

Click here to download our <A HREF="ord-form.txt">Text-Based Order Form</A><P>

Or call our Rocky Mountain Outfitters retail location and place your order! 1-800-35-ROCKY or 1-800-357-6259. Live humans are available 11AM - 6PM Mountain time, Monday through Saturday to assist you.

This code provides three options to place order. 1) on-line form, 2) text based form which can be downloaded and filled out with a text editor, 3) a phone number to "talk to a human"

Guideline: All pages should be tested using multiple viewers.

At a minimum, pages should be tested with one version of Mosaic and one version of Lynx. Ideally, pages should be tested with several versions of Mosaic, both versions of Lynx, and one other Web viewer. Pages should be tested in DOS, Windows, and UNIX environments.

Guideline: Do not use proprietary procedural format markup:

Rationale:

HTML code which uses extensions to the HTML standard cannot be validated. This makes Braille translation very difficult. Markup that says make the font a bit bigger, now a bit smaller, etc. (and it's cumulative!) doesn't say much about the structure of the document.

Another example: The <BLINK> tag in Netscape(TM) renders Braille and speech display systems useless.

If you are determined to use extensions, at least give the user the option of selecting an alternate presentation:

Example of accessible code

At this point we are going to ask you to choose the presentation format you prefer from the three choices below: <P>

Click on your choice and enter the Cyberspace Discount Outdoor Shop: </P>

<A HREF="txt-main.html">Text Only</A> - For Text based browsers or for slow connections.<P>

<A HREF="main.html">Graphical</A> - For Mosaic users - Inline GIFs <P>

<A HREF="net-main.html">Netscape Graphical</A> - For Netscape users - Inline JPEGs, Centered Text, etc.

Guideline: For simple images, such as icons performing the function of bullets, use simple ALT attributes.

Rationale:

Using a long text description, e.g. ALT="This is a little blue ball", clutters the screen.

Strategy:

Either avoid using images and use "*" for performing the function of bullets or use ALT= "o "

Thanks to Judy Dixon for her extensive insight and suggestions.

The latest version of this document is available at http://www.gsa.gov/coca/WWWcode.htm

Return to IT Accommodation Home Page