Graphics and images
- Write an appropriate text alternative for all images except when they’re just decorative - preferably under 100 characters.
- Never put image credits or titles in alt text. Include this information in a caption instead. If image is decorative, move copyright attributions to the end of the page.
- Use a contrast ratio of at least 4.5:1 for text and images of text, unless the text is decorative or unimportant. Use a ratio of 3:1 for large text (18+ points or 14+ points bold).
- Use styled text instead of images of text unless users can customise the text style or an image is essential.
- Don’t use flashing or animated images that could cause a seizure.
- Use icons and their text alternatives consistently.
- Images that are links always require a text alternative.
- Images with captions need a short text alternative but don’t repeat the whole caption or users will have to listen to it twice.
Types of images and alt tags
Always consider the role an image plays in the context of the page where it is used. Start by deciding if the image is:
Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive. 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.
Images may be considered decorative when they are:
- visual styling such as borders, spacers, and corners
- supplementary to link text to improve its appearance or increase the clickable area
- illustrative of adjacent text but not contributing information (“eye-candy”)
- identified and described by surrounding text.
In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text.
Leaving the alt attribute blank is also not an option because when it is not provided, some screen readers will announce the file name of the image instead which can cause confusion.
Images must have text alternatives that describe the information or function represented by the images. The only exception is when the image is used purely for decorative purposes.
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.
Images of text: Readable text is sometimes presented within an image. If the image is not a logo, text in images should be avoided. However, if images of text are used, the text alternative should contain the same words as in the image.
Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information conveyed by 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. In addition, each individual clickable area should have alternative text that describes the purpose or destination of the link.
Contrast: Ensure there is enough contrast to allow content to be read by people with moderately low vision. If text is under 18 points (or 14 points if bold), use a contrast ratio of at least 4.5:1 between text (and images of texts) and background behind text. If text is 18 points or more (or 14 points or more if bold), use a contrast ratio of at least 3:1.
Use of colour: Don’t rely on colour to convey information. Use colour schemes that can be easily distinguished by people with all types of colour vision. Add text labels, patterns and symbols to supplement colour. Avoid using red when you want to attract attention as this colour may appear dull to people who are colour blind.
Recommended tool: Use the Vision Australia colour contrast analyser to check foreground and background colour combinations and determine if they provide good colour visibility. It also allows you to create simulations of certain visual conditions such as colour blindness. The contrast ratio helps determine whether or not the contrast between two colours can be read by people with colour blindness or other visual impairments.
Styled text: Always use styled text rather than images for headings, subheadings, body text, photo and graphics captions, feature text and text or data in tables.