- Stufe
- AA
- Seit
- WCAG 2.0
- Einträge
- 11 / 193
1.4.4 Textgröße ändern
Besucher müssen Text auf das Doppelte vergrößern können, ohne dass Inhalte oder Funktionen verloren gehen.
/ Was es verlangt
Menschen mit Sehbehinderung vergrößern Text, die meisten schlicht mit dem Zoom des Browsers. Die Seite muss das bis 200 Prozent aushalten: Der gesamte Text ist noch da, nichts ist abgeschnitten oder überlappt, jede Schaltfläche und jedes Formular bleibt bedienbar. Sperrt eine Website den Zoom auf dem Telefon oder verschlucken Kästen mit fester Höhe die vergrößerten Zeilen, bleibt die Wahl zwischen Text, der zu klein zum Lesen ist, und einer Seite, die nicht mehr funktioniert.
Das Kriterium sagt, dass Text ohne assistive Technik bis auf 200 Prozent vergrößert werden kann, ohne dass Inhalt oder Funktionalität verloren gehen. Ausgenommen sind Untertitel und Bilder von Text. Es verlangt nicht, dass das Layout einspaltig bleibt: Horizontales Scrollen bei 200 Prozent ist hier kein Fehler, schmale Ansichten regelt 1.4.10. Der Browserzoom, der die ganze Seite skaliert, ist ein anerkannter Weg, das Kriterium zu erfüllen, sofern die Seite ihn weder verhindert noch daran zerbricht.
/ Woran Seiten scheitern
- Das Viewport-Meta-Tag enthält user-scalable=no oder ein maximum-scale unter 2, was das Zoomen mit zwei Fingern auf Telefonen verhindert.
- Text steht in Containern mit fester Höhe und overflow: hidden, sodass vergrößerte Zeilen abgeschnitten werden.
- Schriftgrößen sind allein in Viewport-Einheiten angegeben, etwa font-size: 2vw, sodass der Text beim Zoomen der Seite nicht mitwächst.
- Vergrößerter Text überlappt benachbarten Inhalt, weil Elemente absolut mit Pixelabständen positioniert sind.
- Text in Formularfeldern und auf Schaltflächen bleibt gleich groß, während der Text ringsum wächst.
/ So prüfen Sie es selbst
- Drücken Sie im Desktop-Browser Strg und Plus (Cmd und Plus am Mac), bis der Zoom 200 Prozent anzeigt. Lesen Sie jeden Abschnitt und bedienen Sie jedes Element.
- Schalten Sie in Firefox Ansicht, Zoom, Nur Text zoomen ein und wiederholen Sie die Prüfung. Dann wächst allein der Text, und Kästen mit fester Höhe fallen auf.
- Zoomen Sie auf dem Telefon mit zwei Fingern. Reagiert die Seite nicht, öffnen Sie den Quelltext und lesen Sie den Inhalt des Viewport-Meta-Tags.
- Achten Sie auf abgeschnittene Zeilen, überlappende Blöcke, Text hinter anderen Elementen und Schaltflächen, die außer Reichweite geraten sind.
/ So beheben Sie es
- Schreiben Sie das Tag als meta name="viewport" content="width=device-width, initial-scale=1" und löschen Sie user-scalable=no und maximum-scale.
- Geben Sie font-size in rem oder em an. Wenn Sie Viewport-Einheiten nutzen, kombinieren Sie sie mit einem rem-Wert, zum Beispiel clamp(1rem, 0.8rem + 1vw, 1.5rem).
- Ersetzen Sie height durch min-height bei allem, was Text enthält, und lassen Sie Container wachsen.
- Verwenden Sie eine line-height ohne Einheit, etwa 1.5, damit der Zeilenabstand mit dem Text skaliert.
- Geben Sie Formularelementen font: inherit, damit ihr Text der Größe der Seite folgt.
/ Was unser Scanner prüft
Der statische Durchlauf liest das Viewport-Meta-Tag im Quelltext der Seite und meldet es, wenn der Inhalt user-scalable=no oder maximum-scale=1 enthält. Das ist die gesamte Prüfung auf dem Server: Die Seite wird nicht gezoomt, sodass Text, der bei 200 Prozent abgeschnitten wird, überlappt oder verloren geht, unbemerkt bleibt, ebenso Text in Viewport-Einheiten. Solche Fehler finden Sie nur, indem Sie die Seite von Hand zoomen.
/ Wer es verletzt, nach unseren eigenen Messungen
| Stelle | Sektor | Vorkommen | Wert |
|---|---|---|---|
| Bundesministerium des Innern | government · DE | 1 | 10 |
| Deutsche Nationalbibliothek | culture · DE | 1 | 23 |
| Deutsche Rentenversicherung | government · DE | 1 | 5 |
| Los Angeles County | government · US | 1 | 9 |
| Narodowy Instytut Dziedzictwa | culture · PL | 1 | 6 |
| PKP Intercity | transport · PL | 1 | 2 |
| Polski Instytut Sztuki Filmowej | culture · PL | 1 | 7 |
| Prezydent RP | government · PL | 1 | 15 |
| Statistisches Bundesamt | government · DE | 1 | 9 |
| Uniwersytet Jagielloński | education · PL | 1 | 1 |
| Warszawa | city · PL | 1 | 20 |
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Verstößt user-scalable=no gegen WCAG?
Es gilt als Verstoß gegen 1.4.4, wenn es verhindert, dass Besucher Text auf 200 Prozent vergrößern, und genau das bewirkt es in mobilen Browsern, die die Angabe beachten. Dasselbe gilt für einen maximum-scale-Wert unter 2. Manche Browser ignorieren beide Angaben, doch darauf kann sich Konformität nicht stützen. Entfernen Sie sie: width=device-width und initial-scale=1 genügen dem Viewport-Tag.
Reicht der Browserzoom, um 1.4.4 zu erfüllen?
Ja, solange die Seite bei 200 Prozent Zoom funktioniert. Das Kriterium verlangt, dass Text ohne assistive Technik vergrößert werden kann, und der Zoom ist eine Funktion des Browsers, kein Hilfsmittel. Eine Website braucht keine eigenen Schaltflächen für die Schriftgröße. Sie darf den Zoom aber weder sperren noch Inhalte und Funktionen verlieren, wenn jemand ihn nutzt.
Was ist der Unterschied zwischen 1.4.4 Textgröße ändern und 1.4.10 Umbruch?
1.4.4 betrifft die Größe: Auf 200 Prozent vergrößerter Text muss vollständig und bedienbar bleiben, seitliches Scrollen wird hingenommen. 1.4.10 betrifft das Layout: Bei einer Breite von 320 CSS-Pixeln, was 400 Prozent Zoom in einem 1280 Pixel breiten Fenster entspricht, muss der Inhalt ohne Scrollen in zwei Richtungen passen. Eine Seite kann das erste erfüllen und das zweite trotzdem verletzen.