Goal
Ensure that text is presented as real, selectable text rather than as part of an image — unless the image of text is essential (e.g., a company logo or stylized branding). This allows users to resize, recolor, and read the text with assistive technologies.
Key Points
- Text within images cannot be resized or read by screen readers.
- Use CSS, SVG, or web fonts for decorative styling instead of embedding text in images.
- Exceptions:
- Essential images of text (logos, artistic titles).
- User-customizable images (e.g., themes or templates).
- Enhances accessibility for low-vision and screen-reader users.
Short Summary
Text in images looks nice but breaks accessibility. Replace it with real text styled visually using CSS so users can zoom, change colors, and read it easily.
Example Issues and Fixes
Text as an Image
Fail
<div class="flex w-full flex-col gap-8 p-8 justify-center items-center text-center">
<img class="w-48 h-auto" src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/Join-Us-Now-1.png" alt="Join Us Now">
</div>
Pass
<div class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<h2 class="!font-primary !m-0 !text-3xl !leading-none !font-bold !tracking-wide text-blue-600">Join Us Now</h2>
</div>
Join Us Now
Quick Checklist
- Is all informative text rendered as real text, not images?
- Are fonts and CSS used to achieve the desired visual style?
- Only logos or essential artistic text are exempt?
- Can users zoom and adjust colors without losing information?
- Does screen reader recognize and read all visible text content?