Responsive · Prüfpunkt
Warum darf eine Website auf dem Handy nicht seitlich scrollen?
Eine Website darf auf dem Handy nicht seitlich scrollen, weil Besucher sonst Inhalte nur erreichen, wenn sie die Seite mit dem Finger hin- und herschieben. Viele geben vorher auf und verlassen die Seite. Die Barrierefreiheits-Richtlinie WCAG fordert deshalb in Regel 1.4.10, dass sich Inhalte der Bildschirmbreite anpassen. Der Prüfservice misst den Überstand in Pixeln auf vier Gerätegrößen und nennt, wo eindeutig erkennbar, das verursachende Element.
So entsteht seitliches Scrollen auf dem Handy
Ursache ist fast immer ein Element mit fester Breite: eine Tabelle mit vielen Spalten, ein Bild in Originalgröße oder ein Baustein aus einer Vorlage, die für große Bildschirme gebaut wurde. Am Schreibtisch-Monitor fällt das kaum auf, weil dort genug Platz ist. Auf einem Smartphone mit 390 Pixeln Breite ragt dasselbe Element über den Rand hinaus, und der Browser blendet einen waagrechten Scrollbalken ein. Besucher sehen dann nur einen Ausschnitt des Inhalts und müssen die Seite beim Lesen ständig verschieben. Ein einziges zu breites Element reicht aus, um die ganze Seite seitlich beweglich zu machen — deshalb lohnt es sich, genau dieses eine Element zu finden und zu beheben.
So misst der Prüfservice den Überstand
Die Prüfung lädt Ihre Seite in einem echten Browser auf vier Gerätegrößen: 390, 768, 1440 und 1920 Pixel Breite. Dann vergleicht sie die Breite des Inhalts mit der Breite des Bildschirms und versucht tatsächlich, die Seite zur Seite zu schieben. Erst wenn das gelingt, gilt der Befund — ein Überstand, den der Browser selbst abschneidet, erzeugt keinen Scrollbalken und wird darum auch nicht als solcher gemeldet. Jede Messung läuft zweimal; gemeldet wird nur, was beide Durchläufe übereinstimmend sehen. Der Bericht nennt den Überstand in Pixeln und, wo eindeutig erkennbar, das verursachende Element samt Bildschirmfoto. So weiß Ihre Agentur sofort, an welcher Stelle sie ansetzen muss.
Das fordert die Barrierefreiheits-Regel WCAG 1.4.10
Die Regel 1.4.10 („Reflow“) der Richtlinie WCAG verlangt, dass sich Inhalte der verfügbaren Breite anpassen, ohne dass Besucher in zwei Richtungen scrollen müssen. Der Gedanke dahinter: Menschen mit Sehbehinderung vergrößern Seiten stark; was dann seitlich hinausragt, geht für sie verloren. Dieselbe Anpassungsfähigkeit hilft jedem Besucher mit einem kleinen Bildschirm — also der Mehrheit, denn viele Websites werden heute vor allem am Handy gelesen. Ein bestandener Check ist damit zugleich ein Schritt zur Barrierefreiheit und zu einer besser bedienbaren Website. Die Prüfung ist eine technische Untersuchung; ob für Ihr Unternehmen gesetzliche Pflichten bestehen, klärt eine Rechtsberatung.
So gehen Sie es an
- Öffnen Sie Ihre Startseite auf dem eigenen Handy und wischen Sie nach links und rechts. Bewegt sich die Seite seitlich, gibt es einen Überstand.
- Prüfen Sie besonders Seiten mit Tabellen, großen Bildern oder eingebetteten Videos — dort entsteht der Überstand am häufigsten.
- Geben Sie Ihrer Agentur das im Prüfbericht genannte Element und die Pixelzahl weiter, statt sie selbst suchen zu lassen.
- Wiederholen Sie den Blick aufs Handy nach jeder größeren Änderung an der Website.
Häufige Fragen
Was ist ein horizontaler Scrollbalken?
Ein horizontaler Scrollbalken erscheint, wenn der Inhalt einer Seite breiter ist als der Bildschirm. Besucher müssen die Seite dann seitlich verschieben, um alles zu sehen. Auf dem Handy zeigt sich das als seitliches Verrutschen beim Wischen. Ursache ist meist ein einzelnes zu breites Element, etwa eine Tabelle oder ein Bild mit fester Größe.
Warum scrollt meine Website auf dem Handy seitlich?
Meist steckt ein Element mit fester Breite dahinter: eine breite Tabelle, ein nicht verkleinertes Bild oder ein Baustein aus einer Vorlage für große Bildschirme. Der Prüfbericht nennt den Überstand in Pixeln und, wo eindeutig, das verursachende Element — damit findet Ihre Agentur die Stelle ohne langes Suchen und kann gezielt eine anpassungsfähige Breite einstellen.
Ist seitliches Scrollen ein Verstoß gegen die Barrierefreiheit?
Die Barrierefreiheits-Richtlinie WCAG behandelt das Thema in Regel 1.4.10: Inhalte sollen sich der Bildschirmbreite anpassen, damit niemand in zwei Richtungen scrollen muss. Seitliches Scrollen auf dem Handy spricht gegen diese Regel. Ob daraus für Ihr Unternehmen eine rechtliche Pflicht folgt, hängt vom Einzelfall ab — die Prüfung ist eine technische Untersuchung, keine Rechtsberatung.
Weiter im Prüfbereich Responsive
- Wie groß müssen Schaltflächen auf einer Website mindestens sein?Mindestens 24 mal 24 Pixel, so verlangt es die Regel WCAG 2.5.8. Die Prüfung misst Schaltflächen und Links auf vier Gerätegrößen und nennt zu kleine.
- Warum wird Text auf einer Website abgeschnitten?Text wird abgeschnitten, wenn sein Kasten schmaler ist als der Inhalt. Die Prüfung findet solche Stellen auf vier Gerätegrößen und zeigt Beispiele.
- Wie viel Text gehört in den ersten Bildschirm einer Website?Mindestens 60 Wörter lesbarer Text sollten auf dem Handy ohne Scrollen sichtbar sein — so verstehen Besucher und Suchmaschinen sofort, worum es geht.
- Warum gehört die wichtigste Schaltfläche in den ersten Bildschirm?Besucher sollen ohne Scrollen handeln können. Die Prüfung sucht im ersten Handy-Bildschirm nach einer klar erkennbaren Schaltfläche zum nächsten Schritt.
Dieser Prüfpunkt gehört zum Prüfbereich Responsive — 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.