HTML From the Ground Up

by L. Downs

Accessibility

There's more to making your content accessible on the Web than just posting it to a server. It may be accessible to you, but is it accessible to someone who is color-blind? Or legally blind? Or hearing-impaired? (This last is more important than it might seem, with more and more sites featuring sound bites of various sorts). If someone with a partial visual disability uses a browser that expands text to ten or twelve times its normal size, will your pages still convey their content in the way you intend?

This issue, always an ethical one for institutions of learning, is now a legal one as well with implementation of the Americans with Disabilities Act (ADA), which requires institutions which receive Federal funding to comply with strict guidelines for accessibility of Web pages. While we're not going to cover all of the complexities of the ADA as they apply to Web pages in this lesson, we will look at the basics. For now, we're going to assume that accessibility refers to accessibility for the visually disabled, which makes up the vast majority of the ADA Web guidelines.

There's one basic fact that you need to know in order to grasp the basics of the accessibility guidelines: most visually disabled persons using the Web use a text browser, not a graphics browser. A text browser is one that displays only text, no pictures. If you remember the early days of email (before it turned into a graphics circus) you can probably picture this. The most popular text browser is Lynx (available as a free download), although there are others. Some visually disabled users can get by with a text browser that enlarges text; others must use text browsers that actually read the text aloud for them, with different tones of voice for emphasis, links, etc.

Graphics containing text (and other information-conveying graphics)

In a text browser, only actual text that appears in your HTML code will appear; images will not. This means that if you've used a graphic for a heading like the one we used in our last lesson:

it will not be readable by a text browser. After all, the text it contains is actually just a seemingly random pattern of dots of various shades of blue, green and red. Instead, the word IMAGE (or INLINE in some cases) will appear in square brackets like this:
[IMAGE]

If you use a graphic that is intended to convey important information, somehow you've also got to get that information into a form that a text browser can read. We do this with images by using the ALT attribute.

The ALT attribute is used to provide text that should appear in place of the graphic when the page is displayed in a text browser. For example, our caption above should be coded as:
<IMG SRC="captiontrans.gif" ALT="Welcome to the Grand Canyon">

In some cases you may use a graphic that has purely decorative value and does not convey information. There are two schools of thought on this: one says that you should include a description of the graphic anyway, to convey the overall experience of the page, and the other says that you should suppress the graphic completely in text browsers. If you decide to do the latter, you must still include the ALT attribute, but with nothing between the two quotation marks (not even a space), like this:
<IMG SRC="bluedot.gif" ALT="">

Regardless of which approach you take, the bottom line is that every IMG tag you use should include an ALT attribute, whether empty or not.

Colors

Using color to convey information is a natural part of visual design (for example using red for warnings, yellow for cautions, etc.). However, there are two basic accessibility problems with color:

Text browsers will not usually display the colors you specify; and
Many people have some degree of color blindness which either makes it difficult to distinguish between two or more specific colors, or they do not see colors at all.

When you had your last eye exam you might recall being shown a card which had a number in one color on a background of another color, and were asked what the number was. For someone who couldn't distinguish those two colors, they would have had trouble reading the number or wouldn't have seen any number at all. You don't want that to happen with your Web page, do you?

This doesn't mean you can't use colors. It does mean that you should convey the information in another way as well. For example, if you're using red for warning, be sure you also convey the warning through context in some manner.

Moving and blinking graphics

One other caution about graphics: it's very popular to add motion of one sort or another to Web pages, either via an "animated GIF" graphic, or through one of several available animation packages. (And of course there's always the infamous <BLINK> tag originally introduced in one of the early versions of Netscape Navigator.) However, not only can these be distracting, but if the movement is repetitive and within a certain frequency range it can trigger seizures in some individuals (remember the great Pokémon scare a few years ago?). As a general rule, if in doubt leave moving graphics out. They annoy most users, anyway.

Language

You may be surprised to learn that there's an attribute (which can be used in almost any tag) called LANG, which you use to specify the language in use. Of all the esoteric HTML attributes you've learned so far, this might seem the most useless. Why specify the language? Isn't it obvious to anyone seeing the page?

Well, first of all, not everyone will be seeing your page. Some users will be listening to it. And the pronunciation of text can be very different from one language to the next. (How's that for an stating the obvious?) For this and other reasons, it's considered good form to include the LANG attribute in the <HTML> tag at the beginning of your document, like this:
<HTML LANG="en">

"en" is, of course, the code for English. If you quote text from another language somewhere in your page (for example, in a heading) you can add a LANG attribute to just that tag providing the appropriate language code.

The stated language of the page may also have certain other side effects, for example in how some words are indexed by search engines and which ones (such as "the") are ignored.

There are a number of other accessibility issues and guidelines that affect Web page authors, but so far you haven't learned how to do the things they apply to, so we'll leave it at that for now.

In our next lesson we'll look at more about URLs and links.

Terms to know from this lesson

ALT attribute: Provides text to be displayed as an alternative to a graphic when the page is viewed in a text browser. Some browsers may also display the contents of the ALT attribute in a "pop-up" box when the cursor is left pointing at a graphic for more than a few seconds, or if the graphic is unavailable.

LANG attribute: An attribute providing a code for the language in use. Depending on where it occurs, it can apply to an entire document (such as in the <HTML> tag) or to text enclosed by a single pair of tags.

<BLINK> and </BLINK> tags: Don't use these. DON'T USE THESE. DON'T EVER USE THESE. You have been warned.

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.