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 sind in Bildern versteckt und lassen sich nicht anpassen. Frustrierend, oder? Genau hier kommt Erfolgskriterium 1.4.9 ins Spiel.
Menschen mit Sehbehinderungen, Leseschwierigkeiten oder anderen visuellen Einschränkungen sind darauf angewiesen, dass sie Texte nach ihren Bedürfnissen anpassen können – größer, kontrastreicher oder in einer anderen Schriftart. Textbilder machen das unmöglich.
Das Ziel von WCAG 1.4.9 ist daher radikal einfach: Verwende echten Text statt Textbilder – außer in ganz besonderen Ausnahmefällen. Keine Kompromisse, keine Schlupflöcher.
2. Was fordert das Erfolgskriterium genau?
Ganz konkret geht es darum, dass Textbilder nur in zwei sehr spezifischen Situationen erlaubt sind:
Reine Dekoration: Wenn das Textbild nur zur visuellen Verschönerung dient und keine wichtigen Informationen vermittelt. Ein dekoratives Banner mit Schriftzug, das rein ästhetisch ist, kann als Textbild umgesetzt werden.
Essentielle Darstellung: Wenn die spezielle visuelle Darstellung des Textes für die Information unerlässlich ist. Das klassische Beispiel sind Logos und Markennamen – hier ist die genaue Typografie Teil der Markenidentität.
Wichtiger Unterschied zu 1.4.5: Während das AA-Level-Kriterium 1.4.5 noch Ausnahmen für anpassbare Textbilder oder technische Grenzen zulässt, ist 1.4.9 kompromissloser. Es ist das AAA-Level und sagt: Wenn du es mit echtem Text hinbekommst, dann mach es auch so.
Was nicht erlaubt ist: Textbilder für Überschriften, Buttons, Navigationselemente oder andere funktionale Inhalte – nur weil sie "schöner aussehen". Die gewünschte Gestaltung muss mit CSS erreichbar sein.
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, unleserliche Textfragmente und kannst die Inhalte nicht nutzen.
Echte Texte statt Textbilder schaffen Barrierefreiheit, weil sie:
- Menschen mit Sehbehinderungen ermöglichen, Schriftgröße, Kontrast und Schriftart nach ihren Bedürfnissen anzupassen
- Nutzern mit Leseschwierigkeiten die Möglichkeit geben, spezielle Schriftarten oder Abstände zu verwenden
- Screenreader und andere assistive Technologien korrekt funktionieren lassen
- Menschen in verschiedenen Nutzungsumgebungen unterstützen (schwaches Internet, mobile Geräte)
- Die Übersetzung und Durchsuchbarkeit von Inhalten ermöglichen
Und nicht zuletzt: Sie machen Inhalte universell zugänglich – für alle Nutzer, auch die ohne Einschränkungen, die von flexibler Darstellung profitieren.
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 Umsetzungsstrategien:
Grundregel: CSS statt Bilder
- Verwende moderne CSS-Techniken für Schriftgestaltung: Web Fonts, Schatten, Verläufe, Transformationen
- Nutze CSS für Layout und Design-Effekte statt sie in Bilder zu "brennen"
- Setze auf responsive Typography, die sich an verschiedene Bildschirmgrößen anpasst
Für Überschriften und Headlines:
- Verwende HTML-Überschriften (
<h1>bis<h6>) mit CSS-Styling - Nutze Web Fonts für besondere Typografie
- Erstelle Effekte mit CSS (Schatten, Outline, Verläufe) statt mit Bildbearbeitung
Für Buttons und Navigationselemente:
- Gestalte Buttons mit CSS:
border-radius,box-shadow,background-gradient - Verwende Icon-Fonts oder SVG-Icons statt Textbilder
- Setze auf
:hover- und:focus-Effekte für Interaktivität
Für spezielle Schriftarten:
- Binde Web Fonts ein (Google Fonts, Adobe Fonts oder eigene)
- Verwende
@font-facefür eigene Schriftarten - Definiere Fallback-Schriften für Kompatibilität
Berechtigte Ausnahmen handhaben:
- Logos: Können als Bilder umgesetzt werden, brauchen aber aussagekräftige Alt-Texte
- Historische Dokumente: Screenshots oder Faksimiles sind in Ordnung, wenn sie den originalen Charakter zeigen müssen
- Dekorative Elemente: Kennzeichne sie mit
alt=""oder binde sie über CSS ein
Tools für die Umsetzung:
- CSS-Frameworks wie Bootstrap oder Tailwind bieten fertige Text-Styling-Klassen
- Browser-Entwicklertools zum Testen der Skalierbarkeit
- Accessibility-Testing-Tools zur Überprüfung der Textanpassung
5. Warum dieses Erfolgskriterium für Unternehmen relevant ist
Erfolgskriterium 1.4.9 mag AAA-Level sein, aber die Business-Vorteile sind handfest und messbar.
1. Zielgruppe erweitern
Eine Website mit echten Texten statt Textbildern erreicht mehr Menschen: Sehbehinderte, ältere Nutzer, Menschen mit Leseschwierigkeiten und alle, die ihre Browser-Einstellungen angepasst haben. Das sind nicht nur Nischenzielgruppen – das sind Millionen potentieller Kunden.
2. Technische Performance verbessern
Echte Texte laden schneller als Bilder, sind kleiner in der Dateigröße und skalieren automatisch für alle Geräte. Das bedeutet bessere Ladezeiten, geringere Bandbreitenkosten und zufriedenere Nutzer – besonders auf mobilen Geräten.
3. Wartung und Skalierung vereinfachen
Textänderungen in CSS sind in Sekunden gemacht, Textbilder müssen aufwendig neu erstellt werden. Mehrsprachige Websites profitieren enorm: Ein CSS-Design funktioniert für alle Sprachen, Textbilder müssen für jede Sprache neu produziert werden.
Und nicht zuletzt: Rechtssicherheit und Zukunftsfähigkeit. Während AAA-Level heute noch optional ist, zeigt der Trend eindeutig Richtung strikterer Barrierefreiheitsanforderungen. Wer heute schon auf echte Texte setzt, ist vorbereitet auf künftige Gesetzgebungen und hat Vorteile bei öffentlichen Ausschreibungen.
6. Das Erfolgskriterium im Wortlaut der W3
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.