Dies WCAG-Kriterium verlangt, dass Inhalte so präsentiert werden können, dass bei Zoom bis zu 400 % keine horizontale und vertikale Scroll-Leiste gleichzeitig notwendig ist. Auf der Website darf kein Inhalt oder Funktionalität verloren gehen, wenn die Website auf einer Breite von 320 CSS‑Pixel dargestellt wird. Ausgenommen sind Inhalte, die zwingend zweidimensional bleiben müssen, wie z. B. Diagramme, spezielle Tabellen oder interaktive Karten.
Tipps und Infos zur Umsetzung des WCAG-Kriterium 1.4.10
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriterium 1.4.10:
- Responsive Layouts einsetzen: Verwende CSS‑Media‑Queries und flexible Grid- oder Flexbox‑Layouts, damit sich Inhalte bei schmaleren Viewports automatisch auf eine Spalte umordnen.
- Zoom bei 400 % testen: Stelle eine feste Breite im Browser von 1280 CSS‑Pixel ein und überprüfe dann im Browser bei einem Zoom von 400 %, ob Inhalte ohne seitliches Scrollen zugänglich bleiben.
- Vermeide fixe Breiten & Höhen: Nutze relative Einheiten (%, em, rem) und flexible Bilder/Textcontainer, damit die Inhalte sich an unterschiedliche Größen anpassen.
- Sticky Inhalte anpassen: Achte darauf, dass fest positionierte Elemente (z. B. Header, Footer, Werbung) bei schmaleren Viewports nicht den Inhalt verdecken – besser: Umschalten auf statische Positionen.
- Besondere Inhalte ausnehmen: Für zweidimensionale Inhalte wie Karten, komplexe Tabellen oder Diagramme ist zweidimensionales Scrollen zulässig – dokumentiere solche Ausnahmen bewusst.
- Einspaltige Lesbarkeit sicherstellen: Sorge dafür, dass lesbarer Text immer in einer einzigen Spalte dargestellt werden kann – ideal ist eine vertikale Leseführung auf mobilen Geräten.
- Testen mit realen Geräten: Teste mit echten mobilen Geräten oder simulierten Viewports, um sicherzustellen, dass das Reflow-Verhalten auch unter realen Nutzungsbedingungen stabil bleibt.
Bei Fragen beraten wir dich gerne. Mehr Infos zu diesem Kriterium findest du auch auf der folgenden englischen WAI-Seite zum WCAG-Kriterium 1.4.10 Umfluss (Reflow).