Web DevCenter
oreilly.comSafari Books Online.Conferences.

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

A Primer for Accessible Web Pages
Pages: 1, 2

ALT Text

Many web sites can solve the bulk of their accessibility issues by providing alternative text for images, especially when images are used for navigation elements. Naturally, then, the first rule in Section 508 (1194.22, part a) concerns alternative text descriptions. Correlating to the W3C's Web Content Accessibility Guidelines 1.0, checkpoint 1.1, this rule requires use of the alt attribute for the <img>, <applet>, and <input> tags, and text equivalents within the <object> and <applet> elements.

Related Reading

Web Design in a Nutshell, 2nd EditionWeb Design in a Nutshell, 2nd Edition
By Jennifer Niederst
Table of Contents
Sample Chapter
Full Description
Read Online -- Safari

HTML 4.0 includes support for "long descriptions" with the longdesc attribute. If a user agent supports longdesc it will render a separate file containing more extensive alternative text in place of the image, applet, or other element.

For example, imagine a Federal agency's web page with a logo for the agency at the top. If there is no alternative way of describing that image in text, a screen reader (or Lynx) will describe that image as just "image" or, at best, it will give the name of the image.

Using the attributes mentioned above would lead to more meaningful results. The following is the proper way for the Federal agency to present an image:

<img src="accessbrdlogo.gif" alt="Access Board logo" longdesc="accessbrd.html">

Given the above tags, there should be an additional file called accessbrd.html, which contains text like the following:

"The Access Board is an independent Federal agency devoted to accessibility for people with disabilities. It operates with approximately 30 staff members and a governing board of representatives from Federal departments and public members appointed by the President."

Additionally, for user agents that don't support longdesc, provide a link to the file that describes the graphic:

<img src="accessbrdlogo.gif" alt="Access Board logo" longdesc="accessbrd.html"><a href="wdadesc.html" title="Description of the Web Design Agency">[D]</a>

Note that this anchor won't show up for GUI browsers because there is nothing within the anchor element.

When using the <object> tag, specify a longer text equivalent within the element's content:

<object data="accessbrdlogo.gif" type="image/gif"> The Access Board's <a href="projected.html">projected budget</a> for Fiscal 2005 is ... </object>

Image Maps

Graphical navigation is a more challenging issue. Image maps, which are frequently used for navigation, have been the subject of much scrutiny. To make image maps accessible, Section 508 requires the use of the <object> tag, alternative text links, and proper separation of text. Here's an example of an image map that has been made accessible with an <object> tag.

<OBJECT data="navigation.gif" type="image/gif" usemap="#mapnav">
<MAP name="map1">
<P>Navigate the Access Board site.
[<A href="guidelines.html" shape="rect"
coords="0,0,118,28">Access Guide</A>]
[<A href="news.html" shape="rect"
[<A href="search.html" shape="circle"
[<A href="faqs.html" shape="poly"
Top Ten</A>]

If you decide to implement this solution, be aware that Navigator 4 does not support the <object> tag. It will render the text links instead of the image.

Notice that the map element is placed within the object element. That way the alternative text links will be displayed only if the image map is not. Additionally, text links are separated by brackets. You should always separate adjacent text links with a space, a printable character, and a space. If they are not separated in this manner some screen readers will read the text as a single link and choke as a result. The best option is to use brackets, as in the code above, or the "pipe" ( | ) character. For example, take a look at the above example and the W3C's front door (which uses pipes) as seen in Lynx.

Image of W3C site in a text browser
W3C Site in Text Browser


Screen readers read text linearly; that is, they read across the line from left to right. That causes a problem when attempting to render tables meaningfully for assistive technologies. To solve this problem for simple tables, the guidelines call for labeling of table headers.

Use the summary attribute to indicate the meaning of the table and the headers attribute to associate data cells with their proper row or column. In the following example, notice the use of id attribute in the table headers. Each cell in the body of the table then has a headers attribute which relates it to a specific column.

<TABLE border="1" summary="This table charts the number of web pages analyzed by each agency head, what kind of media the pages contain, and whether or not the page is part of the Executive Branch.">
<CAPTION>Web pages Analyzed by Agency Heads</CAPTION>
<TH id="header1">Agency Head</TH>
<TH id="header2">Number of pages</TH>
<TH id="header3" abbr="Type">Media</TH>
<TH id="header4">Executive Branch?</TH>
<TD headers="header1">A. Jackson</TD>
<TD headers="header2">20</TD>
<TD headers="header3">text, images</TD>
<TD headers="header1">B. Franklin</TD>
<TD headers="header3">text, images, video</TD>

A speech synthesizer might render this table as follows:

"Caption: Web pages Analyzed by Agency Heads
Summary: This table charts the number of Web pages analyzed by each agency head, what kind of media the pages contain, and whether or not the page is part of the Executive Branch.
Name: A. Jackson, number of pages: 20, Type: text, images, Executive Branch: No
Name: B. Franklin, number of pages: 10, Type: text, images, video, Executive Branch: Yes"

For more sophisticated tables, like scientific or financial tables that contain a lot of discreet data, use the scope attribute instead of the header attribute. The above example shows how table headers can associate data cells with header id's; scope allows more complex association because it takes attributes for row, col, rowgroup, and colgroup. In other words, scope allows you to group cells together for rendering through another device, which is useful if there is a lot of information. Spoken rendering of the table below will be identical to the table above.

<TABLE border="1" summary="This table charts ...">
<TH scope="col">Agency Head</TH>
<TH scope="col">Number of Pages</TH>
<TH scope="col" abbr="Type">Media</TH>
<TH scope="col">Executive Branch?</TH>
<TD>A. Jackson</TD> <TD>20</TD>
<TD>text, images</TD> <TD>No</TD>
<TD>B. Franklin</TD> <TD>10</TD>
<TD>text,images, video</TD> <TD>Yes</TD>

For more information on the use of attributes within tables, see the WAI's tips on working with tables.

A word about using tables for layout: if a table is necessary for laying out a Web page, the guidelines say that the table should "linearize." That means that the contents of the cells should render as a series of paragraphs from the top to the bottom of the page. Cells should make sense when read in row order and should include structural elements, creating paragraphs, headings, and lists.

Why Section 508 Works

Since the discourse over creating accessible Web pages began, the standards organizations that helped inform the new Federal rules have stressed the separation of design and content. If the Internet is to reach its full potential, content will need to be authored so that it can be rendered by a broad array of devices: browsers, assistive technologies, PDAs, and devices that have yet to be imagined. Only by separating content from design will this be possible.

By following the rules in Section 508, you will be doing more than providing access for those with disabilities; you will be creating content that is available to all users, no matter what devices are used to read it.

Matt Margolin

Return to the JavaScript and CSS DevCenter.