Layer 8Ehrlicher Tech-Support

Schrift lässt sich nicht vergrößern oder das Layout zerbricht

Text bleibt winzig, oder beim Zoomen zerfällt die Seite. Was WCAG 1.4.4 und 1.4.10 verlangen und warum Apps eigene Einheiten brauchen.

Aufwand:
ca. 35 Min.
Voraussetzung:
Ein Browser mit Zoomfunktion, Die Entwicklerwerkzeuge des Browsers, Ein Telefon mit vergrößerter Systemschrift
Gilt für:
Webseiten und Web-Anwendungen, Android-Apps, iPhone-Apps, WCAG 2.2 in der Fassung vom 12.12.2024

Das Symptom

Zwei Beschwerden, die im selben Menü landen. Die erste: Der Text ist zu klein, und die Vergrößerungsfunktion hilft nicht — man dreht am Zoom, alles wird größer, nur die Überschrift bleibt exakt so klein wie vorher. Oder man stellt am Telefon die Systemschrift hoch, und in einer bestimmten App ändert sich nichts, während alle anderen gehorchen. Die zweite: Der Text wird zwar größer, aber die Seite zerfällt dabei. Zeilen laufen rechts aus dem Bild, Knöpfe verschwinden hinter einer Leiste, in einem Formularfeld ist die Beschriftung nur noch zur Hälfte da. Man muss jetzt für jede einzelne Zeile hin- und herwischen.

Die „Layer 8“-Wahrheit

Vergrößern kann der Browser von allein. Das steht so im Verständnisdokument zu Erfolgskriterium 1.4.4: Die Skalierung ist in erster Linie Sache des Anzeigeprogramms, und die Verantwortung des Autors besteht darin, Inhalte zu bauen, die das Anzeigeprogramm nicht daran hindern. Das dreht die übliche Denkrichtung um. Es geht nicht darum, eine Vergrößerungsfunktion einzubauen — es geht darum, die vorhandene nicht kaputtzumachen. Das Kriterium selbst nennt das Maß: Text muss sich ohne assistive Technik auf 200 Prozent vergrößern lassen, ohne dass Inhalt oder Funktion verlorengeht. Beide Halbsätze zählen. Der Hinweis auf eine Bildschirmlupe erfüllt das erste nicht, und eine Seite, die bei doppelter Schrift ihre Knöpfe verschluckt, erfüllt das zweite nicht.

Warum die Schrift beim Zoomen manchmal als Einzige stehen bleibt, hat einen Namen. Das W3C führt eine Liste benannter Fehlschläge, und einer davon lautet F94: unsachgemäßer Gebrauch von Sichtfeld-Einheiten zur Schriftgrößenangabe. Die Idee dahinter ist verführerisch — die Überschrift wächst mit dem Fenster, sieht in jeder Größe proportional aus. Nur schrumpft beim Zoomen das Sichtfeld in CSS-Pixeln um genau denselben Faktor, um den vergrößert wird — aus 1280 CSS-Pixeln werden bei 400 Prozent eben 320. Die Schriftgröße rechnet sich damit im selben Maß herunter, wie der Zoom sie heraufskaliert, und das Ergebnis ist null Veränderung. Die Schrift hängt an der einen Bezugsgröße, die der Zoom gerade wegkürzt. Zwei weitere benannte Fehlschläge zum selben Kriterium beschreiben die andere Hälfte des Bildes: F69, wenn Text, Bilder oder Bedienelemente bei 200 Prozent beschnitten oder verdeckt werden, und F80, wenn textbasierte Formularfelder nicht mitwachsen.

Das zweite Kriterium, 1.4.10, kümmert sich um das Auseinanderbrechen und begründet dabei eine Zahl, die zunächst willkürlich wirkt. Verlangt wird, dass Inhalt ohne Verlust und ohne Scrollen in zwei Richtungen darstellbar ist, bei senkrecht scrollendem Inhalt in einer Breite von 320 CSS-Pixeln. Woher die kommen, steht in der Anmerkung: Sie entsprechen einem Fenster von 1280 CSS-Pixeln bei 400 Prozent Zoom. Das Verständnisdokument räumt außerdem den häufigsten Rechenfehler ab — 400 Prozent beziehen sich auf die Abmessung, nicht auf die Fläche. Also vierfache Breite und vierfache Höhe. Und der Grund für die ganze Übung ist banal und körperlich: Wer eine Zeile nur lesen kann, indem er für jede Zeile hin- und herscrollt, verliert die Stelle. Nicht metaphorisch — wirklich.

