Mobiles Zoomen und Scrollen

Silktide prüft, ob Ihre Seiten auf kleinen Bildschirmen funktionieren, ohne dass Besucher hineinzoomen und die Seite zum Lesen in zwei Richtungen hin- und herschieben müssen. Seiten, die hier durchfallen, wurden in der Regel überhaupt nicht für mobile Endgeräte gestaltet.

Warum das wichtig ist

Eine nur für den Desktop gestaltete Seite auf dem Telefon zu lesen bedeutet, in eine Textspalte hineinzuzoomen und dann für jede Zeile sowohl horizontal als auch vertikal zu scrollen – unangenehm für alle und für viele Menschen mit Sehbeeinträchtigungen oder motorischen Einschränkungen unmöglich. Mobile Geräte machen inzwischen den Großteil des Web-Traffics aus; eine solche Seite lässt also die Mehrheit ihrer Besucher im Stich und wird von Suchmaschinen entsprechend herabgestuft. Das WCAG-Erfolgskriterium 1.4.10 (Umfluss/Reflow, der ) verlangt, dass Inhalte auf eine 320 Pixel breite Anzeige ohne zweidimensionales Scrollen umfließen.

So beheben Sie das Problem

Verwenden Sie Responsive Webdesign, damit die Seite auf schmalen Bildschirmen in eine einzelne Spalte umfließt. Moderne -Layouts (Media Queries, Flexbox, Grid) machen dies zum Standard; die meisten Website-Themes unterstützen das von Haus aus.
Fügen Sie in Ihre Seitenvorlage ein korrektes -Tag ein:

<!-- Weist mobile Browser an, in der Breite des Geräts zu rendern -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Testen Sie die Seite bei 320 Pixel Breite (die kleinste gängige Telefonbreite) und prüfen Sie, dass nichts horizontales Scrollen erzwingt – breite Tabellen, Bilder mit fester Breite und lange, nicht trennbare Zeichenfolgen sind häufige Übeltäter.

Wenn eine Seite praktisch nicht responsiv gemacht werden kann, können Sie den Befund .

So testet Silktide dies

Lädt die Seite auf einem Mobilgerät.
Bewertet, ob die Seite für Mobilgeräte gestaltet wirkt. Eine Seite fällt durch, wenn eine der folgenden Bedingungen zutrifft:
- Sie hat kein verwendbares Viewport-Tag oder der Viewport deklariert eine feste Breite von über 480 Pixeln.
- Mehr als 35 % ihres Textes wird zu klein zum Lesen gerendert (unter 10 Pixel).
- Sie lässt sich horizontal um mehr als 40 % der Bildschirmbreite scrollen.
- Der Browser muss auf unter 60 % herauszoomen, damit die Seite auf den Bildschirm passt.
Meldet die Seite beim Durchfallen – einmal pro Seite.

Fehlerbehebung

Die zugehörige Prüfung für horizontales Scrollen

Mobiles horizontales Scrollen meldet kleinere Mengen an horizontalem Überlauf auf Seiten, die ansonsten mobilfreundlich sind. Diese Prüfung erfasst den Extremfall, in dem die Seite überhaupt nicht versucht, Mobilgeräte zu unterstützen; die Lösung ist dann ein responsives Redesign statt das Anpassen eines einzelnen überlaufenden Elements.

Teile meiner Seite benötigen tatsächlich ein zweidimensionales Layout

Die WCAG erlauben Ausnahmen für Inhalte, die für die Nutzbarkeit ein zweidimensionales Layout erfordern, z. B. Karten, Datentabellen und Diagramme. Der umgebende Seiteninhalt sollte dennoch umfließen; handelt es sich bei einer markierten Seite um eine solche Ausnahme, genehmigen Sie den Befund.