How to make web pages accessible

Images

If you work for the council, first discuss using an image on our web pages with the Communications and Marketing team.

Make sure information in images can be understood by everyone who needs it.

On this page 

When to use images on our websites

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

Before using an image, read Using images in content.  

Make image information accessible to everyone 

Not everyone can perceive or understand images on your page. Important information in pictures, maps, charts and infographics must be accessible to everyone.

You must:

  • add a text description (alt text or nearby text) to informative images
  • mark decorative images as 'decorative' so screen readers can ignore them

You should: 

  • add a visible caption to informative images, if possible
  • check that information in images has good colour contrast
  • ensure images can zoom up to 400% without losing information
  • make sure images resize correctly and do not overflow on smaller screens

Decide if each image is decorative or informative based the reason you are including it on the page.

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

How to add text descriptions

Images with important information need a text description so people who cannot see them can still understand them.

You can provide a 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.

Read more about how to write text descriptions for images

How to add alt text

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

Every image on a web page should allow alt text to be added.

You must decide if an image is important to understanding nearby text. If it is, add a short description to the alt text field.

You must decide what information to include based on why the image is included.

Alt text can be left empty if the image is:

  • purely decorative ('eye candy')
  • redundant (information fully explained in the text, but not referenced)

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

Adding alt text

Depending on your image editing tool, you can add alt text in different ways:

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

Examples of where to add alt text on our website:

  • some banners require alt text to be added in the media library through Image Properties
  • images in the main body text require using the ‘Image picker’ feature in the formatting toolbar

If no alt text is needed, leave the alt text box empty to mark the image as decorative.

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

After publishing, check that your alt text works correctly:

  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' 
    • no images are labelled “Missing alt attribute” (contact a developer if this occurs)

How to add a caption

Some editing tools let you add a caption (or figure caption) beneath an informative image.

Captions: 

  • help all users understand why an image was included
  • are coded so assistive technologies like screen readers read them alongside the image’s alt text

On our website, captions can be added in the same place as alt text using the ‘Image picker’ feature.

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

Read more about using captions in using informative images in web content.

Using complex images

Any complex images (maps, charts, graphs, diagrams) should be formatted as a flat image and include a text description..

Learn more about how to use complex images in content

Accessibility standards and resources

Following this guidance helps more people access council content and supports meeting UK accessibility regulations, including PSBAR 2018.

If system or format limits stop you from following this guidance, contact the Communications and Marketing team before publishing.