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:

Once all the event information was placed in the image, it became inaccessible to people with visual disabilities. Disability exists on a spectrum. We might think of someone who is legally blind and uses a screen reader.

However, this image is also inaccessible to someone who is simply long-sighted—around 60% of the population.

If viewing the event on a phone, the text will be small and poorly contrasted against its inconsistent background, making it hard to read for most.

The information is also less portable. Users cannot copy and paste it into a text message to a friend, for instance.

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