5.1 Provide descriptive alt text for all meaningful images

For users who can not see images we need to provide the same information to them that the image provides. This alt text should be as descriptive of the purpose as possible. Without this alt value the user will hear the file name which both is not helpful and can be very confusing.

WCAG 1.1.1: Non-text Content Opens in a new window

Details

  • Every non-decorative image has an alt attribute with a value that describes it's purpose.
  • If an icon font is used and it provides information not already on the page, visually hidden alt text is added.
  • Do not use the words "image", "graphic", or "photo" in the alt text.
  • When descriptive text is not known, for example on hotel images, "[Hotel name], X of Y" can be used.

Examples

Beautiful pool with a cabana

7:20am to 1:34pm

Tips

  • Imagine you are describing the web page over the phone to a friend. What does each image have to say to give the same meaning? Use that as the alt text.

Tools & Resources