Accessible images

Images cannot be contextualized by screenreaders, so providing meaningful text alternatives is essential for creating accessible web content.

Never convey essential meaning to a user in images unless that meaning is adequately conveyed in words on the page as well.

Alt text

Users who are blind or visually impaired rely on text alternatives to understand the purpose or context of a photo, figure, graphic, etc. In the web world, this is referred to as “alt text”.

Alt text can be accessed in different ways:
  • People using screenreaders will have the text read aloud to them
  • People who have images turned off will see the text in place of the image on the page
  • Search engines will crawl the alt text for use in image-based searches

Best practices

  • Every image on your page should include alt text
    • If the image is essential to understanding the context of the page, describe it
    • To determine if an image should have a null alt, ask yourself: If the image was removed, would the user still get all the information from the page?
  • Alt text should be functional and descriptive so that even if someone can’t see the image, they still understand the context:
    • E.g. an appropriate text alternative for a search button icon of a magnifying glass used for search button would be "search", not "magnifying glass".
  • Automated checks can tell if alt text is missing, but only a human can determine if the alt text is descriptive in the context of the page.
  • If the image is essential to understanding the context of the page and it is too complicated to describe in alt text, you need to rethink its use altogether. Consider if the image can be removed and replaced with words on the page instead.

Example

Undergraduate students at UVic
Use the img alt tag to describe an image. A person using a screen reader will have the text read out loud and needs to understand what the image conveys.

Alt text depends on context. Here are two acceptable options for this image:

  • img alt="Two students sitting on a bench at UVic"
  • img alt="UVic student Asiyah Robinson laughing with her friend on campus"
  • Choose the first option if it's a page about UVic's extraordinary environment. Choose the second if it's a story about Asiyah.

Additional resources