Let users swap images of text for text
Where a design genuinely needs images of text, C30 is the way to ship them without stranding anybody. Build the page in semantic markup, write two stylesheets, one showing real text and one replacing some of it with images of text, and give the reader a control that switches between them. W3C lists it as sufficient for 1.4.5 Images of Text at Level AA and for the no-exception counterpart at AAA. That second listing is the interesting one, because the AAA rule has no customization exception at all, so a switch is the only route that satisfies it while images of text are still on the page. The control has to be findable and operable, and the text version has to be genuinely equivalent rather than a stripped-down fallback.
How we find it in an audit
We look for the image-replacement patterns first, a background image with the text pushed off-screen by a negative indent being the classic, then check whether any control exists to get the text back. Where there is one we operate it by keyboard and compare the two presentations for equivalence.
How affected users experience it
Image replacement done without a way back is the version that hurts. Text indented to minus 9999 pixels is still in the DOM, so a screen-reader user gets it, while a reader with low vision who needs larger or recolored text gets a picture that does neither. The switch is what gives that second reader the same words everybody else can already reach.
Passes vs. fails
Passes
<style>body.text-mode .fancy-title { background: none; text-indent: 0; }</style>
<button onclick="document.body.classList.toggle('text-mode')">
Use plain text headings
</button>Fails
.fancy-title { background: url(title.png); text-indent: -9999px; }
/* no way to get readable text back */How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- HTML images contain no textNothing implements this yet
Other ways to satisfy this rule
9 guides on this site are filed under 1.4.5 Images of Text. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C22sufficientStyle real text instead of text images
- G140sufficientKeep content and structure separate from presentation
- PDF7sufficientRun OCR so scanned PDFs contain real text
- C6advisoryKeep source order meaningful when CSS repositions content
- C8advisorySpace letters with CSS, not blank characters
- C12advisorySize text in percent so it scales
This guide is our interpretation of W3C technique C30: Using CSS to replace text with images of text and providing user interface controls to switch. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.