Bildkarussells und Slider barrierefrei umsetzen oder vermeiden

Kaum eine Komponente sorgt für so viel Streit zwischen Design und Barrierefreiheit wie das Bildkarussell. Automatisch wechselnde Folien wirken lebendig – für Screenreader-Nutzer, Menschen mit kognitiven Einschränkungen und alle, die konzentriert lesen wollen, sind sie oft ein Hindernis.

Die WCAG verlangen deshalb klare Kontrollen für jeden Slider, der sich automatisch bewegt. Wer diese Anforderungen kennt, kann entscheiden, ob ein Karussell im konkreten Fall überhaupt sinnvoll ist – oder ob eine einfachere Alternative die bessere Wahl ist.

Warum Slider regelmäßig durch Prüfungen fallen

Automatisch wechselnde Inhalte gehören zu den am häufigsten unterschätzten Problemen bei Barrierefreiheits-Scans. Bewegter Inhalt lenkt vom Lesen ab, verändert den Bildschirminhalt ohne Nutzerinteraktion und kann bei Menschen mit ADHS, Legasthenie oder vestibulären Störungen echten Stress auslösen.

Für Screenreader-Nutzer kommt hinzu, dass ein Folienwechsel meist unangekündigt bleibt: Erscheint Inhalt Nummer zwei, während gerade Inhalt Nummer eins vorgelesen wird, entsteht ein Bruch, der die gesamte Ansage unbrauchbar macht.

Deshalb verlangt das WCAG-Kriterium 2.2.2 (Pause, Stop, Hide), dass sich automatisch bewegter Inhalt, der länger als fünf Sekunden läuft, durch den Nutzer anhalten lässt.

Pause-, Stopp- und Weiter-Steuerung als Pflicht

Jeder Slider mit Auto-Play braucht einen sichtbaren, per Tastatur erreichbaren Button, mit dem sich die automatische Bewegung dauerhaft stoppen lässt – nicht nur pausieren, bis die Seite neu geladen wird.

Die Steuerung muss vor dem ersten automatischen Wechsel erreichbar sein, damit Nutzer nicht erst mehrere Folien abwarten müssen, bevor sie die Bewegung stoppen können.

Wird die Pause aktiviert, darf sich der Zustand nicht von selbst zurücksetzen, etwa beim Scrollen oder bei einer weiteren Nutzerinteraktion an anderer Stelle der Seite.

Fokus und Tastaturbedienbarkeit der Steuerelemente

Pfeil-Buttons, Punktnavigation und Pause-Schalter müssen alle per Tab erreichbar sein und einen sichtbaren Fokusrahmen zeigen. Häufig sind gerade die kleinen Punkte unterhalb des Karussells nur mit der Maus bedienbar, weil sie als reine <div>-Elemente ohne Tastaturzugriff gebaut wurden.

Jedes Steuerelement braucht eine eindeutige, aussagekräftige Beschriftung – „Nächstes Bild" statt nur eines Pfeil-Symbols, „Zu Folie 3 wechseln" statt eines nichtssagenden Punktes.

Die Reihenfolge beim Durchtabben sollte der visuellen Anordnung entsprechen: erst Pause/Play, dann vorherige und nächste Folie, dann gegebenenfalls die direkte Foliennavigation.

Ein weiterer Stolperstein sind unsichtbare Fokusrahmen: Viele Karussell-Bibliotheken entfernen den nativen Fokusrahmen des Browsers per CSS, ohne einen eigenen sichtbaren Ersatz zu definieren. Tastaturnutzer verlieren dadurch die Orientierung, welches Element gerade aktiv ist, selbst wenn alle Buttons technisch korrekt fokussierbar sind. Ein deutlich sichtbarer, kontrastreicher Fokusrahmen ist deshalb ebenso wichtig wie die reine Erreichbarkeit der Steuerelemente selbst.

Alt-Texte und Ankündigung von Folienwechseln

Jedes Bild im Karussell braucht einen eigenen, konkreten Alt-Text, der den Bildinhalt beschreibt – nicht nur „Slide 1" oder den Dateinamen. Enthält die Folie zusätzlichen Text als Bild, muss dieser Text ebenfalls im Alt-Attribut oder als echtes HTML vorhanden sein.

Für Screenreader-Nutzer ist zusätzlich wichtig, dass nur die aktive Folie im Vorlese-Fluss liegt. Inaktive Folien sollten per aria-hidden="true" oder inert aus der Ansage entfernt werden, sonst liest die Software mehrere Folien gleichzeitig vor.

Ein automatischer Folienwechsel sollte nicht per Live-Region angekündigt werden, wenn der Nutzer die Ansage nicht aktiv ausgelöst hat – ständige Zwischenmeldungen wirken sonst wie ein Störgeräusch.

