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

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.

Ce carrousel animé dispose d’un système de mise en pause du mouvement.

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

<button><img src="pause.png" alt="Arrêter le défilement du carrousel" /></button>
<ul role="tablist">
<li role="tab" tabindex="-1" aria-selected="false" aria-controls="panneau-1"><img src="puce.png" alt="Panneau 1" /></li>
<li role="tab" tabindex="0" aria-selected="true" aria-controls="panneau-2"><img src="puce-active.png" alt="Panneau 2" /></li>
<li role="tab" tabindex="-1" aria-selected="false" aria-controls="panneau-3"><img src="puce.png" alt="Panneau 3" /></li>
</ul>
<button><img src="precedent.png" alt="Panneau précédent" /></button>
<div>
<div role="tabpanel" id="panneau-1" aria-hidden="true">
[Contenu du premier panneau (masqué)]
<a href="#" tabindex="-1">Exemple de lien</a>
</div>
<div role="tabpanel" id="panneau-2" aria-hidden="false">
[Contenu du deuxième panneau (affiché, car onglet associé sélectionné)]
<a href="#">Exemple de lien</a>
</div>
<div role="tabpanel" id="panneau-3" aria-hidden="true">
[Contenu du troisième panneau (masqué)]
<a href="#" tabindex="-1">Exemple de lien</a>
</div>
</div>
<button><img src="suivant.png" alt="Panneau suivant" /></button>

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’attribut id du panneau associé.

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 éventuellement display: none; ou visibility: 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

  • 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

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

Ajouter un commentaire

Tous les champs sont obligatoires.

Haut de page