Carrousels
Depuis la rédaction de cette fiche, une mise à jour de la spécification ARIA a eu lieu : passage de ARIA 1.0 (ancienne version) à ARIA 1.1 (nouvelle version).
Cette fiche s’appuie sur les motifs de conception ARIA 1.0 issus du document WAI-ARIA Authoring Practices 1.0, et les recommandations ci-dessous pourront faire l’objet d’ajustements une fois les motifs de conception ARIA 1.1 officialisés.
Pour plus d’informations sur les changements relatifs au passage à ARIA 1.1, consulter les WAI-ARIA Authoring Practices 1.1.
Sommaire
- Principe.
- Socle HTML.
- Rôles, états et propriétés ARIA.
- Interactions au clavier.
- Comportements attendus.
- Remarque.
- Composants.
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 panneau de contenu entouré de boutons « Précédent » et « Suivant » qui permettent de faire défiler les panneaux du carrousel. Ils sont souvent accompagnés d’un 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 est présent.

Cette fiche s’appuie sur le motif de conception « Tab Panel » détaillé dans les WAI-ARIA 1.0 Authoring Practices du W3C.
Socle HTML
Rôles, états et propriétés ARIA
role="tablist"
doit être appliqué sur l’élément englobant les onglets de pagination.role="tab"
doit être appliqué sur chaque onglet de pagination.- L’attribut
tabindex
doit être appliqué sur chaque onglet de pagination. Sa valeur doit être renseignée dynamiquement en fonction de l’état de l’onglet de pagination associé :tabindex="0"
sur l’onglet de pagination sélectionné.tabindex="-1"
sur les autres onglets de pagination.
- L’attribut
aria-selected
doit être appliqué sur chaque onglet de pagination. Sa valeur doit être renseignée dynamiquement en fonction de l’état de l’onglet de pagination associé :aria-selected="true"
sur l’onglet de pagination sélectionné.aria-selected="false"
sur les autres onglets de pagination.
role="tabpanel"
doit être appliqué sur chaque panneau.- 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-hidden="true"
sur les autres panneaux.
tabindex="-1"
doit être appliqué dynamiquement sur chaque élément interactif contenu dans un panneau masqué. L’attribut ne doit pas être présent sur les éléments interactifs contenus dans le panneau affiché.- Chaque onglet de pagination doit être rattaché à son panneau associé via l’attribut
aria-controls
:- Chaque panneau doit posséder un attribut
id
renseigné avec une valeur unique. - Chaque onglet de pagination doit posséder un attribut
aria-controls
renseigné avec la valeur de l’attributid
du panneau associé.
- Chaque panneau doit posséder un attribut
Interactions au clavier
Tab
Lorsque l’on accède en tabulant au groupe d’onglets de pagination, le focus est positionné au niveau de l’onglet de pagination sélectionné dans le groupe d’onglets de pagination. Lorsque le focus est positionné sur un onglet de pagination, la prochaine tabulation permet de quitter le groupe d’onglets de pagination.
Maj + Tab
Même comportement qu’avec la touche Tab, mais cette fois dans l’ordre inverse de lecture.
Flèche haut et Flèche gauche
Lorsque le focus est positionné sur un onglet de pagination, déplace le focus clavier vers le précédent onglet du groupe d’onglets de pagination et sélectionne cet onglet de pagination. Si le focus clavier est positionné au niveau du premier onglet de pagination du groupe au moment où la touche est pressée, le focus clavier est déplacé au niveau du dernier onglet de pagination du groupe et cet onglet de pagination est sélectionné.
Flèche bas et Flèche droite
Lorsque le focus est positionné sur un onglet de pagination, déplace le focus clavier vers l’onglet de pagination suivant dans le groupe et sélectionne cet onglet de pagination. Si le focus clavier est positionné au niveau du dernier onglet de pagination du groupe au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier onglet de pagination du groupe et cet onglet de pagination est sélectionné.
Ctrl + Flèche haut
Lorsque le focus est positionné dans un panneau, déplace le focus clavier vers l’onglet de pagination associé à ce panneau.
Ctrl + Page précédente
Lorsque le focus est positionné dans un panneau, déplace le focus clavier vers le précédent onglet de pagination du groupe et sélectionne cet onglet de pagination. Si le focus clavier est positionné au niveau du premier panneau du groupe au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du dernier onglet de pagination du groupe et cet onglet de pagination est sélectionné.
Ctrl + Page suivante
Lorsque le focus est positionné dans un panneau, déplace le focus clavier vers l’onglet de pagination suivant dans le groupe et sélectionne cet onglet de pagination. Si le focus clavier est positionné au niveau du dernier panneau du groupe au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du premier onglet de pagination du groupe et cet onglet de pagination est sélectionné.
Entrée et Espace
Lorsque le focus clavier est positionné sur les boutons de navigation, affiche le panneau précédent ou suivant.
Lorsque le focus clavier est positionné sur le bouton de mise en pause et de relance du défilement, stoppe et relance alternativement le mouvement.
Comportements attendus
- Parmi tous les onglets de pagination, un seul onglet de pagination peut être sélectionné à la fois et seul l’onglet de pagination actif peut recevoir le focus clavier.
- Lorsqu’un onglet de pagination inactif est sélectionné, l’onglet de pagination précédemment sélectionné devient inactif et le focus clavier est positionné au niveau de l’onglet de pagination nouvellement sélectionné.
- Un seul panneau peut être affiché à la fois. Seul le panneau associé à l’onglet de pagination en cours de sélection est affiché. Les autres panneaux sont masqués avec
aria-hidden="true"
et éventuellementdisplay: none;
ouvisibility: hidden;
. - Il ne doit pas être possible de tabuler sur les éventuels éléments interactifs contenus dans les panneaux masqués. Un attribut
tabindex="-1"
doit être rajouté dynamiquement sur chacun de ces éléments. L’attribut doit ensuite être supprimé dès lors que le panneau associé est affiché. - Les flèches de navigation sont utilisées pour naviguer dans la liste des onglets de pagination et pour sélectionner l’onglet de pagination courant.
- La valeur de l’attribut
aria-selected
doit être modifiée dynamiquement à chaque mise à jour du statut de l’onglet de pagination correspondant. - La valeur de l’attribut
tabindex
doit également être modifiée dynamiquement chaque fois que le statut de l’onglet de pagination est mis à jour. - La valeur de l’attribut
aria-hidden
doit être modifiée dynamiquement à chaque mise à jour du statut du panneau correspondant. - L’alternative textuelle du bouton-image « Arrêter le défilement du carrousel » doit être mise à jour lorsque le bouton-image est activé. Opter alors par exemple pour l’alternative « Relancer le défilement du carrousel ».
Remarque
À noter qu’il est également possible de remplacer les balises <img />
dans les boutons par du texte, des images vectorielles <svg>
, ou encore des police d’icônes.
Composants
Ces composants « Carrousels » sont proposés ici car leur niveau d’accessibilité est jugé bon ou très bon.
Toutefois, avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements.
8 commentaires
-
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/
-
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 ». :)
-
-
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
pararia-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.
-
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
-
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/
-
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.
-
-
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 ».
-
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
), nous allons effectivement prévoir l’ajout d’unaria-label
that identifies the purpose of the controls, e.g., « Choose slide to display ».aria-label
dans la balise<ul>
des boutons de navigation dans le carrousel.Johan
-