Images of Text
Success Criterion 1.4.5 (Level AA)
Are you avoiding the use of images of text?
Why is this important
Assistive technologies that rely on text based input to identify and convey content to users will identify images of text as a graphic. Therefore, if what visually appears to be text is actually an image of text, the text within the image will not be identified and relayed to the user.
In addition, people with visual and cognitive disabilities often rely on the ability to customize font, size, color and background. Since Images of text cannot be customized, users may not be able to read or understand the content.
Whom does it benefit?
As a person who deals with
I want to be able to customize text and background color properties
so that I can read white text on a dark background.
As a person who uses text-to-speech technologies
I want everything that looks like text to actually be text, not images of text,
so that I can read everything with my text-to-speech tools.
What should you do?
Do not use images of text at all unless they are essential or customizable.
- Essential: If removed, would fundamentally change the information or functionality of the content, AND information and functionality cannot be achieved in another way that would conform (e.g., official and/or historical documents, displaying a certain type-face, or using a corporate logo)
- Visually Customizable: The image of text can be visually customized to the users requirements (e.g., font, size, color, and background can be set).
How do you do it?
- Remove existing images of text and replace with text.
- When required to maintain the author’s original format of a poem, or showing quotes, use CSS and responsive design techniques to emulate the original format, rather than using an image of text.
Need technical guidance?
Additional Resources to help you:
- Non-text Content - Success Criteria 1.1.1
- Images of Text • Images • WAI Web Accessibility Tutorials - W3C
- Accessible Images - WebAIM
- Technique: Text and images of text | Online Accessibility - Harvard
- Making Images Visible to Blind Users - Interactive Accessibility