4. Images and iFrames

For: Content, Design

Non-text content (1.1.1 level A)


All images must have useful alternative text (alt text).


  • Does the alt text give a clear description of what is in the image? Alt text should be relevant, for example a twitter icon alt text should be ‘Twitter,’ not ‘blue bird.’
  • Alt text should not include things like ‘picture of’ or ‘image of’
  • Does the alt text look auto-populated (for example with a file name)? If it does a more useful alt text should be given.

Decorative images

  • Decorative images do not need alt text and if you view source of a decorative image it should have this alt=””
  • Decorative icons should be marked as decorative with aria-hidden=”true”

Linking images and icons

If a meaningful image or icon is used as a link, does it have text alternative to describe the purpose of the link, for example an aria-label on the link describing its destination or purpose.

Complex images

If a complex image such as a chart, graph, or diagram is used a text alternative or a link to a text alternative should appear underneath or above the image. Here are some examples of rich content and their text based outlines.

Frames and iFrames

  • Frames and iFrames should have descriptive titles.
  • If an iFrame has border=”0” it should be removed.
  • iFrames should display width and height in px not %.