Zweidimensionales Scrollen ist dabei nicht generell verboten. Für Inhalte, die eine zweidimensionale Anordnung zur Nutzung oder für ihre Bedeutung brauchen, gibt es eine ausdrückliche Ausnahme, und das W3C zählt sie auf: Karten und Diagramme, Video, Spiele, Präsentationen, Datentabellen — dort allerdings die Tabelle als Ganzes, nicht die einzelne Zelle. Ein normaler Textabsatz steht auf dieser Liste nicht, und die dreispaltige Kachelwand mit fest verdrahteten Pixelbreiten auch nicht.

Der Teil, der außerhalb des Browsers spielt, ist noch simpler und trifft noch mehr Leute. Wer auf dem Telefon die Systemschrift hochstellt und in einer einzelnen App keine Wirkung sieht, hat nichts falsch gemacht: Diese App hat ihre Schriftgrößen in einer Einheit angegeben, die die Einstellung nicht kennt. Androids Dokumentation trennt das sauber — dp skaliert mit der Bildschirmdichte, sp zusätzlich mit der Schriftgrößen-Einstellung des Benutzers, und für Schriftgrößen ist sp deshalb ausdrücklich empfohlen. Wer px oder dp einträgt, schaltet die Bedienungshilfe für seine App still ab. Apples Handbuch formuliert denselben Umstand aus der Sicht des Benutzers, und man muss genau lesen: Die bevorzugte Textgröße gilt „für alle unterstützten Apps“. Das Wort „unterstützten“ ist die ganze Geschichte.

Bleibt der Punkt, an dem sich der häufigste Einwand von selbst erledigt. Nein, 1.4.12 verlangt nicht, dass man seine Zeilenabstände auf das Anderthalbfache stellt. Die Anmerkung sagt es ausdrücklich: Der Inhalt muss diese Werte nicht verwenden; verlangt ist nur, dass nichts verlorengeht, wenn jemand die vom Autor gesetzten Abstände überschreibt. Es ist ein Belastungstest, keine Gestaltungsvorschrift — und einer, den man in dreißig Sekunden selbst fahren kann, indem man die vier Werte versuchsweise über die Seite legt und schaut, was zerbricht.

Unterm Strich ist das hier die versöhnlichste Fehlerklasse der ganzen Barrierefreiheit. Niemand verlangt eine zweite Fassung der Seite, niemand verlangt ein Werkzeug, niemand verlangt eine Schulung. Verlangt wird, dass man aufhört, dem Browser ins Handwerk zu pfuschen: keine festen Höhen um Text, keine Schriftgrößen an der Fensterbreite, keine Pixel dort, wo eine Systemeinstellung wirken soll. Der Rest passiert von selbst — er passiert nämlich schon, solange man ihn lässt.

Die echte, verifizierte Lösung

