Carrousels

Sommaire

Principe.
Socle HTML.
Rôles, états et propriétés ARIA.
Interactions au clavier.
Comportements attendus.

Principe

Les carrousels sont des modules dynamiques qui permettent d’optimiser l’affichage du contenu d’une page dans un espace réduit grâce à un système de navigation contrôlant l’affichage de panneaux défilants, parfois automatiquement.

Ils se présentent généralement sous la forme d’un ou plusieurs panneaux de contenu entourés de boutons « Précédent » et « Suivant » qui permettent de faire défiler les diapositives du carrousel. Ils sont souvent accompagnés d’un système de pagination.

Cette fiche s’appuie en partie sur le motif de conception « Carousel with Buttons for Slide Control » détaillé dans les ARIA Authoring Practices Guide (APG) du W3C.

Cette fiche a été adaptée pour mieux correspondre aux designs actuels des carrousels (possibilité d’afficher plusieurs diapositives à l’écran).

Socle HTML

<section aria-roledescription="carrousel" aria-labelledby="titre-carrousel">
  <h2 id="titre-carrousel">[Titre du carrousel]</h2>
  <div>
    <div role="group" aria-roledescription="diapositive" aria-label="1 sur 5">
      [Contenu du premier panneau]
    </div>
    <div role="group" aria-roledescription="diapositive" aria-label="2 sur 5">
      [Contenu du deuxième panneau]
    </div>
    <div role="group" aria-roledescription="diapositive" aria-label="3 sur 5">
      [Contenu du troisième panneau]
    </div>
    <div role="group" aria-roledescription="diapositive" aria-label="4 sur 5">
      [Contenu du quatrième panneau]
    </div>
    <div role="group" aria-roledescription="diapositive" aria-label="5 sur 5">
      [Contenu du cinquième panneau]
    </div>
  </div>
  <button aria-label="Diapositive précédente"><svg aria-hidden="true">[...]</svg></button>
  <div aria-hidden="true">
    <span class="bullet"></span>
    <span class="bullet"></span>
    <span class="bullet bullet--active"></span>
    <span class="bullet"></span>
    <span class="bullet"></span>
  </div>
  <button aria-label="Diapositive suivante"><svg aria-hidden="true">[...]</svg></button>
</section>

Rôles, états et propriétés ARIA

aria-roledescription="carrousel" doit être appliqué sur la balise <section> contenant tout le code du carrousel.
aria-labelledby="titre-carrousel" doit également être appliqué sur la balise <section> et doit référencer l’identifiant du titre du carrousel. Si aucun titre n’est présent, remplacer cet attribut par un aria-label="[Titre du carrousel]".
id="titre-carrousel" doit être appliqué sur le titre du carrousel, si présent.
role="group", aria-roledescription="diapositive", tabindex="0" et aria-label="1 sur 5" doivent être appliqués sur chaque conteneur de diapositive. Les valeurs de ce dernier attribut doivent être renseignées dynamiquement, en fonction du numéro et du nombre total de diapositives.
aria-label="Diapositive précédente" et aria-label="Diapositive suivante" doivent être appliqués sur les boutons permettant de changer de diapositive.
aria-hidden="true" doit être appliqué sur le système de pagination, et les puces ne doivent pas être atteignables au clavier.

Interactions au clavier

`Tab`

Navigue dans chacune des diapositives du carrousel et dans les boutons de navigation.

`Maj` + `Tab`

Même comportement qu’avec la touche Tab, mais cette fois dans l’ordre inverse de lecture.

`Entrée` et `Espace`

Lorsque le focus clavier est positionné sur les boutons de navigation, affiche la diapositive précédente ou suivante.

Comportements attendus

La tabulation dans les diapositives fonctionne de la même manière que l’utilisation des boutons de navigation : lorsqu’on tabule sur une diapositive cachée (entièrement ou en partie), il faut appliquer le changement de diapositive afin de rendre la diapositive qui a le focus entièrement visible à l’écran.
Le système de pagination est ici rendu volontairement inatteignable au clavier et au lecteur d’écran, pour ne pas polluer la navigation. Dans cet exemple où toutes les diapositives sont par défaut atteignables par ces aides techniques, le système de pagination est redondant.
Dans le cas où le « swipe » est utilisé pour changer de diapositive, le carrousel doit obligatoirement posséder au moins un système de navigation parmi les boutons de navigation ou le système de pagination.
Dans le cas d’un carrousel à défilement automatique, un système de mise en pause et de relance du défilement doit être présent.
Dans le cas où le carrousel possède plus de cinq diapositives, il est recommandé d’ajouter un lien d’évitement disponible juste au-dessus du carrousel et qui permet de passer au contenu suivant le carrousel.

10 commentaires

Par burki, le 27 août 2025 à 15h31.

Bonjour,

Dans votre socle html il n’y aucun attribut aria-roledescription= »carousel », ni role= »region » sur le conteneur global du carousel, et cela ne correspond pas à la fiche du pattern de carousel de ARIA, quel document fait référence dans le cadre du RGAA 4.1.2 sur de tel script c’est pas celle-ci : https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ ?

Je constate aussique d’après la capture il s’agirait d’un carousel avec prev/next et puces de pagination. Ce qui serais en fait un mix de ces 2 exemples : https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/ et https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-2-tablist/. Du coup, c’est possible de mixer les 2 options tout en restant accessible ou il y aurait confusion/redondance entre les tablist, carousel, slide, button et les controls qui se chevaucherai ?

Répondre
- Par Romain Desjardins (Atalan), le 28 août 2025 à 4h46.
  
  Bonjour Hélène,
  
  À l’origine, l’objectif de cette fiche était de simplifier l’utilisation d’un carrousel afin de proposer un carrousel accessible, sans toute la complexité que propose la fiche APG. Mais nous avons tout de même progressivement ajouté des attributs d’accessibilité dans le but d’en améliorer son accessibilité. Et finalement, pour être cohérent avec nos autres fiches AcceDe Web qui s’inspirent de ce que proposent les fiches APG, il est prévu de retravailler cette fiche pour ajouter ces attributs manquants, et ajouter d’autres exemples de carrousel (avec plusieurs diapositives affichées par exemple) pour couvrir plus de cas d’utilisation.
  
  Il n’y a pas de norme à respecter pour être conforme au RGAA, mais il faut s’assurer que les composants développés soient correctement accessibles à tous les utilisateurs. Vous pouvez vous référer aux fiches AcceDe Web ainsi qu’aux fiches APG pour le développement de ces composants riches.
  
  Enfin, il n’y a en effet pas de problème de combiner l’utilisation des puces de navigation sous forme d’onglets ainsi que les boutons de navigation au sein d’un même carrousel.
  
  Bien à vous,
  Romain
  
  Répondre
Par Jonathan, le 18 août 2019 à 19h33.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

J’ajouterais un aria-label sur le ul pour améliorer l’accessibilité. Comme « actualité » ou « dernières nouvelles ».

Répondre
- Par Johan Ramon, le 3 septembre 2019 à 12h15.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour Jonathan,
  
  Merci pour cette proposition.
  
  Avec l’arrivée récente du Design Pattern « Carousel », nous avons prévu de revoir en profondeur cette fiche.
  
  Et, comme indiqué dans celui-ci (The group containing the picker controls has an accessible label provided by the value of aria-label that identifies the purpose of the controls, e.g., « Choose slide to display ».), nous allons effectivement prévoir l’ajout d’un aria-label dans la balise <ul> des boutons de navigation dans le carrousel.
  
  Johan
  
  Répondre
Par Nico, le 18 janvier 2019 à 12h40.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Tiens, si jamais, j’ai une version sans jQuery du carrousel accessible : https://van11y.net/fr/carrousel-accessible/

Répondre
- Par Sébastien Delorme, le 18 janvier 2019 à 14h12.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour Nico,
  
  Merci !
  Nous allons l’ajouter aux ressources.
  
  Répondre
Par Claire Bizingre, le 24 juillet 2017 à 18h42.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Bonjour !

Je crois qu’il y a une erreur dans le paragraphe suivant, remplacer aria-selected par aria-hidden n’est-ce pas ? :
L’attribut aria-hidden doit être appliqué sur chaque panneau. Sa valeur doit être renseignée dynamiquement en fonction de l’état du panneau associé :
- aria-hidden="false" sur le panneau affiché.
- aria-selected="true" sur les autres panneaux.
Répondre
- Par Johan Ramon, le 25 juillet 2017 à 9h50.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour Claire,
  
  Tout à fait, c’est corrigé.
  Merci beaucoup ta vigilance !
  
  Johan
  
  Répondre
Par Nicolas, le 11 janvier 2016 à 16h12.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Hello,

je sais pas si ce composant est AcceDe compliant :) mais le voici : http://a11y.nicolas-hoffmann.net/carrousel/

Répondre
- Par Johan Ramon, le 9 février 2016 à 14h16.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour Nicolas,
  
  Merci pour ton commentaire et ton script que nous venons d’ajouter dans l’encart « Composants ». :)
  
  Répondre

Laisser un commentaire

Mises à jour

28/08/2024: Mise à jour mineure.
28/10/2025: Changement majeur dans la fiche pour proposer un exemple de carrousel avec plusieurs diapositives affichées en simultanées.

Haut de page