Carrousels

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.

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

8 commentaires

Haut de page