For people with visual impairments, the Internet has the potential to broaden horizons and open doors to independence. Using new surfing technology, they can read newspapers and magazines without waiting days–or weeks–for Braille or audio versions and without depending on volunteer reading services. They can shop for music, groceries, and airline tickets. They can learn, bank, work, or just surf.
That’s the Internet’s potential. The reality is that many Web sites are cumbersome or impossible for blind users to navigate. Banner advertisements, multicolumn layouts, poorly phrased hyperlinks, and unlabeled graphics can turn an elegant-looking site into a navigational nightmare.
Here’s a look at the issues and the answers behind Internet accessibility. This article focuses mainly on the needs of users with severe visual impairments, because your design choices impact their experience most. For an overview of other accessibility issues, see the online sidebar, “Designing for Users with Other Impairments,” at http://www.macworld.com/2000/08/create/access.html.
Growing AwarenessFortunately, the need to improve Internet accessibility, not only for the blind but also for everyone with disabilities, is receiving a lot of attention, thanks in part to lawmakers. As part of an amendment to the Rehabilitation Act of 1973, the U.S. government recently passed regulations requiring that federal Web sites be accessible to people with disabilities by the end of the year. Meanwhile, the National Federation of the Blind has filed suit against America Online, charging that its system is inaccessible.
But addressing the needs of disabled users isn’t just a good cause–it’s also good business. Consider this: an estimated 10 percent of Americans have a physical disability, and a 1998 federal study concluded that consumers with disabilities control more than $175 billion in discretionary income. Open your site to this group, and you’ll not only expand your audience–you may also win some extremely loyal customers.
Adding accessibility features will also help you prepare for the coming stampede of Web-enabled devices. Web-capable handheld computers, such as the Palm VII, are already available, and soon you’ll be surfing from devices as diverse as cell phones and car dashboards. All of these devices lack the large displays needed to show off the fancy graphics and complicated layouts on today’s sites. By making your site navigable without graphics, you benefit sighted and blind customers alike.
The Sound of a SiteJust how do people with visual impairments access the Web? Most of them rely on screen reader software. Screen readers use voice synthesis to read aloud the contents of windows, menus, and other interface elements. The most popular screen reader is Henter-Joyce’s (800/336-5658, https://www.hj.com ) $795 Jaws for Windows. For the Mac, Alva Access Group (510/451-2582, https://www.aagi.com ) offers the $695 outSpoken.
Screen readers help visually impaired users navigate a site by interpreting HTML tags, particularly those dealing with hyperlinks, Web forms, and graphics. Take the following HTML code, for example: ‹a href=”http://www.yoursite.com/ index.html”›Go to home page‹/a›
Instead of reading out the entire link, the screen reader simply says, “Link: go to home page.” Blind users can then press the tab key to jump from one link to the next. To get an idea of what a blind person might experience on both an accessible and a not-so-accessible site, see the sidebar “The Sound of Surfing.”
Easy Ways to Improve AccessibilityDoes making your site accessible mean eliminating glitzy graphics, rollovers, multimedia, Java applets, and all the other eye candy that spices up (and sometimes clutters) today’s sites? Absolutely not. Indeed, sighted users won’t even notice most accessibility tricks.
The following tips are easy to implement, even on existing sites–and many also improve the surfing experience for sighted users.
Describe Your Graphics It’s no news flash that graphics dominate today’s sites. What with buttons, logos, and artwork, a single page can include a dozen or more images–many of them essential for navigation. By default, when a screen reader encounters one of these graphics, it reads out the file name, often an unhelpful–if not downright incomprehensible–string of letters such as Top2_rev.gif.
You can tell screen readers to ignore these file names and provide valuable context for your graphics. Use the ‹image› tag’s alt attribute to give a brief description of the images–for example, XYZ Corporation Logo for a company logo or Link to the home page for a graphical button. If, like many designers, you rely on transparent GIFs to control space in your layout, just use blank spaces for their alt descriptions–many screen readers will skip them entirely.
Concise, meaningful alt text is one of the most important accessibility features you can add. It will also improve your site for the many sighted Web users who speed up surfing by setting their browsers to skip images.
Label Your Image Maps Image maps are common navigation devices that divide a single image into several different links. There are two types of image maps: server-side maps, which rely on software that runs on the Web server to interpret where a user clicked, and client-side maps, which use HTML tags to denote each of the map’s clickable hot spots directly within the Web page. Some screen readers can only interpret client-side maps.
In addition to providing client-side maps, it’s essential that you use the alt attribute to create an informative text description for each clickable region–especially those used for navigation. Far too many sites–including Yahoo, Amazon, and The New York Times on the Web–forget this step, rendering their maps almost useless to a visually impaired user.
Write Meaningful Links Before reciting all the text on a page, some screen readers recite just the hyperlinks, enabling a user to jump elsewhere without having to listen to every word. But if you use the all-too-common click here for your hyperlinks, the user hears just “click here, click here, click here.” The solution is to write meaningful links that provide some context, such as Learn about our products. Read aloud your pages’ hyperlinks as a test. Is the site still navigable?
Provide Text-Based Navigation If you use image maps or graphics for navigation, also provide a text-based navigation scheme, such as a row of links at the top or bottom of each Web page. Place a vertical bar (|) between links to set them apart. This helps some screen readers distinguish them.
A text-based site map, also a great idea, enables sighted and blind users alike to jump quickly to sections of interest.
Accessing FormsWeb forms, a prerequisite for almost every online shopping site, present their own accessibility issues because they rely on additional user-interface elements, such as text boxes for typed information, pop-up menus for choosing options, and Submit buttons for sending the form’s contents. The way you create and position these elements greatly influences how well a screen reader can interpret them.
Label Form Elements Properly To help visually impaired users navigate your forms, you need to provide a text label for every form element. For example, instead of just leaving four empty fields for a user’s address, specify which part of the address to enter in each box. And always position the labels either directly above or directly to the left of the elements they describe. This way screen readers can state additional information about the element-–for example, “edit: street address.”
If you use an image for your form’s Submit button, don’t forget to specify alt text. Otherwise, a screen reader will read the image as “button”–and if the page has multiple buttons, a blind user won’t know which one does what.
Put the Most Likely Choice First When creating pop-up menus for navigation or for choosing values such as a country, consider creating a hierarchy, with the most likely choice as the default value and others below it in descending order of likelihood. This decreases the amount of scrolling users must do to get to the desired option.
Designing Your SiteYou may want to use the following techniques when starting a new site or redesigning an existing one. The design choices you make at this phase have a huge impact on your site’s accessibility–and on its adaptability for other types of browsing devices, such as mobile phones.
Simplify Tables Most designers use HTML tables to position items on a Web page. As a result, text doesn’t always read logically across the screen. Jaws is smart enough to deconstruct tables properly, but most screen readers aren’t–yielding nonsensical results.
If you use tables for layout–and let’s face it, they remain the most browser-compatible layout technique–avoid nesting them. Also consider providing nontabular versions of the most important pages on your site. A simplified layout speeds up your site for everybody.
Don’t Count on Flash Blind users can’t access multimedia elements, such as Flash movies. Therefore, if you use Flash for navigation or to present content, you’ll need to provide a non-Flash version of your site to make it accessible.
Accessibility BookmarksOn these Web sites, you can learn more about accessibility issues, techniques, and tools. www.w3.org/wai The World Wide Web Consortium’s Web Accessibility Initiative is the horse’s mouth for all Internet issues related to accessibility. www.cast.org The Center for Applied Special Technology (CAST) is a great resource for Web developers. CAST’s Bobby is a Web-based tool that will analyze any page and report on its accessibility. www.ibm.com/able/ IBM’s Web Accessibility Checklist is a succinct guide to accessibility techniques. www.webable.com WebAble contains a database of hundreds of accessibility resources. |
Those without vision impairments might have difficulty pinpointing accessibility trouble spots. You can use the free trial versions of both Jaws and outSpoken, available from the companies’ Web sites, to check your designs for accessibility. The trial versions are fully functional but work for only 20 to 40 minutes before requiring a restart. You can test Jaws, the most popular screen reader, on a Mac using Connectix’s (800/950-5880, https://www.connectix.com ) $179 Virtual PC 3.0.
If you’ve added accessibility features to your site, post a notice on the Usenet newsgroup alt.comp.blind-users. Invite its members to visit your site and provide feedback. You can also submit your Web site to https://www.cast.org/bobby, which tests it and sends a report on its accessibility.
As more stores and services move onto the Web, accessibility will become an increasingly heated issue. A little preparation and forethought now could save you serious headaches later and win you valuable new customers.
A Macworld contributing editor since 1984, JIM HEID ( https://www.heidsite.com ) writes and lectures about all aspects of Web development. He thanks Tom Wlodkowski of the WGBH National Center for Accessible Media for his insights.August, 2000 page: 109
The Sound of SurfingListening to Web sites through a screen reader such as Jaws is the best way to appreciate the challenges and issues that lie behind Web site accessibility. Here’s a sampling of what you’d hear on a visit to the high-traffic Web sites for the New York Times ( https://www.nytimes.com ) and public broadcasting giant WGBH ( https://www.wgbh.org ).
Hard Times at the TimesThe New York Times on the Web immediately gets off on the wrong foot. The ad graphic in the upper left corner (A) has no alt text, so Jaws reads its link aloud–and because sites serve most ads dynamically from databases, these links are incomprehensible. In this instance, the Jaws surfing experience begins as follows: “Page has 131 links. Link graphic hst one-dash-side-dot-gif slash six-six-hundred-ninety-six-d-six. . . .” This numerological gibberish continues for several more seconds. Simply adding alt=”Advertisement” to the image tag would have eliminated that agony.
Things improve only slightly from here. The site’s designers also fail to specify alt text for the left-hand image map (B) , so Jaws reads the links thus: “Image map link slash index. Image map link front slash index. Image map link day slash world. Image map link day slash national.” And on and on.
Finally, the links for each of the main front-page articles (C) read simply “Go to article.” A blind user surfing from link to link won’t know which article each link designates.
The Web site for WGBH in Boston does it right–no surprise, given that WGBH is headquarters for the National Center for Accessible Media.
The first thing a Jaws user hears is “Page contains 39 links”–less overwhelming than The New York Times on the Web’s 131 links. From there we hear “Link: D vertical bar. Link: text version and access instructions. Graphic: This week.” (Thanks to an alt attribute, Jaws doesn’t read the whole file name.) “Link: site map. . . .”
You’ll notice that the text links at the very top of the page (A) enable a blind user to jump quickly to a text-only version of the site and get instructions about the site’s structure and accessibility features. The d link (B) leads to a page containing a description of the home page graphics–how many there are, what they look like, and so on–making the site a bit more inclusive.
