1.4.5 Bilder eines Textes

Was bedeutet das?

Ein Werbebanner mit eingebranntem Text „Sommerschlussverkauf – 30 %“ lässt sich nicht vergrößern, ohne unscharf zu werden, nicht in anderen Farben anzeigen und nicht übersetzen. Echter Text, gestaltet mit CSS und Webfonts, kann das alles und sieht genauso gut aus.

Ausnahmen: Logos und Markennamen als Teil eines Logos, Text, bei dem die bestimmte Darstellung wesentlich ist (etwa eine Schriftprobe oder ein historisches Dokument), und Bilder von Text, die Nutzende selbst nach ihren Wünschen anpassen können. Ein Bild von Text braucht in jedem Fall auch einen Alternativtext nach Kriterium 1.1.1.

Wem hilft das?

• Menschen mit Sehbehinderung, die Text vergrößern oder eigene Farben einstellen
• Menschen mit Lese-Rechtschreib-Schwäche, die Schriftart oder Abstände ändern
• Menschen, die Seiten automatisch übersetzen lassen

Typische Fehler

• Aktionsbanner, bei denen Überschrift, Preis und Rabatt nur im Bild stehen
• Überschriften als Grafik, um eine besondere Schrift zu verwenden
• Öffnungszeiten oder Speisekarten als eingescanntes Bild

So prüfen wir das

• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Wird Text als Bild gezeigt, wo echter Text möglich wäre (Logos ausgenommen)?

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<img src="banner-sale.png" alt="Sommerschlussverkauf: 30 % auf alles">

<section class="sale">
  <h2>Sommerschlussverkauf</h2>
  <p>30 % auf alles bis Sonntag</p>
  <img src="strand.jpg" alt="">
</section>

Der Text ist echter, skalierbarer Text; das Foto dient nur noch als Gestaltung.

Praxistipps

• Bitten Sie Ihre Agentur, Banner als Vorlage mit Textebenen in HTML zu liefern statt als fertiges Bild.

Ratgeber und Muster dazu

• Der richtige Alternativtext in fünf FragenEin guter Alternativtext ersetzt, was das Bild auf dieser Seite leistet, nicht was darauf zu sehen ist. Mit fünf Fragen finden Sie für jedes Bild die passende Lösung.
• Kontraste, die jeder lesen kannBlasse graue Schrift sieht elegant aus, ist aber für viele Menschen schwer zu lesen, bei Sonne auf dem Smartphone für alle. Hier stehen die Werte, die WCAG 2.2 verlangt, und wie Sie sie dauerhaft im Design verankern.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 1.4.5 Images of Text