Barrierefreiheitszertifikat – Startseite
Kostenlos prüfen Menü

Karussell: Wer es nicht anhalten kann, hat verloren

Automatisch wechselnde Slider sind für viele Menschen ein Problem: Sie lesen langsamer, als die Folie wechselt, oder die Bewegung lenkt ab. Ein barrierefreies Karussell lässt sich anhalten und Folie für Folie bedienen.

2.2.22.1.14.1.21.4.112.4.7

Live-Demo

Diese Demo ist mit axe-core ohne Verstöße geprüft und vollständig per Tastatur bedienbar.

Probieren Sie es mit der Tastatur: Tab, Enter, Leertaste, Pfeiltasten, Escape. Mit eingeschaltetem Screenreader hören Sie, was angesagt wird.

1 von 4

Kontrast zuerst

Fließtext braucht mindestens 4,5:1 Kontrast zum Hintergrund.

Die Live-Demo braucht JavaScript. Code und Anforderungen stehen unten.

Tastaturbedienung

Tab
Erreicht Pause, Zurück und Weiter sowie Links auf der sichtbaren Folie. Fokus im Karussell hält das Autoplay an.
Enter / Leertaste
Hält an oder spielt ab, wechselt die Folie.

Wann Sie das Muster einsetzen

Fragen Sie zuerst, ob ein Karussell nötig ist. Wichtige Inhalte auf der zweiten oder dritten Folie sieht oft niemand. Mehrere Kacheln nebeneinander oder untereinander sind meistens die bessere Wahl.

Wenn es ein Karussell sein soll: Bewegt es sich automatisch länger als fünf Sekunden, verlangt 2.2.2 Pausieren, beenden, ausblenden eine Möglichkeit, es anzuhalten. Unser Demo-Karussell startet nicht von selbst, wenn Ihr System „Bewegung reduzieren“ eingestellt hat, und stoppt, sobald es den Fokus oder den Mauszeiger hat.

Rollen, Zustände, Eigenschaften

  • Container mit aria-roledescription="Karussell" und einem Namen (aria-label).
  • Jede Folie: role="group", aria-roledescription="Folie" und aria-label="2 von 4".
  • Der Pause-Button steht als erstes Bedienelement im Karussell und hat eine sichtbare Beschriftung, die sich ändert („Anhalten“ / „Abspielen“).
  • Folienbereich mit aria-live="off", solange es automatisch läuft, und aria-live="polite", wenn es angehalten ist, damit manuelle Wechsel angesagt werden.
  • Nicht sichtbare Folien sind mit hidden ausgeblendet.

Tastaturbedienung

TasteWirkung
TabErreicht Pause, Zurück und Weiter sowie Links auf der sichtbaren Folie. Fokus im Karussell hält das Autoplay an.
Enter / LeertasteHält an oder spielt ab, wechselt die Folie.

Code

HTML und JavaScript (gekürzt)
<section aria-roledescription="Karussell"
  aria-label="Neuigkeiten">
  <button type="button" data-pause>Anhalten</button>
  <button type="button" data-prev>Vorherige Folie</button>
  <button type="button" data-next>Nächste Folie</button>
  <div aria-live="off">
    <div role="group" aria-roledescription="Folie"
      aria-label="1 von 3">…</div>
    <div role="group" aria-roledescription="Folie"
      aria-label="2 von 3" hidden>…</div>
  </div>
</section>

// Kein Autoplay bei reduzierter Bewegung
const still = matchMedia(
  '(prefers-reduced-motion: reduce)').matches;
if (!still) start();

Häufige Fehler

  • Kein Pause-Button, oder er ist nur beim Überfahren mit der Maus sichtbar.
  • Pfeil-Buttons ohne zugänglichen Namen, nur mit Symbol.
  • Automatischer Wechsel, der jede Folie per Live-Region ansagt: Screenreader-Nutzer werden ständig unterbrochen.
  • Ausgeblendete Folien bleiben fokussierbar: Der Fokus verschwindet in unsichtbaren Links.

Passende WCAG-Kriterien

Quellen

Sind Ihre Komponenten so gebaut?

Der kostenlose Check findet viele Fehler automatisch. Im Audit prüft ein Mensch jede Komponente mit Tastatur und Screenreader.

Kostenlos prüfenPrüfmethode ansehen