Les bonnes pratiques pour les carrousels

Pourquoi ? #

Le carrousel est un outil de communication dynamique, dont l'utilité n'est clairement pas à la hauteur de sa popularité (Carousel Interaction Stats).
Si toutefois vous souhaitez malgré tout 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 ci-dessous :

  • La durée du mouvement doit être inférieure ou égale à 5 secondes,
  • ou, l'utilisateur doit pouvoir arrêter et relancer le mouvement,
  • ou, l'utilisateur doit pouvoir afficher et masquer le contenu en mouvement,
  • ou, l'utilisateur doit pouvoir afficher la totalité de l'information sans le mouvement.

Bonnes pratiques  #

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

  • Il vaut mieux positionner le bouton d'arrêt du carrousel juste avant celui-ci (dans le code), afin d'être atteignable rapidement par l'utilisateur.
  • Le contenu doit être manipulable avec des raccourcis clavier (touche espace pour arrêter, Ctrl + flèche  pour «suivant » ou «précédent » etc.).
  • À la prise de focus (clavier ou souris), il est préférable que la rotation du carrousel s'arrête et reprenne lors de la perte du focus.
  • La visualisation de la position courante via la navigation à points permet à l'utilisateur de mieux s'y retrouver et pour finir, il est préférable de ne pas mettre plus de 3 panneaux dans le carrousel.

Comment ?  #

Afin de rendre tout ceci accessible, nous allons pouvoir 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 onglet doivent avoir l'attribut tabindex="-1" .
  • tabindex="-1" omettra complètement l'élément du focus clavier, cet élément ne sera pas atteignable pour un utilisateur navigant au clavier.
  • aria-selected="true" doit être appliqué sur l'onglet de pagination sélectionné, les autres onglets doivent avoir l'attribut aria-selected="false" .
  • aria-hidden="false" sur le panneau affiché.
  • aria-hidden="true" sur les autres panneaux.
  • aria-roledescription permet d'indiquer le type de contenu.
  • aria-label permettra d'ajouter de l'information sur les panneaux (numéro courant du panneau et le nombre total de panneau).
  • aria-controls relie les boutons au contenu.
  • aria-selected pour indiquer la position courante au lecteurs d'écran sur les boutons de la navigation par points.

Exemple HTML  #

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

<button type="button" class="btn btn-icon btn-secondary carousel-control-play-pause pause mt-1" data-bs-target="#carouselExamplePause" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
  <span class="visually-hidden">Pause Carousel</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="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="2" aria-label="Slide 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">Previous</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">Next</span>
  </button>
</div>

Sources  #