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