Textual Images are readable text presented by an image. These images contain information in the form of text that users have to read.
Why Images of Text are Ideally Avoided
- 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.
- Text information in images can be inaccessible for someone who has a slower or unreliable internet connection, a browser that does not show or download graphics, or experiences any issues with the page loading properly.
- Search engines rely on actual text to index content — they don't read images.
- Images of text are fixed in size and position, so they do not adapt as well.
- Images of text tend to become pixelated and lower in quality when enlarged, affecting readability. They also lack the ability to be customized based on the user’s needs and preferences.
- 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.
Best Practices
- Use text instead of images if possible
- For styling purposes, use CSS to style texts instead of making an image
- When including images of text, the alternative text has to be the exact text on the image itself.
- Text in images should match color contrast ratio minimums.
Example: Image of Text
Accessibility issues in the flier above:
- The color contrast ratio is too low in some areas, making it inaccessible to some users. Some text might be too small for some users to read.
- This image contains a colored link that may be perceived as clickable, even though it is not.
- A limited-vision user may not be able to process the information on the flier.
- A user with a slow internet connection, limited mobile data, or who has disabled images from loading on the page would not get any information from the flier.
To Make This Image More Accessible:
- Do not upload images with text-heavy information on a site, instead provide a text version of the information on the site to make the information accessible for assistive technology users.
- Lift critical text from the image and turn it into html:
Tuesday Tea Time
Join Campus Rec for a fun, informative session every week!
3/23/21 at 4:30 PST!
- Chat and share different recipes that you enjoy cooking
- Learn about different cultural foods
Zoom link: https://willametteuniversity.zoom.us/j/91302112341
Questions? Contact <campusrec-info>
If you require disability accommodation for this event, please contact the Office of Equality, Diversity, and Inclusion at 503-370-630 - Add "decorative image" to text showcasing the feel of drinking tea, such as:
Exception: Logo
In some cases putting textual images on a site is preferable. For example, logos.
Identifying the logo as actually being a logo (alt="Willamette University Logo") is not typically necessary. Instead, alt text should contain only the name of the institution (alt = “Willamette University”).
However, it is common to have a logo that links to other sites, such as Home Page. The content and function is not "logo". Developers will often identify the image as being to the home page (alt="Willamette University home page).
Test for Accessibility
Use SiteImprove and WAVE to discover images on a page. To check if images of text on a page are accessible, make sure:
- All non-decorative images have alternative text.
- The alternative text of the image has to be the exact text on the image itself.
- Text in images should match color contrast ratio minimums
Use Color Contrast Checker or download the WCAG Color Contrast Checker Extension to make sure the color contrast is accessible.
To check if color contrast on an image is accessible, make sure:
- Small text should at least have 4.5:1 contrast ratio
- Large text should at least have 3:1 contrast ratio