More topics

Using graphics and alt text

Last updated on January 26, 2024

Graphics can make content easier to understand by providing context. But if they are not done thoughtfully, they can do more harm than good. 

Who does this affect?

  • Kala has low vision and uses a screen reader. Alternative text provides her with details that explain images on web pages. 
  • Dorota lives in a rural community and does not have a fast internet connection. They don’t download images because it takes too much time and data. Alt text allows them to understand the image without seeing it. 
  • Mike is looking for an image using a search engine. Using descriptive alt text improves his search results.

Steps to take

  1. Only use images that are relevant and add context to the text
  2. Check that you're meeting government standards for using images in web content
  3. Make sure you have copyright and model consent for the image
  4. Only use images that are not culturally insensitive to any audience
  5. Avoid using images of text unless it's essential (logos or infographics are ok)
  6. Do not use flashing, blinking or animated graphics
  7. Once you have chosen an image, give it a short, descriptive file name
  8. All images must have alternative text, unless they are purely decorative

Alternative text

Alternative text, also known as alt text, describes the information or function of digital images. Alt text should be clear and concise, try to stay under 15 words. If you're struggling to describe it, think how you would describe it to someone over the phone.

Do not include 'image of' or 'photo of' in the alt text, screen readers will announce it as an image.

Decorative images

If you’re using an image that is already described in text, mark it as decorative instead of using alt text.

For example, an image of a telephone beside the words ‘Telephone number’ does not need alt text:

telephone Telephone

Microsoft Suite and CMS Lite both allow you to mark images as decorative. If you're using a different platform, check with your web team.

Use the alt text decision tree (external link) to help you decide what you need.

Captions

If you use a caption, do not use the same text in the alt text, otherwise a person listening to the page will hear the same information twice.

If the caption clearly explains the image, mark the image as decorative.

Resources

Related Web Content Accessibility Guidelines