On the web, we use images everywhere! Images (such as maps, graphs, info graphics) can be an effective way to communicate information.
But what happens when we use images of text instead of actual text? This is a design and development practice that’s been around a long time, but usually affects web accessibility negatively.
What are images of text?
An image of text refers to when readable text is presented inside an image, including text that has been presented in a fixed image form in order to achieve a certain visual style.
The Web Content Accessibility Guidelines (WCAG) recommend avoiding using images of text if you expect the text to be read by the user, unless it’s necessary such as in a logo or brand name, in which case the alt text should be the same as the text in the image.
Some accessibility issues that images of text present
- When text that is intended to be read is presented as an image, blind or visually impaired readers may be at a disadvantage for a few reasons, one of which is because screen readers and other assistive technologies cannot read text that’s contained inside an image. They will try to read them, but require an accurate text alternative to do so.
- If someone has a slower or unreliable internet connection, their browser does not show or download graphics, or there are any issues with the page loading properly, they’re at risk of missing out on important information that’s conveyed through the image.
- Images of text may hinder the search engine optimization (SEO) of a page. Search engines (like Google) rely on actual text to index content — they don't read images. Read: Five Ways to Improve Your SEO with Web Accessibility.
- Text can adapt to different screen sizes and orientations (think desktop vs mobile), and tends to wrap and display properly across them, remaining readable. Images of text are fixed in size and position, so they do not adapt as well.
- True text can be resized without losing quality and offers the ability for users to customize things like color and contrast. Images of text tend to become pixelated and lower in quality when enlarged, affecting readability, and also lack the ability to customize based on the user’s needs and preferences. Read: Give Yourself an Accessibility Test: Zoom Your Page to 200%.
- Text inside images (such as a company’s address that is fixed in an image) cannot be copied.
- A page translator cannot translate image text.
Web Content Accessibility Guidelines (WCAG) success criterion
WCAG, the most popular and well-established recommendations for web accessibility, addresses this with success criterion 1.4.5 Images of Text:
“If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
- Customizable: The image of text can be visually customized to the user's requirements;
- Essential: A particular presentation of text is essential to the information being conveyed.
Note: Logotypes (text that is part of a logo or brand name) are considered essential.”
Accessibility best practices
- Use genuine text where possible.
- Use CSS to style and format text instead of making it an image.
- Use the alt text attribute to replicate the text inside the image so the reader can get the full message from images of text.
Is your website accessible?
Start with a free and confidential website scan or contact us. We look forward to helping you achieve, maintain, and prove digital compliance.
