Carrousels

Sommaire

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

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 diapositives 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="Reprendre le défilement du carrousel" /></button>
<button><img src="precedent.png" alt="Diapositive précédente" /></button>
<div aria-live="polite">
  <div role="tabpanel" id="diapo-1" aria-roledescription="diapositive" aria-label="1 sur 4">
    [Contenu du premier panneau (affiché, car onglet associé sélectionné)]
  </div>
  <div role="tabpanel" id="diapo-2" aria-roledescription="diapositive" aria-label="2 sur 4">
    [Contenu du deuxième panneau (masqué)]
  </div>
  <div role="tabpanel" id="diapo-3" aria-roledescription="diapositive" aria-label="3 sur 4">
    [Contenu du troisième panneau (masqué)]
  </div>
  <div role="tabpanel" id="diapo-4" aria-roledescription="diapositive" aria-label="4 sur 4">
    [Contenu du quatrième panneau (masqué)]
  </div>
</div>
<div role="tablist" aria-label="Diapositives">
  <button role="tab" aria-selected="true" aria-controls="diapo-1"><img src="puce-active.png" alt="Diapositive 1" /></button>
  <button role="tab" tabindex="-1" aria-selected="false" aria-controls="diapo-2"><img src="puce.png" alt="Diapositive 2" /></button>
  <button role="tab" tabindex="-1" aria-selected="false" aria-controls="diapo-3"><img src="puce.png" alt="Diapositive 3" /></button>
  <button role="tab" tabindex="-1" aria-selected="false" aria-controls="diapo-4"><img src="puce.png" alt="Diapositive 4" /></button>
</div>
<button><img src="suivant.png" alt="Diapositive suivante" /></button>

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

• role="tablist" et aria-label="Diapositives" doivent être appliqués sur l’élément englobant les onglets de pagination.
• role="tab" doit être appliqué sur chaque onglet de pagination.
• L’attribut tabindex="-1" doit être appliqué sur les onglets qui ne sont pas sélectionnés.
• 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.
• L’attribut aria-live doit être appliqué sur le conteneur des diapositives. Sa valeur doit être renseignée dynamiquement en fonction de l’état du défilement du carrousel :
  • aria-live="polite" si le carrousel ne défile pas automatiquement.
  • aria-live="off" si le carrousel défile automatiquement.
• role="tabpanel", aria-roledescription="diapositive" et aria-label="1 sur 4" doivent être appliqués sur chaque diapositive. Les valeurs de ce dernier attribut doivent être renseignées dynamiquement, en fonction du numéro et du nombre total de diapositives.
• Les diapositives qui ne sont pas affichées doivent être cachées via la classe CSS display: none; ou visibility: hidden;. Si ce n’est pas possible, appliquer les recommandations suivantes :
  • L’attribut aria-hidden doit être appliqué sur chaque diapositive. Sa valeur doit être renseignée dynamiquement en fonction de l’état de la diapositive associée :
    • aria-hidden="false" sur la diapositive affichée.
    • aria-hidden="true" sur les autres diapositives.
  • tabindex="-1" doit être appliqué dynamiquement sur chaque élément interactif contenu dans une diapositive masquée. L’attribut ne doit pas être présent sur les éléments interactifs contenus dans la diapositive affichée.
• Chaque onglet de pagination doit être rattaché à sa diapositive associée via l’attribut aria-controls :
  • Chaque diapositive 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 de la diapositive associée.

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

Début

Déplace le focus sur le premier onglet de pagination et affiche la première diapositive.

Fin

Déplace le focus sur le dernier onglet de pagination et affiche la dernière diapositive.

Entrée et Espace

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

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é.
• Seules la ou les diapositives associées à l’onglet de pagination en cours de sélection sont affichées. Les autres diapositives sont masquées avec display: none; ou visibility: hidden; ou éventuellement avec aria-hidden="true".
• Il ne doit pas être possible de tabuler sur les éventuels éléments interactifs contenus dans les diapositives masquées. Si les diapositives masquées ne sont pas cachées via les CSS, un attribut tabindex="-1" doit être rajouté dynamiquement sur chacun de ces éléments interactifs. L’attribut doit ensuite être supprimé dès lors que la diapositive associée est affichée.
• 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="-1" doit également être modifiée dynamiquement chaque fois que le statut de l’onglet de pagination est mis à jour.
• Si utilisée, 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 « Reprendre le défilement du carrousel » doit être mise à jour lorsque le bouton-image est activé. Opter alors par exemple pour l’alternative « Arrêter le défilement du carrousel ».

Remarques

• À noter qu’il est également possible de remplacer les balises <img /> dans les boutons par du texte, des images vectorielles <svg>, ou encore des polices d’icônes.
• Dans le cas d’un carrousel ne contenant pas de puces de pagination, l’ensemble des interactions au clavier et des comportements attendus propres au système d’onglets sont à ignorer. Ainsi, dans le socle HTML, les puces de navigation seront supprimées, et l’attribut role="tabpanel" présent sur les diapositives sera remplacé par role="group".

8 commentaires

Mises à jour

Haut de page