- Stufe
- AA
- Seit
- WCAG 2.1
- Einträge
- 10 / 193
1.4.10 Umbruch
Eine Seite muss in einer 320 CSS-Pixel breiten Ansicht funktionieren, ohne dass man zugleich nach unten und zur Seite scrollen muss.
/ Was es verlangt
Wer den Bildschirm vergrößert, braucht eine Seite, die sich neu anordnet und nicht bloß wächst. Bei 400 Prozent Zoom verhält sich ein 1280 Pixel breites Desktopfenster wie eine Ansicht mit 320 CSS-Pixeln, der Breite eines kleinen Telefons. Behält das Layout seine Desktopbreite, läuft jede Zeile aus dem Bildschirm und muss durch Scrollen nach rechts und zurück gelesen werden, Satz für Satz. Inhalt geht auch verloren, wenn breite Blöcke abgeschnitten werden oder fixierte Leisten den größten Teil der Ansicht verdecken.
Das Kriterium verlangt, dass Inhalt ohne Verlust von Information oder Funktionalität und ohne Scrollen in zwei Dimensionen dargestellt werden kann: bei 320 CSS-Pixeln Breite für vertikal scrollende Seiten und bei 256 CSS-Pixeln Höhe für horizontal scrollenden Inhalt. Ausgenommen sind Teile, die für Nutzung oder Bedeutung ein zweidimensionales Layout brauchen: Karten, Diagramme, Video, Spiele, Datentabellen und Oberflächen, bei denen eine Werkzeugleiste beim Bearbeiten sichtbar bleiben muss. Diese Teile dürfen in beide Richtungen scrollen, die Seite um sie herum nicht.
/ Woran Seiten scheitern
- Das Layout hat eine feste Breite in Pixeln, sodass die Seite bei 400 Prozent Zoom oder auf einem schmalen Bildschirm seitlich scrollt.
- Der Seite fehlt das Viewport-Meta-Tag, sodass mobile Browser sie in Desktopbreite rendern und verkleinern.
- Eine lange URL, ein breites Bild oder ein vorformatierter Block drückt die Seite über die Breite der Ansicht hinaus.
- Inhalt, der nicht mehr passt, wird durch overflow: hidden abgeschnitten, sodass Text oder Bedienelemente verschwinden, statt umzubrechen.
- Ein fixierter Kopfbereich, ein Cookie-Banner und ein Chat-Widget verdecken zusammen den größten Teil einer 320 Pixel breiten Ansicht.
/ So prüfen Sie es selbst
- Stellen Sie das Browserfenster auf 1280 Pixel Breite und zoomen Sie mit Strg und Plus auf 400 Prozent. Scrollen Sie die ganze Seite hinunter und achten Sie auf eine horizontale Bildlaufleiste.
- Oder öffnen Sie die Entwicklerwerkzeuge, wechseln Sie in den responsiven Modus und stellen Sie die Ansicht auf 320 mal 256 Pixel.
- Öffnen Sie in dieser Größe jedes Menü, jeden Dialog, jedes Formular und jedes Akkordeon und prüfen Sie, dass nichts abgeschnitten ist und jedes Bedienelement erreichbar bleibt.
- Scrollt etwas seitlich, entscheiden Sie, ob es ein ausgenommener Teil ist, etwa eine Datentabelle oder eine Karte. Scrollt die ganze Seite mit, ist es keiner.
- Sehen Sie in den Quelltext und vergewissern Sie sich, dass im head ein Viewport-Meta-Tag steht.
/ So beheben Sie es
- Ergänzen Sie im head meta name="viewport" content="width=device-width, initial-scale=1".
- Ersetzen Sie feste width-Werte durch max-width und Prozentangaben und bauen Sie Spalten mit flex-wrap: wrap oder einem Grid mit auto-fit und minmax().
- Setzen Sie max-width: 100% für img, video und iframe und overflow-wrap: anywhere für Text, der lange Zeichenketten enthalten kann.
- Stellen Sie breite Tabellen und Codeblöcke in einen Container mit overflow-x: auto, damit sie in ihrem eigenen Kasten scrollen.
- Schalten Sie fixierte Kopfbereiche und Banner in schmalen Ansichten auf position: static oder verringern Sie ihre Höhe.
/ Was unser Scanner prüft
Der statische Durchlauf prüft hier eines: ob der Quelltext der Seite ein Viewport-Meta-Tag enthält, und meldet die Seite, wenn es fehlt. Er lädt die Seite nicht mit 320 Pixeln Breite, sodass seitliches Scrollen, abgeschnittener Inhalt und zu große fixierte Leisten von dieser Prüfung nicht erkannt werden. Ein fehlendes Tag ist ein starker Hinweis auf ein Layout, das auf dem Telefon nicht umbricht, aber keine Messung davon.
/ Wer es verletzt, nach unseren eigenen Messungen
| Stelle | Sektor | Vorkommen | Wert |
|---|---|---|---|
| Federal Aviation Administration | transport · US | 1 | 14 |
| Gorzów Wielkopolski | city · PL | 1 | 66 |
| Kielce | city · PL | 1 | 71 |
| Miami-Dade County | government · US | 1 | 20 |
| National Weather Service | government · US | 1 | 34 |
| New York Public Library | culture · US | 1 | 23 |
| Sejm RP | government · PL | 1 | 9 |
| Social Security Administration | government · US | 1 | - |
| Sąd Najwyższy | government · PL | 1 | 14 |
| Zarząd Transportu Miejskiego Warszawa | transport · PL | 1 | 77 |
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
Wie teste ich den Umbruch bei 400 Prozent Zoom?
Stellen Sie das Browserfenster auf 1280 CSS-Pixel Breite und zoomen Sie dann auf 400 Prozent. Die Ansicht ist nun 320 CSS-Pixel breit, also so groß, wie das Kriterium es nennt. Gehen Sie die Seite von oben nach unten durch und öffnen Sie dabei Menüs und Formulare. Abgesehen von ausgenommenen Teilen wie Datentabellen und Karten sollte nichts horizontales Scrollen erfordern und nichts verschwinden.
Warum nennt WCAG 320 CSS-Pixel?
Weil 320 CSS-Pixel von einer 1280 Pixel breiten Ansicht bei 400 Prozent Zoom übrig bleiben und zugleich der Breite eines kleinen, aufrecht gehaltenen Telefons entsprechen. Dieselbe Überlegung ergibt 256 CSS-Pixel, also eine 1024 Pixel hohe Ansicht bei 400 Prozent, für horizontal scrollenden Inhalt. Ein responsives Layout, das auf einem kleinen Telefon funktioniert, erfüllt in der Regel beides.
Müssen Datentabellen umbrechen?
Nein. Das Kriterium nennt Datentabellen als Inhalt, der ein zweidimensionales Layout braucht, eine Tabelle darf also horizontal scrollen. Die Ausnahme gilt für die Tabelle, nicht für die Seite: Stellen Sie sie in einen Container mit eigener Bildlaufleiste, damit der Text ringsum weiterhin in die Ansicht passt. Der Inhalt jeder Zelle sollte weiterhin umbrechen, und eine reine Layouttabelle ist nicht ausgenommen.