Use the alt
attribute to describe the function of each visual
What are alt attributes useful for?
The alt
attribute is defined in a set of tags (namely, img
, area
and optionally for input
and applet
) to allow you to provide a text equivalent for the object.
A text equivalent brings the following benefits to your web site and its visitors in the following common situations:
- nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the
alt
attribute set in its images, most of these browsers will display the description you gave instead of the images - some of your visitors cannot see images, be they blind, color-blind, low-sighted; the
alt
attribute is of great help for those people that can rely on it to have a good idea of what's on your page - search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the
alt
attribute to make sure that they won't miss important sections of your pages.
What should I put in my alt attribute?
The generic rule for the content of the alt
attribute is: use text that fulfills the same function as the image.
Some more specific rules:
- if the image is simply decorated text , put the text in the
alt
attribute - if the image is used to create bullets in a list, a horizontal line, or other similar decoration, it is fine to have an empty
alt
attribute (e.g.,alt=""
), but it is better to use things likelist-style-image
in CSS - if the image presents a lot of important information, try to summarize it in a short line for the
alt
attribute and add alongdesc
link to a more detailed description
Further Reading
- Web Content Accessibility Guidelines and the specific section on alternate content
- Core Techniques, section 2 Text equivalents
- Excerpts from the National Braille Association Tape Recording Manual, Third Edition. provides guidance to write descriptions of maps, charts, and other images that contain a lot of information.
- HTML 4.01 and the specific section on the
alt
attribute - Providing text equivalents for images and Ignoring spacer images in the Dive Into Accessibility series
About the "QA Tips"
The W3C QA Tips are short documents explaining useful bits of knowledge for Web developers or designers, hosted and produced by the Quality Assurance Interest Group at W3C.
While the tips are carefully reviewed by the participants of the group, they should not be seen as anything else than informative bits of wisdom, and especially, they are not normative W3C technical specifications.
Learn more about the Tips, how to submit your own pearls of wisdom, and find all the other QA tips in the Tips Index.