Writing Accessible HTML

When it comes to writing accessible HTML, there are two steps to follow. The first step is to use the same tags you normally use as they were intended. The second step is to take advantage of HTML features specifically designed to improve accessibility. I've already mentioned a number of times that tags should be used based on their semantic meaning rather than how they're rendered in browsers. For example, if you want to print some bold text in a standard size font, <h4> will work, except that it not only boldfaces the text, it also indicates that it's a level 4 heading. In screen readers or other alternative browsers, that might cause confusion for your users.

Tables

This problem is particularly acute when it comes to tables. I've already mentioned that it's not a good idea to use tables for page layout when you're designing for accessibility. Alternative browsers must generally indicate to users that a table has been encountered, and then unwind the tables so that the information can be presented to the user in a linear fashion. To make things easier on these users, you should use tables as intended where you can. Even if you can't avoid using tables to lay out your page, be aware of how the table will be presented to users. If possible, try to avoid putting lots of navigation text and other supplemental text between the beginning of the page and the content the user is actually looking for.

When you're presenting real tabular data, it's worthwhile to use all of the supplemental tags for tables that are all too often ignored. When you're inserting row and column headings, use the <th> tag. If the default alignment or text presentation is not to your liking, use CSS to modify it. Some browsers will indicate to users that the table headings are distinct from the table data. Furthermore, if you label your table, using the <caption> tag is a better choice than simply inserting a paragraph of text before or after the table. Some browsers indicate that the text is a table caption.

Finally, using the summary attribute of the <table> tag can be a great aid to users with alternative browsers. How you use the summary and caption are up to you. The caption can explain what the table contains, and the summary can explain how the data in the table is used if it's not obvious from the row and/or column headings. Here's an example of a table that's designed for accessibility:

<table summary="This is the famous Boston Consulting Group Product Portfolio Matrix. It's a two by two matrix with labels." border="1" cellpadding="12">   <caption>Boston Consulting Group Product Portfolio Matrix</caption>   <tr>     <td colspan="2" rowspan="2"><br /></td>     <th colspan="2">Market Share</th>   </tr>   <tr>     <th>High</th>     <th>Low</th>   </tr>   <tr>     <th rowspan="2">Market Growth</th>     <th>High</th>     <td align="center">Star</td>     <td align="center">Problem Child</td>   </tr>   <tr>     <th>Low</th>     <td align="center">Cash Cow</td>     <td align="center">Dog</td>   </tr> </table>

Links

As mentioned in Lesson 16, "Writing Good Web Pages: Do's and Don'ts," avoiding the "here" syndrome is imperative, particularly when it comes to accessibility. Having all the links on your page described as "click here" or "here" isn't very helpful to disabled users (or any others). Just thinking carefully about the text you place inside a link to make it descriptive of the link destination is a good start.

To make your links even more usable, you can employ the title attribute. The title attribute is used to associate some descriptive text with a link. It is used not only by alternative browsers, but many standard browsers will display a tool tip with the link title when the user holds her mouse pointer over it. Here are some examples:

<a href="http://www.dmoz.org/" title="The volunteer maintained directory.">dmoz</a> <a href="document.pdf" title="1.5 meg PDF document">Special Report</a>

Navigational links are a special case because they usually come in sizable groups. Many pages have a nice navigation bar right across the top that's useful to regular users who are able to skim the page and go directly to the content that they want. Users who use screen readers with their browsers and other assistive technologies aren't so lucky. You can imagine what it would be like to visit a site that has 10 navigational links across the top of the page if you relied on every page being read to you. Every time you move from one page to the next, the navigation links would have to be read over again.

There are a few ways around this that vary in elegance. If you're using CSS to position elements on your page, it can make sense to place the navigational elements after your main content in your HTML file, but use CSS to position them wherever you like. When a user with a screen reader visits the site, he'll get the content before getting the navigation. Another option is to include a link on your page that enables the user to skip past the navigationyou can use CSS to hide this link from users who can see the page, leaving it in place for disabled users who can benefit from it.

Tip

It's worth remembering that many disabled users rely on keyboards to access the Web. You can make things easier on them by using the accesskey and tabindex attributes of the <a> tag to enable them to step through the links on your page in a logical order. This is particularly useful if you also include forms on your page. For example, if you have a form that has links interspersed in the form, setting up the tabindex order so that the user can tab through the form completely before he runs into any links can save him a lot of aggravation. This is the sort of convenience that all of your users will appreciate as well.

Images

Needless to say, images are a sticky point when it comes to accessibility. Users with impaired vision may not be able to appreciate your images at all. However, clever design and usage of the tools provided by HTML can, to a certain degree, minimize the problem of image usage.

Images are known for having probably the best-known accessibility feature of any HTML element. The alt attribute has been around as long as the <img> tag and provides text that can stand in for an image if the user has a text-only browser or the image wasn't downloaded for some reason. Back when everybody used slow dialup connections to the Internet, it was easy to become intimately familiar with alt text because it displayed while the images on a page downloaded. Later, some browsers started showing alt text as a tool tip when the user let her mouse pointer hover over an image.

Despite the fact that alt text is useful, easy to add, and required by the XHTML 1.0 specification, many pages on the Internet still lack meaningful alternative text for most (if not all) of their images. Taking a few extra minutes to enter alt text for your images is a must for anyone who uses HTML that includes images. Also bear in mind that using alt="" is perfectly valid and is sometimes appropriate. In particular, some sites use very small images to help position elements on a page. Although this practice is strongly discouraged, it's still used. Text-based browsers will, in the absence of alt text, generally display something like [IMAGE] on the page. If you include the alt attribute but leave it empty, the label IMAGE will be left out, making things easier on your users.

HTML also provides an another way of describing images that's meant to improve accessibility: the longdesc attribute of the <img> tag. The longdesc attribute is intended to be used as a place to enter long descriptions of images. For example, if an image is a chart or graph, you can explain how it is used and what information it is intended to convey. If the picture is a nice photo of a waterfall, you can describe the waterfall. In many cases, images are used simply to make web pages flashier or aesthetically pleasing, and nothing more than alt text is required. However, when the actual meaning of a page is conveyed through the use of images, providing descriptions of those images is a key to accessibility. For example, let's say that you're working for a financial publication, and a story on the declining stock market includes a graph showing the consistent decline of the major indexes over the past few years. In print, that image would probably include a caption explaining what's in the image. On the Web, you could put that caption in the image's longdesc attribute. Or, if you prefer, you could put it on the page as a caption, as long as your layout indicates in some way that the caption refers to the image in question.

Here's an example of what I'm talking about:

<img src="/books/2/631/1/html/2/graph1.gif" longdesc="Graph showing that the S&P 500 and Dow Jones Industrial Average have dropped an average of 20% annually over the last 3 years." />

There's one final area to discuss when it comes to imagesthe marriage of images and links in the form of image maps. As you might imagine, image maps can be a major accessibility issue. The only way around this is to provide users with an alternative to imagemaps in the form of text links. Whenever you use an image map, you should make sure to include text equivalents of the links somewhere on the page.