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 things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.

Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.

Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.

In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.

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).

Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.

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). During this time, 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) and exporting that image, you should instead use CSS to accomplish the styles you want.

For example, here is a particular style 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 requires some front-end 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 contain text. For example, if the image is a diagram with titles and labels. Including text in these types of images 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. The screen reader might also read the text out of order or miss important context that you want your audiences to know. For that reason, a transcription of the text is more effective.

How to Test This

Manual Test
Semi-Automated Test
Automated Test
  • Use an automated testing tool such as Deque Axe, IBM Accessibility Checker, or tota11y to check for images and image alt text
  • Make note of any images with text and if they have any image descriptions that would accurately describe the text in the image
  • Recommended to use a screen reader such as Jaws, NVDA, or VoiceOver to go through images. Make note if the screen reader can detect the text, and if it does so in the intended order


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)