WCAG 1.1.1: Non-Text Content (Images)

How to

• Provide text alternatives for Images

  A text alternative for <img> is often provided using the alt attribute, while SVGs usually use title-attribute, aria-label or aria-labelledby.

  Another way to give an SVG a name is by using hidden text that remains visible in the DOM. More about this in Sara Soueidan’s article Accessible Icon Buttons.

  The text alternative can also be placed next to the image. In that case, the graphic must be hidden from screen readers. Learn more in WCAG 1.1.1: Non-text Content for decorative graphics.

  The text alternative should describe the image’s content as accurately as possible.

  Technique(s):

  • G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
  

• Provide text alternatives for videos

  Videos also need a text alternative that briefly describes what the video is about.

  This can be provided using aria-label or aria-labelledby, or via the title attribute when using iframes. This is automatically the case, for example, with YouTube or Vimeo players.

  Technique(s):

  • G68: Providing a short text alternative that describes the purpose of live audio-only and live video-only content
  • G100: Providing a short text alternative which is the accepted name or a descriptive name of the non-text content
  

• Provide text alternatives for groups of images

  For groups of images whose content can easily be summarized logically, it is sufficient for only one image to have alternative text in the alt attribute that meaningfully describes the group.

  The alt attributes of the other images should then remain empty.

  Technique(s):

  • G196: Using a text alternative on one item within a group of images that describes all items in the group
  

Notes

• 

  Hint: Meaningful background images require text alternatives

  Meaningful images added via CSS as a background image need a text alternative. This can be provided through an aria-label or nearby text.

  If the image is meaningful, it should ideally not be added via CSS, because otherwise it does not appear in the DOM.