Barrierefreiheit · Prüfpunkt
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.
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.
Häufige Fragen
Warum sind genau 320 Pixel Breite der Maßstab?
Der Standard WCAG legt 320 CSS-Pixel als Prüfbreite fest. Das entspricht einem schmalen Smartphone — und zugleich der Ansicht, die entsteht, wenn ein sehbehinderter Mensch eine normale Computeransicht auf das Vierfache vergrößert. Wer diese Breite ohne seitliches Scrollen besteht, deckt beide Fälle ab.
Ist seitliches Scrollen auf Websites immer verboten?
Für normalen Text und Bedienelemente soll es bei schmaler Darstellung vermieden werden. Ausgenommen sind Inhalte, die ihrer Natur nach zweidimensional sind — große Datentabellen, Landkarten, Diagramme. Dort ist gezieltes Scrollen innerhalb des Elements zulässig, am besten mit sichtbarem Hinweis, dass es mehr zu sehen gibt.
Wie testet der Prüfservice die mobile Darstellung?
Der Messkern rendert die Seite in einem echten Browser in mehreren Bildschirmbreiten und misst pixelgenau, ob horizontaler Überlauf entsteht. Nur nachgemessene Scrollbarkeit zählt; bei schwankenden Ergebnissen misst die Prüfung doppelt und empfiehlt die Verifikation am echten Gerät. Befunde werden mit Bildschirmfotos belegt.
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.