Barrierefreie Karussells erstellen

Robert Flack

Penny McLachlan

Lucas Radaelli

Veröffentlicht: 29. September 2025

Karussells sind ein weit verbreitetes und häufig angefragtes Muster. Wenn ein Karussell implementiert wird, sollte es also robust und zugänglich sein. Sie sollte interaktiv sein, sobald sie gerendert wird, deklarativ sein, um die Wartung zu erleichtern, und eine semantische Struktur haben, die mit Hilfstechnologien getestet wird.

Karussells barrierefrei zu gestalten ist jedoch oft schwierig. Die Verwaltung des Fokus, die korrekte Ausgabe von Screenreader-Ankündigungen und die Verarbeitung interaktiver Elemente außerhalb des Bildschirms sind kompliziert. Daher sind die Karussells auf vielen Websites nicht barrierefrei. Diese Herausforderungen veranlassten das Chrome-Team, interaktive CSS-Karussells als Teil von CSS Overflow Module Level 5 zu entwickeln, die in Chrome 135 eingeführt wurden.

Nach der ersten Einführung der Funktion in Chrome haben wir viel Feedback von der Community erhalten, das wir berücksichtigt haben. Dazu gehören neue Funktionen wie die Unterstützung für diskrete und navigationsbezogene Scrollmarkierungsmodi sowie mehrere Fehlerkorrekturen. Beispiel:

• Unterstützung für Zähler im Alternativtext, die in Chrome 140 eingeführt wurde.
• Ein Problem wurde behoben, bei dem ein deaktiviertes ::scroll-button state nicht richtig von Screenreadern gelesen wurde.
• Sicherstellen, dass ::scroll-marker einen ARIA-Labelnamen aus dem Inhalt erhält:
• Ein Fehler wurde behoben, durch den alle ::scroll-marker-Pseudoelemente als „selected“ (ausgewählt) gelesen wurden.

Wir sind der Meinung, dass die Funktionen in CSS Overflow 5 robuste und zugängliche Karussells ermöglichen, die beim ersten Rendern interaktiv sind. In diesem Beitrag wird beschrieben, wie Sie diese Funktionen nutzen können, um langjährige Barrierefreiheitsprobleme zu beheben.

Eine allgemeinere Einführung in Karussells finden Sie im Artikel Karussells mit CSS. Denken Sie daran, dass keine Benutzeroberfläche von vornherein barrierefrei ist. Sie müssen die Barrierefreiheit Ihrer Seiten immer testen.

Welche Art von Karussell benötigen Sie?

Bevor Sie mit dem Programmieren beginnen, sollten Sie wissen, welche Art von Karussell Sie erstellen möchten. Die richtige Strategie für die Barrierefreiheit hängt davon ab, wie der Nutzer die Inhalte wahrnehmen soll. In diesem Beitrag werden drei gängige Typen behandelt:

Karussells mit einem Element

Bei Karussells mit nur einem Element ist jeweils nur eine Folie vollständig sichtbar und interaktiv (z. B. Hero-Banner oder Diashows).

Automatisch paginierte Karussells

Automatisch paginierte Karussells zeigen „Seiten“ mit Inhalten an, z. B. eine Liste von Produkten oder TV-Sendungen.

Karussells mit mehreren Elementen

In Karussells mit mehreren Elementen sind mehrere Elemente gleichzeitig sichtbar. Sie können aber trotzdem einzeln durchgescrollt werden, ohne dass eine Paginierung erforderlich ist.

Für jeden Karusselltyp gelten unterschiedliche Überlegungen zur Barrierefreiheit und Best Practices.

Karussells mit einem Element

Dies ist eine klassische Diashow. Es soll jeweils nur ein untergeordnetes Element gelesen werden. In vielen Fällen sehen Nutzer jedoch einen „Ausschnitt“ des nächsten oder vorherigen Elements, um Kontextinformationen zu zusätzlichen Inhalten zu erhalten. Ziel ist es, dass nur die zentrierte, vollständig sichtbare Folie interaktiv ist.

So machen Sie sie zugänglich:

Schritt 1: Mit Scroll-Snapping einen einzelnen Fokus erzwingen

Damit der Scroll-Container immer an einer Folie „einrastet“ und kein Element ungeschickt dazwischen hängen bleibt, verwenden Sie CSS-Scroll-Snapping. So wird dafür gesorgt, dass ein Element nach dem Scrollen perfekt an seiner richtigen Position „einrastet“, was für eine gute Nutzerfreundlichkeit sorgt.

.carousel {
  scroll-snap-type: inline mandatory;
}
.item {
  scroll-snap-align: center;
}

Schritt 2: Änderungen an Karussell und Folie ansagen lassen

Ein Nutzer mit einem Screenreader muss wissen, dass er ein Karussell aufgerufen hat und wann sich die Folie ändert. Dazu sind einige ARIA-Attribute für den Karussellcontainer erforderlich:

Das ist die HTML-Struktur:

<div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>

Schritt 3: Nur die sichtbare Folie interaktiv machen

Das ist wichtig für die Barrierefreiheit, da Nutzer so nicht versehentlich zu Schaltflächen oder Links auf Folien außerhalb des Bildschirms wechseln können. Verwenden Sie dazu die neue Containerabfrage scroll-state und die Property interactivity.

Machen Sie zuerst jedes Folien-Element standardmäßig inaktiv, indem Sie interactivity: inert verwenden. Verwenden Sie dann eine scroll-state-Containerabfrage, um auf die Folie auszurichten, die sich gerade im Darstellungsbereich befindet, und legen Sie ihren Inhalt auf interactivity: auto fest.

