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.

Image captions

Captions are an important way of explaining the context behind pictures we use in articles.

We should include a caption if the image carries meaning and/or helps our audience understand the content. For example, an image that includes the people who are mentioned in an article should have a caption.

In Drupal, you can add a caption by adding a rich text box below any images you've included in the main body of the article.

If you've added the image to your article's header, please add the caption at the end of your article or in a suitable place within the text.

On The Bridge, you can add a caption to a page's header image by pressing the 'Add image caption here' box and typing your caption.