Prüfpunkt 1.4.12Stufe AATextgröße, Zoom und Ausrichtung
Warum müssen sich Zeilenabstand und Zeichenabstand auf Websites anpassen lassen?
Zeilen- und Zeichenabstände müssen sich anpassen lassen, weil Menschen mit Leseschwäche oder Sehbehinderung Texte oft nur mit geweiteten Abständen flüssig lesen können. Sie nutzen dafür Browser-Einstellungen oder Hilfsprogramme. Ihre Website muss diese Anpassung verkraften: Kein Text darf dabei abgeschnitten werden, und kein Code darf die Abstände unveränderbar festschreiben.
Geweitete Abstände machen Texte lesbar
Für Menschen mit Legasthenie verschwimmen eng gesetzte Zeilen ineinander — mehr Luft zwischen den Zeilen und Buchstaben macht aus einer grauen Textwand wieder lesbare Sätze. Der Standard definiert dafür konkrete Anpassungswerte, die eine Website unbeschadet überstehen muss: Zeilenabstand auf das Anderthalbfache der Schriftgröße, erweiterte Abstände zwischen Buchstaben, Wörtern und Absätzen. Die Besucher stellen diese Werte selbst ein — Ihre Website muss sie nicht vorgeben, sondern nur zulassen. Probleme entstehen an zwei Stellen: Textboxen mit fest einprogrammierter Höhe schneiden den gewachsenen Text ab, und Code, der Abstände mit Vorrang-Anweisungen festnagelt, macht die Anpassung von vornherein wirkungslos.
So prüft unser Messkern die Textabstände
Die Prüfung arbeitet zweigleisig. Erstens führt der Messkern den Härtetest tatsächlich durch: Er setzt die Abstands-Werte des Standards live auf Ihre Seite und misst, ob dabei Text abgeschnitten wird — jede geclippte Stelle ist ein dokumentierter Prüffall. Zweitens durchsucht er die Gestaltungsregeln Ihrer Seite nach Abstands-Anweisungen mit Vorrang-Kennzeichnung, die Anpassungen blockieren — solche Festnagelungen sind objektiv nachweisbar und gelten als Verstoß. Bleibt beides unauffällig, gilt das Kriterium bewusst trotzdem nie als automatisch bestanden: Dass beim Test nichts auffiel, ist noch kein Nachweis für jede Textstelle. Das abschließende Urteil fällt beim Gold-Standard ein Mensch.
Beispiele
Text bricht bei größeren Abständen
.teaser { height: 3.6em; overflow: hidden; line-height: 1.2; letter-spacing: 0; }.teaser { min-height: 3.6em; line-height: 1.5; }Besucher dürfen Zeilenabstand 1,5, Absatzabstand 2, Buchstabenabstand 0,12 und Wortabstand 0,16 setzen; nichts darf dann abgeschnitten werden.
So gehen Sie es an
- Bitten Sie Ihre Agentur, Abstands-Anweisungen mit Vorrang-Kennzeichnung — im Code „!important“ — aus den Gestaltungsregeln zu entfernen.
- Lassen Sie Textboxen in der Höhe mitwachsen, statt ihnen feste Pixelhöhen zu geben.
- Testen Sie Ihre wichtigsten Seiten mit einer Browser-Erweiterung für Textabstände — sichtbar abgeschnittener Text ist ein Befund.
- Achten Sie besonders auf Kacheln und Karten-Layouts mit kurzen Textausschnitten — dort wird wachsender Text am häufigsten geklippt.
- Großzügige Grundabstände von vornherein einplanen: Was luftig gesetzt ist, verkraftet die Weitung fast immer.
Weiter im Prüfbereich Barrierefreiheit
- Wie müssen Tooltips und Einblendungen auf Websites bedienbar sein?Inhalte, die bei Mauskontakt oder Tastaturfokus erscheinen, müssen wegschaltbar, berührbar und beständig sein — sonst verdecken sie, was man lesen will.
- Warum muss eine Website ohne Maus bedienbar sein?Jede Funktion einer Website muss per Tastatur erreichbar sein. Was WCAG-Kriterium 2.1.1 verlangt und wie unser Prüfservice es mit echten Tastendrücken misst.
- Was ist eine Tastaturfalle auf einer Website?Eine Tastaturfalle hält den Tastaturfokus gefangen: Wer hineingerät, kommt ohne Maus nie wieder heraus. So erkennen und vermeiden Sie sie.
- Warum brauchen Tastenkürzel aus einem einzelnen Buchstaben eine Abschaltung?Kürzel aus einem einzelnen Buchstaben lösen bei Sprachsteuerung ungewollt aus. WCAG 2.1.4 verlangt: abschaltbar, umbelegbar oder nur bei Fokus aktiv.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Heptagon, Public Domain
