Alternative text

People who are blind or have sight loss may rely on screen readers to hear content rather than seeing/reading it.

Adding alternative text (alt text) to images ensures they can understand the purpose or context of the image. Alt text is also helpful in situations where images fail to load, such as when there is a poor internet connection, ensuring that key information is still conveyed.

When writing alternative text for an image you must avoid doing the following:

• Including "graphic of", "bullet", or "image of" at the beginning.
• Having "image" or "graphic" at the end.
• Using the image file name. For example: alt="photo.jpg".
• Having only space characters. For example: alt=" ".
• Including one of the following: "image", "graphic", "photo", "photograph", "drawing", "painting", "artwork", "logo", "bullet", "button", "arrow", "more", "spacer", "blank", "chart", "table", "diagram", "graph", or "*"

For all images, you need to add an alternative text that is different to the image title of the image, and it should describe what that image is unless:

• The image is a link. In this instance, the alternative text should describe the link rather than the image.
• The image is of text. In this instance, the alternative text must be exactly the same as what is on the image.
• You have interactive images. In this instance, you need to describe the picture and the nature of interactions.
• You have an animation. In this instance, you need to provide a short alternative tag to describe what the animation is about and a long alternative tag to describe what the animation shows.

This achieves WCAG 2.1 Success Criterion 1.1.1 All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.