Mobile Barrierefreiheit: Kleine Displays, vollständige Abläufe

Mit Inhalt und Vergrößerung beginnen

Das WCAG-Kriterium Reflow verlangt für vertikal scrollende Inhalte grundsätzlich eine Darstellung bei einer Breite von 320 CSS-Pixeln, ohne Informations- oder Funktionsverlust und ohne Scrollen in zwei Richtungen. Ausnahmen betreffen Inhalte, die eine zweidimensionale Darstellung für Nutzung oder Bedeutung benötigen, etwa bestimmte Tabellen oder Karten. Eine einzelne Ausnahme rechtfertigt kein horizontales Scrollen für den gesamten Fließtext.

Die schmale Ansicht ist auch für Menschen relevant, die einen Desktop-Browser stark vergrößern. Prüfe deshalb sowohl einen schmalen Viewport als auch Browser-Zoom. Menüs, Meldungen und fixierte Leisten dürfen den Weg zum Inhalt nicht blockieren.

Touch-Ziele und Abstände zusammen bewerten

WCAG 2.2 AA nennt für Zeigereingaben grundsätzlich mindestens 24 × 24 CSS-Pixel. Das Kriterium enthält unter anderem Ausnahmen für ausreichende Abstände, gleichwertige Alternativen und Links im Fließtext. Es schreibt nicht pauschal 44 × 44 Pixel für jedes Element vor. Größere Flächen können trotzdem die Bedienung erleichtern und sind für wichtige Aktionen oft sinnvoll.

Prüfe besonders dicht benachbarte Symbole, kleine Schließen-Buttons und Mengenänderungen im Warenkorb. Entscheidend ist die tatsächlich auslösbare Fläche, nicht nur die sichtbare Größe des Symbols. Teste auch mit weniger präzisen Bewegungen.

Gesten brauchen passende Alternativen

Wenn eine Funktion eine Mehrpunkt- oder pfadbasierte Geste verwendet, benötigt sie nach WCAG grundsätzlich eine Bedienmöglichkeit mit einem einzelnen Zeiger ohne solche Geste, soweit die Geste nicht wesentlich ist. Eine Bildergalerie kann zusätzlich Vor- und Zurück-Buttons anbieten. Für Ziehbewegungen gilt in WCAG 2.2 AA ein eigenes Kriterium: Eine geeignete Alternative ohne Ziehen muss vorhanden sein, sofern keine Ausnahme greift. Ein sichtbarer Schieberegler allein belegt diese Alternative noch nicht.

Hoch- und Querformat berücksichtigen

Beschränke Inhalte und Bedienung nicht ohne wesentlichen Grund auf nur eine Ausrichtung. Manche Menschen befestigen ihr Gerät an einer Halterung und können es nicht spontan drehen. Teste beide Formate und öffne dabei die Bildschirmtastatur. Ein Formular, das im Querformat hinter einer festen Fußleiste verschwindet, kann trotz guter Startansicht unbrauchbar werden. Kontrolliere auch Dialoge mit längeren Texten und Fehlermeldungen.

Eine mobile Aufgabe vollständig prüfen

• Wähle eine zentrale Aufgabe, etwa eine Anfrage oder eine Bestellung, und lege sichere Testdaten bereit.
• Starte in schmaler Ansicht und kontrolliere Textfluss, Navigation und alle eingeblendeten Hinweise.
• Bediene Auswahlfelder und Buttons per Touch; probiere Alternativen zu Wischen und Ziehen aus.
• Wechsle die Ausrichtung und öffne bei jedem Eingabeschritt die Bildschirmtastatur.
• Wiederhole die Aufgabe mit dem Screenreader des Geräts und dokumentiere fehlende Namen, unklare Zustände und blockierte Aktionen.

Gerätetest und Simulation verbinden

Die Geräteansicht im Desktop-Browser hilft, Breiten und Layoutänderungen reproduzierbar zu prüfen. Sie bildet den echten Touchscreen, die Bildschirmtastatur und das mobile Hilfsmittel jedoch nicht vollständig ab. Halte Gerät, Browser, Ausrichtung und Prüfschritte fest. Korrigiere wiederkehrende Probleme in der gemeinsamen Komponente und wiederhole denselben Ablauf nach der Änderung auf dem verwendeten Gerät.