> Dateline Houston >
> Feature Article
Volume 42, Issue 7
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.
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
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
- 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
- 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
- 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
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
- 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
- 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
- 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
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.