Das rotierende Karussell auf der Startseite gehört zu den beliebtesten Bauteilen im Web und zugleich zu den problematischsten. Es verspricht, mehrere Botschaften auf wenig Fläche unterzubringen, doch die Nutzungsdaten sind ernüchternd: Eine viel zitierte Auswertung der University of Notre Dame ergab eine Klickrate von nur 1 Prozent (University of Notre Dame) über alle Folien hinweg, und davon entfielen 89 Prozent (University of Notre Dame) allein auf die erste Folie. Noch schwerer wiegt der Blick auf die Barrierefreiheit. Ein Karussell, das sich automatisch weiterschiebt, entzieht Menschen die Kontrolle über die Seite, überfordert kognitiv und sperrt Tastatur- sowie Screenreader-Nutzer regelrecht aus. Betroffen sind unter anderem die rund 1,2 Millionen (DBSV) blinden und sehbehinderten Menschen in Deutschland. Das Gute an dieser Ausgangslage: Ein Karussell muss keine Barriere sein. Richtig gebaut, ist es bedienbar, ruhig und WCAG-konform. Dieser Leitfaden zeigt, woran auto-rotierende Slider scheitern, was WCAG 2.2.2 verlangt und wie ein WCAG-Audit vorhandene Karussells prüft und reparierbar macht.
Das Wichtigste in Kürze
- Auto-Rotation ist das Kernproblem: Bewegung, die automatisch startet, länger als fünf Sekunden dauert und parallel zu anderen Inhalten läuft, muss nach WCAG 2.2.2 (Level A) pausierbar, stoppbar oder ausblendbar sein (W3C, WCAG 2.2).
- Karussells wirken kaum: Die Klickrate liegt bei rund 1 Prozent (University of Notre Dame) über alle Folien, davon 89 Prozent (University of Notre Dame) auf der ersten - Folgefolien sehen die wenigsten.
- Tastaturbedienbarkeit ist Pflicht: Vor- und Zurück-Schalter, Pause-Taste und Folienpunkte müssen mit Tab erreichbar, mit Enter oder Leertaste bedienbar und mit sichtbarem Fokus versehen sein (WCAG 2.1.1, 2.4.7).
- Screenreader brauchen Struktur: Ohne saubere Beschriftung, Live-Region und Rollenbeschreibung ist ein Karussell für assistive Technik ein undurchschaubares Durcheinander wechselnder Inhalte.
- Bewegung selbst kann schaden: Automatisch startende Animation kann bei vestibulärer Empfindlichkeit Beschwerden auslösen; die Systemeinstellung für reduzierte Bewegung ist zu respektieren.
- Weniger ist oft mehr: Angesichts von 1 Prozent (University of Notre Dame) Interaktion lohnt vor jeder Reparatur die Frage, ob ein statisches Angebot oder ein manuell bedienbarer Slider das bessere Bauteil ist.
Warum auto-rotierende Karussells ausschließen
Das grundlegende Problem eines automatisch rotierenden Karussells ist der Entzug von Kontrolle. Die Seite bewegt sich, ohne dass die Nutzerin es angestoßen hat, und sie bewegt sich in einem Takt, den jemand anderes bestimmt hat. Für viele Menschen ist das schlicht lästig. Für manche ist es eine echte Barriere. Wer langsamer liest, etwa wegen einer kognitiven Einschränkung, einer Sehbeeinträchtigung oder schlicht wegen einer Fremdsprache, hat die Folie oft noch nicht erfasst, wenn sie schon weiterspringt. Wer eine Bewegungsstörung wahrnimmt, kann durch die ständige Animation Übelkeit oder Schwindel entwickeln. Und wer die Seite mit der Tastatur oder einem Screenreader bedient, verliert bei jedem Folienwechsel die Orientierung, weil sich der Inhalt unter dem eigenen Zugriff verändert.
Hinzu kommt die schlechte Wirkung. Die bereits erwähnte Auswertung der University of Notre Dame steht stellvertretend für eine ganze Reihe von Untersuchungen, die dem Karussell eine geringe Beteiligung bescheinigen. Auch die Nielsen Norman Group kommt zu dem Schluss, dass automatisch weiterschaltende Karussells Nutzer eher stören als informieren und die Sichtbarkeit der einzelnen Inhalte senken (Nielsen Norman Group). Die Bewegung zieht Aufmerksamkeit auf sich, doch statt zum Lesen zu verleiten, wird sie oft als Werbung eingestuft und ausgeblendet. Ein Bauteil, das kaum Interaktion erzeugt und zugleich Menschen aussperrt, verdient einen kritischen Blick, bevor man es aufwendig repariert. Genau hier setzen unsere Leistungen an: erst prüfen, ob das Karussell dem Ziel dient, dann barrierefrei umsetzen.
Bewegung ist nicht neutral
Was WCAG 2.2.2 konkret verlangt
Das Erfolgskriterium 2.2.2 Pausieren, Stoppen, Ausblenden ist auf der niedrigsten Konformitätsstufe angesiedelt, also Level A, und damit eine Grundvoraussetzung und kein Zusatz. Die Regel ist klar umrissen: Für jede sich bewegende, blinkende oder scrollende Information, die automatisch startet, länger als fünf Sekunden dauert und parallel zu anderem Inhalt dargestellt wird, muss es einen Mechanismus geben, sie zu pausieren, zu stoppen oder auszublenden (W3C, WCAG 2.2). Für automatisch aktualisierte Information gilt sinngemäß dasselbe, ergänzt um die Möglichkeit, die Aktualisierungsfrequenz zu steuern. Die einzige Ausnahme betrifft Bewegung, die für die Tätigkeit selbst wesentlich ist, etwa ein Ladeindikator.
Ein typisches Startseiten-Karussell erfüllt alle drei Bedingungen: Es startet ohne Zutun, wechselt die Folien in kurzen Abständen über die Fünf-Sekunden-Schwelle hinaus und läuft parallel zu Text, Navigation und anderen Elementen. Damit ist die Pause-, Stopp- oder Ausblendfunktion nicht optional, sondern verpflichtend. In der Praxis ist die saubere Lösung ein deutlich sichtbarer Pause-Schalter, der die Rotation vollständig anhält und sie nicht nach kurzer Zeit wieder aufnimmt. Der Beitrag zu den neuen Kriterien der WCAG 2.2 ordnet ein, wie sich dieses Kriterium in das aktuelle Regelwerk einfügt und welche Anforderungen 2023 hinzugekommen sind.
Pausieren
Ein sichtbarer Schalter hält die Rotation an. Er darf nicht selbst wieder starten und sollte den Zustand klar anzeigen, damit die Bewegung dauerhaft ruht (WCAG 2.2.2).
Tastatur
Alle Bedienelemente sind mit Tab erreichbar und mit Enter oder Leertaste auslösbar. Kein Element darf den Fokus einfangen (WCAG 2.1.1, 2.1.2).
Sichtbarer Fokus
Der Tastaturfokus muss deutlich erkennbar sein. Ein unsichtbarer Fokus macht Vor-, Zurück- und Pause-Taste faktisch unbedienbar (WCAG 2.4.7).
Screenreader
Beschriftung, Rollenbeschreibung und eine höfliche Live-Region sorgen dafür, dass Folienwechsel nachvollziehbar angesagt werden statt unbemerkt zu geschehen.
Zielgröße
Kleine Pfeile und Punkte sind schwer zu treffen. Die neue WCAG 2.2 empfiehlt Bedienziele von mindestens 24 mal 24 CSS-Pixeln (W3C, WCAG 2.2).
Ruhige Bewegung
Übergänge sollten dezent sein und die Systemeinstellung für reduzierte Bewegung respektieren, damit niemandem schwindelig wird.
Diese sechs Anforderungen zeigen, dass Barrierefreiheit beim Karussell kein einzelner Schalter ist, sondern ein Zusammenspiel. Die Pause-Funktion erfüllt WCAG 2.2.2, doch sie nützt nichts, wenn der Schalter mit der Tastatur nicht erreichbar ist oder der Screenreader ihn nicht ankündigt. Umgekehrt hilft die beste Beschriftung nicht, wenn die Bewegung weiterläuft und den Inhalt unter dem Finger wegzieht. Erst das Zusammenspiel aus Kontrolle, Bedienbarkeit und Ansage macht das Bauteil nutzbar.
Tastaturbedienung: erreichbar, auslösbar, sichtbar
Ein großer Teil der Nutzer bedient das Web ganz ohne Maus, sei es dauerhaft wegen einer motorischen Einschränkung, vorübergehend nach einer Verletzung oder aus Gewohnheit. Für sie entscheidet die Tastatur über Zugang oder Ausschluss. Ein barrierefreies Karussell stellt deshalb sicher, dass jeder interaktive Teil in der Tab-Reihenfolge auftaucht: die Vor- und Zurück-Schalter, die Pause-Taste und die Folienpunkte, sofern sie anspringbar sind. Jedes dieser Elemente muss sich mit Enter oder Leertaste auslösen lassen, und der aktuelle Fokus muss jederzeit deutlich sichtbar sein. Ein häufiger Fehler sind Pfeile, die als reine Bildlinks ohne Textalternative umgesetzt sind; sie sind für Tastatur, Screenreader und Suchmaschinen gleichermaßen wertlos. Der WebAIM Million Report 2026 zählt leere Links zu den häufigsten Fehlern und fand sie auf 46,3 Prozent (WebAIM Million, 2026) der untersuchten Startseiten.
Wichtig ist auch, dass das Karussell den Fokus nicht einfängt. Wer mit Tab durch die Folienschalter navigiert, muss die Gruppe genauso wieder verlassen können, wie er sie betreten hat, ohne in einer Endlosschleife festzustecken. Die Grundlagen dieser Bedienung vertieft der Beitrag zur Tastaturnavigation in der Webentwicklung, der zeigt, wie Fokusreihenfolge, sichtbarer Fokus und Tastaturfallen zusammenhängen. Für die Umsetzung im Detail ist zudem die barrierefreie Webentwicklung der richtige Rahmen, weil ein Karussell nur so gut ist wie das Markup, auf dem es steht.
| Merkmal | Auto-rotierender Slider | Barrierefreies Karussell |
|---|---|---|
| Start der Bewegung | startet automatisch, läuft dauerhaft | startet erst auf Wunsch oder hält an |
| Pause-Funktion | keine oder versteckt | sichtbar, dauerhaft, mit Tastatur bedienbar |
| Tastatur | Pfeile nicht erreichbar | alle Schalter per Tab und Enter bedienbar |
| Fokus | unsichtbar oder eingefangen | deutlich sichtbar, frei verlassbar |
| Screenreader | Folienwechsel unangekündigt | Rollenbeschreibung und höfliche Live-Region |
| Bedienziele | winzige Punkte und Pfeile | mindestens 24 mal 24 CSS-Pixel |
Der Pause-Schalter ist kein Detail
Screenreader: Struktur, Rolle und Ansage
Für Screenreader-Nutzer ist ein Karussell besonders tückisch, weil sich sein Inhalt verändert, ohne dass die Bewegung sichtbar wäre. Ein Folienwechsel, der optisch als Animation wahrgenommen wird, ist für die assistive Technik zunächst nur ein stiller Austausch von Text. Ohne zusätzliche Information wirkt das wie ein springender Inhalt, dessen Ursache im Dunkeln bleibt. Abhilfe schaffen drei Bausteine: eine klare Rollenbeschreibung, die das Bauteil als Karussell ausweist, aussagekräftige Beschriftungen für alle Schalter und eine höfliche Live-Region, die den Wechsel der aktiven Folie in ruhigem Ton ansagt, ohne die laufende Vorlesung zu unterbrechen. Wie diese Rollen und Live-Regionen zusammenspielen, erklärt der Beitrag zu ARIA-Rollen, Zuständen und Live-Regionen im Detail.
Ebenso wichtig ist, dass nicht sichtbare Folien auch für den Screenreader nicht erreichbar sind. Liegen alle Folien gleichzeitig im Code und sind nur optisch ausgeblendet, liest die assistive Technik womöglich Inhalte vor, die niemand sieht, samt Links, die ins Leere zu führen scheinen. Nur die aktive Folie sollte im Zugriff sein, die übrigen werden aus der Vorlesereihenfolge genommen. Wie sich eine Seite insgesamt für die Sprachausgabe strukturieren lässt, vertieft der Beitrag zur Screenreader-Optimierung einer Website. Erst wenn Struktur, Rolle und Ansage zusammenpassen, wird der Folienwechsel vom stillen Ruck zur nachvollziehbaren Handlung.
- Eine Rollenbeschreibung weist das Bauteil eindeutig als Karussell aus
- Vor-, Zurück- und Pause-Schalter tragen aussagekräftige, sichtbare Beschriftungen
- Eine höfliche Live-Region sagt den Wechsel der aktiven Folie an, ohne zu unterbrechen
- Nur die aktive Folie ist im Zugriff, die übrigen sind aus der Vorlesereihenfolge genommen
- Folienpunkte zeigen die Gesamtzahl und die aktuelle Position, etwa Folie 2 von 4
- Sichtbare Beschriftung und programmatischer Name stimmen bei jedem Schalter überein
Bewegung reduzieren statt erzwingen
Selbst ein Karussell mit Pause-Schalter startet zunächst in Bewegung, und genau dieser erste Moment kann Menschen mit vestibulärer Empfindlichkeit belasten. Deshalb gehört zur sauberen Umsetzung, die Systemeinstellung für reduzierte Bewegung zu respektieren. Wer im Betriebssystem angibt, Bewegung nach Möglichkeit zu vermeiden, sollte ein Karussell erhalten, das gar nicht erst automatisch rotiert, sondern still steht und nur auf Bedienung reagiert. Die Übergänge zwischen den Folien lassen sich in diesem Fall auf ein sanftes Ein- und Ausblenden reduzieren oder ganz abschalten. Wie sich Animation WCAG-konform gestalten lässt, ohne auf Wirkung zu verzichten, behandelt der Beitrag zu reduzierter Bewegung und barrierefreien Animationen.
Bewegung zu reduzieren heißt nicht, auf Gestaltung zu verzichten. Ein ruhiges, manuell bedienbares Karussell kann optisch genauso ansprechend sein wie ein rotierendes, gewinnt aber an Zugänglichkeit und oft auch an Wirkung, weil die Inhalte nicht mehr davonlaufen. Diese Haltung passt zu einem Grundsatz, den wir in unseren Referenzprojekten immer wieder umsetzen: Gestaltung und Barrierefreiheit sind kein Gegensatz, sondern zwei Seiten derselben sorgfältigen Arbeit.
Standardzustand: still
Prüfen, reparieren oder ersetzen
Der praktische Weg beginnt mit einer ehrlichen Bestandsaufnahme. Ein automatischer Scan deckt viele maschinell erkennbare Fehler zuverlässig auf, etwa fehlende Beschriftungen, leere Links oder zu geringen Kontrast. Doch ob ein Pause-Schalter tatsächlich anhält, ob der Fokus sichtbar ist und ob der Folienwechsel sinnvoll angesagt wird, zeigt erst die manuelle Prüfung mit Tastatur und Screenreader. Diese Kombination aus automatischem und manuellem Vorgehen ist der Kern eines belastbaren WCAG-Audits, das jedes vorhandene Karussell auf die Kriterien 2.2.2, 2.1.1 und 2.4.7 abklopft und eine priorisierte Liste der nötigen Korrekturen liefert. Der übergeordnete Rahmen dazu sind die BFSG-Anforderungen, die seit dem 28. Juni 2025 (Bundesfachstelle Barrierefreiheit) für weite Teile des digitalen Verbrauchergeschäfts gelten.
In vielen Fällen ist die beste Antwort nicht die Reparatur, sondern der Ersatz. Wenn ein Karussell ohnehin nur 1 Prozent (University of Notre Dame) Interaktion erzeugt, ist ein statischer Bereich mit der wichtigsten Botschaft oft wirksamer und zugleich barrierefrei. Wo mehrere Inhalte tatsächlich nebeneinander Platz brauchen, kann ein manuell bedienbarer Slider ohne Auto-Rotation die richtige Wahl sein, ergänzt durch klar formulierte Texte. Wie sich Inhalte verständlich aufbereiten lassen, damit sie ohne Bewegungsdruck wirken, zeigt der Beitrag zur einfachen Sprache für verständliche Web-Texte. Und wer Karussell, Slider und ähnliche Bauteile ein für alle Mal sauber lösen will, findet im barrierefreien Design-System den systematischen Weg, jede Komponente einmal richtig zu bauen.
Ein Karussell muss den Menschen dienen, nicht der Startseite. Sobald es sich von selbst bewegt und niemanden fragt, hat es die Kontrolle übernommen, die eigentlich dem Besucher gehört.
Der rechtliche und wirtschaftliche Rahmen unterstreicht die Dringlichkeit. Während 95,9 Prozent (WebAIM Million, 2026) der untersuchten Startseiten nachweisbare WCAG-Fehler tragen und die durchschnittliche Seite auf 56,1 (WebAIM Million, 2026) Einzelfehler kommt, sind viele digitale Verbraucherangebote seit dem 28. Juni 2025 (Bundesfachstelle Barrierefreiheit) zur Barrierefreiheit verpflichtet. Ein auto-rotierendes Karussell ohne Pause-Funktion ist dabei ein sichtbarer, leicht prüfbarer Verstoß gegen ein Level-A-Kriterium und damit ein naheliegender Ansatzpunkt. Wer ihn behebt, gewinnt an Rechtssicherheit, öffnet die Seite für die rund 1,2 Millionen (DBSV) blinden und sehbehinderten Menschen in Deutschland und schafft nebenbei ein ruhigeres, klareres Bauteil, das den Inhalt in den Vordergrund stellt statt die Bewegung.