How to Make Text in Images Accessible

It’s common practice to use text in images when designing digital content. But while adding text to photos and other images can have aesthetic appeal, it can also unintentionally introduce accessibility barriers for people with disabilities.

If you’re considering incorporating images of text into your website, app, or other online content, adhering to accessibility best practices is critical. This blog explores how designers can create accessible graphic elements with text and validate accessibility through testing.

Why does image text need to be accessible?

Text embedded in images—such as infographics, advertisements, or promotional banners—often delivers critical information to end users. Unfortunately, many assistive technologies, such as screen readers, can’t directly interpret text from images. That means people who use these technologies may be unable to access the information in image text.

The accessible use of images and text helps ensure that all end users can interact with the same information as intended. This not only improves the user experience but helps designers conform to standards like the Web Content Accessibility Guidelines (WCAG), which is a best practice for legal compliance.

What are the basic guidelines for image text accessibility?

WCAG specifically addresses image text in Success Criterion 1.4.5, “Images of Text.” To conform with this criterion, designers should use text, rather than images, to convey information whenever possible. However, it’s acceptable to use text in images if the image of text can be customized to meet the user’s needs, or if the use of an image—rather than text—is essential.

If using an image of text is necessary, the following best practices can help you minimize accessibility barriers:

• Add alt text: Alternative text (alt text) refers to text embedded in a page’s HTML code that describes an image or other graphic element. Incorporate meaningful alt text to make images of text more accessible to people with visual disabilities who use screen readers. Avoid vague descriptions, such as “image of text,” and be concise. If the image contains a large amount of textual information, provide that in a separate caption or image description.

• Use proper color contrast ratios: Follow WCAG Success Criterion 1.4.3, which requires a minimum contrast ratio of 4.5:1 for text and images.

• Design with simplicity: Avoid cluttered designs and ensure all text is a legible size. This is particularly important for making image text readable on smaller screens.

How to make infographics accessible: tips and tools

Not that we’ve covered the basics of image text accessibility, let’s explore a more complex scenario: infographics.

• Offer a text-only version: Create a text-only HTML version of the infographic that captures all essential information.

• Use descriptive captions: Add a caption summarizing the infographic’s main points.

• Leverage accessibility tools: Use tools like Adobe Acrobat that offer features for adding accessible text to photos and exporting accessible designs.

Validating accessibility when adding text to photos

Various testing methods can help validate the accessibility of text in images. Here are some practical tools and techniques to achieve that goal:

1. Color contrast checker: Use a contrast checker to validate the accessibility of your contrast ratios.

2. Automated testing: Use reputable third-party software to automatically scan your digital assets for potential accessibility issues based on established guidelines like WCAG.

3. Manual reviews: Don’t just rely on automated tools to review accessibility. Include manual evaluations by experts, including screen reader testing, to ensure a more nuanced evaluation of user experiences.

Accessible text: inclusive design in action

Accounting for accessibility when using text in images not only helps remove barriers for people with disabilities but also creates a better user experience for everyone. Practices like using sufficient color contrast and providing clear descriptions for complex visuals help all users quickly understand digital content, improving overall comprehension. Simply put, it’s good design.

Ready to start your accessible design journey?

Accessible image text is just one aspect of accessible design. Level Access’s comprehensive design solution includes detailed Design Evaluations, a Figma plug-in, access to subject matter experts, and industry-leading testing tools. Learn how we can support you in ensuring your websites, mobile apps, and other digital content are accessible.

FAQ

Why is text accessibility important?

Using accessible text helps all people understand and interact with textual information on a website.

How do accessible images impact business?

Accessible digital design, including adhering to accessibility best practices for images, has many benefits for businesses. These include expanding market share by reaching the more than one billion consumers with disabilities worldwide and mitigating legal risks.

How do website images impact SEO?

Web images enhance user engagement by making content more visually appealing and enabling search engines to understand related content through optimized file names, alt text, and structured data. These combined elements, when used effectively, improve image search rankings.