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 – insbesondere bei WCAG SC 1.4.10 (Reflow) –, aber es ist nur ein Aspekt von vielen. Eine responsive Seite kann trotzdem nicht per Tastatur bedienbar sein, keine Alt-Texte haben und schlechte Kontraste aufweisen.

Das Barrierefreihei­tsstärkungsgesetz (BFSG), das seit Juni 2025 in Kraft ist, verweist über die EU-Richtlinie 2019/882 (European Accessibility Act) auf die harmonisierte Norm EN 301 549 – und damit auf die WCAG 2.1 Level AA. Responsive Design allein erfüllt nur einen Bruchteil dieser Anforderungen. In diesem Artikel schauen wir uns an, welche WCAG-Kriterien für mobile und responsive Webseiten besonders relevant sind und wie du sie korrekt umsetzt.

Zoom und Vergrößerung: SC 1.4.4 Resize Text

WCAG SC 1.4.4 (Resize Text, Level AA) fordert: Text muss auf 200 % vergrößerbar sein, ohne dass Inhalt oder Funktion verloren geht. Das betrifft den Browser-Zoom, nicht Responsive Breakpoints. Teste es so: Stelle deinen Browser auf 200 % Zoom und prüfe, ob alles noch lesbar und bedienbar ist.

Typische Fehler bei der Umsetzung:

• Feste Pixelwerte für Schriftgrößen (font-size: 14px) statt relativer Einheiten (rem, em)
• Container mit fester Höhe und overflow: hidden, die Text abschneiden
• Navigationen, die bei Zoom zusammenbrechen
• Overlays und Modals, die bei Vergrößerung nicht mehr bedienbar sind

Eine bewährte Methode: Verwende rem für Schriftgrößen und em oder Prozentwerte für Abstände. So skaliert der gesamte Text proportional zum Browser-Zoom.

Reflow: SC 1.4.10 – Kein horizontales Scrollen

WCAG SC 1.4.10 (Reflow, Level AA) geht über SC 1.4.4 hinaus: Bei einer Breite von 320 CSS-Pixeln (entspricht 400 % Zoom auf einem 1280px-Bildschirm) darf kein horizontales Scrollen nötig sein. Der Inhalt muss „umfließen“ (Reflow).

Hier kommt Responsive Design ins Spiel – aber Achtung: Ein responsives Layout allein garantiert keinen Reflow. Problembereiche sind typischerweise:

• Datentabellen, die nicht in ein schmales Viewport passen
• Horizontale Navigationsleisten ohne Umbruch
• Bilder mit festen Pixelbreiten
• Code-Blöcke und <pre>-Elemente

Code-Beispiel – Reflow-freundliches Bild:

<img src="hero.jpg"
     alt="Beschreibung des Bildes"
     style="max-width: 100%; height: auto;">

Text Spacing: SC 1.4.12

WCAG SC 1.4.12 (Text Spacing, Level AA) verlangt, dass Inhalte nutzbar bleiben, wenn der Nutzer folgende Textabstände ändert:

• Zeilenhöhe: mindestens 1,5-fache der Schriftgröße
• Absatzabstand: mindestens 2-fache der Schriftgröße
• Buchstabenabstand: mindestens 0,12-fache der Schriftgröße
• Wortabstand: mindestens 0,16-fache der Schriftgröße

In der Praxis bedeutet das: Verwende keine festen Höhen für Textcontainer. Wenn ein Nutzer über ein Browser-Plugin die Textabstände erhöht, darf kein Text abgeschnitten oder überlappt werden. Teste dies mit dem Text Spacing Bookmarklet aus den WCAG-Testressourcen.

Touch-Ziele: SC 2.5.5 und SC 2.5.8

Für mobile Nutzer ist die Größe interaktiver Elemente entscheidend. Die WCAG kennt zwei relevante Kriterien:

• SC 2.5.8 (Target Size Minimum, Level AA, WCAG 2.2): Interaktive Elemente müssen mindestens 24×24 CSS-Pixel groß sein – oder einen entsprechenden Abstand zu benachbarten Zielen haben.
• SC 2.5.5 (Target Size Enhanced, Level AAA): Empfiehlt mindestens 44×44 CSS-Pixel – das ist die Best Practice für optimale Bedienbarkeit.

Typische Probleme auf mobilen Seiten:

• Zu kleine Buttons in der Navigation
• Eng beieinander liegende Links in Fußzeilen
• Winzige Checkboxen und Radio-Buttons in Formularen
• Icon-Buttons ohne ausreichendes Padding

Code-Beispiel – Ausreichend große Touch-Ziele:

.btn-mobile {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 20px;
  /* Abstand zu Nachbar-Elementen */
  margin: 4px;
}

Teste deine Seite auf einem echten Smartphone, nicht nur in den Browser-DevTools. Die DevTools simulieren keine echte Fingerbreite.

Viewport-Meta-Tag: Zoom nicht blockieren

Ein häufiger Fehler ist das Blockieren der Zoom-Funktion im Viewport-Meta-Tag:

<!-- FALSCH – verletzt SC 1.4.4 -->
<meta name="viewport"
  content="width=device-width, initial-scale=1.0,
  maximum-scale=1.0, user-scalable=no">

