Image Accessibility Best Practices

This document is focused on best practices in the use of alt text and SVG files, ensuring that users can access the information being communicated in the images.

Alt Text for Images

All images and non-text content must have ‘programmatically discernible’ alternative text (alt text). Since screen readers cannot interpret and explain images, alt text needs to accompany all images to explain the visual element to someone who cannot see it.

The image needs to be described so that it helps the user of the screen reader gain the same information that a visual user would draw from the image. The image should for example be described in the context of how it is being used. For example, a photo of a bear will not be sufficient to inform an audience if the location and date are not included as well as any other photographic details such as a house, a person or a woodpile.

Still stuck on how to write good alt text? Here are a few questions to ask yourself when you're writing it:

• Is there text in the image? If so, include it in the alt text section.
• Is it an actionable image, button or link? If so, tell the user what it does rather then what it is. It is preferable to say something like ‘read more about (concept/topic)’ instead of press the ‘purple button’.
• Does the alt text use words like ‘graphic’, ’image’ or ‘picture’? Consider removing these words unless they are required for the alt text; in most cases however, these terms can be removed.
• Can the alt text be shortened and still convey the information?

Image alt text should be limited to 150 characters. If the image is complex, briefly describe the image in the alt text and include a link or button to send screen reader users and sighted users to the longer description. Keep in mind that NONE of the elements should be defined as an ‘image’ or ‘graphic’ in the alt description for screen readers.

All links, buttons or any other ‘actionable image’ needs to have alt text and it must be meaningful for the user. Instead of saying ‘click here’ or ‘’read more’ it should say ‘read more about (concept)’.

Images that only contain text should not be used unless they are essential and represent a logo.

If an image doesn’t convey any content or is a CSS redundant image, it is considered decorative and will not be read by the screen reader. Empty alt text should be used in such a situation.

SVG (Scalable Vector Graphics)

At a minimum, a base background colour must be behind the areas of focus of an SVG image. These SVG images need to be stylized in such a way as to be compatible with Windows High Contrast Mode.

SVG animations should use the element rather than JavaScript when developing them. These images cannot: blink more than 3 times per second, auto-play for longer than 5 seconds, or distract a user from the main purpose of the image. Any animations need to have a pause component.