They say a picture is worth a thousand words. The same goes for web images, but in most instances, it’s worth 125 characters or less.

Images are a great way to add value to the content on your webpages. They can convey key information and provide context to users. But don’t be fooled, there is much more to them than simply inserting the image into a page.

People of all abilities visit your page and they access the content in different ways. It’s for this reason whenever you insert an image to a page, you need to consider whether alternative text (also known as alt-text) is required.

What is alternative text?

Alternative text is, as the name suggests, the text description of the image featured on your page. If your image provides value or context to the content on the page, you will need to ensure you include alternative text descriptions so that all people have access to this information. The alt-text is usually 125 characters or less.

Alt-text field on CMS

Why should you provide alternative text?

Not everyone views a web browser in the same way. Some people use:

  • a screen reader
  • a text-only browser
  • screen magnification
  • a braille device
  • a talking browser.

By making your alternative text descriptive and informative, you’ll ensure the information stored in your images is conveyed to all users.

Note: Alt-text on cover image is for visual representation only. This is an incorrect implementation of alt-text.

How do I use alternative text?

Use this matrix to assess whether alt-text is required and how it should be written.

Image type

Purpose

Alt-text example

Decorative image

Purely to add colour or decoration to the page.

In the CMS select the ‘image is purely decorative’ toggle as this does not provide value to the page or the user.

 

More information about decorative images.

 

Profile image of person

To show a photograph of the person the page is discussing.

Either select the ‘image is purely decorative’ toggle or use the person’s name as alt-text. This will help with search engine optimisation and will indicate to all users that the page includes an image of the person.

Artwork

Artwork used to promote an event or highlight a collection or exhibition.

Provide the title, artist’s name, medium and date in a caption below the image.

Informative image

The image shows a key piece of information, e.g. the entrance of a building, a landmark.

Describe the image with as much detail that is required to convey the information, e.g. ‘The  door at the centre of the building is the main entrance where the Reception can be found’.

You can learn more about inserting images on the Web User Guide on the Intranet.

Have questions about your web editing?

Remember, we’re always here to help! To reach out, please: