Enlightened Web Design for Visually Impaired Users

by Kathy Graden, Documentation Program Specialist, Lucent Technologies

This article describes some of the most effective tips and techniques that have been devised for making Web sites accessible to the visually handicapped. You'll learn how to make colors more perceptible, make text easier to read for partially sighted people, and more.

If you think you've done everything possible to make the design of your latest Web document appealing and easy to use, you could be flying blind. Your really cool Web design and your site's clever use of chic new technology may actually be turning away a growing community of potential users: the millions of people whose visual impairments impede their Web access.

Many people either suffer from some form of visual impairment or will at some point in their lives. By the year 2010, statisticians predict that as many as 20 million Americans may be visually impaired. Twenty million, just in this country! And the numbers continue to climb. Aging sometimes results in vision and hearing changes as well as changes in dexterity and memory. The average age of the population in the U.S. and many other countries is increasing. So, for many people over 45, age-related impairments may threaten their reliance on the Web as a key source of news, education, entertainment, and career enrichment.

To keep the Web accessible to all, the governments of the U.S., Canada, and Europe have joined forces. They are teaming with corporations, service organizations for the disabled, and universities in several countries to develop guidelines for Web site accessibility and tools for Web designs that accommodate visual and other types of impairment.

Using accessibility techniques to build Web sites contributes to better design for nonimpaired users, also. For example:

Web pages that support visual and auditory access help users of products such as Web-TV and mobile phones that have small display screens.
Multiple access modes improve Web site usability by reducing users' problems with slow downloads, noisy environments, and screen glare.
Redundant text/audio/video can support users who are non-native speakers of English or who have different learning styles or low literacy levels.

W3C Guidelines

On April 7, 1997, the World Wide Web Consortium (W3C) announced the launch of their Web Accessibility Initiative (WAI) to promote and achieve Web functionality for people with disabilities. Endorsed by the White House and W3C members including Adobe Systems, Microsoft, and dozens of other organizations around the world, the WAI established an International Program Office responsible for developing software protocols and technologies, creating guidelines for the use of technologies, educating the industry, and conducting research and development.

The WAI's accomplishments to date include the development of the following resources for building accessible Web sites:

Guidelines for and examples of accessible Web designs
Repair tools for inaccessible Web sites
Techniques for evaluating Web site accessibility, including a Web site checklist

The WAI's body of work is available to you through links at www.w3.org/WAI.

The WAI's checklist for building Web sites friendly to visually impaired users includes three levels of guidelines: musts, shoulds, and "may do's." Here is their list of musts:

Provide a text equivalent for every non-text element, whether visual or audible.
Make all information conveyed with color also available without color.
Use tools such as captions to clearly identify changes in the natural language of a document's text.
Be sure to update equivalents for dynamic content when the dynamic content changes.
Avoid causing the screen to flicker.
Use the clearest and simplest language appropriate for a site's content.
If you use images and image maps, provide redundant text links.
If you use tables, identify row and column headers.
If you use frames, title each frame to help users identify and navigate between frames.
If you use applets and scripts, ensure that pages are usable when the programs are turned off or not supported.
If you use multimedia, provide an auditory description of the highlights from the visual track of a multimedia presentation.
If you can't create an accessible Web page despite your best efforts, provide a link to an alternative page that is accessible and has equivalent information or functionality.

Effective Color Contrast

Lighthouse International, a New York-based nonprofit organization, has been doing pioneering work in vision rehabilitation services, education, research, and advocacy for the visually impaired since 1905. Their Web site, www.lighthouse.org, offers the following advice for choosing Web design colors that work for nearly everyone:

Impaired vision and color blindness reduce the effectiveness of certain color combinations. Where a person with normal vision sees a sharp contrast between two colors, the colors may look alike to someone with a visual disorder. Exaggerate lightness differences between foreground and background colors and avoid using colors of similar lightness next to each other, even if they have different hues. Example: Black shapes and text on a pastel background are easy to distinguish. The same items in green fade when presented on a red background.
Choose dark colors with blue, violet, purple, or red hues rather than light colors with blue-green, green, yellow, or orange hues.
Avoid contrasting similar hues. Yellow contrasted with violet works; red contrasted with orange doesn't.
Avoid similar saturation. Saturation is the degree of intensity that differentiates a color from white, black, or gray of equal lightness. People with impaired color vision find it hard to discriminate between colors with similar saturation.

Creating Readable Text

Visual impairments can make reading difficult by blurring images, reducing the amount of light entering the eye, or damaging the central portion of the retina that is best suited to reading.

To make text more readable to almost everyone:

Print text with the highest possible contrast. White letters on a dark background are more legible than blue-green letters on the same background.
Text is most readable in black and white. If you use color, reserve it to call attention to headlines, titles, and other special text.
Use large type, preferably 16 to 18 points.
Use spacing between text lines that is at least 25 to 30 percent of the point size. This helps people with partial sight to find the start of the next line while reading.
Avoid complex, decorative, or cursive fonts. If you must use them, do so for emphasis only.
Some research shows that a Roman typeface using upper and lower cases is more readable than italics, oblique, or condensed type.
Close letter spacing causes problems for visually impaired readers, especially those with central visual field defects. Use wide spacing, monospaced fonts, or both.

Special needs of dyslexics

Dyslexics—people whose perception of words and letters is distorted—often find it hard to navigate Web pages that have not been designed with their limitations in mind. Some dyslexics even rely on computers and speech-synthesizing software to read the text to them. Some tips:

To reach dyslexics who rely on computerized speech recognition, convey all important information in text. (Computers cannot read or interpret graphic images.)
To help dyslexics who will read your site on their own, use clear, simple, and consistent graphic navigational icons. Steer clear of distractions such as flashing text, variations in fonts, sounds or animations, and textured or patterned backgrounds.
Keep paragraphs short. For long articles, place a topic index at the beginning so that the reader can quickly zero in on the topics of most interest.
Use default font settings so that users can select the font they prefer via their browser.
Keep text left-justified, and use a consistent layout and format.
Provide a no-frames alternative if your site uses frames. Some text-to-speech software cannot read text on framed pages.
Instead of including links within the general text, list one below the other after the related topic or paragraph.
Avoid using background images behind text.
Do not set up background music to play automatically unless your site lets the user turn it off.
End all sentences, headers, and list items with some form of punctuation. A text-to-speech tool may run unpunctuated text together, making it hard for listeners to understand. Bulleted lists may also confuse a sight-impaired user.

Designing Web sites for impaired users is a big job, but the number of resources available to help you is vast. Start with these tips—you'll find plenty more out there!

This article originally appeared in Rough Draft, the newsletter of the STC Phoenix Chapter.