Was ist das Ziel dieses Kriteriums?
Ein schnittiges Logo mit geschwungener Schrift, eine stylische Überschrift im Corporate Font oder ein Zitat in kunstvoller Kalligrafie – Textbilder sind überall. Aber was passiert, wenn jemand den Text vergrößern, die Farben ändern oder eine andere Schriftart verwenden muss? Bei Bildern mit Text ist das unmöglich.
Das Ziel von Erfolgskriterium 1.4.5 der WCAG ist daher klar: Verwende echten Text statt Bilder mit Text, wann immer es technisch möglich ist. Denn nur echter Text lässt sich anpassen – und genau das brauchen viele Menschen, um Inhalte überhaupt lesen zu können.
Was fordert das Erfolgskriterium genau?
Ganz konkret geht es darum, dass Text als echter Text dargestellt werden soll, nicht als Bild. Das bedeutet:
Verwende HTML-Text mit CSS-Styling statt Grafiken mit eingebauten Buchstaben, wann immer die gewünschte Darstellung technisch umsetzbar ist.
Ausnahmen gelten nur in zwei Fällen:
- Anpassbar: Das Textbild kann visuell an die Bedürfnisse der Nutzer angepasst werden (z.B. durch entsprechende Einstellungen auf der Website)
- Wesentlich: Eine bestimmte Textdarstellung ist unverzichtbar für die vermittelte Information
Als „wesentlich“ gelten beispielsweise Logos mit Schriftzug, Schriftmuster zur Demonstration einer Typeface oder historische Dokumente, bei denen die originale Darstellung wichtig ist.
Ein wichtiger Punkt: Wenn du sowohl das Textbild als auch den gleichen Inhalt als echten Text anbietest, ist das Kriterium erfüllt – du gibst den Nutzern dann die Wahl.
Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du hast eine Sehschwäche und musst Text auf 200% vergrößern, um ihn lesen zu können. Oder du brauchst einen hohen Kontrast zwischen Text und Hintergrund. Bei einem Textbild? Unmöglich. Der Text bleibt klein und unleserlich, egal was du versuchst.
Echter Text statt Textbilder schafft Barrierefreiheit, weil er:
- Menschen mit Sehbehinderungen ermöglicht, Schriftgröße, Kontrast und Farben nach ihren Bedürfnissen anzupassen
- Menschen mit Dyslexie dabei hilft, lesbare Schriftarten und Zeilenabstände zu wählen
- Nutzern von Screenreadern den Zugang zu allen Textinhalten ermöglicht
- Menschen mit kognitiven Einschränkungen durch anpassbare Darstellung das Verstehen erleichtert
- Allen Nutzern in verschiedenen Situationen hilft – von der Sonne auf dem Smartphone-Display bis zur müden Augen am Abend
Und: Echter Text ist universell. Er funktioniert mit jeder assistiven Technologie und lässt sich in jede Form bringen, die jemand braucht.
So setzt du das Kriterium erfolgreich um
Die gute Nachricht: Mit modernen Web-Technologien lässt sich fast jede Textdarstellung auch mit echtem Text umsetzen. Hier ein paar bewährte Praxis-Tipps:
CSS statt Grafiken nutzen:
- Verwende Web-Fonts für spezielle Schriftarten statt sie als Bild einzubinden
- Nutze CSS-Eigenschaften für Schatten, Farbverläufe, Umrandungen und andere Effekte
- Setze auf SVG-Text für komplexere grafische Textdarstellungen
Wenn du doch Textbilder brauchst:
- Biete zusätzlich den gleichen Inhalt als echten Text an
- Stelle Anpassungsoptionen bereit (Schriftgröße, Kontraste, alternative Darstellung)
- Verwende hochauflösende Bilder, die auch bei Vergrößerung lesbar bleiben
- Sorge für ausreichenden Kontrast im Textbild
Technische Umsetzung:
- Nutze
@font-facefür spezielle Schriftarten - Arbeite mit CSS-Grid und Flexbox für komplexe Layouts
- Setze CSS-Animationen statt animierte Text-GIFs ein
- Verwende SVG für skalierbare Textgrafiken
Wann Textbilder okay sind:
- Logos und Markenzeichen (aber mit alt-Text)
- Screenshots von Software (mit Beschreibung des Texts)
- Historische Dokumente (mit Transkription)
- Künstlerische Werke, bei denen die Darstellung selbst die Botschaft ist
Warum dieses Erfolgskriterium für Unternehmen relevant ist
Barrierefreiheit bei Textdarstellung ist nicht nur ethisch richtig – sie bringt handfeste Business-Vorteile für dein Unternehmen.
1. Zielgruppe erweitern
Echte Texte statt Textbilder machen deine Inhalte für alle nutzbar – auch für Menschen mit Sehbehinderungen, Legasthenie oder temporären Einschränkungen. Du schließt niemanden aus und erreichst mehr potenzielle Kunden.
2. Suchmaschinenoptimierung verbessern
Suchmaschinen können Textbilder nicht lesen – echten Text schon. Mit HTML-Text statt Grafiken verbesserst du deine Auffindbarkeit dramatisch und machst jeden Buchstaben für SEO nutzbar.
3. Wartung und Kosten reduzieren
Textänderungen in CSS dauern Sekunden – neue Grafiken erstellen und einbinden Stunden. Echte Texte sind günstiger zu übersetzen, zu aktualisieren und zu pflegen. Das spart Zeit und Geld.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.
Das Erfolgskriterium im Wortlaut der W3
Success Criterion 1.4.5 Images of Text (Level AA)
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
Customizable: The image of text can be visually customized to the user’s requirements;
Essential: A particular presentation of text is essential to the information being conveyed.
Note: Logotypes (text that is part of a logo or brand name) are considered essential.