Use text instead of images of text

Comparison of an image of text (inaccessible) vs. markup text with CSS styling (accessible)
Image description: Accessible vs. inaccessible comparison of text styling. The accessible example shows the words, "Hello world! I'm so excited to be here" surrounded by html paragraph brackets, showing the styling is done using CSS. On the right, the stylized version looks the same but it's using an image instead (as symbolized by the image tag named, "hello.jpg.")

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Use text instead of images of text so that it’s available to screen readers.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts text, buttons, and other screen elements to audio and/or braille. If you are new to screen readers, I recommend watching a video to learn how it works.

While some screen readers can detect and read text in an image (thanks to advancements in image recognition AI), this is not necessarily reliable. Use text that the screen reader can detect directly rather than images of text.

This references WCAG criteria 1.4.5 Images of Text (Level AA) and 1.4.9 Images of Text (No Exception) (Level AAA).

How to Implement This

Use CSS for Styles

Note: I believe that this rule is largely a byproduct of early 90’s GUI design (Graphic User Interface) where CSS was not yet invented and programmers needed to use other means to stylize text elements, such using images as buttons.

If there is a particular look and feel you’d like to accomplish, rather than stylizing the text in an image editing program (such as Photoshop) use CSS to accomplish the styles you want.

For example, here is a particular style of text that’s conveyed through an image:

Stylized monospace text with a yellow underline
Image description: Black text in a stylized monospace font that says, “I love to feel the sand between my toes” with a yellow underline.

Here is the same style of text conveyed through CSS styles (try highlighting the text):

I love to feel the sand between my toes

p.stylized {
font-family: 'Courier New', monospace;
font-size: 24px;
border-bottom: 2px solid #EE9D0D;
display: inline-block;
margin: 0 auto;
}

This way, not only is the text available to screen readers, but it’s more responsive to different screen sizes and easier to read. This text is also searchable and can be search engine optimized.

Accomplishing a particular look and feel through CSS definitely requires some web development skills.

Here are some resources for learning CSS:


Webflow also has a designer mode that allows non-engineers to create websites using a CSS framework without actually coding. They explain a lot of these concepts in their class on CSS Styling. Access Guide is actually built in Webflow! (This message is not sponsored).

Transcribe Text When Necessary

It may be required for some images to have text, such as with titles and callouts. This should be acceptable as long as the text is fully transcribed in the image description.

Sometimes, screen readers can detect text in an image through text recognition artificial intelligence (AI). However, this isn’t necessarily a universal experience, and you cannot control the order in which the screen reader reads the text.

How to Test This

This requires manual testing. Audit the website/app for any images and see if they contain any text that can be portrayed as text in markup (the HTML) instead.

Credits

No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.