Why text on images is inaccessible and how to fix it
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.
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.
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.
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.
Resources
Illustrations used in this article are from Storyset.