Why text on images is inaccessible and how to fix it

Lewis Wake
Wednesday 22 January 2025

Learn why text on images harms accessibility and SEO, and get tips to make your content inclusive, mobile-friendly, and compliant with accessibility standards.


Images are everywhere online, especially in marketing. But many of these images have one key issue: the text on them isn’t accessible to everyone. This post explores why text on images is problematic, especially for people who use screen readers, and what you can do to improve accessibility.

Graphic of a person placing images on a webpage

Why is text on images a problem?

Incompatibility with screen readers

Screen readers, which read content aloud for people with vision impairments, can’t read text embedded within an image. If the text on an image contains critical information, it leaves out a significant portion of the audience.

Poor search engine optimisation (SEO)

Search engines rely on text data to rank content. When text is on an image, it’s invisible to search engine crawlers, impacting a page’s ranking. In other words, even if your image looks good, it won’t help with SEO if the text is not in a readable format.

Limited access on mobile devices

On smaller screens, text within images often becomes too small to read, leading to poor user experience. Accessible HTML text is scalable between device sizes, but text on an image is a fixed size and will likely display at a much smaller size to the user than intended. As mobile browsing grows, designing for mobile accessibility is no longer optional.

Graphic of a frustrated user


The impact of inaccessible text online

Inaccessible text limits reach, alienates prospective and even current students, and can lead to reputational damage. Here are some specific ways it impacts online businesses.

Loss of potential customers

Visitors with disabilities may leave a site that doesn’t consider their needs, resulting in a loss of valuable applications.

Lower search rankings and reduced traffic

When content isn’t accessible, it doesn’t rank well, affecting traffic and growth. Accessible content can give a competitive advantage in search engine rankings.

Possible legal consequences

Many countries have regulations around web accessibility, such as the UK’s Public Sector Bodies Accessibility Regulations 2018 and the European Accessibility Act (EAA). Failing to comply could result in lawsuits or penalties, as well as damage to an institution’s reputation.


How to make text on images accessible

The solution to this accessibility issue isn’t complicated. Here are some effective ways to improve image accessibility.

Use alt text for important information

Alt text is a brief description of an image that appears if the image doesn’t load or if a screen reader is being used. When placing essential information in images, ensure it’s included in the alt text.

Read a previous article of mine to find out how to write useful alt text.

Add captions and descriptions

Including captions directly under the image allows screen readers to read the important text. Plus, captions benefit all users by making the context clear while also boosting SEO.

Avoid text-only images where possible

Use images to complement text, not as a replacement. If a message is essential, it’s better to add the text directly to the page, with the image as supporting material rather than the primary carrier of the information.

Make use of contrast and readable fonts

When text in images is necessary, ensure it’s in a legible font, colour and size. This benefits users without disabilities as well, particularly those with colour vision deficiencies.

Utilise accessible design tools and existing templates

Tools like Canva and Adobe Express offer pre-existing well-designed accessible templates. Don’t feel you have to reinvent the wheel by creating something entirely from scratch.

Graphic of two organising content on a web page


Tips for content creators to improve visual accessibility

Hitting the publish button on your content should not be the last step in your creation’s journey. It is important to guage the output’s quality and ensure it is meeting accessible standards.

Test with screen readers

Using tools like VoiceOver on Mac or NVDA on Windows, try out your website and social media pages to make sure your content really is accessible.

Read a previous article of mine on designing for users of screen readers to find out more.

Check how it looks on mobile

Check how your images appear on different mobile devices to ensure text is legible without zooming.

Follow WCAG Guidelines

Familiarise yourself with WCAG recommendations. For instance, WCAG 2.1 requires large-scale text to have a contrast ratio of at least 4.5:1, which can improve readability for everyone.


Examples of accessibility in action

Accessible images aren’t just about compliance, they enhance usability for all users. Some leading brands have embraced accessibility with highly effective approaches.

Facebook’s Automatic Alt Text

Facebook has implemented AI to create alt text for images, making visual content more accessible to users with vision impairments.

Microsoft’s Inclusive Design Toolkit

Microsoft provides an Inclusive Design Toolkit, which includes best practices for image accessibility. It emphasises the importance of color contrast, alt text and text readability.

WebAIM Contrast Checker

This free tool helps designers check color contrast for better visibility, which is beneficial not just for people with disabilities but for users in any viewing condition.


Accessibility first

Improving the accessibility of text on images isn’t just a trend — it’s a necessary step for online businesses, including HE institutions, to remain inclusive and competitive. By following simple guidelines, marketers can create a better experience for everyone, from users with disabilities to those on mobile devices.

Graphic of multiple devices showing images on a webpage

Resources

Illustrations used in this article are from Storyset.

Related topics