Understanding WCAG SC 1.4.5 Image 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: (Level AA)
- 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.
Image of text Transcript
Hello everyone, today we’re going to talk about images of text. We’re also going to discuss its requirements, importance, exceptions, failure scenarios, and how we can fix them.When creating aesthetically and visually appealing content, authors may want fancy fonts and beautiful styles. While doing so, as long as the text in such content on web pages remains styled with CSS or other available techniques, the readability won’t be affected. But the moment such content is added as images, the needs of many users are impacted. So, WCAG mandates that images of text must be avoided, or image customization must be provided.
Now, let’s talk about who benefits from this.
People with limited vision need to zoom in on web pages and apps to read the content. While doing so, images can break, making the text content unreadable.
People with visual tracking problems would not be able to read the text in images as they can’t change line spacing or paragraph spacing.
People with cognitive disabilities who have reading disorders may not be able to adjust the font and spacing or customize images of text to meet their reading needs.
There are some exceptions. These include:
Logotypes and branding content.
Screenshots of old letters.
A sign of the artist on a painting or a signature on a photograph.
Any text where the font cannot be produced in HTML or the font cannot be distributed due to copyright.
Now, let’s look at some failure scenarios.
On a web page, a carousel contains slides with text that are screenshots of a PowerPoint presentation.
In a news page, the titles of the articles are provided as an image styled differently instead of as a heading styled with CSS.
In an online bookstore, the top of the pages has a marketing banner with text on them, but they are coded as images.
Let’s see how we can fix these issues.
One can use HTML and CSS to achieve the presentation of content as much as possible.
One can also provide buttons to customize text images, including line spacing, text spacing, and font family.
This is the end of the video. Thank you for joining. If you like the video, do like and subscribe.
This success criterion encourages authors to use text representations wherever possible where they have employed technologies to achieve a visual representation of the same text. For example, a blog post in an organization’s site quotes the CEO from his/her recent address. In order to highlight the quotation, the quotation has been designed with a font that is otherwise unavailable and so the quotation is a JPG or a Bitmap image designed using an external application.
What’s wrong in that?
Well, the following problems would arise for the following user groups:
- People with low vision who may have reading problems because of the font family, size, color and so on. They can’t change the font, resize the text or customize the image of text
- People with visual tracking problems who can’t read the image of text because of spacing and alignment and they can’t customize these things
- People with cognitive disabilities that affect reading.
Must we avoid image of text altogether?
No, WCAG discourages but not dismisses the idea of image of texts. There are some exceptions to consider here:
