Créer des carrousels accessibles

Robert Flack

Penny McLachlan

Lucas Radaelli

Publié le 29 septembre 2025

Que vous les aimiez ou non, les carrousels sont un modèle largement utilisé et demandé. Par conséquent, lorsqu'un carrousel est implémenté, il doit être robuste et accessible. Elle doit être interactive dès le premier affichage, déclarative pour faciliter la maintenance et construite avec une structure sémantique testée avec des technologies d'assistance.

Cependant, rendre les carrousels accessibles est souvent difficile. La gestion de la mise au point, la bonne diffusion des annonces du lecteur d'écran et la gestion des éléments interactifs hors écran sont complexes. C'est pourquoi les carrousels de nombreux sites ne sont pas accessibles. Ces défis ont conduit l'équipe Chrome à travailler sur des carrousels CSS interactifs dans le cadre du module de niveau 5 de débordement CSS, qui a été lancé dans Chrome 135.

Après le lancement initial de la fonctionnalité dans Chrome, nous avons reçu de nombreux commentaires de la communauté, auxquels nous nous efforçons de répondre. Cela inclut de nouvelles fonctionnalités telles que la prise en charge des modes de repères de défilement discrets et de navigation, ainsi que de nombreuses corrections de bugs. Exemple :

• Prise en charge des compteurs dans le texte alternatif, disponible dans Chrome 140.
• Correction d'un problème qui empêchait les lecteurs d'écran de lire correctement un ::scroll-button state désactivé.
• S'assurer que ::scroll-marker obtient un nom de libellé ARIA à partir de la valeur du contenu.
• Correction d'un bug qui entraînait la lecture de tous les pseudo-éléments ::scroll-marker comme "sélectionnés".

Nous pensons que les fonctionnalités de CSS Overflow 5 peuvent créer des carrousels robustes et accessibles, interactifs dès le premier affichage. Cet article vous explique comment procéder, en se concentrant sur l'utilisation de ces fonctionnalités pour résoudre des problèmes d'accessibilité de longue date.

Pour une introduction plus générale aux carrousels, consultez l'article Carrousels avec CSS. N'oubliez pas qu'aucune UI ne peut être garantie accessible prête à l'emploi. Vous devez toujours tester l'accessibilité de vos pages.

De quel type de carrousel avez-vous besoin ?

Avant de vous lancer dans le code, il est important de savoir quel type de carrousel vous souhaitez créer. La bonne stratégie d'accessibilité dépend de la façon dont l'utilisateur est censé découvrir le contenu. Cet article aborde trois types courants :

Carrousels à un seul élément

Avec les carrousels à un seul élément, une seule diapositive est entièrement visible et interactive à la fois (par exemple, les bannières principales ou les diaporamas).

Carrousels paginés automatiquement

Les carrousels paginés automatiquement affichent des "pages" de contenu, comme une liste de produits ou de séries TV.

Carrousels à plusieurs éléments

Dans les carrousels à plusieurs éléments, plusieurs éléments sont visibles à la fois, mais vous pouvez toujours les faire défiler individuellement sans pagination.

Chaque type de carrousel présente des considérations et des bonnes pratiques d'accessibilité différentes.

Carrousels à un seul élément

Il s'agit d'un diaporama classique. Un seul élément enfant doit être lu à la fois, bien que dans de nombreux cas, les utilisateurs voient un aperçu de l'élément suivant ou précédent pour obtenir des indices contextuels sur le contenu supplémentaire. L'objectif est de s'assurer que seule la diapositive centrée et entièrement visible est interactive.

Voici comment le rendre accessible, étape par étape.

Étape 1 : Appliquez une mise au point unique avec l'accrochage de défilement

Pour garantir que le conteneur de défilement s'arrête toujours sur une diapositive, sans laisser d'élément coincé entre deux, utilisez l'accrochage de défilement CSS. Cela garantit qu'après un défilement, un élément est parfaitement "ancré" à sa position correcte, ce qui crée une expérience utilisateur fluide.

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

Étape 2 : Annoncer les modifications apportées au carrousel et aux diapositives

Un utilisateur avec un lecteur d'écran doit savoir qu'il est entré dans un carrousel et quand la diapositive change. Cela nécessite quelques attributs ARIA sur le conteneur du carrousel :

Voici la structure HTML :

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

Étape 3 : Rendre interactive uniquement la diapositive visible

