AccessibilityImages

Images, charts, icons and infographics on websites have different purposes.

These include but are not limited to:

• giving information
• making a webpage more visually attractive
• interactivity, such as buttons and links

For blind and visually impaired people, missing out on these images can sometime mean missing out on important information or instructions for completing a task. It’s important to provide alternatives to images that help these users.

See the impact that accessible images have on people who use text to speech software, or read about Ilya, senior staff member who is blind.

Helping everyone

Making your images accessible can benefit users with and without a disability.

For example, if someone switches off images to save bandwidth or if images do not load having alt text is helpful.

The basics

Do:

• provide alt text for informative images
• provide alt text to describe the functionality of images used as links or buttons
• provide empty alt text for decorative images
• provide longer text descriptions and data for complex images such as charts and diagrams

Do not:

• include meaningful text as part of an image
• use the longdesc attribute to provide a long description

Creating accessible images

You should make your images as accessible as possible as well as providing appropriate alternatives to ensure that everyone has a comparable experience.

The Image Concepts tutorials provide a great exploration of accessibility considerations.

Alt text

All images must have an alternative text (usually called ‘alt text’) description that describes its meaning, not what it is. How you write the alt text depends on the type of image. Refer to the alt text decision tree if you do not know what your image is.

Here’s what to add to the alt text field for different sorts of image:

• images that communicate information such as icons and logos: a short text description
• editorial images that support the text around them (such as photos in a news article): a short text description
• decorative images that don’t add any information: leave the alt text field empty, with no space between the quotations and no other text
• functional images that act as a link: describe where the link will take the user

To check if an image has the necessary alt text, right click on the image and select ‘Inspect’. Check the image tag to see if there’s an alt tag and whether its text description is appropriate for the image.

Text in images

Do not include meaningful text as part of an image or people using assistive technology may not be able to read it. Meaningful text is anything that is used to aid understanding for users.

Complex images

Sometimes we use graphs or diagrams to explain complicated topics or data. These can be hard to describe and usually cannot be done so effectively using alt text alone.

Instead, you should think about the information you’re trying to convey. Perhaps think about how you would explain the point of the image to people if you were showing it in a presentation and use this as the basis of your description.

With complex images, put a thorough description of the graph or diagram in context in the surrounding text. You should also use alt text to let users know where this description is. Do not use the <longdesc> attribute to provide a longer description as this is no longer recommended.

You should also provide links to any underlying data so users can explore the information directly.

Scalable Vector Graphic (SVG) images

When using an SVG in the src attribute of an image, use alt text.

When inserting the SVG image directly, provide the text alternative in a title element.

Groups of images

For a group of images conveying a single piece of information, such as a star rating, only one of the images needs to have alt text. The other images in the group can have empty null alt text.

For images with multiple selectable regions, alt text should be provided for all area elements.