Auto-Play-Probleme und reale Nutzerbeschwerden

Ein durchgehend laufendes Karussell ohne Stopp-Möglichkeit ist einer der Klassiker unter den Beschwerden, die Barrierefreiheits-Verantwortliche erreichen: Nutzer berichten, dass sie einen Text nicht zu Ende lesen können, bevor die Folie automatisch weiterspringt.

Bei mobilen Geräten kommt hinzu, dass Wischgesten mit der automatischen Bewegung kollidieren – ein Wisch zur vorherigen Folie wird durch den nächsten automatischen Wechsel oft sofort wieder überschrieben.

Solche Beschwerden häufen sich vor allem bei Karussells auf Startseiten, wo mehrere Botschaften im Sekundentakt wechseln und damit weder gelesen noch bedient werden können.

Warum viele Unternehmen ganz auf Slider verzichten

Untersuchungen zur Nutzerführung zeigen seit Jahren, dass die hinteren Folien eines Karussells kaum Klicks erhalten – die meisten Besucher sehen nur die erste Botschaft. Der Aufwand für eine barrierefreie Umsetzung steht damit oft in keinem Verhältnis zum tatsächlichen Nutzen.

Zusätzlich verursachen Slider häufig eigene Performance-Probleme: großes Bildmaterial, zusätzliches JavaScript und Layout-Verschiebungen beim Laden wirken sich auf Ladezeit und die Kernwebvitalen aus.

Viele Redaktionen ersetzen das Karussell deshalb durch eine feste Kombination aus Hauptbotschaft und zwei bis drei gleichwertigen Kacheln, die alle sofort sichtbar und ohne Bewegung nutzbar sind.

Marketing-Karussell oder Produktbildergalerie: zwei unterschiedliche Fälle

Nicht jedes Karussell erfüllt denselben Zweck, auch wenn viele Baukästen dieselbe Komponente für beide Fälle anbieten. Ein Marketing-Slider auf der Startseite mit wechselnden Kampagnenbotschaften unterscheidet sich in der Nutzung deutlich von einer Produktbildergalerie, die mehrere Fotos eines einzelnen Artikels zeigt und in aller Regel ohne automatischen Wechsel auskommt. Wer beide Fälle technisch gleich behandelt, überträgt unnötig strenge Anforderungen auf die Produktgalerie oder übersieht sie umgekehrt beim Marketing-Slider.

Produktbildergalerien lösen die WCAG-Anforderungen an automatisch bewegten Inhalt meist gar nicht erst aus, weil sie ausschließlich manuell durch Klick, Tastendruck oder Wisch weiterblättern. Hier liegt der Schwerpunkt eher auf klaren Vor-/Zurück-Buttons, einer nachvollziehbaren Fokusreihenfolge und eindeutigen, produktbezogenen Alt-Texten für jedes einzelne Foto, damit sich auch Detailaufnahmen wie Nahtstellen oder Materialstruktur beschreiben lassen.

Bei Marketing-Karussells mit Auto-Play dagegen greifen sowohl die Pause-Pflicht als auch die Anforderungen an Ansage und Fokus in voller Schärfe, weil sich der Inhalt ohne Zutun der Nutzer verändert. Wer beide Komponententypen im selben Baukasten oder Framework verwendet, sollte technisch klar zwischen ihnen unterscheiden, statt eine einzige Slider-Komponente unreflektiert für Werbebotschaften wie für Produktfotos gleichermaßen wiederzuverwenden.

Diese Unterscheidung hilft zusätzlich bei der Priorisierung von Korrekturen: Ein fehlerhaftes Marketing-Karussell auf der Startseite betrifft in der Regel deutlich mehr Besucher als eine einzelne Produktgalerie auf einer Detailseite, weshalb sich eine Korrektur dort meist zuerst lohnt.

Barrierefreie Alternativen zum klassischen Karussell

Eine statische Bildergalerie mit Vor-/Zurück-Buttons ohne Auto-Play erfüllt denselben visuellen Zweck, ohne die Anforderungen an automatisch bewegten Inhalt auszulösen. Nutzer bestimmen selbst, wann sie weiterblättern.

Ein Grid aus mehreren Kacheln zeigt alle Botschaften gleichzeitig und lässt sich vollständig ohne Interaktion erfassen – für Screenreader-Nutzer bedeutet das eine einfache, lineare Leserichtung statt versteckter Folien.

Wo Bewegung gewünscht ist, kann ein sanftes Einblenden beim Scrollen dieselbe Dynamik erzeugen, ohne Inhalte automatisch auszutauschen oder eine Pause-Funktion zu erzwingen.

Hinweis: Dieser Beitrag bietet allgemeine technische Orientierung und ersetzt keine individuelle Rechtsberatung zur Umsetzung des BFSG.

Häufig gestellte Fragen