WCAG 1.4.9 Images of Text (No Exception): Understanding the AAA Requirement

WCAG 1.4.9 Images of Text (No Exception): what it requires

WCAG 1.4.9 requires that text content must not be delivered as an image. The rule is a strict, level AAA success criterion: if information is text, deliver it as real text in the page DOM so it can be resized, selected, translated and read by assistive technology.

What counts as an “image of text”

• Photos, banners or hero images that include headings or paragraph text baked into the graphic
• Buttons, calls to action or form labels delivered only as images
• Infographics, charts or diagrams where essential text labels are part of the image pixels
• Logos that contain text or brand words rendered only inside an image file

Why this matters

• Users cannot select, search or copy text that is an image
• Screen readers and other assistive tools cannot access text rendered only as pixels
• Images of text do not scale cleanly when users zoom or change system font size
• Images complicate localisation because each language needs a new image file

Quick pass vs fail examples

• Pass: a headline written in HTML and styled with a web font or CSS
• Pass: an SVG that contains selectable text nodes rather than outlined curves
• Fail: a hero image that includes a paragraph of instructions as pixels
• Fail: a CTA button supplied only as a PNG with the label baked in

Common mistakes and why they fail

• Relying on alt text as a substitute. Alt text does not make text selectable or resizable and often fails the user experience for low vision users.
• Using image files to preserve a visual effect. Most effects can be reproduced with CSS, web fonts or accessible SVG text.
• Keeping text inside background images. Background images are not part of the accessibility tree and cannot replace live text.

Practical step-by-step fixes by element

Headlines, banners and hero areas

• Replace the image headline with an HTML heading element and a web font. Use CSS for color, gradient text effects or shadows.
• If you need complex layout, place the textual content in the DOM and position it over the image with CSS so the text remains real text.

Buttons and CTAs

• Use a native button element with text inside it. Style the text with CSS. If you must use an icon, use an inline SVG or an icon font for the glyph while keeping the label as text.

Logos and branding

• Where a logo contains a wordmark, provide the brand name as DOM text for accessibility and use CSS or an inline SVG to preserve appearance. If the visual logo must remain an image, include the brand name as accessible text in the page content or an accessible name on the image element.

Infographics, charts and maps

• Move essential labels and annotations into HTML near the graphic so they are selectable and readable. Use CSS to visually associate the labels with the visual elements.
• Provide a text alternative that reproduces the same information in a readable format when the visual layout is complex.

Testing checklist

• Try to select and copy all textual content. If you cannot, it is likely an image of text.
• Increase browser zoom or system font size to 200% or 400% and check readability.
• Run a screen reader and confirm it reads the text content, not just the image alt.
• Inspect the DOM to confirm text appears as text nodes, not only inside an <img> or background-image.
• Remember automated tools may miss cases. Manual checks are essential for this criterion.

When an image with text can still be used

If the image is purely decorative, provide an empty alt attribute so assistive tech ignores it. If the text inside the image is essential to understanding, it must appear in HTML or as selectable SVG text. This rule is strict: do not rely on alt text alone to satisfy the requirement.

Design and localisation considerations

Designers should plan for scalable typography and flexible layouts. Real text in the DOM adapts to user preferences, reduces the need to re-export assets for each language and often reduces file weight. Where a visual effect seems to force an image, test a CSS or SVG solution first.

Remediation priority and project steps

1. Inventory pages and components that use images containing readable text.
2. Classify each item: decorative, branding, or essential content.
3. For essential content, replace the image with real text or accessible SVG text. Add a text alternative only when the image is decorative.
4. Re-test with zoom and a screen reader, then update a11y test cases and design tokens so the issue does not recur.

Final notes

WCAG 1.4.9 demands that text remain text. The practical result is better resizing, better assistive technology support, easier translation and a cleaner codebase. Tackle the highest-impact pages first: landing pages, product pages and controls are common offenders.