<!-- RICHTIG -->
<meta name="viewport"
  content="width=device-width, initial-scale=1.0">

user-scalable=no und maximum-scale=1.0 verhindern, dass sehbehinderte Nutzer die Seite zoomen können. Das ist ein direkter Verstoß gegen SC 1.4.4 und wird auch vom bf-check Scanner erkannt.

Orientierung nicht einschränken: SC 1.3.4

WCAG SC 1.3.4 (Orientation, Level AA) verlangt, dass die Webseite sowohl im Hoch- als auch im Querformat funktioniert. Sperre niemals die Orientierung per CSS oder JavaScript – manche Nutzer haben ihr Gerät fest montiert (z. B. an einem Rollstuhl) und können es nicht drehen.

Auch CSS-Deklarationen wie @media (orientation: portrait) { ... } sind grundsätzlich in Ordnung – solange sie nur das Layout anpassen und nicht Inhalte ausblenden oder die Nutzung im anderen Modus verhindern.

Media Queries für Barrierefreiheit

Neben den klassischen Breakpoint-Media-Queries gibt es spezielle CSS-Media-Features, die für barrierefreies Design relevant sind:

prefers-reduced-motion

Diese Media Query erkennt, ob ein Nutzer in den Systemeinstellungen reduzierte Bewegung aktiviert hat. Das ist relevant für SC 2.3.1 (Three Flashes or Below Threshold, Level A) und hilft Nutzern mit vestibulären Störungen, Epilepsie oder Migräne.

/* Animationen standardmäßig definieren */
.hero-animation {
  animation: slideIn 0.5s ease-out;
}

/* Bei Nutzer-Präferenz deaktivieren */
@media (prefers-reduced-motion: reduce) {
  .hero-animation {
    animation: none;
  }
  /* Auch Transitions reduzieren */
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}

prefers-color-scheme

Diese Query erkennt, ob der Nutzer den Dark Mode aktiviert hat. Das ist zwar kein WCAG-Kriterium, aber eine wichtige Barrierefreiheits-Maßnahme für Nutzer mit Lichtempfindlichkeit:

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a2e;
    --text-color: #e0e0e0;
  }
}
/* Wichtig: Kontraste auch im Dark Mode prüfen!
   Mindestens 4,5:1 für normalen Text (SC 1.4.3) */

Achte darauf, dass die Farbkontraste auch im Dark Mode die WCAG-Anforderungen erfüllen – mindestens 4,5:1 für normalen Text gemäß SC 1.4.3.

prefers-contrast

Erkennt, ob der Nutzer erhöhten Kontrast bevorzugt. Nützlich für sehbehinderte Nutzer:

@media (prefers-contrast: more) {
  :root {
    --border-color: #000;
    --text-color: #000;
    --bg-color: #fff;
  }
}

Mobile Screenreader: VoiceOver und TalkBack

Responsive Design betrifft nicht nur das visuelle Layout. Auf Mobilgeräten nutzen blinde und sehbehinderte Menschen Screenreader wie VoiceOver (iOS) und TalkBack (Android). Diese Screenreader funktionieren fundamental anders als Desktop-Screenreader:

• Navigation per Wischgeste: Nutzer wischen nach rechts, um zum nächsten Element zu gelangen – die Reihenfolge im DOM ist entscheidend
• Kein sichtbarer Fokus: Es gibt keinen visuellen Fokusindikator wie am Desktop
• Rotor/Menü: VoiceOver hat einen Rotor, über den Nutzer nach Überschriften, Links oder Landmarks navigieren – semantisches HTML ist Pflicht
• Touch Exploration: Nutzer können den Finger über den Bildschirm ziehen und hören, was sich unter dem Finger befindet

Teste deine Webseite regelmäßig mit einem echten mobilen Screenreader. Aktiviere VoiceOver (iOS: Einstellungen → Bedienungshilfen → VoiceOver) oder TalkBack (Android: Einstellungen → Bedienungshilfen → TalkBack) und navigiere deine Seite nur per Wischgeste.

Checkliste: Responsive Design + Barrierefreiheit

Nutze diese Checkliste, um deine responsive Webseite auf Barrierefreiheit zu prüfen:

1. Viewport-Meta: Kein user-scalable=no und kein maximum-scale=1.0
2. 200 % Zoom (SC 1.4.4): Alle Inhalte lesbar und bedienbar
3. 320px Reflow (SC 1.4.10): Kein horizontales Scrollen bei 400 % Zoom
4. Text Spacing (SC 1.4.12): Kein Textverlust bei erhöhten Abständen
5. Touch-Ziele (SC 2.5.8): Mindestens 24×24px, besser 44×44px
6. Orientierung (SC 1.3.4): Hoch- und Querformat funktioniert
7. prefers-reduced-motion: Animationen werden respektiert
8. Tastatur: Alle Funktionen auch per Tastatur erreichbar
9. Mobile Screenreader: Navigation und Inhalte werden korrekt vorgelesen

Dieser Artikel ersetzt keine Rechtsberatung. Die BFSG-Anforderungen können je nach Branche und Angebot variieren. Ziehe im Zweifel eine auf Barrierefreiheit spezialisierte Kanzlei hinzu.

Häufig gestellte Fragen