Creating Accessible Web Pages for the Blind and Visually Impaired
Blind people surf the Internet. They have special software in their computers that reads the screen to them, and they use the keyboard controls of their Internet browser to navigate. If you are creating a Web site, you want to be sure to make your site accessible to blind surfers. Maybe you are a teacher putting a lesson or two on the web, maybe you are a student creating a site about your hobbies or your favorite band, or maybe you are a business hoping to generate sales over the Internet. Whatever your motivation, you want people to visit your site. If you fail to make it accessible, people will be frustrated by the lack of accessible content and leave. They probably won't return.
This can be avoided simply by making your Web site's content accessible to anyone, and that is very easy to do. In fact, if you use HTML as it is intended-- for structural markup and not for graphic design-- you are already most of the way to having an accessible page. This article will point out several important things you need to know and to keep in mind while designing your pages; at the end we will have some links to sites where you can find more detailed information.
Item One: A picture is worth a thousand words
But if you can't see the picture, you need some words to let you know what's there. Use alt-text to describe all graphic elements on your page. This is particularly important if the graphic is used as a link to another page. Don't use a thousand words; keep it short and simple with the most important information first. For example, you have a graphic of your company logo at the top of the page. Use the <alt> attribute in your <img> tag to describe the image. Your code may look something like this: <img src="logo.jpg" alt= "Company logo: Black flag featuring a white tree with seven stars surrounding it">. This allows not only blind and visually impaired surfers to appreciate your Web site, but also anyone who uses a text-based browser or who has deliberately disabled their browser's graphics. Another example: you have an image of a magnifying glass that is a link to your search page. Use the <alt> attribute to describe the image and its function: "Click on this magnifying glass to go to our search page." If you use a graphic with text in it, or if you have text in a graphic form, you should include that text in your <alt> description. "Enter" or "Back" or "Next" buttons need to be identified to prevent confusion in navigation.
Item Two: Turning the tables on inaccessibility
Tables have long been used as a convenient tool for page layout. Technically this is improper use of HTML, but if you must use tables this way, here is something you need to keep in mind. Many screen readers, especially older versions, have trouble with tables and with columns of text. Screen readers read the text on the screen from left to right, top to bottom. Unfortunately, they do not always recognize the fact that there are separate columns, so they just ignore the space in between and read the screen one line at a time. This applies to any circumstance where text is aligned side-by-side. The following example is from the AFB Web site, where they describe a site that has two sections of text arranged side-by-side. The first section is a navigation column:
Health and Beauty
and the second section is information in paragraph form:
After listening to your suggestions, we're revamping our online store to serve you better. You may notice some temporary changes in our merchandise selection as you shop. We appreciate your business while we strive to meet your needs. If you'd like us to keep you posted on the changes we're making, enter your email address by clicking here. We'll send you an announcement when we've finished our next stage of remodeling -- plus a special offer you can use during your holiday shopping!
However, because these sections are arranged next to each other, side-by-side, most screen readers are going to read the following:
Automotive After listening to your suggestions, we're baby shop revamping our online store to serve you books better. You may notice some temporary cameras changes in our merchandise selection computers as you shop. We appreciate your garden business while we strive to meet your center needs. Health and beauty if you'd like us to keep you posted on home the changes we're making, enter your electronics email address by clicking here. We'll advanced home send you an announcement when we've store finder fashions finished our next stage of remodeling home plus a special offer you can use during improvement your holiday shopping!
The easiest way to prevent this from happening is to avoid placing separate text sections on the same horizontal line.
The same thing can happen with text blocks contained within tables of data-- if one cell of the table contains enough text to wrap into a new line, the screen reader will jump to the next cell rather than following the wrapped text. You can use the <nowrap> attribute to prevent line breaks, but then you may not be able to keep the table from running off of the screen to the right, which is awkward for your sighted visitors.
Item Three: Hyperlinked text needs to make sense when taken out of context
A blind person will often tab from link to link on a page to see what it is about. If you have a link that merely says "Click Here," it makes no sense. Even "Enter" is vague: enter where? Why should I? Use descriptive text in your links, such as "For more information, click here to go to Fred's Head." This lets the reader know where the link goes and why they want to go there.
Item Four: Incorporate a way to skip over repeated features
It is quite common to put a navigation bar at the top of every page within a Web site. This is a convenient feature, but you need to make a slight modification to improve its accessibility. A sighted person will look at the navigation bar, recognize it and skip ahead to the main page content. A blind person would have to sit there and listen to the entire navigation menu, which can be quite large, before finally getting to the content. Many might just give up, frustrated, and go elsewhere, especially after hearing it several times as they browse your site. A simple remedy is to add a link at the start of the navigation bar that goes directly to the page content. A "Skip Navigation," or "Skip to Content" link will provide the blind surfer the ability to recognize that navigation bar and skip to the content just like your sighted visitors do.
Item Five: Don't require the use of plugins, especially Java and Flash
Item Six: Frames
Some people have difficulty navigating within frames, either because the frames are confusing or because the software they are using simply cannot read them. The best way to avoid problems is to not use frames. If you must use frames, make sure that each frame has a <title> describing the content. This will prevent confusion. You should also be sure to provide relevant <noframes> content for those people who cannot read framed information. The <noframes> section should contain useful information and links to the other pages in your site so that they can be accessed without frames.
Low Vision Surfers
Many legally blind people have some useful vision. Because the nature of this useful vision varies from person to person, individual surfers with low vision have unique accessibility needs. Generally they maximize their useful vision by customizing their browser to display their own personal settings. All you, the designer, need to do is be certain that you don't define fixed font sizes (relative values are fine), and that you don't define fixed colors for background and text.
Some other suggestions: avoid large blocks of italic or underlined text - these are difficult to read, and underlined text without an associated hyperlink is confusing. Avoid, if you can, using graphics in place of actual text. The size and color of ordinary text can be changed by the user's browser settings, but a graphic is inflexible to browser adjustments. If you must use a graphic, be sure to use <alt> text to present the information.
In general, your best bet is to use HTML for defining structure and to use Cascading Style Sheets for defining the display parameters. Use current HTML, avoiding using deprecated elements such as <font> and <fontsize>-- these definitions are covered by the style sheet. A low vision surfer's browser can then override your style sheet in favor of their customized settings.
Some Odds and Ends
- If you use a server-side image map, provide matching text links elsewhere on the page. That allows keyboard users to access the links.
- If you use color to convey information, be sure the information is available either from context or from your markup text.
- Make sure you have sufficient contrast between your background color and your foreground color.
- Identify the natural language of the document, and identify changes of natural language. Screen readers are getting more and more multilingual-- by identifying the language, you allow the screen reader to read the text with the correct pronunciation.
- Make sure your content is well-organized so that it can be understood even if style sheets are aren't used. Many people are still using older browsers that don't support style sheets.
- Make any scripting multi-modal: define keyboard equivalents for actions requiring a mouse.
In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Section 508 was enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals. The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508 (29 U.S.C. ' 794d), agencies must give disabled employees and members of the public access to information that is comparable to the access available to others. (The previous text was excerpted from the Section 508 Web site: http://www.section508.gov).
Testing for Accessibility
A useful tool you should look into is an accessibility tester. This is software that checks your HTML and gives you a warning about anything on your page that might cause an accessibility problem, such as graphics without accompanying alt-text. There are a number of these available on-line to test single pages, or you can download the software to check an entire site at once. Many of these are particularly aimed at helping Web sites comply with Section 508. A list of these is available in the Internet Resources section at the end of this article.
- W3C Web Content Accessibility Guidelines 1.0
This is an official recommendation of the World Wide Web Consortium dated May 5, 1999. W3C was created in October 1994 to lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability.
W3 Accessibility Guidelines: http://www.w3.org/T R/1999/WAI-WEBCONTENT-19990505/.
- The Trace Center
The Trace Research & Development Center is a part of the College of Engineering, University of Wisconsin-Madison.
Trace Center: http://trace.wisc.edu/.
- Accessible Web Page Design: Resources
Resource guide compiled by Axel Schmetzke of the University of Wisconsin-Stevens Point Library. This comprehensive guide includes links to courses and workshops, useful tools, and examples of both well-designed and poorly-designed Web sites.
Accessible Web Page Design: http://library.uwsp.edu/aschmetz/Accessible/pub_resources.htm.
- Section 508
This is the official US Government Web site devoted to Section 508. Everything you need to know.
Official 508 Site: http://www.section508.gov.
- Designing an Accessible Web Site
An article from the American Foundation for the Blind's Information Center.
Designing an Accessible Web Site: http://www.afb.org/info_document_view.asp?documentid=1449 .
- Web Accessibility: Making Your Web Site Accessible to the Blind
An article by Curtis Chong, Director of Technology for the National Federation of the Blind.
Making your Web Site Accessible to the Blind: http://www.nfb.org/tech/webacc.htm.
- Making Web Sites Available to Users with Disabilities
An article by Dr. David Mertz found in the IBM DeveloperWorks library.
Making Web Sites Available to Users with Disabilities: http://www-106.ibm.com/developerworks/library/w-mertz.html?dwzone=usabili ty.
Bobby was created by the Center for Applied Special Technology (CAST) to help Web page authors identify and repair significant barriers to access by individuals with disabilities.
- A -Prompt Toolkit
This software is a product of the joint efforts of the Adaptive Technology Resource Centre (ATRC) at the University of Toronto and the Trace Center at the University of Wisconsin. This software can be downloaded free from:
A -Prompt Toolkit: http://aprompt.snow.utoronto.ca/.
Tutorials for FrontPage and Creating Accessible Web Pages
The following FrontPage Workshop Tutorial, from West Virginia University, will teach you how to use several important features of developing a web page using FrontPage 2000. This workshop contains illustrated explanations and examples of the features being taught, followed by detailed learning activities. When completed, you will have learned the basic skills for using FrontPage functionality.
I have also linked to West Virginia University's Creating Accessible Web Pages tutorial handout and data files.
Click this link to view the FrontPage 2000 Workshop Tutorial
- Introduction to FrontPage 2000 [pdf, 12 pages, 92kb]
- FrontPage environment
- Page Properties
- Insert and Edit HyperLinks
- Create a bulleted list of links
- Importing Files
- Adding ClipArt and Image files
Creating Accessible Web Pages Workshop Tutorial
This workshop covers Section 508 requirements for WVU web page accessibility and gives you tips on how you can make your web pages compliant.
- Creating Accessible Web Pages Workshop
[pdf file, 16 pages, 280kb]
- Fast Track Web Site Overhaul
- Challenges and Limitations
- Screen reader limitations
- Keyboard accessibility
- Low Vision Users
- Key Concepts for Blindness
- Using Content Structure Correctly
- Accessible Graphics
- Guidelines for alt text
- Long Descriptions of Images
- Using FrontPage to Create Accessible Forms
- Using Dreamweaver MX to Create Accessible Forms
- Using CSS to skip navigation links
- Checking for Accessibility
- Other Evaluation/Validation Tools
- Creating Accessible Web Pages Workshop data files [zip file]
- file for workshop activity 3