Touch Targets, Swipe-Gesten & prefers-reduced-motion: Karusselle für alle Eingabegeräte

Das Web-Karussell ist das prominenteste Missverständnis des mobilen Webdesigns: Auf fast jedem Screen zu finden, aber auf dem Smartphone meist eine kaputte UX-Komponente. Denn während User intuitiv wischen statt klicken, ignorieren die meisten Slider mobile Realitäten. Echte Swipe-Gesten, barrierefreie Touch Targets und die Media Query prefers-reduced-motion werden bei der technischen Implementierung schlichtweg vergessen, ein digitaler Blindflug auf Kosten der Barrierefreiheit.

Swipe ohne Alternative

Eine Wisch-Geste ist per Definition eine pfadbasierte Interaktion, nicht nur Start- und Endpunkt zählen, sondern die gesamte Bewegung. Deshalb gilt: Jede Funktionalität, die über eine pfadbasierte Geste erreichbar ist, muss auch über einen einfachen Klick oder Tap auslösbar sein.

Für ein Karussell bedeutet das: Swipe allein reicht nicht. Vor/Zurück-Buttons sind keine optionale Ergänzung, sie sind die barrierefreie Pflicht.

<!-- HTML -->
<div class="carousel" style="touch-action: pan-y;" />

/* CSS */
.carousel { touch-action: pan-y; }

Die CSS-Property touch-action: pan-y erlaubt vertikales Scrollen innerhalb eines Containers mit horizontaler Scroll Action. Es ist dabei ein oft übersehenes Detail. Ohne dieses Attribut blockiert das Karussell entweder das Scrollen oder ignoriert die Swipe-Geste.

Touch Targets zu klein

Seit WCAG 2.2, genauer WCAG 2.5.8, ist eine Mindestgröße für interaktive Elemente, inklusive deren Abstands zu anderen Interaktionselementen, 24 × 24 Pixel festgelegt. Empfohlen werden 44 × 44 Pixel. Der häufigste Verstoß im Karussell ist die Dot-Navigation.

Typische Punkte einer Dot-Navigation sind 8–12 Pixel groß. Das ist visuell vertretbar, aber für Menschen mit Tremor, eingeschränkter Feinmotorik oder auf kleinen Touchscreens nicht treffsicher zu bedienen. Die Lösung ist nicht, die Punkte größer zu machen, sondern den klickbaren Bereich über Padding zu vergrößern:

.dot {
  width: 10px;
  height: 10px;
  padding: 10px; /* klickbarer Bereich: 30×30px */
}

Der Punkt bleibt visuell klein. Der Tap-Bereich ist groß genug.

Animationen ohne Rücksicht

Slide-Animationen sind für die meisten Nutzer:innen unauffällig. Für Menschen mit vestibulären Störungen, einer Beeinträchtigung des Gleichgewichtssinns, können bewegte Inhalte Schwindel, Übelkeit oder schlimmeres auslösen. Für Menschen mit Epilepsie können schnelle Bildwechsel Anfälle triggern.

CSS stellt dafür seit Jahren eine systemweite Lösung bereit: prefers-reduced-motion ist eine Media Query die greift, wenn Nutzer:innen in den Systemeinstellungen ihres Geräts reduzierte Bewegung aktiviert haben. Dabei unterscheidet der Browser zwischen zwei Zuständen des Betriebssystems. Während prefers-reduced-motion: reduce aktiv signalisiert, dass Nutzer:innen Animationen (oft wegen Schwindel oder Motion Sickness) systemweit deaktiviert haben und Web-Effekte gestoppt werden müssen, steht prefers-reduced-motion: no-preference für den Standardzustand, in dem alle geplanten Animationen normal ablaufen dürfen. Die wenigsten Karusselle respektieren sie.

@media (prefers-reduced-motion: reduce) {
  .carousel-slides {
    scroll-behavior: auto;
    transition: none;
  }
}

Zwei Zeilen CSS. Kein JavaScript, kein Aufwand. Und der Unterschied für betroffene Nutzer:innen ist erheblich.

Was als Nächstes kommt

Fünf Teile, fünf Fehlerzonen, Semantik, Tastatur, Live Regions, Autoplay, Touch. Das vollständige Bild ist jetzt da. Was noch fehlt, ist die Frage: Muss das alles wirklich jedes Mal neu gebaut werden?

Teil 6 stellt faceless-carousel vor: eine Open-Source Web Component, die alles aus dieser Serie accessible by design umsetzt, und dem Entwickler dabei keine gestalterischen Vorgaben macht.

➔ Faceless UI: Eine Open-Source Web Component für barrierefreie Karusselle

Quellen: W3C APG, Carousel Pattern · WCAG 2.5.1, Pointer Gestures · WCAG 2.5.8, Target Size Minimum · Chrome, Accessible Carousel