Use text instead of images of text

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.

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.

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

‍

‍

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:

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