Skip to main content

Making images on a web page accessible

How to make different types of images accessible to everyone using the University website.

Why you must make images accessible online

Images can make web content more visually appealing and easier for people to understand, but if an image isn’t accessible, people with visual impairments miss out on the information the image provides.

As a public sector body, we're legally required to make the content on our website as accessible as possible. The government checks our content to make sure it complies with the internationally recognised guidelines from the World Wide Web Consortium (W3C).  

Find out more about accessibility or contact beta-content@bath.ac.uk if you have any questions.

Making different types of images accessible

You need to use different techniques to make different types of images accessible, so it’s important to understand what type of image you’re adding to the website. These techniques include adding:

  • alternative (alt) text which assistive technology, like screen readers, can use to describe the image to people who can't see it
  • ‘null’ alt text to tell assistive technology to ignore the image
  • a separate text equivalent to provide the same information as the image

Decorative images

Most images on our website are decorative images. This means they don’t provide any additional information to the content and are only there to make the page more visually appealing.

In Typecase, decorative images include:

  • Hero images
  • Pinned item images
  • any images that don’t add useful information to the page

People who can’t see the web page don’t need to know about decorative images because the image won’t help them understand the content.

To make decorative images accessible, set the alt text to 'null' by adding two double quotation marks ("") to the Alternative text field in Typecase. Don’t add a space between the quotation marks.

Adding null alt text tells assistive technologies to ignore the image so they won’t describe it to people.

Informative images

An informative image conveys or represents something and adds useful information to the page content. For example, an informative image could be a:

  • photo of an event showing the people there and the atmosphere
  • profile photo or headshot
  • screenshot of a website
  • an illustration of a concept which adds value to the other content on the page

To make an informative image accessible, you must add alt text to the Alternative text field in Typecase. Assistive technology, like a screen reader, uses the alt text to describe the image to someone who can’t see it.

If the image is a headshot or screenshot, describe the type of image in the alt text, for example, ‘A screenshot of the Narrative component in Typecase’.

Complex images

Complex images show data or detailed information, for example:

  • graphs
  • charts
  • diagrams

People who can’t see a complex image can’t see the data or information it shows. Complex images also can’t be adapted or adjusted for specific needs, for example by adjusting colour contrast.

To make complex images accessible, you must add:

  • short alt text to the Alternative text field in Typecase, describing the type of image and what it represents. For example: ‘Graph showing student population figures between 2020 and 2024’
  • a longer text equivalent of the data or information shown

You can add the longer text equivalent by creating a table below the image or as paragraphs of text explaining the information. You don’t need to refer to the image in the text.

Images of text

Don't use images of text except for logos.

Images of text aren’t accessible because screen readers can’t tell that there’s text in the image. Also, images of text can’t be adapted or adjusted for specific needs, for example by adjusting colour contrast.

If you need to use an image of text, like a logo, add alt text to the Alternative text field in Typecase with the same text that’s shown in the image. For example: an image of the BBC logo should have the alt text ‘BBC’. Don’t describe the image as a logo in the alt text.

Writing good alt text

Before you write alt text, make sure you know what type of image you’re adding to the website. Your image might not need alt text or it should have a longer text equivalent as well.

Make it clear and descriptive

If your image needs alt text, make sure it’s clear and descriptive.

It might help to imagine you’re reading your web page to someone over the phone. Think what you’d say about the image to describe it to the person listening.

Describe the image in context

When you write alt text, describe the image in the context of the page it's on. Think about:

  • why the image is on that web page
  • what information someone who can see the image would take from it
  • what you want people to learn from the image

If the same image appears on multiple pages, it could need different alt text depending on what each page is about.

The Pavilion Café in 10 East, a large, modern space with high ceilings and sunlight is coming through the windows

For this image of the Pavilion Café in 10 East, the alt text on a page about the opening of the building could be, 'The large, open area in the new School of Management building, including the Pavilion Café and work areas'.

However, on a page about places to eat on campus, the alt text could be, 'People eating and studying in the large, open area of the Pavilion Café'.

Keep it short

People don’t want long descriptions giving every detail in the image. Make your alt text as short as possible while still describing the image clearly.

If you need to write more than a short phrase or sentence, you should write a longer text equivalent on the page as well.

Describing the type of image

For some images, you need to explain what type of image you’ve used on the page. You should do this for:

  • headshots and profile photos
  • screenshots
  • graphs and charts

If you use one of these as your image, start your alt text with the image type, for example:

  • A headshot of...
  • A screenshot of...
  • A graph showing...
  • A chart showing...

You shouldn’t do this for other image types, including logos. For example, don’t write:

  • An image of...
  • A photo of...
  • The logo for...

Describing people

Only describe people in alt text if the context of the web page makes their race, gender, or another characteristic relevant. Don’t describe people if it’s not relevant to the content on the page.

If possible, ask the people in the photo how they’d like to be described before you write the alt text. Whether or not this is possible, always describe them respectfully and in the context of the page.

If you can’t contact the people in the image and you’re not sure your description is accurate, respectful, and relevant, don’t describe them in the alt text.

Read more about describing people in alt text on makethingsaccessible.com.

Writing image captions

Some images in Typecase need captions, which appear on the page as text below the image.

Image captions make an image more accessible by helping people understand the meaning of an image and how it relates to the rest of the content.

Use image captions to:

  • give additional information, like the names of people in the image
  • explain how the image relates to the context of the page
  • deliver a key message that summarises the rest of the page
  • credit the creator of the image or clarify permission to use the image

If you use an AI-generated image, say so in the image caption.

When you write an image caption, use:

  • the present tense
  • a full stop at the end of a caption

Don't:

  • describe the image - that's what alt text is for
  • give information provided in the image
  • write 'pictured' or 'above'

On this page