This page is in progress -
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.
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:
Here is the same style of text conveyed through CSS styles (try highlighting the text):
font-family: 'Courier New', monospace;
border-bottom: 2px solid #EE9D0D;
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:
- W3 Schools: CSS Reference
- A Curated List of CSS Resources
- MDN CSS: Cascading Style Sheets
- Level Up Your CSS with These 50+ Resources
- CSS for People Who Hate 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.
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.