Worse, if you’re using a screen reader, that “text” becomes completely invisible. Images of Text ensures that actual text is used instead of images, so content remains clear, scalable, and accessible to everyone.
Who this impacts
- People using screen readers: Screen readers can’t interpret text inside images, leaving users unable to access important information.
- People with low vision: Text in images becomes blurry or unreadable when zoomed, making it hard to interact with content.
- People with cognitive impairments: Actual text provides more flexibility in adjusting font size and style for readability.
- Everyone: Text that can be resized, copied, and translated improves usability for all users.
How to meet images of text
- Use real text instead of images: Where possible, always use text that can be resized, read by screen readers, and adjusted for better visibility.
- Rely on CSS for styling: If you really need special fonts or visual effects, use CSS rather than embedding text in an image.
- Provide alt text for essential images: If an image of text is necessary (such as for a logo), make sure it’s accompanied by accurate and meaningful alt text.
Exceptions
Images of text are acceptable in cases where the image is essential to the content (e.g., a logo or stylized branding that can’t be replaced with text).
Top tips
- Think CSS first: Use CSS to create visually engaging text without sacrificing accessibility.
- Avoid unnecessary images of text: Only use images of text when absolutely necessary, and always provide alt text for essential images.
- Test for readability: Ensure all text content is readable at various sizes, across devices, and with assistive technologies.