.item {
  container-type: scroll-state;
}
/* Make all content inside slides inert by default */
.item > * {
  interactivity: inert;
  /* When a slide is snapped inline, make its content interactive */
  @container scroll-state(snapped: inline) {
    > .content {
      interactivity: auto;
    }
  }
}

Bei diesem CSS-Code legt der Browser automatisch fest, welche Elemente fokussierbar sind. Für die Verwaltung eines Tabindex ist kein JavaScript mehr erforderlich. Mit der scroll-state-Abfrage werden alle Folien außer der aktuellen Folie inaktiv.

Karussells mit Seitenumbruch

Dieses Muster wird häufig für Produktgalerien oder Auswahlmöglichkeiten verwendet, bei denen Inhalte in Seiten gruppiert werden. Die Barrierefreiheit kann auf zwei Arten berücksichtigt werden, je nachdem, wie Sie die Inhalte präsentieren möchten.

Ein Karussell mit einzelnen Seiten

Verwenden Sie einen Container mit role="region" mit einem einzelnen Element mit role="tabpanel" darin. Der Inhalt dieses Tab-Bereichs wird entsprechend dem aktiven Tab oder der aktiven Seite aktualisiert.

<div role="region" class="carousel" aria-label="Featured Products Carousel">
    <div role="tabpanel">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        ...
        <div class="item">Item n</div> </div>
    </div>
</div>

Um die Interaktivität zu verwalten, können Sie einen cleveren Animationstrick in Verbindung mit der view()-Zeitachse verwenden. So wird sichergestellt, dass die Tabulatorreihenfolge nur Elemente auf dem Bildschirm erreicht, die gerade sichtbar sind.

@keyframes interactive-when-visible {
  0% { interactivity: auto; }
}
.item {
  interactivity: inert;
  animation: interactive-when-visible steps(1);
  animation-timeline: view(inline);
}

Eine Liste der Inhalte

Wenn es sich bei den Inhalten im Grunde um eine Liste handelt, verwenden Sie ein <ul>-Element für die korrekte Semantik.

Beispiel:

<div class="carousel" role="region" aria-label="Related Posts">
  <ul>
    <li><!-- Post 1 content --></li>
    <li><!-- Post 2 content --></li>
    <li><!-- Post 3 content --></li>
    <!-- ... -->
  </ul>
</div>

Verwenden Sie für dieses Muster nicht die Eigenschaft „Interactivity“, um Inhalte, die nicht auf dem Bildschirm angezeigt werden, inaktiv zu machen. Dies würde sich auf die Anzahl der Elemente auswirken, die von Screenreadern angekündigt werden. Daher müssen alle Inhalte im Barrierefreiheitsbaum verbleiben.

Karussells mit mehreren Elementen

Dieses Muster ist für Karussells vorgesehen, in denen mehrere untergeordnete Elemente gleichzeitig sichtbar und lesbar sein können. Ein Beispiel dafür ist der Bereich „Ähnliche Produkte“ auf einer E-Commerce-Website.

Das Verhalten dieser Karussells hängt davon ab, wie Sie die folgende Entscheidung treffen: Lenken Sie den Fokus des Nutzers jeweils auf ein Element oder ermöglichen Sie ihm, auf alle sichtbaren Inhalte zuzugreifen?

Muster 1: Ein einzelnes interaktives Element unter sichtbaren Elementen

In diesem Modell sind mehrere Elemente sichtbar, aber nur das primäre oder „aktuelle“ Element ist interaktiv. Die anderen sichtbaren Elemente sind inaktiv. Dieses Muster ist nützlich, um einen Nutzer Schritt für Schritt durch eine Reihe von Elementen zu führen.

Um das richtig zu erstellen, sollten Sie dasselbe Barrierefreiheitsmuster wie das zuvor besprochene Karussell mit einem Element verwenden. Das umfasst:

• Verwenden Sie eine Containerabfrage für den Scrollstatus, um die Interaktivität auf inaktive Elemente anzuwenden.
• Fügen Sie um die Elemente herum genügend Abstand ein, damit jedes einzelne Element an der primären Position (z. B. in der Mitte des Scrollports) ausgerichtet werden kann. Dadurch wirkt das Modell der schrittweisen Navigation bewusst und flüssig.

Muster 2: Alle sichtbaren Elemente sind interaktiv

Wenn Nutzer frei mit allen sichtbaren Elementen interagieren sollen, sollten Sie darauf achten, dass keine Inhalte inaktiv sind.

Für dieses Muster gilt:

• Verwenden Sie ein <ul>-Element, wenn der Inhalt semantisch eine Liste ist, da dies den richtigen Kontext für Nutzer von Screenreadern bietet.
• Verwende keine Interaktivitätsverwaltung (interactivity: inert). Alle sichtbaren Inhalte sollten im Bedienungshilfen-Baum verbleiben und über die Tabulatortaste erreichbar sein.

Zusammenfassung

Mit CSS Overflow 5 können Sie deklarativ gängige, interaktive Karussellmuster erstellen, ohne dass es zu Problemen mit der Barrierefreiheit kommt. Durch die Kombination von semantischem HTML, modernem CSS wie Scrollstatus und Interaktivität sowie den richtigen ARIA-Rollen können Sie leistungsstarke, barrierefreie Benutzeroberflächen erstellen, die bereits beim ersten Rendern interaktiv sind.

Probieren Sie diese neuen APIs aus. Wie immer gilt jedoch: Obwohl diese Muster und APIs entwickelt wurden, um die Entwicklung interaktiver, schneller und barrierefreier Komponenten zu erleichtern, gibt es keinen Ersatz für vollständige Barrierefreiheitstests. Sie müssen immer bestätigen, dass Ihr Code zugänglich ist und für Ihr Baseline-Ziel funktioniert.