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.

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.

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.

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

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

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.

See Providing long descriptions for non-text content that serves the same purpose and presents the same information from W3C for some examples.

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.

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.