This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
When can text appear as a picture?
An image showing text cannot be enlarged without blurring, coloring, reading and translating. Level AA (1.4.5) allows images of text if they are customizable or the presentation is essential. Criterion 1.4.9 of level AAA removes the first exception: images of text are only allowed as pure decoration or where exactly this representation is essential, such as logos and font patterns.
What the Criterion Requires
Each text that carries information stands as text in the source text and is set by the browser. Graphics with text are allowed if the text only adorns (a caption must then be placed as text next to it) or if the representation itself is the information: a logo, a calligraphy, a font comparison. Advertising banners with offer text, headings as graphic, quotes as image and tables as screenshot violate the criterion.
Why Real Text Wins
Real text can be enlarged with the browser, listened to with readers, read with the braille line, translated into other languages, copied and searched. It loads faster than an image and is available to search engines. With web fonts and text design in the stylesheet, today almost any typography can be set as real text; the former excuse that the company font is only possible as a picture no longer applies.
This is how we deal with it
The measurement finds images and reads their alternative text; whether an image shows text, recognizes the image analysis of the service, which describes real images. The decision whether the representation is essential is made by a person. The criterion belongs to the category AAA in knowledge; at level AA the service checks 1.4.5.
Examples
Offer text as a banner graphic
<img src="aktion-sommer.png" alt="20 Prozent auf alle Fahrräder bis 31. August"><div class="banner">
<p class="gross">20 Prozent auf alle Fahrräder</p>
<p>bis 31. August</p>
</div>At level AAA, text remains as an image only for logos and for cases where the representation itself is the information.
- Find images that show words: banners, buttons as graphics, headings, quotes, tables as screenshot.
- Replace them with real text with the same design via web font and stylesheet.
- Keep logos as an image, with an alternative text that mentions the name.
- Check new advertising material before publication: text belongs in the page, the image shows the subject.
