May 22, 2011, 9:26 p.m.
posted by mage
B9 Site Accessibility
Figure B9.1. Web sites need to be designed for access and use by everyone, regardless of physical ability or computer capability. This example shows a screen shot from the text-based Lynx Web browser, which gives a flavor of what the Web is like for people who are blind.
(universalusability.org, October 31, 2001)
People with disabilities find it difficult to use many Web sites. By law, you must make SELF-SERVICE GOVERNMENT (A4) and other sites that are provided by, purchased by, or used by the U.S. government universally accessible. Used in any pattern of Pattern Group A—Site Genres, this pattern describes how to structure your Web site to improve navigation accessibility for people with disabilities.
People with audio, visual, motor, or cognitive disabilities find it difficult to use Web sites that are not explicitly designed with their accessibility in mind.
A significant portion of the population has problems accessing and using the Web. People who are blind, have poor vision, are deaf, or have physical disabilities find it difficult—sometimes even impossible—to navigate through Web sites designed without their accessibility in mind.
Age is also an important factor to consider. On one end of the spectrum, young children have not fully developed their motor skills. On the other end, senior citizens may have impaired vision and hearing. These are two potential customer segments to consider when designing your Web sites.
More and more mobile Internet devices, from cell phones to personal digital assistants (PDAs), are Internet enabled. Clearly these devices do not have the same screen size, input capabilities, and processing power of desktop computers. People who use these kinds of devices form another potential customer segment to consider when you're creating your Web site.
If you have the U.S. government as a customer, a legal requirement also affects your accessibility design. Section 508 of the Rehabilitation Act requires all electronic and information technologies purchased by the U.S. government to be accessible. This stipulation explicitly includes services such as Web sites used by the federal government.
Accessibility helps more than just its intended audience. Accessibility helps everyone. Curb cuts meant to help people with wheelchairs also make things easier for people traveling on roller blades, pushing baby strollers, and lugging around luggage on wheels. Closed captions on television programs help not only people with hearing deficiencies but also people in loud sports bars, people in exercise centers, people trying to learn English, and spouses quietly watching television in bed at night.
The same is true for Web site accessibility. Offering captions and transcripts of audio and video, using clearer link names, and providing alternative text for images will improve the usefulness and usability not just for customers with disabilities, but for everyone else as well. It is a win–win situation.
Whether you're designing a new Web site or revising an existing site, here are some issues to think about. The ideas outlined in the sections that follow are not meant to be exhaustive, but they should give you an idea of the range of possibilities.
People with Physical Difficulties Use the Web
Although there is a wide range of physical difficulties, focus your efforts on keyboard and mouse input because these are the primary input modes for computers for the near future. A customer with a physical disability might not be able to use a keyboard effectively, or even at all. The same is true for use of a mouse. Here's how to address these problems:
People with Auditory Disabilities Use the Web
Currently, most Web sites do not make heavy use of audio and video. However, if your site relies heavily on audio, provide text descriptions of audio sound files. For sites that provide video, provide text transcripts and video captioning so that customers with auditory disabilities will know what is being said.
People with Visual Disabilities Use the Web
This segment of the population includes people who are blind, have impaired vision, or have color deficiencies. The relevant issues are basic readability of text and links. Here are some tips for ensuring the readability of your Web site for people with visual disabilities:
Good readability by itself is not sufficient, however. You also need to ensure that people with visual disabilities can navigate your Web site. One way of doing this is to underline links and use a distinct color, as described in the OBVIOUS LINKS (K10) pattern. This pattern also describes how to use the TITLE attribute in hyperlinks to describe where the link goes.
So far in this section we have talked just about issues affecting people with poor vision. What about people who are completely blind? People who are blind use a special hardware device or software program, called a screen reader, which takes all the text on a page and uses computer-based speech synthesis to read it out.
You can help blind customers by making sure your links make sense when taken out of context. People who are blind often skip text and go straight to the links (on most Web browsers they can do so by hitting the Tab button). Pressing Tab causes the screen reader to jump over most of the surrounding text and just read out the text of the link, making short link names like Click Here useless. Using DESCRIPTIVE, LONGER LINK NAMES (K9) will help significantly.
People who are blind will not want to use images as the only way to navigate your Web site. You could have both a regular Web page and a text-only copy of the Web page to remedy this situation, or you could create redundant navigation links—that is, text and image links that go to the same place.
Provide text descriptions for images by using the ALT attribute to describe images. Here's an example of how to use the ALT attribute:
<IMG SRC="img.jpg" ALT="Text describing the image">
Here's how ALT attributes are used in the Weather Channel's Web site:
<IMG SRC="http://image.weather.com/pics/banners/banner_general.jpg" BORDER=0 ALT="click on banner to return to Home Page">
Screen readers read out the ALT attribute to describe an image. And there are other advantages to using ALT attributes. Figure B9.2 shows how visitors with normal vision can get text descriptions of images in the form of tool tips.
Figure B9.2. The ALT attribute on the Weather Channel's site is displayed as a tool tip when a customer moves the mouse over the image. It is also useful for people who are blind because their screen readers can read out the description of the image.
(www.weather.com, July 17, 2000)
ALT attributes are also useful if you have a broken link to an image. Figure B9.3 shows what a person with normal vision would see if the Weather Channel's banner were missing. Interestingly, this is also what a person sees before the image is loaded, making it a FAST-DOWNLOADING IMAGE (L2). Thus ALT attributes let customers with slow network connections navigate through a Web page without waiting for all its contents to load!
Figure B9.3. Another advantage of the ALT attribute is that it is shown if the image cannot be displayed.
(www.weather.com, July 17, 2000)
People with Cognitive Disabilities Use the Web
A cognitive disability can make it hard for people to write, read, and navigate. Here are four ways you can make these tasks easier:
People May Use the Web with Mobile Internet Devices
Although more and more mobile Internet devices are coming out on the market, there are still significant challenges in making Web sites usable on them. Compared to a desktop computer, these kinds of devices are poor in terms of screen size, processing power, battery life, and input.
Currently only a few standards are in place for small devices, including the Handheld Device Markup Language (HDML), the Wireless Application Protocol (WAP), Compact HTML (cHTML), and XHTML Basic. The field is very young and is still subject to rapid changes. In the meantime, here are a few suggestions for how to improve your Web pages for small devices today:
In designing your Web site, keep in mind accessibility for people with audio, visual, motor, and cognitive disabilities. Make the navigation and content both understandable and usable by employing good layout, clean visual design, straightforward text descriptions for all images and links, and alternative text-based formats for rich multimedia. Use features built into HTML that simplify accessibility.
Figure B9.5. Making your site accessible to people with disabilities will make your site more accessible to everyone.
Consider These Other Patterns
Focus first on making accessible the most important pages, including the HOMEPAGE PORTAL (C1) and QUICK-FLOW CHECKOUT (F1). In terms of navigation, concentrate first on improving the accessibility of key navigation elements, including NAVIGATION BARS (K2), OBVIOUS LINKS (K10), and ACTION BUTTONS (K4). Use DESCRIPTIVE, LONGER LINK NAMES (K9) and FAMILIAR LANGUAGE (K11) for all links. Also use DISTINCTIVE HTML TITLES (D9) for every page.
Using the ALT attribute for all images also improves responsiveness because people can click on linked images even before the image has downloaded. This feature is emphasized in FAST-DOWNLOADING IMAGES (L2).
Align the content and navigation in a consistent GRID LAYOUT (I1). The most important content should always be near the top, ABOVE THE FOLD (I2). Pages with lots of text should use a FIXED-WIDTH SCREEN SIZE (I5) to make it easier for customers to read and skim.