In this speed-learning environment, where does the student or professional go for information? To the Web. In addition to the freely available material on the Internet, many formally constructed distance learning environments and systems exist and are forming the universities of the near future.
What about learners with visual impairments—are we left out? To the contrary, we're leading the way. Will we see print textbooks and wall charts disappearing from our lives? Not yet, but Web-based information offers us the tantalizing prospects of using media we're much better equipped to deal with and avoiding the logistical difficulties of getting to the library or university.
Before you fling images and tables our way, we do readily acknowledge that all is not perfect in cyberspace. Assertions that the Web is inaccessible are not groundless. There are serious access problems. But most of these problems are solvable, and the solutions usually bring extra value to the Web for all users.
First Things First
Guidelines and guidance for creating an accessible Web site abound. The Web Access Initiative (WAI) of the World Wide Web Consortium has developed guidelines for creating accessible Web pages. (See the Resources at the end of this article for some useful Web sites on this topic.)
The following are highlights of the WAI guidelines, as well as some guidelines from the IBM Accessibility Center:
- Label all images on Web pages so that screen reader users, and anyone else who is curious, will know what the pictures' functions are.
- Provide captioning and transcripts of audio and descriptions of video so that people who have hearing or visual impairments have access to the content.
- Use labels for links that will make sense to screen reader users who are navigating the page by moving from link to link. Avoid "click here."
- Use headings, lists, and consistent structure. Use cascading style sheets for layout and style where possible.
- Provide alternative content for information presented in scripts, applets or plug-ins because those features are not supported by all browsers and devices.
- If you have to use frames, label them.
- In tables, make line-by-line reading sensible and summarize the table in text.
- Summarize the content of each graph and chart or use the longdesc attribute to link the description or data.
- Label all edit boxes and buttons on forms.
- Include a link that lets users jump past the navigation bar, which on some sites can be hundreds of links long, and get to the good stuff.
It is valuable to learn these guidelines, but it is not sufficient. If you are creating a Web site, it must be one that people can use comfortably. As with any other collection of information, a Web site must have a clear structure. If people can't find that interesting article on your site because they are trapped in a circle of links, then you have an inaccessible Web page. The problem may not be so much the "accessibility" of your page, but the "usability" of a page that is so poorly organized that it leads hapless surfers on a fruitless tour. A major part of accessibility is usability.
While you're browsing the Internet, you are likely to run across a site that seems to have problems. You'd like to be able to make clear to its Webmaster just why you feel the site could be improved and how to do it. Let's see what can be done to improve the Internet for everybody.
You're Using Version What?
Bear in mind that we won't all be using the same technology or the same techniques to browse the Web. You might be using JAWS for Windows 3.5 with Internet Explorer 5.5, and the person next to you might be using outSPOKEN 3.0 with Netscape 4.74. Will you both have the same experience? Not at all. Some screen readers can take advantage of capabilities of Internet Explorer that provide more information about the structure of a Web page and will likely read the page "intelligently." By contrast, Netscape doesn't give structural information to anybody, so your screen reader reads the page left to right, top to bottom. A specialized browser, such as IBM Home Page Reader or pwWebSpeak, gives structural information but may not support all the useful and silly things that can be done on a Web page. And in any case, you, the user, need to know how to use the equipment.
Browser-specific Web design is one of the major problems that plague the designers of any sophisticated Web site. Developers tend to design for their own equipment. So, using a fast computer and a state-of-the-art browser, they make a fabulous work of art—but viewed with last year's browser, the one most visitors have, the thing looks… pitiful. If the designers are sufficiently arrogant, they stick a "best viewed with" message on their front page and say it is the user's technical backwardness that's at fault. But if the designers want "most visitors," including blind visitors, to come to their site, then they need to consider the diversity of technology that makes up the Internet community. Blind people, too, are likely to be using older technology. In AFB's Careers and Technology Information Bank (CTIB), a database loaded with technical professionals, of the more than 800 Windows screen reader users, only 138 report using Internet Explorer 5.0 or higher.
Confusions and Solutions
One of the most common points of confusion on a Web page results from the use of unlabeled graphics, especially pictures indicating links. One university's site showed the photo of the head of the department as the link to go to that department's Web page. Good Web design calls for the use of Alt-text, the text labels associated with each picture. Alt-text is good design for the general public because it enables mouse users to hover the pointer over the picture and see words of explanation appear. So, pausing the mouse pointer over the picture of a gray-haired man with glasses might reveal the words "Department of Chemistry." Incorporating Alt-text also allows search engines such as Altavista (which rely on text) to find the page.
But we want Alt-text because it is the part the screen reader can use. If everything on the page is tagged correctly, you'll hear meaningful text, and someone using a browser with the images turned off will see the words of the Alt-text appear in the space where the picture was supposed to be. Image maps will appear as a series of meaningful words. To see what happens to a Web page when its designer forgets text labels, first tell your browser not to display images. Then go to CDNow's Web site address is: <www.cdnow.com>.
In the top left corner, what was the picture put there for? Who knows? Want to buy a movie? There is no link to anything that looks like it might sell you a movie. Very near the top of the page there is an image map with a series of links in it. With images off, it appears as blank space.
But using Alt-text isn't always enough. Some graphics give problems even when they are labeled correctly. For example, it is tricky to turn images off in some browsers, so screen reader users and people with slow Internet connections might have to leave them on. Some browsers don't show Alt-text when the images are displayed. To accommodate these users, redundant links are needed, one for the person who wants to click on the picture and one for the person who doesn't. For a nice example, try: <www.jewishbraille.org>.
What Color Is Your Mail?
It is possible to read every word on a Web page and still not know what it says. One of the things that page designers do to make their pages understandable visually is to group related items together. They might put two articles side by side and then give the two regions different colors. It should be obvious, visually, that the two parts should not be read as one. Is this structure apparent using speech? Here is a fun page to try: <www.springmail.com>.
The page designer explicitly tells you what was done to separate the parts of the page: "Log in on the blue side to check your SpringMail or the yellow side to check your regular MindSpring mail." This approach is problematic not only for blind and color blind users, but also for those whose browsers don't display colors, those with colors turned off, and those using devices without color displays. What can the Mindspring Web designers do to reduce the confusion? They can label the parts of the screen. At the beginning of the SpringMail form, for example, they can put the label "Log in here for your SpringMail account."
Your Table is Ready
Tables should not be used to achieve a strictly visual effect. When text displayed side by side does not belong together, the best the screen reader user can expect is mild confusion.
Tables should be used only for tabular information. To display a list of names and phone numbers, you might put the name of the person in the left cell of the row and the number in the right cell, so reading one row at a time yields the name and relevant phone number. But often when page designers simply wish to split the screen into parts, they will opt to use a table even though the items on the left and right have nothing to do with each other.
This design poses a huge problem for speech users. Why? Remember that a screen reader is an all-purpose program. It has to work well with your word processor, spreadsheet, and browser. In most situations, it reads the designated area of the screen in a left-to-right, top-to-bottom manner. If you've written a letter and you want to hear it read back to you, this way of reading is desirable, but not on a Web page with unrelated text displayed side by side. For the following example, we chose to use Netscape because it illustrates this "word salad" problem better than other browsers. Go to: <www.cnn.com>.
Skip the advertising to get to the short news items. Here's what we found today:
Food Despite previous opposition from GOP leaders, Rocker's December interview in Sports Illustrated Arts and Style Books the Senate easily passed Thursday a House-approved bill to require controversial secret tax-exempt organizations known U.S. economy grew at 5.5% rate in first quarter Philippine officials charge alleged 'Love Bug' Virus…
Visually, the page has three sections, displayed as columns. Netscape and most other browsers don't give structural information to the screen reader. A browser that can reveal the page structure, however, such as Internet Explorer 5 used with JAWS for Windows, Window Bridge, or Window-Eyes, can split up the table. Special browsers can also read the table in a far more sensible way than Netscape does.
But what is the right way to read such a table? In a name-and-phone-number table, there is clearly one way the author intended it to be done. But when the items in the table have no relationship, it's anybody's guess.
When we went to <www.cnn.com> with Internet Explorer and one of the three screen readers mentioned above, it was read in a somewhat comprehensible manner: first the navigation links down the left (including "Food," "Arts and Style," and "Books"), then the news in the next column, (including "Despite previous opposition from GOP leaders, the Senate easily passed Thursday a House-approved bill"), then the next column, ("Rocker's December interview in Sports Illustrated"), and so on.
Taking on a Form
Filling out forms on the Web can be one of the most frustrating experiences for screen reader users. Unfortunately, completing forms is a necessity if you want to find information or purchase merchandise. You must recognize where the form begins and ends, what information is being requested, and how to "submit" the form. These tasks are made infinitely easier if the person designing the form labels the fields with phrases such as "Name" and "CD Title," as well as that all-important "Submit" button. An example of a form that is very easy to use is: <www.seti-search.com>. This speech-friendly search engine consists of three controls, each clearly labeled, with no extraneous information. Results appear at the top of the next page that has no ads or navigation bar.
An example of a form that is a nightmare for screen reader users is the call for participation for the Closing The Gap conference called "Computer Technology in Special Education and Rehabilitation" at: <www.closingthegap.com>.
One major problem with this form is the extraneous text to the left of the fields, so, for example, the presenter's name will be read as "hotel shuttle." Another problem is inconsistent placement of labels for check boxes and combo boxes. We wrestled with this form for hours and finally managed to fill it out only by using a number of tricks. We may have missed a few items, though, such as the place to enter a second presenter's name.
I'll Have Tea Please
Java, a programming language developed by Sun Microsystems, and Java Script are used extensively by Web designers to liven up their sites. They can be used for advertisements, stock quotes, and shopping carts on e-commerce sites. The text that comes from Java is invisible to screen readers, except under rare circumstances. The Java text that appears on Web pages is ordinary, readable text to a screen reader. Some browsers, including some made specifically for blind users, do not support Java or Java Script, so any content that is provided on a Web page using Java or Java Script must be provided in an alternative manner.
Just Skip It
Besides the things a Webmaster can do to create a minimally accessible site, there are a number of features that can be added to enhance the usability of the site.
A painless way to improve the usability of a Web page is to place a link at the top to allow screen reader users to skip information that is repeated on every page. This link can be the first link in whatever is serving as a navigation bar. It should be labeled "Skip to Main Content," "Skip Navigation," or something equally meaningful. Then the screen reader user can quickly jump to the new content. See: <www.acb.org>.
Resources
World Wide Web Consortium's Web Accessibility Initiative (WAI): <www.w3.org/wai>.
WAI Quick Tips: A business-card-sized list of the highlights of the WAI content guidelines: <www.w3.org/wai/references/quicktips/>.
IBM Accessibility Guidelines: A similar list with some of the WAI's language made less technical: <www.austin.ibm.com/sns/guidelines.htm>. AFB's fact sheet on Web accessibility: www.afb.org/technology/fs_web.html.
