Images of Text

8. Avoid Using Images of Text

Whenever possible you should author text content in the Drupal editor rather than using an image of text. Whereas we can describe the image of text with alternative text, we are diminishing the experience for both non-sighted and low-sighted users by doing so.  

Best Practices

  • Set text as live text whenever possible
  • If an image of text is required, provide a plain text alternative either in HTML or as a downloadable equally effective alternative format

Don't do This

Example of Image of Text Causing a WCAG Violation

Princeton University, Program of the Department, All interested or curious sophomores are cordially invited to an OPEN HOUSE,12:30 PM, Tuesday ~ February 21, 2017, 209 Prospect House food will be served.

Open House Flyer

Why Is This Wrong?

Whereas the image does contain an alternative text description, it is 1. a very verbose set of alternative text and 2. we lose all of the programmatic access to the text that is possible with live text. Either set the information as live text, or provide an inline, equally effective alternative like a WCAG 2.0 AA compliant PDF. 

Do This

Example of Providing Equivalent Access Through Inline Alternative

Open House flyer available in PDF link

PDF iconOpen House Flyer

Why is This Right?

We have offered an equally effective alternative to the image of text.