WCAG 2.1 - 1.4.5
Images of Text
Wenn die verwendeten Technologien die visuelle Darstellung erreichen können, wird Text verwendet, um Informationen zu vermitteln, anstelle von Textbildern, mit Ausnahme der folgenden:
Inhalt
Was steht in den Guidelines zum Success Criterium 1.4.5 - Images of Text?Was Bedeutet das Success Criterium 1.4.5 - Images of Text?Warum ist es so wichtig, das Success Criterium 1.4.5 - Images of Text zu beachten?Was hat das Success Criterium 1.4.5 - Images of Text mit dem BFSG zu tun?Lösungen für 1.4.5 - Images of Text anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 1.4.5 - Images of Text?Was steht in den Guidelines zum Success Criterium 1.4.5 - Images of Text?
Implementationshinweise
- Customizable: Das Bild des Textes kann visuell an die Anforderungen des Benutzers angepasst werden;
- Essential: Eine bestimmte Präsentation des Textes ist entscheidend für die zu übermittelnden Informationen.
Was Bedeutet das Success Criterium 1.4.5 - Images of Text?
Das Success Criterion 1.4.5 verlangt, dass Textinhalte grundsätzlich als echter, maschinenlesbarer Text angeboten werden und nicht als eingebettetes Bild ("Image of Text") umgesetzt werden. Bilder von Text sind also grundsätzlich zu vermeiden.
Eine Ausnahme ist nur zulässig, wenn der Text als Bild wirklich notwendig ist (z. B. für ein Logo mit spezieller Typografie oder spezielle künstlerische Zwecke). Ansonsten gilt immer: Text soll als Text erscheinen.
Technische Anforderungen im Klartext:
- Verwenden Sie HTML-Text, keine Bilder für Überschriften, Buttons oder andere Informationen.
- Ist ein Bild mit Text aus zwingenden Gründen notwendig (z.B. Firmenlogo), so ist ein Alternativtext mit dem Textinhalt erforderlich.
Warum ist es so wichtig, das Success Criterium 1.4.5 - Images of Text zu beachten?
Viele Nutzer:innen sind auf anpassbaren Text angewiesen, z. B. wegen Sehschwächen. Echter Text kann:
- Vergrößert werden, ohne dabei unscharf zu erscheinen
- Von Screenreadern gelesen werden
- Von Nutzer:innen angepasst werden (z.B. Kontrast, Schriftart) Bilder von Text brechen diese Vorteile und machen das Web für viele Menschen unzugänglich.
Was hat das Success Criterium 1.4.5 - Images of Text mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) baut auf die WCAG-Kriterien auf. Da das Kriterium 1.4.5 explizit die maschinenlesbare Darstellung von Text verlangt, ist seine Umsetzung nach BFSG zwingend. Ohne die Einhaltung dieses Kriteriums können unter anderem Menschen mit Seheinschränkungen die Inhalte Ihrer Website nicht erfassen, wodurch Ihre Website nicht BFSG-konform ist.
Lösungen für 1.4.5 - Images of Text anhand von Codebeispielen
Falscher Code
<img src="/assets/angebote.png" alt="Unsere Angebote">Korrekter Code
<h2>Unsere Angebote</h2>Im schlechten Beispiel wird eine Überschrift als Bild eingebunden. Das ist nicht barrierefrei, da der Text nicht skaliert oder vorgelesen werden kann. Im guten Beispiel wird echter HTML-Text genutzt, der für alle anpassbar und maschinenlesbar ist.
Falscher Code
<button style="background-image:url(button-text.png)"></button>Korrekter Code
<button>Jetzt kaufen</button>Der Button im schlechten Beispiel ist nur optisch durch das Bild lesbar, Hilfsmittel erkennen keinen beschreibenden Text. Das gute Beispiel nutzt echten Text im Button und bleibt so für alle nutzbar.
Falscher Code
<img src="logo-unternehmen.png" alt="Logo von Unternehmen XY">Korrekter Code
<img src="logo-unternehmen.png" alt="Unternehmen XY">Bei Logos ist ein Bild zulässig, aber der Alternativtext sollte den Namen des Unternehmens enthalten, nicht die rein technische Beschreibung 'Logo von ...'. Das Logo selbst muss nicht unbedingt in Text umgesetzt werden, aber der inhaltliche Wert muss als Alternativtext erkennbar sein.
Wie löse ich Verstöße gegen das Success Criterium 1.4.5 - Images of Text?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.