WCAG 1.4.5 Bilder eines Textes

Das Erfolgskriterium 1.4.5 sorgt dafür, dass Text von den Menschen angepasst werden kann, die ihn lesen. Echter Text lässt sich ohne Unschärfe vergrößern, mit Hochkontrast-Einstellungen umfärben, weiter auseinanderziehen, vorlesen und übersetzen. In ein Bild eingebetteter Text nicht. Es gehört zur Konformitätsstufe AA und ist Teil von EN 301 549 (Abschnitt 9.1.4.5). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Wenn die verwendeten Technologien die visuelle Darstellung erreichen können, muss Text zur Vermittlung von Informationen verwendet werden statt Bildern eines Textes.

Ausnahmen:

• Anpassbar: Das Bild eines Textes lässt sich visuell an die Anforderungen des Nutzers anpassen (Schrift, Größe, Farbe, Hintergrund);
• Wesentlich: Eine bestimmte Darstellung des Textes ist für die Information wesentlich — zum Beispiel eine Schriftprobe oder ein historisches Dokument.

Schriftzüge (Text, der Teil eines Logos oder Markennamens ist) gelten als wesentlich.

Mit modernen Webfonts und CSS lässt sich fast jede typografische Gestaltung mit echtem Text umsetzen, die Ausnahmen sind also eng.

Typische Fehler in Onlineshops

• Hero- und Aktionsbanner, bei denen Angebot, Daten und Bedingungen Teil eines JPGs sind;
• Kategoriekacheln, bei denen der Kategoriename im Bild steht;
• Größentabellen, Zutatenlisten oder Pflegehinweise, die als Bilder hochgeladen sind;
• „Kostenloser Versand ab 50 €“ oder Vertrauensbotschaften als Bildleisten;
• Buttons aus Bildern, die die Beschriftung enthalten.

So prüfen Sie es

Automatisch: Keine automatische Regel unseres Checkers ist diesem Kriterium zugeordnet. Ein Tool kann nicht zuverlässig erkennen, ob ein Bild Text enthält. Hier ist eine manuelle Prüfung nötig. Unser Checker meldet jedoch Bilder ohne Alternativtext unter 1.1.1 und findet so oft dieselben Banner.

Manuell: Zoomen Sie die Seite auf 200–400 %: Text in Bildern wird unscharf. Versuchen Sie, den Text mit der Maus zu markieren: Gelingt das nicht, ist es wahrscheinlich ein Bild. Gehen Sie Start-, Kategorie- und Produktseiten sowie Newsletter-Landingpages durch und listen Sie jedes Bild auf, das Wörter enthält. Entscheiden Sie bei jedem, ob echter Text dasselbe Aussehen erreichen könnte.

So beheben Sie es

• Bauen Sie Banner als Hintergrundbild mit einer HTML-Textebene darüber; die meisten Shop-Themes haben dafür einen Abschnitt „Slideshow“ oder „Bild mit Text“.
• Veröffentlichen Sie Größentabellen und Zutaten als HTML-Tabellen oder Listen.
• Verwenden Sie für besondere Typografie Webfonts statt Bilder.
• Behalten Sie Text in Bildern nur für Logos und wirklich wesentliche Fälle und geben Sie ihnen einen Alternativtext.

Verwandte Kriterien

• 1.1.1 Nicht-Text-Inhalt — Alternativtext für Bilder.
• 1.4.3 Kontrast (Minimum) — gilt auch für Bilder eines Textes.
• 1.4.4 Textgröße ändern — Text muss sich auf 200 % vergrößern lassen.

Häufige Fragen

Sind Logos mit Text erlaubt?

Ja. Schriftzüge — Text, der Teil eines Logos oder Markennamens ist — gelten als wesentlich und sind ausgenommen. Nach 1.1.1 brauchen sie trotzdem einen Alternativtext.

Reicht ein Alternativtext für ein Banner mit Text?

Ein Alternativtext erfüllt 1.1.1, aber nicht 1.4.5. Lässt sich dasselbe Aussehen mit HTML-Text und CSS erreichen, sollte der Text echter Text sein, damit Nutzer ihn vergrößern, umfärben und übersetzen können.

Sind Produktfotos mit aufgedrucktem Text ein Problem?

Nein. Text, der Teil eines Bildes mit anderen wesentlichen visuellen Inhalten ist, etwa das Etikett auf einem Produktfoto, zählt nach WCAG nicht als Bild eines Textes. Wichtige Details sollten trotzdem in der Produktbeschreibung stehen.