1000 % faktenbasiert. Jeder Befehl ist real, jeder Pfad existiert. Schritt für Schritt:

  1. 1.

    Auf 200 Prozent stellen und wirklich hinsehen

    Der Test für 1.4.4 dauert eine Minute: im Browser auf 200 Prozent zoomen und die Seite von oben nach unten durchgehen. Gesucht wird nicht, ob es schön aussieht, sondern ob etwas verloren geht — abgeschnittene Zeilen, hinter fest stehenden Leisten verschwundene Knöpfe, Formularfelder, deren Beschriftung aus dem Kästchen fällt. Genau das sind die vom W3C benannten Fehlschläge F69 und F80.

  2. 2.

    Den Umbruch bei 400 Prozent prüfen

    Für 1.4.10 wird das Browserfenster auf 1280 CSS-Pixel Breite gebracht und dann auf 400 Prozent gezoomt. Danach steht ein Sichtfeld von umgerechnet 320 CSS-Pixeln zur Verfügung, und die Frage lautet nur noch: Muss man in zwei Richtungen scrollen, um eine Zeile zu lesen? Ausgenommen sind ausdrücklich Inhalte, die eine zweidimensionale Anordnung brauchen — Karten, Diagramme, Video, Spiele, Datentabellen. Ein Fließtextabsatz gehört nicht dazu.

  3. 3.

    Feste Maße dort entfernen, wo Text hineinläuft

    Der häufigste Grund für abgeschnittenen Text ist ein Behälter, der nicht mitwächst. Eine feste Höhe in Pixeln ist eine Wette darauf, dass der Text nie größer wird — und diese Wette verliert man gegen jeden, der zoomt. Statt zu deckeln, wird eine Mindesthöhe gesetzt und der Rest dem Inhalt überlassen:

    /* schneidet ab, sobald der Text wächst */
    .karte { height: 96px; overflow: hidden; }
    
    /* wächst mit */
    .karte { min-height: 6rem; }
    
  4. 4.

    Schriftgrößen nicht an die Fensterbreite koppeln

    Sichtfeld-Einheiten für Schriftgrößen sind der benannte Fehlschlag F94. Sie sehen im Entwurf gut aus, kürzen beim Zoomen aber genau das weg, was der Zoom hinzufügt: Das Sichtfeld schrumpft in CSS-Pixeln um denselben Faktor, um den vergrößert wird. Relative Einheiten, die auf der Schriftgröße aufsetzen, tun das nicht. Wo eine flüssige Größe wirklich gewünscht ist, muss ein schriftbezogener Anteil in der Rechnung stehen:

    /* wächst beim Zoomen nicht mit */
    h1 { font-size: 5vw; }
    
    /* wächst mit der Schrifteinstellung */
    h1 { font-size: 2.5rem; }
    h1 { font-size: clamp(1.75rem, 1rem + 2vw, 3rem); }
    
  5. 5.

    Den Belastungstest für Textabstände fahren

    Erfolgskriterium 1.4.12 verlangt nicht, dass diese Abstände verwendet werden — sondern dass die Seite sie aushält, wenn jemand sie überschreibt. Die vier Werte einmal versuchsweise in die Seite kippen und schauen, was zerbricht. Was danach noch vollständig lesbar und bedienbar ist, besteht die Prüfung:

    * {
      line-height: 1.5 !important;
      letter-spacing: 0.12em !important;
      word-spacing: 0.16em !important;
    }
    p { margin-bottom: 2em !important; }
    
  6. 6.

    In Android-Apps die richtige Einheit verwenden

    Androids Maßeinheiten unterscheiden sauber: dp skaliert mit der Bildschirmdichte, sp zusätzlich mit der eingestellten Schriftgröße des Benutzers. Für Schriftgrößen ist sp deshalb ausdrücklich empfohlen. Wer px oder dp einträgt, hat die Systemeinstellung für diese App still abgeschaltet — und der Benutzer sucht den Fehler bei sich:

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp" />
    
  7. 7.

    Am Gerät gegenprüfen, statt es am Rechner zu glauben

    Die ehrlichste Prüfung ist ein Telefon mit hochgestellter Systemschrift. Auf dem iPhone steht die Einstellung unter „Einstellungen“ > „Bedienungshilfen“ > „Anzeige & Textgröße“ > „Größerer Text“, mit einem Schieberegler und der Zusatzoption für noch größere Stufen; sie gilt laut Handbuch für alle unterstützten Apps. Genau dieses Wort ist der Prüfpunkt: Ändert sich in deiner App nichts, liegt es nicht am Gerät.

Häufige Fragen (FAQ)

?Wie viel muss sich Text vergrößern lassen?

Erfolgskriterium 1.4.4 der WCAG 2.2 nennt eine Zahl: „Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.“ Entscheidend sind die beiden Einschränkungen. „Without assistive technology“ heißt: Es zählt nicht, dass es irgendwo eine Bildschirmlupe gibt. Und „without loss of content or functionality“ heißt: Der Text darf nicht abgeschnitten, überdeckt oder unbedienbar werden. Das Verständnisdokument formuliert die Aufgabenteilung sauber: „The author's responsibility is to create web content that does not prevent the user agent from scaling the content effectively.“ Vergrößern kann der Browser selbst — man muss ihn nur lassen.

