Les bonnes pratiques pour les carrousels

  • Web
  • Intermédiaire

Mise à jour de l'article du

Pourquoi #

Le carrousel est un outil de communication dynamique, souvent employé alors que ses avantages pour l'accessibilité et l'expérience utilisateur demeurent limités (Carousel Interaction Stats).
Si, malgré tout, vous souhaitez en développer un, voici quelques bonnes pratiques à mettre en place pour qu'il soit utilisable.

Règles de conformité #

Pour être conforme, le carrousel doit respecter au moins une des règles suivantes :

  • La durée du mouvement doit être inférieure ou égale à 5 secondes (conformément aux règles définies dans le critère 2.2.2: Pause, Stop, Hide (Level A)).
  • L'utilisateur doit pouvoir arrêter et relancer le mouvement.
  • L'utilisateur doit pouvoir afficher et masquer le contenu en mouvement.
  • L'utilisateur doit pouvoir afficher la totalité de l'information sans que le contenu soit en mouvement.

Bonnes pratiques #

Pour aller un peu plus loin, voici quelques bonnes pratiques supplémentaires :

  • Il est préférable de positionner le bouton d'arrêt juste avant le carrousel dans l'ordre du DOM, afin que le bouton soit atteint facilement par la navigation clavier.
  • Le contenu doit être utilisable au clavier : touche Espace pour arrêter, Ctrl + flèche gauche/droite pour naviguer entre les diapositives, etc. La liste complète des interactions au clavier est détaillée dans le patron de conception ARIA des carrousels.
  • Il est préférable d'arrêter la rotation lorsque l'élément reçoit le focus, et de la relancer lorsqu'il le perd.
  • La visualisation de la position courante via la navigation par points permet à l'utilisateur de mieux s'y retrouver. Enfin, il est recommandé de ne pas mettre plus de trois diapositives dans le carrousel.

Comment ? #

Afin de rendre tout ceci accessible, nous allons nous appuyer sur les attributs suivants :

  • role="tablist" doit être appliqué sur l'élément englobant les onglets de pagination.
  • role="tab" doit être appliqué sur chaque onglet de pagination.
  • tabindex="0" doit être appliqué sur l'onglet de pagination sélectionné, les autres onglets doivent avoir l'attribut tabindex="-1".
  • tabindex="-1" retire l'élément de l'ordre de tabulation : il ne sera pas atteignable au clavier.
  • aria-selected="true" pour indiquer la position courante aux lecteurs d'écran sur les boutons de la navigation par points, les autres boutons doivent avoir l'attribut aria-selected="false".
  • aria-hidden="false" sur la diapositive active.
  • aria-hidden="true" sur les autres diapositives.
  • aria-roledescription permet d'indiquer le type de contenu.
  • aria-label permettra d'ajouter de l'information sur les diapositives (numéro de la diapositive active et nombre total de diapositives).
  • aria-controls relie les boutons au contenu.

Exemple HTML #

Ci-dessous, un exemple de carrousel accessible au format HTML :

<button type="button" class="btn btn-icon btn-outline-secondary carousel-control-play-pause pause mt-1" data-bs-target="#carouselExamplePause" data-bs-play-text="Lecture" data-bs-pause-text="Pause" title="Pause">
  <span class="visually-hidden">Pause</span>
</button>
<div id="carouselExamplePause" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Diapositive 1"></button>
    <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="1" aria-label="Diapositive 2"></button>
    <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="2" aria-label="Diapositive 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExamplePause" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Précédent</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExamplePause" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Suivant</span>
  </button>
</div>

Webographie #