A Primer for Accessible Web Pages
Pages: 1, 2
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
and text equivalents within the
HTML 4.0 includes support for "long
descriptions" with the
attribute. If a user agent supports
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"
Given the above tags, there should be an
additional file called
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
longdesc, provide a link to
the file that describes the graphic:
alt="Access Board logo" longdesc="accessbrd.html"><a
href="wdadesc.html" title="Description of the Web Design
Note that this anchor won't show up for GUI
browsers because there is nothing within the anchor
When using the
<object> tag, specify a longer text
equivalent within the element's content:
type="image/gif"> The Access Board's <a
href="projected.html">projected budget</a> for Fiscal 2005
is ... </object>
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
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 data="navigation.gif" type="image/gif" usemap="#mapnav">
<P>Navigate the Access Board site.
[<A href="guidelines.html" shape="rect"
[<A href="news.html" shape="rect"
[<A href="search.html" shape="circle"
[<A href="faqs.html" shape="poly"
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.
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.
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
in the table headers. Each cell in the body of the table then has a
headers attribute which relates it to a
<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="header3">text, images</TD>
<TD headers="header1">B. Franklin</TD>
<TD headers="header3">text, images, video</TD>
A speech synthesizer might render this table
"Caption: Web pages Analyzed by Agency
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.
Jackson, number of pages: 20, Type: text, images, Executive Branch:
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,
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
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
<CAPTION>Web pages Analyzed by Agency
<TH scope="col">Number of
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
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
1 to 3 of 3
Hans, Bobby's 508 comments are helpful
508 solution to Charts and Graphs
readable version of the guidelines?
1 to 3 of 3