Put on a pot of coffee before you read the WCAG2. You’ll need all of it. The guidelines are full of useful information but you must decipher its cryptic code that ensures only the most courageous web designers can wield its powers. Of the 61 guidelines, roughly a dozen are relevant to images. Oh, and the definition of image includes pictures, illustrations, graphics, icons, infographics, and charts.
To make these guidelines easier to understand, I’ve translated them into regular human-speak and grouped them into ‘shoulds‘ and ‘coulds‘. Shoulds include any A and AA Level guidelines (which most accessibility and anti-discrimination legislation are based on) as well as any AAA Level guidelines that make sense without being cost prohibitive. Coulds include AAA Level guidelines that may be too expensive to be worthwhile, or so strict that they hurt the user experience.
To go the extra mile, you could:
- Avoid images of text. Paragraphs, unordered lists, and other basic text formats are more accessible to assistive technologies as HTML markup. Images of text are not seen by screen readers (unless they have alt text) and don’t scale well if the user zooms into the page. Images of text also load slower than HTML.
- Have a descriptive alt tag for every image. If the image is decorative, like a drop shadow, use a null value (alt = “ “) so screen readers know to skip them. This is especially important for images used as links.
- Use a contrast ratio of at least 4.5:1 for small fonts and adjacent backgrounds (or 3:1 for 18+ pt font, or bold 14pt). I use the free Color Contrast Analyser to check colour contrast – it works for Windows and Mac.
- Use multiple indicators, such as location, colour, shape, size, labels, etc., for images that identify something or include instructions. Saying ‘click the button on the right’ isn’t as helpful as ‘click the blue button in the bottom right corner that says ‘Submit”.
- Limit any text blocks (that you can’t avoid) to 80 characters wide. Any smaller and you force users to do excessive right-to left movements. Any larger and you risk users losing what line they’re on.
- Avoid justified text (again, if you can’t avoid it). Left and right-aligned text is cool but justified texts (where each line stretches to the full width of the text block) creates uneven spacing between words.
- Avoid causing seizures (and annoying users less susceptible to seizures) by flashing less than 3 times a second. This really applies to GIFs.
- Consistently use icons, labels, text alternatives, and naming conventions. Yep, this is a bit handholdy but it’s important enough to include – if you use a rocket ship to signify sending an email, by golly it should always mean that.
Accessible images could:
- Have a contrast ratio of at least 7:1 for small fonts and adjacent backgrounds (or 4.5:1 for 18+ pt font, or bolded 14pt) if the image is used for key interface elements like navigation and forms.
And two more things…
As we discussed before, the WCAG2 isn’t perfect, but it’s still a good starting place for making our digital experiences more accessible. Here are two things the guidelines don’t discuss about images:
- Image performance and responsive images. Images make up a big chunk of website size. To avoid unnecessary page weight, images should be loaded based on device screen characteristics (like pixel density) and perhaps internet connection speed. The WCAG2 doesn’t include performance related guidelines like this but that doesn’t mean you shouldn’t. Dave Rupert has hope for the picture element but we’ve got a ways to go.
- Colour blindness. Double-checking contrast ratios between text and background colours is helpful but not enough. Colour blindness comes in several forms and simulating colour blindness with an app like Colour Oracle can go a long way towards helping users with impaired vision.
If you actually need to comply with WCAG2, you should still take time to read through its extensive documentation. If you’re simply hoping to make your website’s images more accessible, the above list should be a good start.