How to make web pages accessible

Images

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

On this page

If you work for the council, first discuss whether to use an image on our web pages with the communications team.

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 it.

To do this, you should:

  • add a text description and visible caption (if available) 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

You must judge whether to treat an image as decorative or informative based on your reasons for including it on the page.

Learn more about decorative and informative images at Using images in online content.

Image text descriptions

Images with important information need a text description so people who can't see it 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 by going to the image in the media library and added it to the image's properties.

When adding images in the main body text on a web page, the process is different. Web editors must add alt text using the 'Image picker' feature in the text formatting toolbar.

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

Screenshot of image editing options showing alternative text field.
Website tools should let you add alt text to images when they need it.

How to check alt text

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 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 how to fix this across your website

Add a caption if you can

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

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

Captions can help everyone better understand why you chose the image for your content. 

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, by using the 'Image picker' feature in the text formatting toolbar. 

Read more about captions on our page about using informative images in web content.

Using complex images

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

Learn how to use complex images in online content

Related resources

Web Content Accessibility Guidelines on images