Accessibility

Open your site to users who are disabled

The number of web users who are disabled is growing. New types of specialized equipment make a big difference for these users. For example, "screen readers" are devices that read web pages aloud, giving users who are visually impaired the freedom to surf the web unassisted. Fortunately, there is also a growing awareness of the need to make all websites more accessible. The Justice Department has determined that the Americans with Disabilities Act (ADA), which applies to buildings and other public places, also applies to websites. Legal requirements aside, making your site accessible is simply the thoughtful and right thing to do.

Here are a few key guidelines for making a site more accessible:

ALT tags

ALT tags (the ALT stands for "alternative text") are snippets of HTML code that can provide text descriptions of images. If you insert ALT tags for images on your site, then users with screen readers can hear the description and have some understanding of what the image depicts. ALT tags are helpful for other users, too: most browsers display the ALT tags instead of the images when you surf with image loading turned off, so users with slow connections can read the description of an image before deciding if it's worth their time to download it. It's crucial to include ALT tags for navigational buttons, but it's also helpful for photographs, charts, and other images. However, for images that are only design elements (like blank spacer images or decorative divider graphics) be sure to include a blank ALT tag (ALT="") so screen readers can skip over that image.

Scalable text

Some users need very large text, much larger than you would ever use in a typical design, in order to read comfortably on-screen. To give these users the freedom to set their own default text size, avoid using absolute text units like points and pixels. A more thorough discussion of scalable text is available on our flexible design page.

Duplicate text links for all graphical links

As mentioned above, users with screen readers need text versions of all graphical information. Using ALT tags along with your navigation buttons is a good start, but an even more helpful solution is to make sure the bottom of each page contains text links that correspond to the text on the main navigation buttons. In fact, this helps all users browse more quickly, because it eliminates the need to scroll back up from the bottom of the page to access the navigation links. For an example, see the KC Wellness site.

High contrast between background and text

Users with low vision and users who are color-blind can have trouble reading text that isn't in high contrast to the background. In fact, high contrast between text and background makes reading easier for all users. Black text on a white background is always a good choice.

No animations or moving text

Animations are an annoyance to every user, but for some they are a nearly insurmountable hurdle. Some users have trouble reading and focusing on text when there are moving objects on the screen. Flashing or moving objects can even induce seizures in some cases. Make sure that your pages include no animations or moving text.

Style sheets

Style sheets are an excellent tool for many reasons. For users who have vision problems, style sheets provide the freedom to specify a personalized set of requirements about how text and other content is to be displayed. For example, users who need large, high-contrast text can create a personalized style sheet to display web pages to those specifications. Read our page on style sheets for more information.

Resource

Accessible design for users with disabilities, Jakob Nielsen

[ home | about us | our services | portfolio | web usability | contact us ]

A division of Roberts & Kay, Inc.