Prüfpunkt 1.4.10Stufe AATextgröße, Zoom und Ausrichtung
Wie bleibt eine Website am Handy ohne seitliches Scrollen lesbar?
Eine Website bleibt ohne seitliches Scrollen lesbar, wenn ihre Inhalte bei schmaler Darstellung — der Standard setzt 320 Pixel Breite an — automatisch in eine Spalte umbrechen. Diese Breite entspricht einem schmalen Handy oder einer stark vergrößerten Ansicht am Computer. Wer dann für jede Zeile hin- und herschieben muss, verliert den Faden beim Lesen.
Umfluss: Inhalte ordnen sich der Breite unter
Umfluss bedeutet: Wird der Anzeigebereich schmaler, ordnen sich die Inhalte neu an — nebeneinanderliegende Spalten rutschen untereinander, Bilder verkleinern sich, Zeilen brechen früher um. Das betrifft zwei Gruppen gleichzeitig. Erstens Handy-Nutzer, also für viele Websites die Mehrheit der Besucher. Zweitens sehbehinderte Menschen am Computer, die Seiten stark vergrößern: Bei starker Vergrößerung entspricht der sichtbare Ausschnitt genau so einer schmalen Darstellung. Bricht die Seite dann nicht um, müssen sie für jede einzelne Zeile nach rechts und wieder zurück schieben — Lesen wird zur Geduldsprobe. Typische Verursacher sind Tabellen mit fester Breite, zu große eingebettete Karten und Bilder mit festen Pixelmaßen.
So misst unser Messkern das seitliche Scrollen
Unser Messkern rendert Ihre Seite in einem echten Browser in mehreren Bildschirmbreiten — darunter die schmale 320-Pixel-Ansicht — und misst, ob ein horizontaler Scrollbalken entsteht und um wie viele Pixel der Inhalt überläuft. Nur echte, nachgemessene Scrollbarkeit zählt als Befund; um Zufallstreffer durch Ladeverzögerungen auszuschließen, misst die Prüfung im Zweifel doppelt und weist schwankende Ergebnisse ehrlich als „am echten Gerät verifizieren“ aus. Jeder Befund nennt die betroffene Bildschirmbreite und wird mit einem Bildschirmfoto belegt. Die Ergebnisse fließen sowohl in den Prüfbereich Barrierefreiheit als auch in den Prüfbereich Responsive ein — es ist dieselbe Messung.
Beispiele
Feste Breite auf dem Handy
.inhalt { width: 1100px; }
.tabelle { min-width: 900px; }.inhalt { max-width: 1100px; width: 100%; }
.tabelle-huelle { overflow-x: auto; }Bei 320 Pixel Breite (400 Prozent Zoom) fließt der Inhalt um; nur Tabellen und Karten dürfen einen eigenen Scrollbereich haben.
So gehen Sie es an
- Verkleinern Sie Ihr Browserfenster am Computer schrittweise bis zur Schmalspalte — erscheint ein horizontaler Scrollbalken, gibt es ein Problem.
- Prüfen Sie Tabellen zuerst: Große Datentabellen brauchen am Handy eine eigene Lösung, etwa scrollbare Container mit sichtbarem Hinweis.
- Bitten Sie Ihre Agentur, feste Pixelbreiten bei Bildern und Containern durch anpassungsfähige Angaben zu ersetzen.
- Testen Sie eingebettete Inhalte wie Karten und Videos in der schmalen Ansicht — Fremdbausteine sprengen den Rahmen am häufigsten.
- Kontrollieren Sie nach jedem größeren Inhalts-Update die Handy-Ansicht, bevor die Seite live geht.
Weiter im Prüfbereich Barrierefreiheit
- Welchen Kontrast brauchen Schaltflächen und Eingabefelder auf Websites?Bedienelemente und aussagekräftige Grafiken brauchen mindestens 3:1 Kontrast zur Umgebung — sonst findet ein sehschwacher Besucher das Eingabefeld nicht.
- Warum müssen sich Zeilenabstand und Zeichenabstand auf Websites anpassen lassen?Menschen mit Leseschwäche weiten Textabstände per Hilfsmittel. Die Website muss das verkraften, ohne Text abzuschneiden oder Abstände zu blockieren.
- Wie müssen Tooltips und Einblendungen auf Websites bedienbar sein?Inhalte, die bei Mauskontakt oder Tastaturfokus erscheinen, müssen wegschaltbar, berührbar und beständig sein — sonst verdecken sie, was man lesen will.
- Warum muss eine Website ohne Maus bedienbar sein?Jede Funktion einer Website muss per Tastatur erreichbar sein. Was WCAG-Kriterium 2.1.1 verlangt und wie unser Prüfservice es mit echten Tastendrücken misst.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Heptagon, Public Domain
