Style real text instead of text images
Fonts, colors, sizes and alignment are all CSS's job, which means a headline that looks designed can still be text. W3C lists C22 as sufficient for 1.4.5 Images of Text at Level AA and for its no-exception counterpart at AAA, and as advisory for structure and for resize text. The framing on W3C's page is wider than the anti-image argument people usually reach for. It is about separating what the content is from how it looks, so a reader can change the look, the size, the color, the family, the placement, to whatever they need. Text baked into a PNG allows none of that. It cannot be resized without blurring, recolored, selected, searched, translated, or read aloud, and every one of those is something somebody relies on. Logos and pure decoration are outside the rule.
How we find it in an audit
This is a looking job, because no tool reliably separates a picture of words from a photograph. We go through the images on each template and read them, then check the alt text on any that turned out to be text. An image of text still needs its words available, even where a design decision keeps the image.
How affected users experience it
It reaches further than screen readers. Somebody enlarging text gets crisp body copy and a blurred headline. Somebody using a browser translation gets the page in their language with the banner still in English. Somebody with a custom stylesheet gets their colors everywhere except the image. And where the alt text is missing, the headline is simply gone.
Passes vs. fails
Passes
<h2 class="display">Summer Sale</h2>
<style>.display { font-family: "Marketing Serif", Georgia, serif;
letter-spacing: 0.02em; }</style>Fails
<img src="heading-summer-sale.png" alt="Summer Sale">How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- ARIA attribute is defined in WAI-ARIAA tool can check this
- ARIA state or property has valid valueA tool can check this
- Element with role attribute has required states and propertiesA tool can check this
- Form field has non-empty accessible nameA tool can check this
- Headers attribute specified on a cell refers to cells in the same table elementA tool can check this
- Role attribute has valid valueA tool can check this
- ARIA global properties not used where prohibitedA tool can check this
- ARIA required context roleA tool can check this
- ARIA required owned elementsA tool can check this
- ARIA state or property is permittedA tool can check this
- Table header cell has assigned cellsA tool can check this
- Meta viewport allows for zoomA tool can check this
- Zoomed text node is not clipped with CSS overflowA tool finds candidates, you decide
- HTML images contain no textNothing implements this yet
The other techniques filed under this rule
52 guides on this site are filed under 1.3.1 Info and Relationships. W3C lists this one as advisory for that rule rather than sufficient, which means it helps real readers without being accepted as evidence you conformed.
- ARIA11sufficientAdd landmarks so users can skip around
- ARIA12sufficientUse role=heading when h1-h6 is impossible
- ARIA13sufficientName repeated landmarks so they are distinguishable
- ARIA16sufficientName controls from visible text with aria-labelledby
- ARIA17sufficientGroup related form fields with ARIA roles
- ARIA20sufficientMark leftover page areas with role=region
This guide is our interpretation of W3C technique C22: Using CSS to control visual presentation of text. 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.