Whenever you introduce nontext elements to your Web design you reduce the accessibility of your pages. For the purposes of universal access, text is the ultimate content type: it can be most widely adapted for use with different devices and assistive technologies. But the Web is a visual medium, and access to images and other nontext materials is one of the reasons why people turn to the Web over other information sources. As a Web page designer, you should keep this restriction in mind and take measures to ensure that your design decisions do not exclude disabled users from your Web page content.
Your site navigation can be supplied using graphics such as buttons, imagemaps, or animations, but it is critical that you design your navigation system for all users. If your site's navigation interface uses graphic menus, always provide an alternate navigation route using basic text links. Users without graphics capabilities, such as those using text-only browsers or visually impaired users, will not be able to use your site if you provide only graphic menus.
HTML has several built-in fallbacks designed to allow your content to degrade gracefully under different viewing conditions. One of these is ALT, an attribute of the IMG tag. The ALT attribute allows you to supply an alternate text description with any images you place on your page. Users who cannot see your images for whatever reason will see or hear the text you supply using the ALT attribute:
<IMG SRC="banner.gif" HEIGHT="30" WIDTH="535" ALT="Web Style Guide">
In the above example, users accessing the Web Style Guide page with graphic loading turned off will see the alternate text "Web Style Guide" in place of the banner graphic. Visually impaired users using assistive technology to access Web pages will hear the text "Web Style Guide" read aloud. This way you can use a graphic banner to establish site identity, but users who do not see images will still know what site they are visiting.
Writing good ALT-text is an epigrammatic art, challenging your ability to describe the content and function of an image in just a few words. Browsers do not currently wrap ALT-text, so users reading ALT-text from the screen will normally see only a few words, though users who are read ALT-text by software will hear the entire description. Think not only about what the image is but also how it functions on the page. What does the image say? What is its purpose? Is it there to identify your organization? If so, write ALT-text that identifies your organization. Does it provide navigation options? Write ALT-text that describes where the user will go after clicking on the image. Think about the primary purpose of the graphic and attempt to convey it in ten words or fewer.
<IMG SRC="up.gif" HEIGHT="10" WIDTH="10" ALT="Go to top of page">
Also include ALT-text describing link destinations for imagemap menus so that users who cannot see the graphic menu will know where they will go if they select an imagemap link.
At times ALT-text is not useful — for example, for interface images like custom bullets or for invisible spacer graphics — and in those cases you should include an empty ALT attribute (ALT="") in your IMG tag. An empty ALT attribute hides the graphic from text-only browsers and assistive technologies like screen readers. If you leave out the ALT-text, users could hear the words "image, image, image, image" because most software is designed to let the user know when there is an undescribed image on the page. If instead you include an empty ALT attribute, the software knows to skip the image.