Text in images

How to provide better formats for text in images and text alternatives for authors.

Caitlin Foran avatar
Written by Caitlin Foran
Updated over a week ago

Why text in an image isn’t a good idea

The World Wide Web Consortium (W3C) says not to use text in images. Here’s why:

“Genuine text is much more flexible than images: It can be resized without losing clarity, and background and text colors can be modified to suit the reading preferences of users. Images are more likely to distort and pixelate when resized.” (https://www.w3.org/WAI/tutorials/images/textual/)

So, images of text are inflexible and inaccessible for a range of users. Devices and browsers resize images. And text (especially fine text) blurs easily when resized so you can’t guarantee a “good” experience for even your fully-sighted learners let alone your visually impaired learners.

Better formats for text in images and diagrams

Accessibility isn't just about alt text (alternative text) and screen readers, it's about good formats and good alternatives for all users. When you absolutely must use text in a diagram or image we suggest providing a PDF.

This is because you could provide the image and include the PDF either below it or in the caption.

An example of inserting an image into a page in a course with the linked pdf given below the image.

Enhance the accessibility of your PDF

It’s likely that you will first create your diagram in another application, and then export it as a PDF. There are many things that can be done in your native document and image applications to support accessibility, such as: defining structural headings, lists, and data tables; providing document language; and setting document properties such as titles. Do a web search for your application + accessibility to find options.

If you have an existing PDF, check out Make an existing PDF file accessible for how to do things like convert images of text to text and add tags to indicate structure.

Alt text

You should provide alt text for all images that are not decorative.

Simple images with a small amount of text

If the image is of a small amount of text, then the alt text should match the text in the image exactly.

Complex images or images with a large amount of text

Alt text is plain text. So, for charts, graphs, diagrams and other complex images, simple alt text may not be sufficient to convey the information. In such cases, the information should be provided in addition, in text on the page. Either within a text element or as a linked file.

For flow charts and diagrams, you should describe the chart in detail, using headings and bullet points to show hierarchy.

For graphs, you might want to provide a data table with the equivalent information.

When you provide a long description, use the alt-text field to direct learners to the long description or file.

Writing effective alt text

What makes “good” alt text is subtle and important so we have created a separate article Writing alt text for images which gives detailed guidance.

Did this answer your question?