Horizontales Scrollen auf Mobilgeräten

Silktide prüft, ob Ihre Seiten auf Mobiltelefonen seitwärts scrollen. Inhalte sollten in die Breite eines kleinen Bildschirms passen, sodass Besucher ausschließlich nach unten scrollen.

Warum das wichtig ist

Wenn eine Seite breiter als der Bildschirm ist, befindet sich ein Teil jeder Textzeile außerhalb des Sichtbereichs, und der Leser muss hin- und herziehen, um dem Inhalt zu folgen. Das ist für alle anstrengend und eine echte Barriere für Menschen mit Sehbeeinträchtigungen (die häufig zudem die Seite vergrößern) und Menschen mit motorischen Einschränkungen. Das WCAG-Erfolgskriterium 1.4.10 (Reflow, der ) fordert, dass Inhalte auf einen 320 Pixel breiten Bildschirm passen, ohne in zwei Dimensionen scrollen zu müssen.

Üblicherweise ist die Seite insgesamt in Ordnung und ein einzelnes Element verursacht das Überlaufen – eine breite Tabelle, ein Bild mit fester Breite, ein eingebettetes Video oder eine lange, nicht trennbare Zeichenfolge wie eine URL.

So beheben Sie das Problem

Öffnen Sie die Seite auf einem Telefon (oder verkleinern Sie Ihr Browserfenster auf 320 Pixel) und finden Sie heraus, was über den rechten Rand hinausragt.
Beheben Sie das betreffende Element mit responsivem :

/* Element mit fester Breite macht die Seite breiter als den Bildschirm */
img.hero { width: 600px; }

/* Behoben: skaliert herunter, um auf schmale Bildschirme zu passen */
img.hero { max-width: 100%; height: auto; }

Bei breiten Datentabellen lassen Sie die Tabelle in ihrem eigenen Container scrollen (overflow-x: auto), damit der Rest der Seite weiterhin auf den Bildschirm passt.
Inhalte, die tatsächlich ein zweidimensionales Layout benötigen, z. B. Karten und Diagramme, dürfen scrollen – wenn der Fund ausschließlich dies betrifft, können Sie ihn .

So testet Silktide dies

Die Seite wird als Mobilgerät geladen.
Es wird gemessen, wie weit die Seite über den rechten Bildschirmrand hinausragt. Überläufe unter 10 Pixeln werden als Rundungsfehler ignoriert.
Der Überlauf wird danach eingestuft, wie viele Geräte betroffen sind – von einem leichten Überlauf, der nur kleine Telefone betrifft (320 Pixel breit, z. B. ein iPhone 5), bis zu einem so großen Überlauf, dass auch große Telefone betroffen sind (414 Pixel breit, z. B. ein iPhone 7 Plus).

Fehlerbehebung

Die zugehörige Prüfung für mobiles Design

Diese Prüfung meldet horizontalen Überlauf auf Seiten, die ansonsten mobilfreundlich sind. Seiten, die überhaupt keinen Mobil-Support anstreben – kein , winziger Text, extremer Überlauf – werden stattdessen von Mobiles Zoomen und Scrollen gemeldet; die Lösung ist dort ein responsives Redesign.

Ich sehe kein Scrollen

Kleine Überläufe können auf größeren Telefonen unsichtbar sein. Testen Sie bei 320 Pixel Breite – in den Entwicklertools des Browsers können Sie die genaue Breite einstellen – und achten Sie auf alles, was den rechten Rand überschreitet.