Text in Images
Why text embedded in images creates barriers for all users
Text embedded in images - on event flyers, promotional banners, infographics, or social media graphics - cannot be read by screen readers, cannot be resized or translated, and often becomes blurry on high-density screens or when printed. Critical information should always be available as real HTML text, not locked inside an image.
The problem
A common pattern is publishing an event as an image-only flyer:
<img src="summer-reading-flyer.jpg"
alt="Summer Reading Program flyer">- Screen readers announce the alt text, but the actual details (date, time, registration link) are trapped in the image
- Text in the image does not resize when the user zooms - it becomes pixelated instead
- Automated translation tools cannot translate image text
- Search engines cannot index the event details
Best practice
Include all key information as real text on the page, in addition to the image:
<img src="summer-reading-flyer.jpg"
alt="Summer Reading Program promotional flyer">
<h2>Summer Reading Program</h2>
<p>June 1 - August 31, 2025</p>
<ul>
<li>Open to all ages</li>
<li>Free registration at the circulation desk or
<a href="/summer-reading">online</a></li>
</ul>All essential information is available as real text. The image serves as a visual enhancement, not the sole carrier of information. The alt text for the image can now be brief - it doesn't need to repeat all the details.
Complex images and infographics
For infographics or diagrams where the image itself is informative but complex, provide a full text transcript or summary as a linked page or expandable section:
<img src="literacy-stats-infographic.png"
alt="Infographic: Key literacy statistics for 2025">
<p><a href="/literacy-stats-2025-transcript">Read the full
text version of this infographic</a></p>Why it matters
Text in images excludes screen reader users, translation tools, and search engines entirely. It also fails users who zoom their browser, use high-contrast modes, or access your site on small screens where image text becomes unreadable. Real HTML text is always the right choice for information that matters.