Convey meaning in text, not images

Accessibility

Images should not have text that is attempting to convey a meaning or message.

Reason

Text in an image is not accessible to those with visual disabilities. This does not just include the legally blind. Often text is neither large nor contrasted enough to read in images, especially when on a phone. Screen readers cannot access text in images.

Best practice

Place messaging or critical information in text above or below an image. A good example is this image and text combination which we have also shown a screenshot of here:

• Additionally, the image in this example could have alt text that reads something like, “A young Asian person on their own reads on their phone in their apartment which overlooks an exciting streetscape”.

The information above the image is crucial – it would easily be read to the user who employs a screen reader in a perfectly accessible and logical manner.

Example of less accessible practices

If an image is used to hold the information by embedding text into it, then it is much less accessible:

Now the image holds all the event information, it had become entirely inaccessible to those with visual disabilities. This is a great example of how a disability exists on a spectrum. We might think of those with a visual ability as being legally blind and using a screen reader.

However the information in this image is now inaccessible to someone who is simply long-sighted – that’s 60% of the population.

But the effect is also the same for someone viewing the event on a phone – it is impossible for almost anyone to read. The text is small and poorly contrasted with its inconsistent background. Making this image bigger doesn’t necessarily help.

The data also becomes less portable. A user cannot copy and paste the info into a text message to a friend.

Additional benefits

• Usability: This content is less usable for everyone. It is harder to read, especially on a phone. It is not translatable in a browser. You cannot copy and paste the text.
• SEO: None of the text is discoverable by a search engine.
• Marketing: A poor user experience like this does not reflect the university’s high standards, nor its commitment to accessibility.

What WCAG says

From WCAG:

“If authors can use text to achieve the same visual effect, they should present the information as text rather than using an image.”

What WCAG says about this issue.

Does not generate an alert in WAVE (as it undetectable by software).