B9 Site Accessibility

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)


graphics/common.jpg Background

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.

graphics/common.jpg Problem

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:

  • Test if your Web site can be used without a mouse. Determine whether a visitor could use just the keyboard to navigate through your Web pages.

  • Minimize the amount of typing a visitor has to do. For example, a common technique in QUICK-FLOW CHECKOUT(F1) is to have customers enter their shipping address and then be able to indicate that this is also the billing address just by clicking a button with the mouse. This is much simpler than having a customer type in the same thing twice. Another way to minimize the input required of customers is to save the information that they typed in on a previous visit to the site, providing them with a QUICK ADDRESS SELECTION(F4), a QUICK SHIPPING METHOD SELECTION(F5), and a streamlined PAYMENT METHOD (F6) the next time they purchase something.

  • Make sure that your navigation elements are large enough to see clearly. Avoid links that are in small fonts and links that use small images. These elements are just too difficult to click on with a mouse. This caution applies to NAVIGATION BARS(K2), ACTION BUTTONS(K4), and OBVIOUS LINKS(K10).

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:

  • Provide sufficient contrast between the text and the background. Use either dark text on a light background or light text on a dark background. Also avoid complex background patterns because they can make reading text extremely difficult. Use simple patterns or solid background colors instead.

  • Use a sufficiently large font. Cramming in more information by shrinking the font merely forces customers to move closer to the monitor and squint. Web browsers have a default font size, and people with visual disabilities often increase this default size, so if you use relative font sizes, the text will usually be the right size. Make sure that your page layout still looks right when the font sizes change.

  • Avoid using ALL CAPS for text because the letter forms of capitals are more difficult to read. It is OK to use this technique sparingly to bring attention to something, such as "NEW" features or a "SALE." Capitalizing whole words is a good way of bringing attention, but doing it excessively can slow down reading.

  • Avoid animations and blinking text. These kinds of distractions can make reading difficult.

  • Avoid creating text that runs all the way from the left of the page to the right. This format makes it difficult for people's eyes to pick up the start of the next line. It also makes the text feel tight, as if it were being crammed in. A little white space on both sides of a Web page will make text easier to read. Using a FIXED-WIDTH SCREEN SIZE (I5) will help you easily achieve this effect.

  • Stay away from link color combinations that people with color deficiencies will not be able to differentiate. In particular, avoid green for unvisited links and red for visited links because those colors are hard for people with red–green color deficiency to distinguish.

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:

  1. Provide a consistent navigation scheme throughout your Web site. Place navigation elements in a standard GRID LAYOUT (I1), and place the most important content ABOVE THE FOLD (I2).

  2. Use OBVIOUS LINKS (K10) and ACTION BUTTONS (K4) to ensure clarity (see Figure B9.4).

    Figure B9.4. Microsoft uses a simple organizational scheme, good link labels, and clear text labels for all of its images, making it easier for customers with disabilities to access its Web pages.

    (www.microsoft.com, August 26, 2001)


  3. Avoid distracting elements, such as animations and blinking text.

  4. Use recognition over recall. In other words, minimize the amount of information that visitors have to remember to use your Web site. Search engines, for example, display not only search results, but also the search terms that the visitor typed in, making it easier for a visitor to remember a past action.

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:

  • Minimize the amount of text input required of customers. Text input is quite difficult on small devices, even if they include a keyboard. You could help people by letting them enter personal information on a desktop computer, for example, and then associate that information with the device they are using.

  • Do not rely exclusively on images for navigation. When you do use images, include the ALT attribute for them.

  • Use the TITLE attribute for links, as discussed in OBVIOUS LINKS (K10). Doing so provides an alternative name for links that some devices and browsers can use.

  • Use DISTINCTIVE HTML TITLES(D9) on each Web page. These titles are likely to be at the top of the device, describing the page. They need to be short enough to fit on a small display, but descriptive.

  • Put the most important information at the top of a page. Because portable-device screens are so small, important information should be placed ABOVE THE FOLD(I2). And in this case the fold is quite limiting.

  • Provide alternatives for scripts, applets, and plug-ins. Not all devices and Web browsers will be able to run Java applets, play sound files, and show Macromedia Flash content. Providing alternative but similar content will let more customers use your Web site.

graphics/common.jpg Solution

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.


graphics/common.jpg 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.

     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows