web accessibility with html 4.0
December, 1999.
By Molly E. Holzschlag. (Link to original article.)
Providing accessible Web sites is not just a courtesy—it has been interpreted in the U.S. as being the law. In September 1996, a U.S. Department of Justice policy ruling set forth the premise that the Americans with Disabilities Act (ADA) requirements apply to Web pages. As Web sites are increasingly becoming environments where we shop, enjoy entertainment, and access government information such as IRS and motor vehicle forms, Web accessibility should become a major concern for Webmasters interested in not just complying with graciousness, but lawfulness, too.
The W3C has worked hard to create standards—but these standards aren't always adhered to for a variety of reasons. Some reasons for ignoring a standard come about because of a desire to be experimental or innovative, such as when we use browser-specific tags or technologies. Other reasons are less precise, such as in the case of developers who are ignorant of the standards and how to use them according to the needs of the site and demographic for which they're designing. And of course, not all the responsibility rests on developers. Significant finger pointing could also be directed at those browser developers who ignore standards that can be incorporated into their products to facilitate usability for all people.
In the context of broadband technologies, Web accessibility remains an often overlooked and important development concern. As we rush hither and yon to experiment with the latest and greatest audio, video, graphic, or multimedia technology, we forget that accessibility concerns will still be with us in a broader-band environment, just as they are with us in TV and telephony. Closed-captioning and TTY stand as two access examples that exist in related or broadband media.
A great deal of work has been done by the W3C and accessibility groups to offer guidelines by which sites can be made more accessible. HTML 4.0 offers several elegant methods that developers can employ to make their sites as barrier-free as possible for all visitors. This article will specifically look at some of the HTML 4.0 elements, attributes, and methods that will help you create fully accessible sites today.
The link tag
The LINK tag lets you provide an alternative page for those browsers that can't deal with the complex layout or technology on a given page. For example, if you use tables for a fixed layout design, and add special media such as audio and video, you want to have an alternate page for those visitors who can't access tables and media.
To use the LINK tag to load alternative pages, first you need to create an alternate version of your page. Then, add a LINK tag to the original page to redirect browsers to the alternate page. Here's how:
- Create two HTML files: one with tables, media, and other "inaccessible" elements; and one with text and simple formatting.
- Open the first "inaccessible" file and insert a
LINKtag in theHEADsection, as in Example 1. That's it.
Note that the media type attribute describes to the visitor what kind of accessibility tools he or she can use to access this page. In this example, aural refers to speech synthesizers and screen-reader software, Braille refers to the fact that the page can be easily printed and read in a special Braille printer, and tty refers to a teletype terminal.
Using this technique, you'll end up with two pages with the same information, one with a complex layout and one that is text-only for easy accessibility. Browsers that support the alternative media specified by the LINK tag will automatically load the alternative page referenced by the tag.
The LINK tag can also be used in conjunction with navigation. Using the LINK tag to describe the relationship of the page to other pages on a site can enable Web browsing software to make sense of the site's navigation.
Let's say you have a site about your musical group, and you'd like to make the pages navigable for special-needs visitors. You have a variety of pages, including index.html, about.html, and members.html. To make all of these pages navigable from a given page with the LINK tag, you can set up the links as shown in Example 2.
You'll see that the rel attribute lets you express a context for the navigation. Using the LINK technique in this manner will label the links clearly along the top of the page in question (Figure 1).
Figure 1. The navigation resulting from the link tag as viewed in the text-based Lynx browser. Note that many browsers are still unstable in their support of HTML 4.0 accessibility tags. Test your work and modify as necessary.
The title attribute
Think of the TITLE attribute (not to be confused with the TITLE tag) as an ALT attribute for links. Many developers are so accustomed to adding the ALT attribute to their images that they do it without a second thought. And even though this is consistently done, the tags are generally still not written properly. This could be a whole column in itself. Ideally, you'll soon be as comfortable adding the TITLE attribute and appropriate description to make your links accessible, too.
The TITLE attribute isn't supported by Netscape 4.0. In fact, Netscape has failed in most respects to add accessible HTML 4.0 to its Navigator 4.0 and earlier versions. The 5.0 version should fix this. Some browsers that do support various aspects of accessibility include Internet Explorer (most versions), Lynx, Opera, and Amaya.
It's also important to ensure that your links are descriptive and contextual. In other words, instead of having a link that says "click here," which really is a directive without context, a link that says "bios on the Courage Sisters" is much clearer.
Links can be confusing when taken out of context. Trying to fashion each link to be descriptive both in and out of context can make for awkward content, however. The TITLE attribute lets you add extra context to your links without detracting from the flow of your content. To see an appropriate use of the TITLE attribute, take a look at Example 3.
Example 3. Example of appropriate use of title attribute.
<ul>
<li><a href="california.html" title="This page provides dates and venues for all California shows on the tour">View the California schedule</a>
<li><a href="washington.html">Check Washington State shows</a>
<li><a href="upcoming">Visit the Upcoming Shows page</a>
</ul>
As the mouse passes over the link, detailed information about the link is offered in a tool tip (Figure 2) within browsers that support this feature. Text browsers will display the information just as they would the information in an ALT attribute, and screen-reader software will read the link description for the site visitor.
Figure 2. A tool tip appears with the details as the mouse passes over the link in compliant browsers.
The trouble with tables
Tables are particularly problematic in terms of accessibility. Simple tables that present columnar data are a bit less challenging, but when tables are used for complex layouts, the order and logic in which the information is carried out can be extremely confusing for visitors who use screen readers and other accessibility media to get to the information. Screen reader software and Braille printers tend to read a visual page from left to right, ignoring columnar data. This can cause unintelligible results for the visually impaired site visitor.
HTML 4.0 offers a variety of special tags and attributes to deal with this. If you're using tables for columnar data, I recommend looking into table accessibility in greater detail—particularly how THEAD, TFOOT, TBODY, COLGROUP, and COL are used to make tables more logical for your special-needs visitors (see the section at the base of this document titled "Accessibility resources"). However, I have to say that in most cases, tables used for visual layouts won't be made particularly more accessible with the use of these tags—my recommendation in this case is to use the LINK tag and provide an alternate page.
For simple tables that lay out columnar data, you can add the CAPTION and summary elements to provide more information about the table's purpose. To add a caption to your tables, you simply need to add a CAPTION tag beneath your TABLE tag. The caption will label the table in a traditional browser, and will provide a simple description of the table in a browser that complies with HTML 4.0 accessibility (see Example 4). Figure 3 shows the caption in a browser that supports accessibility features.
Example 4. Using the caption tag.
<table border="0" width="300" cellpadding="5" cellspacing="5">
<caption>Courage Sisters California Show Dates</caption>
<tr>
<td>
Date:<br />
Location:<br />
Time:
</td>
<td>
October 30, 1999<br />
Yoshi's, San Francisco<br />
8 pm
</td>
</tr>
</table>
Figure 3. The caption appears above the table in Internet Explorer, giving the tale direct context.
The summary attribute adds a lengthier description of your table. The summary attribute lets you explain the information included in your table, thereby making it easier for people to understand it when using accessibility tools. The summary attribute will appear as a link to this description within most visual browsers. summary attributes are added directly to the TABLE tag, as shown in Example 5.
Example 5. Using the summary attribute.
<table border="0" width="300" cellpadding="5" cellspacing="5" summary="This table shows the date, location, and time of each Courage Sisters California appearances.">
<caption>Courage Sisters California Show Dates</caption>
<tr>
<td>
Date:<br />
Location:<br />
Time:
</td>
<td>
October 30, 1999<br />
Yoshi's, San Francisco<br />
8 pm
</td>
</tr>
</table>
Adding tab order
As with tables, forms create a particular challenge to individuals using accessibility tools. There are a number of excellent HTML 4.0 methods to deal with adding logical elements to forms. These include the FIELDSET, LEGEND, and OPTGROUP options. However, they're not widely supported at this time (again, refer to "Accessibility resources" below).
Perhaps the best thing you can do to make forms (and links, too) more accessible for your visitors is to provide a tab order between fields and links. Tab order is created with the tabindex attribute and a numeric value based on the desired order of the tabs. Tab order lets users who can't or don't want to use a mouse navigate through a page with relative ease.
The buttons, checkboxes, and text fields are presented in a logical tab order before the final tabs for the resubmit and reset options (Example 6). Note that tabs don't need to be in sequence—you can leave gaps in your tab-order numbering, giving you room to add to your form later without having to renumber all the other form elements.
Example 6. Setting up logical tab orders for forms.
<form action="submit" method="post">
<p>Name: <input tabindex="1" type="text" name="name"></p>
<p>Email: <input tabindex="2" type="text" name="email address"></p>
<p>Comments:<br />
<textarea tabindex="3" name="comments" rows="5" cols="25" wrap="physical"></textarea></p>
<p>
<input tabindex="4" type="submit" name="submit">
<input tabindex="5" type="reset" name="reset">
</p>
</form>
Setting up a tab order for links is very similar, as shown in Example 7. You use the tabindex attribute with the logical, numeric order of the link.
Example 6. Setting up logical tab orders for links.
<p>The Courage Sisters are currently touring in the Western U.S.</p>
<ul>
<li><a href="california.html" title="this page provides dates and venues for all California shows on the tour" tabindex="1">View the California schedule</a></li>
<li><a href="washington.html" title="follow this link for Washington State appearances by the Courage Sisters" tabindex="2">Check Washington State shows</a></li>
<li><a href="upcoming" title="this link will provide you with information about upcoming shows not on the West coast." tabindex="3">Visit the Upcoming Shows page</a></li>
</ul>
It's the right thing to do
Despite the inconsistent browser support for HTML 4.0 accessibility features, this will soon change. It is going to be advantageous for Web developers to begin adopting the use of these techniques for everyday design. Your sites will be more accommodating to diverse audiences, and in turn, you can take pride in the resulting professional, lawful, and considerate results.
Accessibility resources
For more information on making sites accessible using HTML 4.0, I recommend beginning at the source, the W3C's Accessibility Initiative (WAI). You can read about WAI's activities by visiting www.w3.org/WAI. Detailed information on methodology and code for accessible sites can be found at www.w3.org/WAI-WEBCONTENT.
Other resources abound. WebABLE is dedicated to educating, researching, and developing technologies that make the Web more accessible. Its site is extremely comprehensive, and can be found at www.webable.com.
Finally, the Trace Center at the University of Wisconsin is playing an extremely powerful role in the accessibility movement in general, and specifically for the Web. Check out the Web accessibility information at www.trace.wisc.edu/world/web.
