Images must have text alternatives that describe the information or function they represent. By adding alt tags, those with disabilities who use assistive technology, such as screen readers, will be able to have the image conveyed in words, rather than by sight. Adding alt tags to all images sometimes is not the correct solution for accessibility.
Below lists the various types of images with links to W3C.org for further details and examples on how to provide alt tag on the different types of images.
- Informative images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
- Decorative images: Provide a null text alternative (
alt=\"\") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page. - Functional images: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
- Images of text: Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
- Complex images such as graphs and diagrams: To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative.
- Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
- Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.
Use W3C.org decision tree to help you decide if the alt tag should contain a description or marked as a decorative image.
Tips
Length of the text alternative:
The alt text should be the most concise description possible of the image’s purpose. If anything more than a short phrase or sentence is needed, it would be better to use one of the long description methods discussed in complex images.
Superfluous information in the text alternative:
Usually, there’s no need to include words like “image”, “icon”, or “picture” in the alt text. People who can see will know this already, and screen readers announce the presence of an image. In some situations, it may be important to distinguish between paintings, photographs, or illustrations, etc., but it’s best to avoid the more generic use of the terms.
Punctuation within alt attributes:
- As for any text, using punctuation in the text alternative makes the information easier to understand. In particular, remember to add space characters in the
alttext when there’s no space character between the image and adjacent text, to avoid having words running together when they are read by a screen reader. - If you use a null (empty) text alternative (
alt=\"\") to hide decorative images, make sure that there is no space character in between the quotes. If a space character is present, the image may not be effectively hidden from assistive technologies. For instance, some screen readers will still announce the presence of an image if a space character is put between the quotes.
Need help with your alt tags? Contact us, we’re happy to help.
Source: W3.org
