Responsive Design und Barrierefreiheit: Warum mobile Optimierung nicht genug ist

Responsive ist gut, aber nicht genug

Responsive Design sorgt dafür dass eine Webseite auf verschiedenen Bildschirmgrößen gut aussieht. Das hilft bei Barrierefreiheit (WCAG 1.4.10: Reflow), aber es ist nur ein Aspekt. Eine responsive Seite kann trotzdem nicht per Tastatur bedienbar sein, keine Alt-Texte haben und schlechte Kontraste aufweisen.

Zoom und Vergrößerung: WCAG 1.4.4

WCAG 1.4.4 fordert: Text muss auf 200% vergrößerbar sein ohne Verlust von Inhalt oder Funktion. Das betrifft Browser-Zoom, nicht Responsive Breakpoints. Teste: Stelle deinen Browser auf 200% Zoom.

Ist alles noch lesbar und bedienbar? Kein horizontales Scrollen nötig?.

Touch-Ziele für Mobilgeräte

WCAG 2.5.5 (Level AAA, aber Best Practice): Interaktive Elemente sollten mindestens 44x44 CSS-Pixel groß sein. Viele mobile Webseiten haben zu kleine Buttons, zu enge Link-Abstände und winzige Checkboxen. Teste deine Seite auf einem echten Smartphone, nicht nur im Browser-DevTools.

Orientierung nicht einschränken

WCAG 1.3.4: Die Webseite muss sowohl im Hoch- als auch im Querformat funktionieren. Sperere niemals die Orientierung per CSS oder JavaScript – manche Nutzer haben ihr Gerät fest montiert und können es nicht drehen.

Häufig gestellte Fragen