Creating Accessible Web Content

Caveat: I do not write a lot of web content--there may be more elegant
ways to make web pages accessible. Google will be your friend in this
search.

Background: A screen reader is a program that persons with vision loss
use to access the computer. These programs keep track of what the user
is doing and provide appropriate feedback. There are two principal
forms of feedback: Braille displays and speech synthesizers. I use a
speech synthesizer, so here are some examples of the feedback I
receive while working. As I type text, I hear each word that I type
spoken aloud. When I review the text I have written, I hear the text
that I am crossing. For instance, if I am navigating through the text
by line, I hear each line of text spoken. If I am navigating by word,
I hear that word spoken. If I am navigating by character, I hear only
the character spoken.

There are a few simple steps that you can take to make web content more
accessible for the blind. These steps are:

Use ALT tags for images with content: When you insert an image
into a web page or blog entry, you should provide that image with an
alt tag. The alt tag should contain a concise description of the
image. Most, if not all, web content creation programs provide a
means for designating the alt tag for an image. Please be as
specific as possible in a short phrase or two--this is what the blind will
see for that image. If you need to write multiple sentences to describe the
content of an image, you should use a &lt longdesc &gt tag.

If you write HTML by hand, the syntax
is simple:

&lt img src="src.jpg" alt="description" &gt

There is one exception the this rule: alt tags should not be supplied
for images used only for formatting, such as spacers. If you include
alt tags for these images, it will only clutter up the page.

Provide an invisible link to skip to the page's content: If your
web page has a large number of links at the top of the page, it is a
good idea to provide the means for the blind user to skip directly
to the page's content. This can be done without the sighted user
ever knowing that the link is there. There are several ways to do
this, but I prefer using an invisible
image (1 byte in size)that links to a named anchor at the start
of the content. The sighted user will not see this image, but the
Alt tag will indicate the link to the screen reader user. Here is the syntax:

Use HTML structures appropriately: Persons with vision loss
can use the structures of an HTML document for navigation. These
structures can provide very fast movement directly to the desired
location within a web page. For instance, on
the Chocolate &
Zucchini web page, I can navigate directly to the content by
navigating to the first Level-3 heading on the page (merely by
pressing 1 or 2 keys, depending on the screen reader). Navigation
to tables, lists, forms, etc., is equally easy. Therefore, it is
very helpful to use these structures when designing web content
whenever they are appropriate. The structures that are most frequently
misused are the heading levels, which are often used merely
to set the font size instead of to indicate important content
boundaries.

Design tables to linearize well: While many screen readers used
by persons with vision loss can navigate through the contents of a
table, the default behavior is to read through the table by
rows. Therefore, lay out tables so that they make sense when read
completely across each row before moving to the next row. Tables
designed to be read by columns take a great deal of work for persons
with vision loss to process. This is especially true when using
tables to control the layout of the page.

Don't use "click here" links: Many screen readers provide a
dialog box that gives the user access to a list of links found
within the current web page. (These dialog boxes will provide
lists of the structures as well.) This dialog box allows the
person with vision loss to navigate very quickly to a desired link
and activate it. These lists show the text used to indicate the
link--the text in the anchor. However, if you use "Click here" as
the anchor text, or something equally vague, the screen reader user
has to navigate to the link, then examine the context around the
link in order to determine if it is the desired link. If you use many
vague words in your links, it gets very frustrating for the screen
reader user.

Make web forms accessible: Poorly thought out and/or laid
out web forms can cause lots of problems for persons with vision
loss. The problems divide into three categories:

Be aware of tab order on your page: If your web content
includes forms, you should be aware of the order in which the tab
key will move focus through the form elements. Persons with vision
loss normally use the Tab key to navigate between the elements of
the form. Therefore, you don't want
the user to arrive at the completion button ("OK", "Submit", "Next")
before they have filled in all of the necessary information. You
also don't want the user to move from the middle of one form into a
different form. Sadly, this second problem is very common. For
instance, on the Delta Air Lines web site, the user moves from the
middle of the "reservation" form to the start of the "check arrivals
and departures" form by pressing the Tab key. This makes it
difficult for persons with vision loss to make a flight reservation
on the site. These problems occur because the web designer attempts
to place two forms side by side--formatting them to "look good"
often disrupts the Tab order.

Avoid using the JavaScript OnChange method: The JavaScript
OnChange method works very well when the mouse is used to
activate the relevant form element. However, persons with vision
loss use the keyboard to navigate through forms. For example, if the OnChange
method is used with a list, each time the blind user presses an
arrow key to change the selection in the list, the entire web page
is reloaded. This gets very frustrating if the blind user needs to
press the arrow key multiple times to get the correct list item
selected--each time the page reloads, they have to navigate back to the list, press
the arrow key, and repeat over and over again. The best solution is
to place a button next the the element to activate the change
selected from the list or other form element.

Form elements should be properly labeled: One problem
persons with vision loss encounter when working with forms on a web
page is the unlabeled form element. For example, the blind user
presses Tab to get to the next form element and hears only "edit
box". What do you type into that edit box? The blind user now has to
examine the context around the edit box and try to figure out what
nearby text might apply to the edit box. And, of course, there is no
way to determine which text string is physically closest to the edit
box. This problem can be resolved by a careful layout of the form,
placing labels immediately to the left of most controls (to the
right of check boxes and radio buttons). However, the
better solution is to use the &lt label &gt element. Similarly, for
groups of check boxes and/or radio buttons, the &lt fieldset &gt
element should be used.