Images are one of the biggest culprits for accessibility issues. However, most of the issues related to images can be addressed without the help of a developer.
Here’s a list of every WCAG 2.1 criterion to be aware of when creating accessible images:
- 1.1.1 Non-text Content: All non-text content, which includes images and SVGs, must have a text alternative that describes the contents or purpose of the image.
- 1.4.1 Use of Color: Images using color to convey information should have additional text descriptions (e.g. maps with color-coded regions).
- 1.4.5 Images of Text: Images of text should be avoided unless necessary (e.g. logos). If text in images is required, a text alternative should be provided.
- 1.4.11 Non-Text Contrast: Images that convey information (e.g. icons, infographics) must have sufficient contrast with adjacent colors (minimum contrast ratio of 3:1).
- 1.4.12 Text Spacing: Images of text must adhere to user-defined spacing settings. This is nearly impossible which is why images of text should be avoided unless necessary (SC 1.4.5).
- 2.2.2 Pause, Stop, Hide: If animated images, such as GIFs, play for more than 5 seconds, the user must have a way to pause or stop the animation.
- 2.4.4 Link Purpose (In Context): If an image is used as a link, its purpose must be clear from its alternative text or nearby context (e.g. visually hidden screen reader text).
- 2.4.7 Focus Visible: If an image is interactive (e.g. image buttons, lightbox thumbnails), it must have a visible focus indicator.
- 2.5.8 Target Size (Minimum): If an image is used as a link, the size of the target for pointer inputs must be at least 24px by 24px, without intersecting any other targets.
- 4.1.2 Name, Role, Value: If an image is interactive, it must have a proper programmatic name and role.
The WCAG success criteria are carefully defined, but as with most things there is some nuance in interpretation. I say that because while the list above covers all the WCAG criterion that clearly pertain to images, there may be edge cases where other rules apply as well.
Don’t Miss Out
Get practical accessibility tips in your inbox every week.