?Woher kommen die 320 Pixel aus dem Umbruch-Kriterium?

Aus dem Zoom. Erfolgskriterium 1.4.10 verlangt, dass Inhalt ohne Verlust von Information oder Funktionalität und ohne Scrollen in zwei Richtungen darstellbar ist — bei senkrecht scrollendem Inhalt in einer Breite von 320 CSS-Pixeln, bei waagerecht scrollendem in einer Höhe von 256. Die Anmerkung erklärt den Bezug: „320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom.“ Das Verständnisdokument stellt außerdem klar, was leicht falsch gerechnet wird: „It should be noted that 400% applies to the dimension, not the area.“ Vierhundert Prozent heißen also vierfache Breite und vierfache Höhe, nicht die vierfache Fläche.

?Warum wächst beim Zoomen alles außer der Schrift?

Meist, weil die Schriftgröße an die Fenstergröße gekoppelt wurde statt an die Schrifteinstellung. Das W3C führt das als eigenen benannten Fehlschlag: „F94: Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize text“. Der Effekt ist tückisch, weil er im Entwurf hübsch aussieht — die Überschrift passt sich der Fensterbreite an. Beim Zoomen schrumpft das Sichtfeld in CSS-Pixeln aber um genau denselben Faktor, um den vergrößert wird: Aus 1280 CSS-Pixeln werden bei 400 Prozent 320. Die in Sichtfeld-Einheiten gerechnete Schriftgröße wird also im selben Maß kleiner, wie der Zoom sie größer darstellt — und steht am Ende exakt so da wie vorher. Zwei weitere benannte Fehlschläge zum selben Kriterium sind F69 (Text, Bilder oder Bedienelemente werden bei 200 Prozent beschnitten, abgeschnitten oder verdeckt) und F80 (textbasierte Formularfelder wachsen nicht mit).

?In meiner App greift die Systemeinstellung für größere Schrift nicht. Warum?

Weil die Schriftgrößen in einer Einheit stehen, die die Einstellung nicht kennt. Androids Dokumentation der Maßeinheiten sagt zu sp: „Scale-independent Pixels - This is like the dp unit, but it is also scaled by the user's font size preference. It is recommend you use this unit when specifying font sizes, so they will be adjusted for both the screen density and the user's preference.“ Wer Schriftgrößen in dp oder px angibt, hat die Einstellung wirksam abgeschaltet. Auf dem iPhone ist die Formulierung im Handbuch genauso aufschlussreich: Man legt dort eine bevorzugte Textgröße „für alle unterstützten Apps“ fest, zu finden unter „Einstellungen“ > „Bedienungshilfen“ > „Anzeige & Textgröße“ > „Größerer Text“. Unterstützt eine App es nicht, passiert schlicht nichts — auf dem Gerät ist alles richtig eingestellt.

?Muss ich meine Zeilenabstände jetzt auf 1,5 stellen?

Nein, und dieser Irrtum steht ausdrücklich widerlegt im Standard. Erfolgskriterium 1.4.12 verlangt, dass kein Inhalt und keine Funktion verlorengeht, wenn Zeilenhöhe auf mindestens das 1,5-Fache der Schriftgröße, Absatzabstand auf das 2-Fache, Zeichenabstand auf das 0,12-Fache und Wortabstand auf das 0,16-Fache gesetzt werden. Die Anmerkung dazu lautet: „Content is not required to use these text spacing values. The requirement is to ensure that when a user overrides the authored text spacing, content or functionality is not lost.“ Es ist also keine Gestaltungsvorschrift, sondern ein Belastungstest: Die Seite muss es aushalten, wenn jemand die Abstände überschreibt.

Belege

Diese Seite ist gegen die folgenden Primärquellen geprüft – Hersteller, Standard oder Gesetzestext. Wer es nicht glaubt, muss es nicht: Da steht, wo es nachzulesen ist.

Zuletzt geprüft am . Dokumentation altert – ein Datum daneben ist der einzige ehrliche Umgang damit.

Auch zu finden unter

Verwandte Fehler