How to make web pages accessible

Images

Make sure information in images can be understood by those who need them.

On this page

When to use images on our websites

Services usually work best without relying on images. Give people the easiest path to understanding your message by focusing on writing clear, simple text first.

Before you decide to create or use an image, read Using images in online content.  

Make image information accessible to everyone 

Not everyone will be able to see or understand an image on your web page. Important information in pictures, maps, charts, and infographics must be understood by those who cannot see them.

To do this, you should:

  • add a text description and visible caption (if possible) to informative images
  • make sure decorative images are marked 'decorative'
  • check information in images have good colour contrast
  • check images zoom up to 400% without information being lost
  • make sure images resize correctly (don't overflow) on smaller screens

Image text descriptions

Images with important information need a text description so people who can't see an image can still understand it.

You can provide a text description by:

  • adding alternative (alt) text to an image 
  • including image information in the nearby text (this helps all users) 

Sometimes you may need to do both.

Learn how to write text descriptions for informative images

Add image alt text

Alt text is a short text description of an image that helps people using screen readers understand what an image shows. It also appears if the image doesn't load.  

Every image on a web page should have the ability to have alt text added to it. 

Web developers will normally set up a website so a piece of empty code is included automatically with every image. This empty code (alt="") tells digital tools like screens readers that the image is considered 'decoration' and they can ignore it. 

Web content authors must then decide if the image is important to understanding nearby text. If it is, they must then add a short text description to the image alt text field. 

Authors can leave alt text empty if the image is:

  • purely decorative ('eye candy')
  • repeats information fully explained in the text and not referenced by the text (redundant)

Read about decorative and redundant images in Using images in online content.  

How to edit or add alt text 

Depending on the website editing tool, you may be able to add alt text in different ways, like in the:

  • main body content using a formatting toolbar image or media picker
  • media item's image properties 
  • content page's HTML source code 

For example, some image banners on our pubic website must have alt text added in the image's properties through the Media library.

For body text, web authors can add alt text when the image is added to our content pages using the 'Image picker' feature in the text formatting toolbar. This lets authors add alt text that explains the image information in relation to their nearby text.

Screenshot: Website media editing window showing alternative text field.
Website tools should let you add alt text to images when they need it.

If no alt text is needed, the box is left empty. This keeps the image marked 'decorative' so screen readers will know to ignore it.

How to check alt text

Be sure to check any image alt text you add appears for users when you publish your web page.

After you publish your page, check image alt text you add appears using these steps: 

  1. Open the web page in a web browser, like Microsoft Edge. 
  2. Check for images with meaningful information - decorative images do not need alt text.
  3. Open Image Alt Text Viewer (Chrome Web Store)
  4. Check that:
    • informative images are labelled 'Alt text' with the text given
    • decorative images are labelled 'Empty alt attribute' 
    • you have no images labelled 'Missing alt attribute' - a website developer may need to fix this

If images are 'missing' alt attributes, you must contact your website's developer or supplier to discuss correcting this across your website

Add image captions (if available)

Some CMS editing tools support adding figure caption (or caption) to images. A caption is a short piece of visual text that usually shows beneath a graphic.

Captions are specially 'coded' on websites so they are connected to an image. This lets assistive technologies like screen readers read them out alongside image alt text. 

Captions help everyone better understand why you chose an image to support nearby text. 

Do not add captions (or alt text) to images that are purely decorative. 

On our website, web authors can add captions to images in the same place they add alt text, using the 'Image picker' feature in the text formatting toolbar. This allows authors add captions and alt text based on how they relate to the nearby text.

Read more about captions in Using images in web content: informative images.

Using complex images

Make sure any complex images, like maps, charts, graphs and diagrams are formatted as a flat image.

Read more about using complex images in online content

Related resources

Web Content Accessibility Guidelines on images