Textvergrößerung

Menschen passen die Darstellung von Websites an ihre Bedürfnisse an: durch eine größere Basis-Schriftgröße im Browser, durch Zoomen oder durch eine Bildschirmvergrößerung. Barrierefreie Websites müssen das aushalten, ohne Inhalte zu verlieren.

Die Basis-Schriftgröße im Browser wirkt nur auf Text, der in rem oder em definiert ist. In Pixel angegebener Text ignoriert diese Einstellung vollständig in jedem Browser.

Der Seitenzoom skaliert dagegen alles, auch Pixelangaben. Deshalb wirkt eine Seite mit festen Pixelgrößen beim Zoomen zunächst in Ordnung. Erst wer nur die Schriftgröße erhöht, merkt, dass sich nichts tut.

Zu vermeidende Praktiken:

• maximum-scale=1 oder user-scalable=no im Viewport-Meta-Tag. Das verhindert das Zoomen auf Mobilgeräten und ist ein klarer Verstoß gegen 1.4.4 — zugleich der häufigste Einzelfehler in diesem Bereich und in einer Zeile behoben

• Feste Pixelgrößen für Texte

• Feste Container-Breiten

• Feste Höhen: height statt min-height schneidet Text ab, sobald er wächst. Eine Schaltfläche mit height: 40px verliert bei 200 Prozent ihre Beschriftung

• Text als Bild: Er ist für Screenreader nicht lesbar und wird beim Vergrößern zusätzlich unscharf

• Überlappende Elemente, die sich bei größerer Schrift gegenseitig verdecken

Die maßgeblichen Erfolgskriterien:

• 1.4.4 Textgröße ändern (Level AA): Text muss sich auf mindestens 200 Prozent vergrößern lassen, ohne dass Inhalte oder Funktionen verloren gehen

• 1.4.10 Reflow (Level AA): Bei 400 Prozent Zoom (das entspricht einer Breite von 320 CSS-Pixeln) darf kein horizontales Scrollen nötig sein

• 1.4.12 Textabstand (Level AA): Zeilenhöhe, Absatz-, Wort- und Zeichenabstand müssen sich überschreiben lassen, ohne dass Text abgeschnitten wird