C'est essentiel pour l'accessibilité, car cela empêche les utilisateurs de passer accidentellement d'un onglet à l'autre pour accéder aux boutons ou aux liens sur les diapositives hors écran. Pour ce faire, utilisez la nouvelle requête de conteneur scroll-state et la propriété interactivity.

Commencez par rendre chaque élément de diapositive inerte par défaut à l'aide de interactivity: inert. Ensuite, utilisez une requête de conteneur scroll-state pour cibler la diapositive actuellement "ancrée" dans la fenêtre d'affichage et définissez son contenu sur interactivity: auto.

.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;
    }
  }
}

Avec ce CSS, le navigateur gère automatiquement les éléments sélectionnables. Plus besoin de code JavaScript pour gérer un tabindex. La requête scroll-state rend toutes les diapositives inertes, à l'exception de la diapositive actuelle.

Carrousels paginés

Ce modèle est souvent utilisé pour les galeries de produits ou les choix où le contenu est regroupé sur plusieurs pages. L'accessibilité peut être gérée de deux manières, selon la façon dont vous souhaitez présenter le contenu.

Carrousel avec des pages discrètes

Utilisez un conteneur avec role="region" avec un seul élément avec role="tabpanel" à l'intérieur. Le contenu de ce panneau d'onglets sera mis à jour pour refléter l'onglet ou la page actifs.

<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>

Pour gérer l'interactivité, utilisez une astuce d'animation intelligente liée à la timeline view(). Cela garantit que l'ordre de tabulation n'atteint que les éléments actuellement visibles à l'écran.

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

Liste des contenus

Si le contenu est fondamentalement une liste, utilisez un élément <ul> pour la sémantique correcte.

Exemple :

<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>

Pour ce modèle, n'utilisez pas la propriété d'interactivité pour rendre le contenu hors écran inerte. Cela affecterait le nombre d'éléments annoncé par les lecteurs d'écran. Tous les contenus doivent donc rester dans l'arborescence d'accessibilité.

Carrousels à plusieurs éléments

Ce modèle est destiné aux carrousels dans lesquels plusieurs éléments enfants peuvent être visibles et lisibles en même temps. Par exemple, une section "Produits associés" sur un site d'e-commerce.

Ces carrousels se comportent différemment selon votre réponse à la question suivante : guidez-vous l'attention de l'utilisateur vers un élément à la fois ou lui permettez-vous d'accéder librement à tout le contenu visible ?

Schéma 1 : Un seul élément A interactif parmi les éléments visibles

Dans ce modèle, plusieurs éléments sont visibles, mais seul l'élément principal ou "actuel" est interactif. Les autres éléments visibles sont inertes. Ce modèle est utile pour guider un utilisateur à travers un ensemble d'éléments, un par un.

Pour le créer correctement, vous devez utiliser le même modèle d'accessibilité que celui du carrousel à un seul élément décrit précédemment. ce qui implique :

• Utilisez une requête de conteneur d'état de défilement pour appliquer l'interactivité : inert aux éléments non actifs.
• Ajoutez suffisamment de marge intérieure autour de vos éléments pour vous assurer que chacun d'eux peut être ancré à la position principale (par exemple, au centre de la fenêtre de défilement). Cela donne l'impression que le modèle de navigation un par un est intentionnel et fluide.

Schéma 2 : Tous les éléments visibles sont interactifs

Si votre objectif est de permettre aux utilisateurs d'interagir librement avec tous les éléments visibles, la bonne pratique consiste à s'assurer qu'aucun contenu n'est inerte.

Pour ce modèle :

• Utilisez un élément <ul> si le contenu est sémantiquement une liste, car cela fournit le contexte approprié aux utilisateurs de lecteurs d'écran.
• N'utilisez pas la gestion de l'interactivité (interactivity: inert). Tout le contenu visible doit rester dans l'arborescence d'accessibilité et être accessible à l'aide de la navigation au clavier.

Conclusion

CSS Overflow 5 vous permet de créer de manière déclarative des modèles de carrousel interactifs courants avec moins de problèmes d'accessibilité. En combinant le HTML sémantique, le CSS moderne (comme l'état de défilement et l'interactivité) et les bons rôles ARIA, vous pouvez créer des expériences accessibles et performantes qui sont interactives dès le premier affichage.

Essayez ces nouvelles API ! Comme toujours, même si ces modèles et API sont conçus pour faciliter la création de composants interactifs, rapides et accessibles, rien ne remplace les tests d'accessibilité complets. Vous devrez toujours vérifier que votre code est accessible et qu'il fonctionne pour votre cible de référence.