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.
- 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:
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
- 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
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