Perceivable · 1.4 Distinguishable
Images of text may be used only for pure decoration or where that particular presentation of text is essential to the information, as with logos. Unlike 1.4.5, being customizable by the user is not an exception.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Switch to Fails, zoom to 300% and try “Use my own font”. Watch the heading and the quote, then try to select their words.
The new footbridge opened in March. Since then, the number of people walking across the river each day has more than doubled.
It cut my walk to work from forty minutes to ten.
The council plans a second crossing near the station next year.
The new footbridge opened in March. Since then, the number of people walking across the river each day has more than doubled.
It cut my walk to work from forty minutes to ten.
The council plans a second crossing near the station next year.
The tools follow the version you last used.
What happened
Why it passes
The heading and the quote are real text in a decorative font. You can enlarge them, change their font and colors, and select them.
Why it fails
The heading and the quote are pictures of text. At AAA there is no exception for this: zoomed in they blur, and your font and color settings cannot change them.
Examples
Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
<figure class="pull-quote"> <img src="quote-footbridge.png" alt="It cut my walk to work from forty minutes to ten."></figure>The quote is a picture so that it can use a decorative typeface. Even with matching alt text this fails, because readers cannot enlarge, recolor or respace it.
Passes
Live preview
<figure class="pull-quote"> <blockquote> <p>It cut my walk to work from forty minutes to ten.</p> </blockquote> <figcaption>Asha Patel, a nurse who lives in Northbank</figcaption></figure>The same quote is real text, and the decorative typeface is loaded as a web font through CSS. Readers can restyle it like any other text.
Fails
Live preview
<nav aria-label="Sections"> <a href="/news"><img src="nav-news.png" alt="News"></a> <a href="/sports"><img src="nav-sports.png" alt="Sports"></a> <a href="/weather"><img src="nav-weather.png" alt="Weather"></a></nav>Even if the site offers a high-contrast set of these images, 1.4.9 has no exception for images of text that users can customize.
Passes
Live preview
<nav aria-label="Sections" class="sections"> <a href="/news">News</a> <a href="/sports">Sports</a> <a href="/weather">Weather</a></nav>Real link text styled with CSS can match the old images, and it follows the reader's font, size and color settings.
Passes
Live preview
<header> <a href="/"><img src="harbor-times-masthead.svg" alt="The Harbor Times home"></a></header>A newspaper's masthead is a logotype. Its exact look is essential, so it may stay an image of text.
Why it matters
People with low vision or reading disabilities can always restyle, enlarge and reflow text, because nothing informative is locked inside an image.
W3C: Understanding 1.4.9Level AAA
Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.
Where it is required
No law on this site requires Level AAA criteria for whole sites.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures