Return to Home Page

Web Accessibility: Designing Your Web Site for the Visually–Impaired

By GUY BALL
Orange County Chapter

Designing Web sites for visitors with impaired vision is a major step in implementing guidelines for Web accessibility to accommodate those with disabilities. Following these guidelines makes sites more available to all types of “user agents,” including older and text browsers as well as small-screen devices. It also helps users whose hands are occupied with other tasks, or who work in noisy areas or under poor lighting. Finally, guidelines for Web accessibility have much in common with guidelines for internationalization of sites, in that both simplify the tasks of localization and translation. Guy Ball’s article provides an excellent orientation to an important consideration in web design. —Ann L. Wiley, Assistant Editor

 

 You might wonder about the logic of designing a Web site for the blind and visually-impaired. After all, Web designers seem to be moving toward visually rich sites that often embrace some sort of flash and dazzle to keep viewers interested, or at least to point them in the right direction for what they need to find on the site.

Those of us who are fully-sighted can forget that, as we make the Web our main information vehicle, we may be cutting out millions of customers‚ or potential customers who are visually-impaired. These millions of people, 5 to 10 million in the US alone by some estimates, have every moral and legal right to have access to the information on the Web.

As an example, my company has various support sites where we post our latest documentation. We have scores of sales and marketing sites with information on our latest products. It is important that these sites be accessible to blind or visually-impaired people, who cannot actually see the site, but instead “read” it through the use of a screen reader or voice browser.

The implications are even greater for consumer sites where large numbers of people make purchases. Such sites ignore‚ at their own risk‚ a few hundred thousand customers who would use the sites, but cannot because of poor or incomplete design. With even slight changes in design, to encourage rather than discourage viewers with visual impairments, these sites could gain 50,000 to 100,000 new customers. Retention of these customers is also highly likely, as many site visitors with visual impairments remain loyal once they find a site that works well for them.

An article published in 1999 in PC World magazine compared how screen readers rendered two different sites. The Hewlett Packard site performed well. All links worked properly and were easily recognizable (Investor Information, Drivers, HP Store, for example). This site was compared with the Gap Online site. There, many of the links sounded like programming gibberish (LINK: shorts_men.asp?wdid=300, Map: wdid=301, Map:gapstore/cs_returns.asp). One would suspect that the Gap has lost a large number of potential customers who will never return to the site.

The Problems

The screen readers used by blind and visually-impaired people to navigate the Web look at the HTML file that is displayed as a Web page on a computer, and synthetically speak exactly what the HTML file tells them. The better screen readers ignore or “understand” specialized HTML codes and speak the content that a sighted Web viewer would see. The result — or the desired result — is content as accessible to a blind person as to a fully-sighted one.

Problems can occur when the Web designer includes graphics. If the navigation bar has the text link “software downloads,” the screen reader will speak those words. However, if the navigation bar has graphic buttons with no “alt text” descriptions, the screen reader will ignore the navigation bar or just speak the word “graphic.” If that happens, the visually-impaired visitor will be lost on the page and will not know where to go next.

In other situations, poor or incomplete HTML formatting can confuse the screen reading software, causing it to skip content and links. Animation causes the screen reader to jump around within text on a page, pulling words from different parts of the page and making nonsensical sentences.

The Law

 We are starting to see the impact of three laws: the Americans with Disabilities Act (ADA), Section 508 of the Rehabilitation Act, and Section 255 of the Telecommunications Act. More on these laws and their impact can be found at the Microsoft Web site and others. These laws are important to us all, especially in meeting Federal compliance requirements related to Section 508 of the Rehabilitation Act. Companies including AOL, H&R Block, Intuit (Quicken), and Bank of America have already been subject to government and legal action. Even the Sydney 2000 Olympics was subject to legal action because the Web site was not accessible to the visually-impaired.

Are Ugly, Text-Only Sites the Answer?

 No, and neither are duplicate pages with no graphics. There are some very easy things that we, as Web designers, can do to make graphics work for visually-impaired people. Most include using the tools we already have to add some alternate text. Others involve just a change in habits, doing things a bit differently. With a little study, we can produce accessible pages with little additional work.

How to Fix the Problems

Below are a number of tips. For details and examples, I recommend visiting the sites listed under Additional Information.

  • Images and animation—Use the “alt text” attribute to clearly describe each visual.

  • Image maps—Use client-side maps and provide “alt text” for hotspots.

  • Multimedia—Provide a text description of video content.

  • Page organization—Use consistent structure and use cascading style sheets (CSS) for layout and style when possible. This practice allows visitors to modify their browsers one time for their entire visit to the site.

  • Formatting options—Use heading tags with font attributes rather than assigning font attributes to paragraphs to provide the appearance of headings. This allows visually-impaired visitors to set styles and font sizes in the browser to meet their needs.

  • JavaScript, applets, and animation—Provide alternative content in case the active features are not accessible through the screen reading software.

  • Testing—Try out your site using the validation tools, checklists, and guidelines available at sites like aprompt.snow.utoronto.ca and www.w3c.org/TR/WCAG/.

Additional Information

The following sites offer a wealth of information, as well as good examples and tips:

  • www-3.ibm.com/able/overview.html/
    IBM Accessibility Center: Offers accessibility tips and tools, including a downloadable trial version of their Home Page Reader.

  • www.ssbtechnologies.com/accessibility/
    SSB Technologies (a supplier of Web site accessibility tools): Shows their wares and offers some ideas.

  • access.adobe.com/
    Adobe Access: Shows how you can optimize Adobe's products (particularly Acrobat and Go Live) for accessibility.

  • www.microsoft.com/enable/
    Microsoft Accessibility: Offers accessibility tools and ideas particularly focused on use with Microsoft products.

  • www.cast.org/bobby/
    Center for Applied Special Technology (CAST): Offers "Bobby," a free program to check your site's HTML code for accessibility.

  • trace.wisc.edu/world/web/
    Designing More Usable Web Sites (a site by the University of Wisconsin at Madison): Offers accessibility resources, guidelines, and links to a variety of design tools.

  • www.w3.org/WAI/
    Home page of the Web Accessibility Initiative of the World Wide Web Consortium (W3C).
Guy Ball is a senior technical writer and information engineer with Unisys in Mission Viejo, CA. He is a senior member of the Orange County Chapter STC. When he isn't hard at work writing hardware documentation, Guy writes on a variety of topics for trade and consumer publications. Guy's third book, "Santa Ana in Vintage Postcards," was recently published by Arcadia Publishing.
Designing e-Learning that Works — Web Accessibility
Online Information Sessions at the 2002 STC Conference
Practical Magic — Reluctant Trainer — Web Review
Resources & References — Home

First Quarter 2002 (Volume 5, #1)

Copyright © 1998, 2002 Society for Technical Communication