Welcome
If you’re feeling lost or are new to web accessibility, the following articles will help contextualize the content within this article:
- What is the AODA?
- Introduction to Web Accessibility
- WCAG 2.0 At a Glance
- Introduction to Writing and Formatting Content
- Writing Content
- Formatting Content
The information on this page has been written with web content creators in mind. In some cases, where we’ve determined that it’s important for you to understand how something works, more advanced guidelines have been included so you can make informed accessibility choices during content creation.
Who do these guidelines help?
- Users with low vision who may have trouble reading the text with the authored font family, size, or color.
- Users with visual tracking problems who may have trouble reading the text with the authored line spacing or alignment.
- Users with cognitive disabilities that affect reading.
Images of Text
- Principle 1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
- Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
- 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.
In short, we should avoid using images of text whenever possible. If text can be used to convey the same information as an image of text, then text should be used instead.
If the technologies that you are using to build your content (i.e., Content Management Systems) can create the same visual look as an image of text, then those features should be used. For example, many modern Content Management Systems can programmatically lay text over images. This type of feature might be used to build carousels, slideshows, or banners. Rather than the text being embedded within the image, it is actual text which can be read out loud by a screen reader or otherwise manipulated by a user with an adaptive device.
If you aren’t sure if the text has been added programmatically or if it’s an image of text you can use this simple trick: using your mouse, try to highlight the text. If you can highlight it, that means it’s been added programmatically and is accessible.
What is an image of text?
Images which include text within them are usually prepared graphics with detailed information that could otherwise be conveyed in text. Two examples are included below.
Is meeting this criterion required?
At level AA, the Images of Text criterion encourage authors to use text rather than images of text. Level AA is required by the Accessibility for Ontarians with Disabilities Act. At level AAA, this criterion is required with no exceptions other than logos. We strongly encourage you to meet this criterion whenever possible.
Are there any exceptions?
In every case below, a text alternative should still be provided.
- Logos and logotypes
- Graphs and charts
- Screenshots
- Samples
- Photos of letters and signs
Compromising with Images of Text
Images of text are easy to create and they’re used everywhere. Banners, graphics, and ads appear throughout the internet, especially on social media. They don’t require CMS or coding knowledge and can easily integrate the pictures, colours, and text that the author wants.
We understand that it may not be realistic to completely do away with images of text, but we encourage you to avoid images of text whenever possible. Whenever images of text are unavoidable, they should always have a text alternative.
Example
You have been given a graphic advertising a Trivia Event. The image contains information about the event, including the name, date, time, prizes, and a link for registration. Because of the Non-Text Content Criterion for images, we know we should always include text alternatives for non-text content. In this case, you could include of all the text in the image as actual text on the page, being sure to include an appropriate heading (ex. Trivia Event) and mark-up the content properly. The image could be included separately with brief alternative text which describes it as, “A graphic advertising Trivia Event. Long description under Trivia Event heading.” This is a similar text alternative strategy to the long descriptions used for Charts and Graphs.
