Mobile · Barrierefreiheit · WCAG 2.1 AA
Mobile Barrierefreiheit: Die unterschätzte Hälfte der WCAG-Prüfung
Geprüft wird am großen Monitor, gekauft wird am Smartphone. Viele Barrieren zeigen sich erst auf kleinen Screens: Touch-Targets, die kein Daumen trifft, Layouts, die beim Zoomen zerbrechen, Slider, die nur auf Wischen reagieren. Dieser Artikel zeigt die wichtigsten mobilen WCAG-Anforderungen, eine 10-Minuten-Screenreader-Anleitung und die typischen Fehler in Shop-Templates.
Stand: Juli 2026 · Automatisierte technische Analyse, keine Rechtsberatung
Warum Mobile ein eigenes Prüf-Thema ist
Die WCAG 2.1 gelten geräteunabhängig — das BFSG (über die EN 301 549) unterscheidet nicht zwischen Desktop- und Mobil-Ansicht. Trotzdem entstehen auf kleinen Screens eigene Fehlerklassen: Platzmangel verführt zu winzigen Bedienelementen und verschwindenden Labels, Touch ersetzt die präzise Maus, und Gesten-Interaktionen haben oft keine sichtbare Alternative. Genau dafür wurden mit WCAG 2.1 Kriterien wie Reflow (1.4.10) und Zeigergesten-Alternativen (2.5.1) eingeführt.
Dazu kommt die Nutzungsrealität: Wer mobil einkauft, tut das häufig einhändig, unterwegs, bei Sonnenlicht — Bedingungen, unter denen gute Kontraste und großzügige Touch-Targets allen Nutzern helfen, nicht nur Menschen mit dauerhaften Einschränkungen.
Die drei mobilen Kern-Anforderungen
1. Touch-Targets: mindestens 24×24, besser 44×44 Pixel
WCAG 2.5.8 verlangt für Bedienelemente eine Mindestgröße von 24×24 CSS-Pixeln; bewährte Praxis sind 44×44 px. Kritische Kandidaten im Shop: Mengen-Stepper (+/−), Schließen-Kreuze von Modals und Cookie-Bannern, Filter-Chips und eng gesetzte Footer-Links.
2. Reflow und Zoom: Inhalt darf nicht zerbrechen
Bei 400 % Zoom bzw. schmalem Viewport darf Inhalt weder abgeschnitten werden noch horizontales Scrollen erzwingen (WCAG 1.4.4 / 1.4.10). Der Test dauert Sekunden: Browser auf 400 % zoomen und die wichtigsten Seiten durchscrollen — Produktseite, Warenkorb, Checkout.
3. Gesten brauchen Alternativen
Funktionen, die per Wischen oder Mehrfinger-Geste bedient werden (Galerien, Karussells, Karten), brauchen eine Alternative mit einfachem Tippen — sichtbare Vor/Zurück-Buttons statt reiner Swipe-Interaktion (WCAG 2.5.1). Das hilft auch Nutzern von Schaltersteuerungen und Sprachbedienung.
Screenreader-Test in 10 Minuten: VoiceOver und TalkBack
Jedes Smartphone hat einen vollwertigen Screenreader eingebaut — der ehrlichste Mobiltest kostet nichts:
- iPhone (VoiceOver): Einstellungen → Bedienungshilfen → VoiceOver. Mit Rechts-/Links-Wischen durch die Elemente navigieren, Doppeltipp aktiviert. Tipp: Vorher den Bedienungshilfen-Kurzbefehl (Dreifachklick Seitentaste) einrichten, um wieder herauszukommen.
- Android (TalkBack): Einstellungen → Bedienungshilfen → TalkBack. Gleiche Grundgesten: Wischen navigiert, Doppeltipp aktiviert.
- Der Kern-Test: Augen zu (oder Bildschirm abdecken) und versuchen, ein Produkt zu finden und in den Warenkorb zu legen. Wird jedes Bedienelement mit sinnvollem Namen angesagt? Erfahren Sie, ob das Menü geöffnet ist? Kommen Sie ohne Sehen bis zur Kasse?
Typische Mobile-Fehler in Shop-Templates
| Fehler | WCAG | Details |
|---|---|---|
| Zu kleine Touch-Targets | 2.5.8 | Icon-Buttons, Mengen-Stepper und Filter-Chips unter 24×24 CSS-Pixel — für Menschen mit motorischen Einschränkungen (und große Daumen) kaum treffbar. Empfohlen: 44×44 px. |
| Abgeschnittener Inhalt bei Zoom | 1.4.4 / 1.4.10 | Bei 400 % Zoom oder schmalem Viewport wird Text abgeschnitten oder erzwingt horizontales Scrollen — häufig durch feste Pixel-Breiten und Sticky-Elemente. |
| Slider ohne Alternative | 2.1.1 / 2.5.1 | Produktgalerien und Karussells, die nur auf Wisch-Gesten reagieren — ohne sichtbare Vor/Zurück-Buttons bleiben sie für viele Nutzer unbedienbar. |
| Verschwindende Labels im mobilen Checkout | 1.3.1 / 3.3.2 | Kompakte Mobile-Formulare setzen oft nur auf Platzhalter-Text, der beim Tippen verschwindet — spätestens bei der IBAN weiß niemand mehr, was ins Feld gehört. |
| Burger-Menü ohne Screenreader-Semantik | 4.1.2 | Das Menü-Icon ist ein leeres <div> ohne Namen, Rolle und aria-expanded — Screenreader-Nutzer erfahren nie, dass es dort eine Navigation gibt. |
| Sticky Header/Banner verdecken Inhalt | 2.4.7 / 1.4.10 | Fixierte Header, Cookie-Banner und App-Hinweise stapeln sich auf kleinen Screens und verdecken fokussierte Elemente oder halbe Produktlisten. |
Erst der Gesamtüberblick, dann der Mobiltest
Viele mobile Barrieren — Kontraste, fehlende Labels, unbenannte Bedienelemente — stecken im selben Code wie die Desktop-Ansicht. Der kostenlose Sofort-Check prüft Ihre Startseite in ca. 60 Sekunden gegen über 80 WCAG-2.1-AA-Regeln und zeigt, wo Sie stehen. Den gezielten Mobil-Durchgang mit Zoom- und Screenreader-Test hängen Sie danach an.
Häufige Fragen zur mobilen Barrierefreiheit
Gilt das BFSG auch für die mobile Ansicht meiner Website?
Ja. Das BFSG verweist auf die EN 301 549 (im Kern WCAG 2.1 AA), und die WCAG gelten geräteunabhängig — die mobile Darstellung ist dieselbe Dienstleistung wie die Desktop-Ansicht. Anforderungen wie Reflow (1.4.10) und Textvergrößerung (1.4.4) zielen sogar ausdrücklich auf kleine Viewports.
Wie groß müssen Touch-Targets sein?
WCAG 2.5.8 nennt als Minimum 24×24 CSS-Pixel; als komfortable Praxis-Empfehlung gelten 44×44 px. Betroffen sind vor allem Icon-Buttons, Schließen-Kreuze, Mengen-Stepper und eng gesetzte Footer-Links.
Wie teste ich mit VoiceOver oder TalkBack, ohne Vorerfahrung?
iPhone: Einstellungen → Bedienungshilfen → VoiceOver aktivieren, dann mit Rechts-Wischen durch die Elemente gehen und mit Doppeltipp aktivieren. Android: Einstellungen → Bedienungshilfen → TalkBack. Zehn Minuten reichen für die Kernfrage: Kommen Sie von der Startseite bis in den Warenkorb, und wird alles Wichtige sinnvoll angesagt?
Mein Theme ist „responsive“ — ist es damit auch barrierefrei?
Nein. Responsive Design sorgt dafür, dass das Layout sich anpasst — es sagt nichts über Touch-Target-Größen, Fokus-Reihenfolge, Screenreader-Semantik oder Kontraste aus. Viele Shop-Templates sind responsiv und trotzdem voller mobiler Barrieren.
Findet ein automatisierter Scan auch mobile Mängel?
Einen relevanten Teil: Kontraste, fehlende Alt-Texte, Formular-Labels und Namens-/Rollen-Probleme von Bedienelementen betreffen Desktop und Mobil gleichermaßen. Spezifisch mobile Punkte wie Gesten-Alternativen oder das Verhalten bei 400 % Zoom erfordern zusätzlich manuelle Prüfung — automatisierte Tools finden insgesamt rund 30–50 % der WCAG-Mängel.