Worse, if you’re using a screen reader, that “text” becomes completely invisible.
Images of Text (No Exception) takes a firm stance, ensuring that all text is presented as real, editable text rather than images, so content is always clear and accessible.
Who this impacts
- People using screen readers: Text inside images can’t be read aloud by screen readers, meaning those users miss out entirely.
- People with low vision: Zooming in on images of text makes them pixelated and unreadable, unlike actual text, which scales cleanly.
- People with different reading needs: Customizable text is essential for users who need to adjust size, contrast, or font to read comfortably.
- Everyone: Text presented as actual text is easier to interact with, copy, or translate.
How to meet Images of Text (No Exception)
- Always use text, never images: Ensure that all text, including headings and labels, is presented as actual text rather than embedded in images.
- Rely on CSS for styling: If you need special fonts, colors, or visual effects, use CSS to style text rather than embedding it in an image.
Practical example
Catbook’s “Most Loved Treats” section was once displayed as an image, but after converting it to text-based HTML, users can now zoom in, search for specific treats, or copy the list to share with friends. Screen readers can also read the entire menu of treats aloud.
Exceptions
Unlike WCAG 1.4.5 this guideline does not allow any exceptions for images of text. All content must be presented as real text.
Top tips
- Design with flexibility: Use CSS for any visual effects, so text can be resized and remains accessible to everyone.
- Test with assistive technologies: Verify that all text on the page can be accessed and interpreted by screen readers.
- Make it searchable: Hey marketers…Text in images can’t be found by search engines or users searching within a page — so always use real text for accessibility and discoverability.