Accessibility tip: Avoid images of text

Text and Images in Electronic Communication

A lot of the software we use today to make images for a website were created back when the only things you would do with such a file is print it or show it on a screen to people in the room with you. Using Photoshop or Powerpoint, you could – and still can – put text over a photo or give it a graphical treatment to make your publication or slideshow look great.

In the early days of the web, designers preferred using this approach for text in electronic media, particularly on websites. They had good reasons: a limited number of fonts could be used to put text in a web page, and there was little flexibility to control the styling and layout of the text. Today, both of those reasons are no longer a concern.

Meanwhile, amazing things have been happening with technology to assist people with disabilities. People who are blind or have low vision can use screen reader software with a web browser or email client to read text aloud or convert it to Braille. Or they can zoom in on a web page, increasing the size of the text to make it readable. Or they can customize their screen settings to use high contrast colors. These tools are available on smartphones as well as desktop computers.

Here’s the problem, though. When you embed words into an image to obtain a certain visual style, you’re keeping those words away from people with impaired vision. For someone using a screen reader, it’s as if those words don’t exist. For a person zooming in to read, the image pixelates and loses clarity. For someone using custom style settings for text, those settings will not be applied to the image. For each of these people it’s an unfair burden – they either can’t access, or can only access with extra effort, information that should – must – be equally available to everyone.

Next time you’re creating materials to publish electronically, make sure you’re putting the information in a format that everyone can access equally, regardless of disability. In most cases, you’ll be able to separate the text from the image and still convey the message with the style you intend.

Example 1: Enlarging an image of text

Here is an image of text, followed by that same image magnified 4x. The magnified text is blurry, with artifacts from the image compression.

The versions below use text and styling without an image. Increasing the size leaves the text sharp and clear.

Lorem Ipsum

Lorem Ipsum

Example 2: Missing important details

Here is a cool event. I hope you can make it!

Having trouble figuring out where and when the event takes place, and what it’s called? If you don’t add an alternative description (“alt text”), screen reader users will hear the filename read aloud, one character at a time: “C O M M E V E N T underscore Z V...”

No one wants to inflict this kind of torture on their readers, so I’ve decided to add some alt text, but I haven’t really though it through. Here’s what it now “looks” like to a screen reader:

This time, the torture is more subtle. Your screen reader tells you that there is a cool event, but you still don’t know where or when it takes place. It’s like I’m telling you there’s a party but you’re not invited! 😢

Of course, I don’t want my readers to feel excluded, so I must separate the text from the image. It's fine to use a photo or graphic to illustrate the event (with appropriate alt text), but the details must be provided as text. Here’s what the screen reader says now:

“Line drawing of Plymouth Rock with the year 1620 carved on it - image.”

“Come to Rock Around the Rock: Bill’s Thanksgiving Dance party!”

“Thursday, November 26, 2020, 11:45 p.m., at the Plymouth Rock monument in Plymouth, Massachusetts. Bring your favorite historical 17th century instrument and a flagon of non-alcoholic mead for a rockin’ good time! Authentic period attire required to participate. Attendance limited to ten people, who must be masked and remain six feet apart at all times.”

Much better! Now you can make an informed decision about whether to attend this amazing event or join the protest nearby.

Also, accessibility is required by law.

Remember, disability laws apply to everything on our public website as well as to information provided through other electronic channels such as email newsletters.

To learn more about the accessibility guidelines we follow, see WCAG 2.0, Understanding Success Criterion 1.4.5: Images of Text.