A Primer for Accessible Web Pages

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.

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:

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"

coords="118,0,184,28">Go</A>]

[<A href="search.html" shape="circle"

coords="184.200,60">Search</A>]

[<A href="faqs.html" shape="poly"

coords="276,0,276,28,100,200,50,50,276,0">

Top Ten</A>]

</MAP>

</OBJECT>

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.

Tables

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>

<TR>

<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>

<TR> 

<TD headers="header1">A. Jackson</TD>

<TD headers="header2">20</TD>

<TD headers="header3">text, images</TD>

<TD headers="header4">No</TD>

<TR>

<TD headers="header1">B. Franklin</TD>

<TD headers="header2">10</TD>

<TD headers="header3">text, images, video</TD>

<TD headers="header4">Yes</TD>

</TABLE>

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 ...">

<CAPTION>Web pages Analyzed by Agency
Heads</CAPTION>

<TR>

<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>

<TR>

<TD>A. Jackson</TD>
<TD>20</TD>

<TD>text, images</TD>
<TD>No</TD>

<TR>

<TD>B.
Franklin</TD>
<TD>10</TD>

<TD>text,images, video</TD>
<TD>Yes</TD>

</TABLE>

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.

Comments on this article

Showing messages 1 through 3 of 3.

Hans, Bobby's 508 comments are helpful
2001-12-28 09:39:39 weberik [View]

Hi Hans,

I've been in your situation before, and I know the dilemma you face. One thing you might try is going to Bobby and running a few pages from your site through it using the 508 filter, which they recently implemented. It's excellent, and the comments are probably the most useful part. Since Bobby is checking for 508 compliance, questionable items it reveals may help your cause by showing people in your organization just how detailed the 508 spec is, and that it's not something they can just blow off.

Best of luck!

Erik Schmidt

508 solution to Charts and Graphs
2001-12-17 10:05:06 trush@mwsagency.com [View]

As the global leader of interactive data-driven charts and graphs, CORDA (www.corda.com) recognizes the importance of providing equal access to information for users who are visually impaired. CORDA is the first and only company to provide multiple charting and graphing solutions which create accessible, 508 compliant charts and graphs with descriptive text.

According to Business Week�s Assistive Technology columnist John Williams, "Anyone familiar with inserting tables and graphs into documents using Microsoft Word or any other word processing program will find PopChart Xpress a joy to use. I can see the program being used by students, teachers, scientists, businesses, law enforcement, social scientists, politicians, economists � just about every profession using charts."

CORDA assisted the National Cancer Institute in becoming the first federal agency to provide millions of 508 compliant charts and graphs. By using CORDA�s PopChart [D], the National Cancer Institute saved more than $30 million dollars.

CORDA offers two charting and graphing solutions that meet federal 508 accessibility requirements:

PopChart Xpress: A desktop application used to create accessible web-ready charts in minutes. Copy data from a spreadsheet. Best for charts with static data.

PopChart [D]: A server application for web sites that need a high number of charts and/or charts that access data in a database.

readable version of the guidelines?
2001-11-30 21:11:37 kalinin [View]

Hi,

putting those guidelines into writing by a government agency certainly puts more weight to our cries for better accessibility.

I manage several university websites and train new webmasters in the correct usage of HTML, CSS, SSI etc. Now that those regulations are out it would be a great time for me to make them a requirement for any webpage I have any say over. The problem is only: I can not expect anybody to read dozens of pages of tightly spaced text without any examples, colors or figures.

So here is a question: is there a version readable by somebody who does not have more than one hour time to read and understand it? A page so I can tell people: "Go to that page, read it and implement their recommendations"?

I know just such pages, for instance cast.org/bobby, but none that would command as much authority as a government standard.

Thanks

Hans

ALT Text

Image Maps

Tables

Why Section 508 Works