4. Images and iFrames

For: Content, Design

Non-text content (1.1.1 level A)

https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html

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

Images

• 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 %.