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 < longdesc > tag.

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

  < img src="src.jpg" alt="description" >

  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:

  < a href="#content" > < img src="skipgraphic.gif" alt="skip to content" > < /a >

  [...navigation links...]

  < a name="content" > < /a >

  [Main content starts here...]

• 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 < label > element. Similarly, for groups of check boxes and/or radio buttons, the < fieldset > element should be used.

  A quick web search found this article about creating accessible web forms. It includes information on how to use programs like DreamWeaver and FrontPage to create accessible forms.