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 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.
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:
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 requires some front-end 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 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
- 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
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.