Was ist das Ziel dieses Kriteriums?
Text auf Websites ist wie ein maßgeschneiderter Anzug – er sollte perfekt zu jedem Nutzer passen. Aber die Realität sieht oft anders aus: Zu enge Zeilen, winzige Schrift, gedrängter Zeilenabstand oder Blocksatz, der wie ein Labyrinth aussieht. Menschen mit Sehbehinderungen, kognitiven Einschränkungen oder Lernschwierigkeiten stoßen dabei schnell an ihre Grenzen.
Das Ziel von Erfolgskriterium 1.4.8 der WCAG ist es, Text so flexibel zu gestalten, dass Nutzer ihn nach ihren individuellen Bedürfnissen anpassen können. Farben, Zeilenbreite, Abstände, Ausrichtung – all das soll steuerbar werden, damit jeder Text bequem lesen kann.
Was fordert das Erfolgskriterium genau?
Ganz konkret geht es um fünf zentrale Anforderungen für die visuelle Darstellung von Textblöcken:
Farbkontrolle:
Nutzer müssen Vorder- und Hintergrundfarben selbst auswählen können – entweder über die Website oder über Browser-Einstellungen.
Zeilenbreite begrenzen:
Textzeilen dürfen maximal 80 Zeichen breit sein (bei chinesischen, japanischen oder koreanischen Zeichen nur 40). Lange Zeilen erschweren das Lesen und lassen Nutzer leicht „die Zeile verlieren“.
Blocksatz vermeiden:
Text darf nicht im Blocksatz (beidseitig ausgerichtet) formatiert werden. Die ungleichmäßigen Wortabstände erschweren das Lesen erheblich.
Zeilenabstand vergrößern:
Der Abstand zwischen Textzeilen muss mindestens das 1,5-fache der normalen Zeilenhöhe betragen. Absätze müssen mindestens das 1,5-fache des Zeilenabstands auseinander stehen.
Horizontales Scrollen vermeiden:
Text muss ohne Hilfstechnologien auf 200% vergrößerbar sein, ohne dass Nutzer horizontal scrollen müssen, um eine Zeile vollständig zu lesen.
Das Wichtigste: Es muss ein Mechanismus verfügbar sein, der diese Anpassungen ermöglicht – entweder durch die Website selbst oder durch den Browser.
Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du musst einen wichtigen Vertrag lesen, aber die Zeilen sind so eng und lang, dass du ständig die Orientierung verlierst. Oder der Text steht in einer Farbe, die deine Augen binnen Minuten ermüdet. Genau so geht es vielen Menschen täglich im Internet.
Flexible Textdarstellung schafft Barrierefreiheit, weil sie:
Menschen mit Sehbehinderungen erlaubt, Farben und Kontraste nach ihren Bedürfnissen einzustellen – manche brauchen schwarzen Text auf gelbem Hintergrund, andere weiß auf schwarz.
- Menschen mit Legasthenie oder anderen Leseschwierigkeiten hilft, sich durch optimale Zeilenbreiten und -abstände besser zu orientieren.
- Menschen mit kognitiven Einschränkungen unterstützt, Textblöcke zu überblicken und nicht in langen Zeilen „verloren zu gehen“.
- Menschen mit motorischen Einschränkungen das horizontale Scrollen erspart, was oft mühsam und anstrengend ist.
Und nicht zuletzt: Sie macht Inhalte für alle leichter lesbar. Auch für Menschen ohne Einschränkungen, die in ungünstigen Lichtverhältnissen oder auf kleinen Bildschirmen lesen.
So setzt du das Kriterium erfolgreich um
Die gute Nachricht: Die meisten Browser bieten bereits eingebaute Funktionen für Textanpassungen. Deine Aufgabe ist es, diese nicht zu blockieren und zusätzliche Optionen zu bieten. Hier ein paar bewährte Praxis-Tipps:
Farbflexibilität ermöglichen:
Verwende relative CSS-Einheiten statt feste Farbwerte für den Haupttext. Biete Style-Switcher für verschiedene Farbkombinationen an (z.B. Hell/Dunkel-Modus). Nutze CSS-Eigenschaften wie prefers-color-scheme für automatische Anpassungen. Vermeide es, Hintergrund- und Textfarben fest zu verdrahten – lass dem Nutzer die Wahl.
Zeilenbreite kontrollieren:
Nutze max-width in CSS, um Textblöcke auf 80 Zeichen zu begrenzen (etwa 45-75rem je nach Schriftgröße). Verwende responsive Design, das bei schmalen Bildschirmen automatisch die Zeilenbreite anpasst. Teste deine Texte: Eine Zeile mit etwa 10-12 Wörtern ist optimal lesbar.
Blocksatz verhindern:
Verwende text-align: left oder text-align: start in CSS. Vermeide text-align: justify komplett – auch wenn es „professioneller“ aussieht. Bei mehrsprachigen Websites: Beachte unterschiedliche Leserichtungen (start statt left).
Zeilenabstände optimieren:
Setze line-height mindestens auf 1.5 (besser 1.6) für fließenden Text. Verwende margin-bottom für Absätze mit mindestens 1.5-fachem Zeilenabstand. Biete Nutzern Buttons für verschiedene Abstandsoptionen („Normal“, „Erweitert“, „Groß“).
Responsive Vergrößerung sicherstellen:
Nutze relative Einheiten (rem, em, %) statt Pixel-Werte. Teste das Verhalten bei 200% Browser-Zoom – Text sollte umbrechen, nicht horizontal scrollen. Verwende CSS Grid oder Flexbox für flexible Layouts.
Technische Umsetzung:
Ein Style-Switcher für Nutzeroptionen kann mit wenigen Zeilen JavaScript erstellt werden. Browser-API prefers-reduced-motion, prefers-color-scheme bieten automatische Anpassungen. CSS Custom Properties ermöglichen einfache Live-Änderungen der Textdarstellung.
Warum dieses Erfolgskriterium für Unternehmen relevant ist
Auch bei Erfolgskriterium 1.4.8 gilt: Barrierefreiheit ist kein Selbstzweck – sondern bringt handfeste Vorteile für dein Business.
1. Zielgruppe erweitern
Flexibler Text macht deine Inhalte für deutlich mehr Menschen nutzbar. Menschen mit Sehbehinderungen, Legasthenie, ADHS oder altersbedingt nachlassender Sehkraft – sie alle profitieren von anpassbaren Textdarstellungen. Zusätzlich verbessert es die Nutzererfahrung für alle, die in verschiedenen Situationen lesen: im hellen Sonnenlicht, am Abend, unterwegs oder bei schlechter Internetverbindung.
2. Suchmaschinenoptimierung verbessern
Sauberer, strukturierter Code mit semantischen HTML-Elementen und responsivem Design wird von Suchmaschinen belohnt. Flexible Layouts reduzieren Bounce-Rates, da Nutzer länger auf der Seite bleiben und mehr Inhalte konsumieren können. Bessere Nutzererfahrung führt zu besseren SEO-Rankings.
3. Conversion-Rate steigern
Lesbarer Text führt zu mehr Conversion. Wenn Nutzer deine Inhalte bequem lesen können – egal ob Produktbeschreibungen, AGBs oder Call-to-Actions – steigt die Wahrscheinlichkeit, dass sie handeln. Studien zeigen: Optimierte Lesbarkeit kann Conversion-Rates um bis zu 20% steigern.
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.8 Visual Presentation (Level AAA)
For the visual presentation of blocks of text, a mechanism is available to achieve the following:
- Foreground and background colors can be selected by the user.
- Width is no more than 80 characters or glyphs (40 if CJK).
- Text is not justified (aligned to both the left and the right margins).
- Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
- Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
Note: Content is not required to use these values. The requirement is that a mechanism is available for users to change these presentation aspects. The mechanism can be provided by the browser or other user agent. Content is not required to provide the mechanism.
Note 2: Writing systems for some languages use different presentation aspects to improve readability and legibility. If a presentation aspect in this success criterion is not used in a writing system, content in that writing system does not need to use that presentation setting and can conform without it. Authors are encouraged to follow guidance for improving readability and legibility of text in their writing system.