THE LARGELY VISUAL NATURE of the Web poses many problems for visually impaired (blind and partially sighted) users, who cannot access the content of many sites in the same ways that sighted users can, even with screen reader software that converts text to speech.

This lack of accessibility is caused by poor web page design and coding. Frames, nested tables, and a lack of descriptive elements for images and links, for example, can prevent screen readers from correctly interpreting the content of web pages. Fortunately, making accessible web pages is not a daunting task for web developers with moderate skills. Moreover, accessible pages provide benefits for both sighted and visually impaired web users.

The following guidelines should be followed to create web pages that are accessible to the visually impaired.

Use d links for images that require extensive description, and for multimedia objects. A d link is simply the letter "d" next to an image or multimedia object (typically video, animation, or Flash). Clicking on the d link takes the user to a separate web page that describes the image or object in detail. There are several examples of d links on this page.

Use the ALT attribute for images. The contents of the ALT attribute within the IMG tag will be read aloud by the screen reader software, so they should describe the image clearly. Below are examples of inaccessible and accessible HTML code for an image of a dog in a web page. Click on the "screen reader output" button below each example to hear how one brand of screen reader software, Home Page Reader (IBM, 2002), renders it (requires Flash):

Use of the ALT attribute also benefits sighted users, because the ALT text is usually displayed whenever the mouse passes over the image, thus providing additional information. An example is shown in the screenshot below, where the mouse has been placed over an image of a cactus garden. 

(Paradoxically, the above image does not have ALT text; its inclusion could be confusing, since the image is showing ALT text being displayed. For a description of the image, visually impaired users should follow the d link.)

Moreover, for users who have turned off graphics in their browsers to reduce download times, or who are using text-only browsers such as Lynx, the ALT text should display instead of the image.

Use the LONGDESC attribute for images that require extensive description. Because the ALT attribute is meant only for short descriptions, it should be supplemented with LONGDESC when an image contains a large amount of important information. The value of the LONGDESC attribute is the URL (relative or absolute) of a web page containing a detailed description of the image; the length of this description is unlimited. For example, a good way to code the IMG tag for a complex graph would be to use both ALT and LONGDESC, as follows: 

The file graphdesc.html could contain a detailed description of the data represented by the graph. Note, however, that this functionality is not yet supported by all browsers or screen readers.

Use the TITLE attribute for links. A link that says "Click here!" is not very useful for any user. Link text should be meaningful, both in and out of context, and the TITLE attribute should be used within the A tag to provide a clear description of where the link will take the user. For instance, a link to a page of information about diabetes could be coded as follows: 

This is also useful for sighted users, because many web browsers display the contents of the TITLE attribute in a small popup window when the mouse passes over the link. An example of this is shown in the screenshot below, where the TITLE text displays in a pop-up box when the mouse passes over a link. 

(The above image does not have ALT text; its inclusion could be confusing, since the image is showing TITLE text being displayed. For a description of the image, visually impaired users should follow the d link.)

Unfortunately, like the LONGDESC attribute, the TITLE attribute is not yet supported by all browsers or screen readers.

Avoid using frames. Frames-based web pages can confuse speech readers, making it difficult for visually impaired users to find their way around a website. Developers who use frames should make sure that there is equivalent content (or a link to it) within the NOFRAMES tags, so that users who cannot access the frames-based content can still access the page's information.

Avoid excessive table nesting. Nesting tables is useful for page layout, but excessive nesting (more than two levels deep) can cause screen readers to become confused and produce incomprehensible output (Jellinek, 1998).

Use correct syntax. When developers code according to accepted web standards, it is much more likely that their web pages will be accessible (Web Standards Project, 2002).

Goble, C., Harper, S., & Stevens, R. (2000). The travails of visually impaired web travellers. Retrieved November 11, 2002, from http://www.man.ac.uk/towel/hypertext2000.pdf

Isaacs, D. (n.d.). How do blind people use the Internet?. Retrieved November 7, 2002, from http://home.pacbell.net/thammon/blind/

W3C. (1997). Table rendering by non-visual user agents. Retrieved November 18, 2002, from http://www.w3.org/TR/1998/REC-html40-19980424/struct/tables.html#h-11.4

Matt Brooks
SDSU Educational Technology