Responsive Design und Barrierefreiheit

Responsive Design ist heute Standard – aber nicht jedes responsive Layout ist auch barrierefrei. Viele Sites scheitern an starker Zoomung, Touch-Target-Größen oder Reflow-Verhalten.

WCAG 1.4.10 Reflow

Inhalte müssen bei 400 % Zoom (äquivalent zu 320px Breite) ohne horizontales Scrollen nutzbar sein. Ausnahme: Dinge, die von Natur aus Breite brauchen (Datentabellen, Karten, Diagramme). Test: Browser-Fenster auf 320px stauchen – funktioniert alles? Kein gebrochenes Layout, keine abgeschnittenen Elemente?

Zoom-Verhalten (WCAG 1.4.4)

Text muss auf 200 % vergrößerbar sein, ohne Inhalt zu verlieren oder zu brechen. Typischer Fehler: <meta name="viewport" content="user-scalable=no"> – zoom deaktiviert. Das ist ein klarer BFSG-Verstoß. Richtig: content="width=device-width, initial-scale=1" ohne user-scalable.

Touch-Target-Größen (WCAG 2.5.5 und 2.5.8)

Klickbare Elemente sollen auf Touch-Geräten eine Mindestgröße haben. AAA: 44×44px. AA (WCAG 2.2): 24×24px. Gute Praxis: 48×48px mit ausreichend Abstand zwischen Zielen.

Orientierung (WCAG 1.3.4)

Inhalte dürfen nicht auf eine Ausrichtung (Portrait/Landscape) beschränkt sein, außer wenn es zwingend notwendig ist. Viele mobile Formulare kämpfen mit Landscape-Darstellung – ein häufiger BFSG-Verstoß.

Tipps für barrierefreies Responsive Design

Mobile first. Flexible Layouts mit Grid/Flex. Relative Einheiten (em, rem) statt px. Touch-Targets großzügig dimensionieren. Media-Queries nicht nur für Breiten, auch für prefers-reduced-motion, prefers-color-scheme. Test mit echten Geräten, nicht nur DevTools.