Mobile Shopping und Barrierefreiheit: Warum kleine Screens große Barrieren schaffen
Ein großer Teil des Online-Shoppings findet heute auf dem Smartphone statt. Genau dort entstehen aber oft Hürden, die auf einem großen Desktop-Monitor gar nicht auffallen: wenig Platz, kleine Finger statt präziser Maus, wechselnde Lichtverhältnisse und die Möglichkeit, Inhalte stark zu vergrößern.
Wer einen Online-Shop nur am Desktop testet, übersieht deshalb häufig genau die Probleme, an denen mobile Kund:innen tatsächlich scheitern. Ein Button, der auf dem Laptop gut funktioniert, kann auf dem Smartphone zu klein sein. Ein Overlay, das am Desktop ordentlich wirkt, kann bei Zoom den gesamten Bildschirm blockieren. Eine Navigation, die mit Maus funktioniert, kann per Tastatur oder Screenreader schwer bedienbar sein.
Digitale Barrierefreiheit bedeutet, digitale Angebote so zu gestalten, dass sie von möglichst vielen Menschen ohne zusätzliche Hürden genutzt werden können. Auf dem Smartphone wird das besonders konkret: Menschen mit Sehbehinderung, ältere Nutzer:innen, Menschen mit motorischen Einschränkungen und situativ eingeschränkte Personen treffen hier oft auf ähnliche Probleme. Wer unterwegs mit nur einer Hand einkauft oder bei Sonne auf ein Display schaut, merkt schnell, wie wichtig gute Lesbarkeit und einfache Bedienung sind.
Das Zoom-Problem: Wenn Elemente unerreichbar werden
Viele Menschen mit Sehbehinderung nutzen auf dem Smartphone Zoom oder größere Texteinstellungen, um Inhalte lesen zu können. Genau hier zeigt sich ein Problem, das in klassischen Desktop-Tests selten auffällt: Wenn ein Shop nicht für starke Vergrößerung ausgelegt ist, rutschen wichtige Bedienelemente aus dem sichtbaren Bereich oder werden von fixierten Leisten überdeckt.
Ein Warenkorb-Button, ein „Weiter“-Button im Checkout oder das Schließen-Symbol eines Overlays kann dadurch schwer oder gar nicht mehr erreichbar sein. Für Nutzer:innen bedeutet das: Sie sehen zwar einen Teil der Seite größer, kommen aber nicht mehr zuverlässig weiter.
Die WCAG adressiert dieses Problem unter anderem mit Kriterium 1.4.10 „Reflow“. Inhalte sollen bei einer Breite von 320 CSS-Pixeln nutzbar bleiben, ohne dass Nutzer:innen in zwei Richtungen scrollen müssen. 320 CSS-Pixel entsprechen laut W3C ungefähr einer Ausgangsbreite von 1280 CSS-Pixeln bei 400 Prozent Zoom.
Quelle: https://www.w3.org/TR/WCAG22/,
https://www.w3.org/WAI/WCAG22/Understanding/reflow
Praktisch heißt das: Ein Layout muss sich bei Zoom neu anordnen, statt starr zu bleiben und Inhalte seitlich abzuschneiden. Wird dieses Kriterium ignoriert, ist Zoomen zwar technisch möglich, führt aber schnell in eine Sackgasse.
Overlays: Schon schwierig, bei Zoom noch schwieriger
Overlays, also Pop-ups, Cookie-Banner, Newsletter-Fenster oder Filterebenen, gehören zu den anspruchsvollen Elementen in der Barrierefreiheit. Wird zusätzlich vergrößert, verschärft sich das Problem: Ein Overlay, das für die normale Bildschirmgröße positioniert wurde, kann bei starker Vergrößerung so verschoben werden, dass der Schließen-Button außerhalb des sichtbaren Bereichs landet.
Für sehende Nutzer:innen ohne Zoom ist das oft unsichtbar. Für andere bedeutet es: Der Shop lässt sich nicht mehr bedienen, bis die Seite neu geladen wird.
Dazu kommt die Tastaturbedienung. WCAG-Kriterium 2.1.2 „No Keyboard Trap“ verlangt, dass sich der Tastaturfokus aus jedem Bereich einer Seite wieder herausbewegen lässt. Das gilt auch für Overlays. Ein Overlay, das den Fokus gefangen hält oder gar nicht sinnvoll per Tastatur erreichbar ist, blockiert damit nicht nur Zoom-Nutzende, sondern auch alle, die ohne Maus navigieren.
Dropdowns und Auswahlmenüs: Ein Klassiker mobiler Bedienprobleme
Ein weiterer Bereich, der auf kleinen Screens häufig zum Problem wird, sind Dropdowns und Auswahlmenüs. Dazu gehören Größenwahl, Sortierung, Filter oder Hauptnavigation.
Baymard beschreibt native Dropdown-Menüs für die mobile Hauptnavigation als problematisch: Sie können Inhalte verdecken, sind schwer zu scannen und erschweren die Orientierung im mobilen Shop.
Quelle: https://baymard.com/blog/ecommerce-navigation-best-practice
Kommt dazu, dass ein Dropdown bei starkem Zoom nicht mehr vollständig sichtbar ist oder sich beim Öffnen ungünstig verschiebt, wird aus einem UX-Problem schnell ein echtes Zugangsproblem. Wer die gewünschte Option nicht sieht oder nicht erreichen kann, wählt möglicherweise die falsche Größe oder bricht den Kauf ab.
Besser sind oft klar sichtbare Auswahlmöglichkeiten, gut erreichbare Buttons, verständliche Filterbereiche und Alternativen, die auch per Tastatur und Screenreader funktionieren.
Kleine Klickflächen und fehlende Zoom-Gesten bei Produktbildern
Auch abseits von Menüs zeigt sich auf dem Smartphone ein wiederkehrendes Muster: zu kleine Klickflächen. Die WCAG 2.2 enthält mit Kriterium 2.5.8 „Target Size (Minimum)“ eine Mindestgröße von 24 × 24 CSS-Pixeln für Pointer-Ziele, sofern keine Ausnahme greift.
Quelle: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
Für Touch-Bedienung empfehlen UX-Quellen häufig noch größere Zielbereiche. Die Nielsen Norman Group empfiehlt, interaktive Elemente auf Touchscreens mindestens etwa 1 cm × 1 cm groß zu gestalten, um Fehler durch ungenaues Tippen zu reduzieren.
Quelle: https://www.nngroup.com/articles/touch-target-size
Im Alltag ist das leicht nachvollziehbar: Ein zu kleines Plus-Zeichen bei der Mengenwahl, ein winziges Herzsymbol oder ein enger Filter-Chip führt schnell zu Fehlklicks. Auf dem Smartphone passiert das noch schneller, weil Nutzer:innen mit dem Finger statt mit einer präzisen Maus klicken.
Ein verwandtes Problem betrifft Produktbilder. Baymard berichtet, dass bei einer Untersuchung von 50 umsatzstarken US-Mobile-Shops 40 Prozent keine Pinch-, Double-Tap- oder Swipe-Gesten für Produktbilder unterstützten. Gerade auf kleinen Screens sind solche Gesten wichtig, weil Nutzer:innen Details wie Material, Oberfläche oder Verarbeitung genauer ansehen möchten.
Quelle: https://baymard.com/blog/mobile-image-gestures
Warum das mehr Menschen betrifft, als man denkt
Mobile Barrieren betreffen nicht nur eine kleine Gruppe. Sie treffen Menschen mit Sehbehinderung, die dauerhaft zoomen. Sie treffen ältere Menschen, deren Sehkraft nachlässt. Sie treffen Menschen mit motorischen Einschränkungen, die auf ausreichend große Klickflächen angewiesen sind. Und sie treffen situativ jede Person, die unterwegs, in der Sonne oder mit nur einer freien Hand einkauft.
Auch rechtlich ist mobile Nutzung relevant. Dienstleistungen im elektronischen Geschäftsverkehr können unter das BFSG fallen. Die Bundesfachstelle Barrierefreiheit erklärt, dass solche Dienstleistungen über Websites und Apps angeboten werden können und dann bestimmte Anforderungen nach EN 301 549 erfüllen müssen.
Das bedeutet: Mobile Barrierefreiheit sollte nicht als Zusatz betrachtet werden. Wenn ein Online-Shop mobil schlecht bedienbar ist, betrifft das einen zentralen Teil der Nutzung.
Fazit
Kleine Screens verlangen keine kleineren Ansprüche an Barrierefreiheit. Im Gegenteil: Auf dem Smartphone werden viele Barrieren noch sichtbarer.
Zoom, Dropdowns, Overlays, kleine Klickflächen und schwer bedienbare Produktbilder gehören zu den Stellen, an denen mobile Kund:innen häufig hängen bleiben. Viele dieser Probleme fallen am Desktop kaum auf. Deshalb sollte mobile Barrierefreiheit gezielt getestet werden: mit Zoom, mit Tastatur, mit Screenreader und auf echten Geräten.
Wer seinen Shop mobil barriereärmer macht, verbessert nicht nur die Zugänglichkeit. Er macht den Einkauf für mehr Menschen verständlicher, sicherer und einfacher.
