Accessible images

Accessible images

Images are the primary reason why content fails accessibility checks. It's extremely important that you familiarise yourself with how to make images accessible. Fortunately, it's not very difficult. 

Understanding Alt Tags

The alt tag is the most basic form of image description, and is the primary way in which images are made accessible. There are two primary types of image: decorative, and non-decorative. 

For decorative  images, images that serve no specific purpose other than decoration, enter blank alt text. This is known as null alt text. Do this by leaving the alt text field blank. Adding full alt text for decorative images will only serve to slow down screen readers and be annoying for users. 

Non-decorative images convey information in visual form that contributes to the content. These should have full alt text. There are several types of non-decorative image, and the alt text required will depend on the type:

• if the image is functional (used to initiate an action) the alt text should describe the action to be initiated, for example, the alt text for the NIHR logo in the header says "NIHR homepage", not "NIHR logo"

• for complex images such as infographics, charts, maps, and graphs, where possible the alt text should provide all information contained in the image

• for very complex images, for example graphs, the alt text should provide an overview and a full description of the data shown included in the main text - as a guide imagine describing this information without the image.

Writing good alt text

• keep the alt text as short as possible. Instead, aim to convey all the relevant information as briefly as possible.  

• do not include 'image of', or 'picture of'. Screen readers automatically announce an image, so this would be read as image: image of xxxx.

• Images of text should be avoided. If you have text in your image, reproduce this text in your alt tag.