1.4.9 Textbilder (keine Ausnahme)

1. Was ist das Ziel dieses Kriteriums?

Stell dir vor, du versuchst den Text auf einer Website zu vergrößern, weil du schlecht siehst – aber wichtige Informationen stecken in Bildern und lassen sich nicht anpassen. Frustrierend, oder? Genau hier setzt Erfolgskriterium 1.4.9 an.

Menschen mit Sehbehinderungen, Leseschwierigkeiten oder anderen Einschränkungen sind darauf angewiesen, Texte nach ihren Bedürfnissen anzupassen – größer, kontrastreicher oder in einer anderen Schriftart. Textbilder machen das unmöglich.

Das Ziel von 1.4.9 ist daher einfach: Verwende echten Text statt Textbildern – außer bei reiner Dekoration oder wenn die konkrete Darstellung wesentlich ist. Die Ausnahme für anpassbare Textbilder, die es bei Textbilder noch gibt, fällt hier weg.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret sind Textbilder nur in zwei Situationen erlaubt:

Reine Dekoration: Das Textbild dient nur der Gestaltung und vermittelt keine Information. Ein Hintergrundmuster aus Buchstaben ist ein Beispiel dafür.

Wesentliche Darstellung: Die konkrete visuelle Darstellung des Textes ist für die Information unverzichtbar. Das klassische Beispiel sind Logos und Markennamen – sie gelten laut Norm ausdrücklich als wesentlich.

Unterschied zu 1.4.5: Das AA-Kriterium 1.4.5 erlaubt Textbilder zusätzlich, wenn Nutzer:innen sie visuell anpassen können, und gilt nur, wenn sich die Darstellung mit den eingesetzten Technologien überhaupt als echter Text erreichen lässt. 1.4.9 auf Stufe AAA kennt diese Spielräume nicht: Außer Dekoration und wesentlicher Darstellung bleibt nur echter Text.

Was nicht erlaubt ist: Textbilder für Überschriften, Buttons, Navigationselemente oder andere funktionale Inhalte – nur weil sie „schöner aussehen“. Die gewünschte Gestaltung lässt sich praktisch immer mit HTML und CSS erreichen.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du musst Text auf 200 % vergrößern, um ihn lesen zu können, aber alle wichtigen Informationen sind als Bilder eingebunden. Du siehst pixelige, unscharfe Buchstaben und kommst an die Inhalte kaum heran.

Echte Texte statt Textbildern schaffen Barrierefreiheit, weil sie:

• Menschen mit Sehbehinderungen ermöglichen, Schriftgröße, Kontrast und Schriftart nach ihren Bedürfnissen anzupassen
• Menschen mit Leseschwierigkeiten erlauben, eigene Schriftarten oder Abstände zu verwenden
• Von Screenreadern und anderen assistiven Technologien direkt gelesen werden können
• Auch bei schwacher Verbindung schnell laden und auf allen Bildschirmgrößen scharf bleiben
• Die Übersetzung und Durchsuchbarkeit von Inhalten ermöglichen

Und nicht zuletzt: Sie machen Inhalte für alle flexibel nutzbar – auch für Menschen ohne Einschränkungen.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Die Umsetzung ist meist technisch unkompliziert und macht deine Website gleichzeitig robuster und wartungsfreundlicher. Hier die wichtigsten Strategien:

Grundregel: CSS statt Bilder

• Verwende CSS für die Schriftgestaltung: Webfonts, Schatten, Verläufe, Transformationen
• Nutze CSS für Layout und Effekte, statt sie in Bilder „einzubrennen“
• Setze auf responsive Typografie, die sich an verschiedene Bildschirmgrößen anpasst

Für Überschriften:

• Verwende HTML-Überschriften (<h1> bis <h6>) mit CSS-Gestaltung
• Nutze Webfonts für besondere Typografie
• Erzeuge Effekte mit CSS (Schatten, Konturen, Verläufe) statt mit Bildbearbeitung

Für Buttons und Navigationselemente:

• Gestalte Buttons mit CSS: border-radius, box-shadow, background-image: linear-gradient(…)
• Verwende für Symbole SVG-Grafiken und beschrifte Buttons mit echtem Text
• Nutze :hover- und :focus-visible-Stile für Interaktivität

Für besondere Schriftarten:

• Binde Webfonts ein (selbst gehostet oder über einen Dienst)
• Verwende @font-face für eigene Schriftarten
• Definiere Fallback-Schriften für den Fall, dass ein Webfont nicht lädt

Berechtigte Ausnahmen richtig behandeln:

• Logos: dürfen Bilder sein, brauchen aber einen passenden Alternativtext (siehe Nicht-Text-Inhalt)
• Historische Dokumente: Faksimiles sind in Ordnung, wenn das Original gezeigt werden soll – mit Transkription
• Dekorative Elemente: Kennzeichne sie mit alt="" oder binde sie über CSS ein

Werkzeuge für die Umsetzung:

• CSS-Frameworks wie Bootstrap oder Tailwind bieten fertige Klassen für Textgestaltung
• Browser-Entwicklertools zum Prüfen, ob Text echter Text ist (markieren, kopieren, vergrößern)
• Prüfwerkzeuge zur Überprüfung von Bildern und Alternativtexten

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Erfolgskriterium 1.4.9 ist AAA – aber die Vorteile echter Texte sind ganz praktisch.

1. Zielgruppe erweitern

Eine Website mit echten Texten statt Textbildern erreicht mehr Menschen: Menschen mit Sehbehinderungen, ältere Menschen, Menschen mit Leseschwierigkeiten und alle, die ihre Browser-Einstellungen angepasst haben. In Deutschland leben laut Destatis rund 7,9 Millionen schwerbehinderte Menschen – keine Nischengruppe.

2. Technische Performance verbessern

Echter Text ist in der Regel kleiner als ein Bild und skaliert ohne Qualitätsverlust auf allen Geräten. Das bedeutet kürzere Ladezeiten und scharfe Darstellung – besonders auf mobilen Geräten.

3. Wartung und Mehrsprachigkeit vereinfachen

Textänderungen in HTML sind in Sekunden gemacht, Textbilder müssen aufwendig neu erstellt werden. Mehrsprachige Websites profitieren besonders: Echter Text lässt sich übersetzen, Textbilder müssen für jede Sprache neu produziert werden.

Und nicht zuletzt: Einordnung ins Recht. Level AAA wird weder vom BFSG noch von der BITV 2.0 verlangt – Maßstab ist dort WCAG 2.1 Level AA über die EN 301 549. Das W3C rät außerdem davon ab, Level AAA pauschal für ganze Websites vorzuschreiben. 1.4.9 ist aber für die meisten Websites mit wenig Aufwand erreichbar. Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung.

6. Das Erfolgskriterium im Wortlaut des W3C

Success Criterion 1.4.9 Images of Text (No Exception) (Level AAA)

Images of text are only used for pure decoration or where 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.

Kurz gesagt: Textbilder sind nur als reine Dekoration erlaubt oder wenn die konkrete Darstellung des Textes wesentlich ist – Logos gelten dabei als wesentlich.