Carrousel de diapositives

Mots-clés

1. Diapositives : Ce sont les éléments de contenu distincts présentés dans le carrousel, comprenant des images, du texte, des vidéos ou toute combinaison de ces composants.
2. Flèches de navigation : Généralement représentées par des flèches gauche et droite, elles permettent aux utilisateurs de naviguer manuellement à travers les diapositives.
3. Boutons de pagination : Ils sont souvent affichés sous forme de points ou de numéros correspondant à chaque diapositive dans la séquence. Ces boutons offrent un moyen alternatif pour les utilisateurs de naviguer manuellement à travers les diapositives tout en montrant la position actuelle dans l'ensemble des diapositives.
4. Conteneur : Il s'agit du conteneur principal qui englobe tous les éléments du carrousel. Il contient généralement la diapositive actuellement affichée, les contrôles de navigation et d'autres composants.
5. Contenu : Les diapositives peuvent afficher du texte, des images et du contenu multimédia.
6. Bouton CTA - Call to Action (facultatif) : Les diapositives peuvent comporter un bouton d'appel à l'action, incitant les utilisateurs à entreprendre des actions spécifiques telles que 'Acheter maintenant', 'Lire la suite', 'S'inscrire', etc.

Répartition des composants

Conteneur

Les carrousels regroupent généralement plusieurs diapositives, ce qui en fait des composant complexes.
Pour les désigner comme tels pour les technologies d'assistance :

• Appliquez role="group" ou role="region" ( ou la balise native <section>) au conteneur principal pour indiquer un point de repère important.
• Utilisez role="list" (ou la balise native <ul>) sur le conteneur des diapositives pour signaler qu’il s’agit d’une liste d’éléments.

Titre du carrousel : Fournissez un titre clair afin que les utilisateurs de lecteurs d’écran comprennent immédiatement le contenu du carrousel.

• Utilisez aria-label si le titre n’est pas visible dans le code.
• Utilisez aria-labelledby si un titre visible existe déjà : attribuez un ID au titre et liez-le au carrousel via cet attribut.

<div id="carousel" role="group" aria-label="Carrousel des actualités à la une">
  <div id="carouselSlides" role="list">
    <!-- Toutes les diapositives -->
  </div>
</div>

<div id="carousel" role="group" aria-label="Carrousel des actualités à la une">
  <div id="carouselSlides" role="list">
    <!-- Toutes les diapositives -->
  </div>
</div>

Diapositives

Puisque le conteneur des diapositives est défini comme une liste, chaque diapositive doit être étiquetée comme élément de liste avec role="listitem" (ou en utilisant les balises <li> natives).
Cela permet aux lecteurs d’écran de percevoir le carrousel comme une collection d’éléments et d’annoncer le nombre total de diapositives.

<div id="slide1" role="listitem">
    <h2>Diopositive 1 Titre</h2>
    <p>Diopositive 1 Contenu</p>
</div>
<div id="slide2" role="listitem">
    <h2>Diopositive 2 Titre</h2>
    <p>Diopositive 2 Contenu</p>
</div>

<div id="slide1" role="listitem">
    <h2>Diopositive 1 Titre</h2>
    <p>Diopositive 1 Contenu</p>
</div>
<div id="slide2" role="listitem">
    <h2>Diopositive 2 Titre</h2>
    <p>Diopositive 2 Contenu</p>
</div>

Flèches de navigation

1. Configuration : Il est préférable de les définir en utilisant l'élément <button>, qui offre par défaut plusieurs attributs accessibles.
2. Fournir des titres clairs : Utilisez les attributs aria-label sur chaque bouton pour clarifier leur fonction pour les utilisateurs de lecteurs d'écran. Par exemple, aria-label="Diapositive suivante" et aria-label="Diapositive précédente".
3. Clarté du focus visible : Assurez-vous toujours d'une indication visuelle claire lorsque les flèches reçoivent le focus au clavier.
4. Aspects visuels : Assurez-vous que les flèches soient facilement visibles, avec un contraste élevé par rapport à l’arrière-plan et une taille suffisante pour faciliter le clic ou l’activation.
   Visuellement, elles peuvent apparaître de part et d’autre du carrousel, mais dans le DOM, les boutons restent consécutifs afin de préserver une navigation cohérente au clavier et avec les technologies d’assistance.
5. État : Lorsque la fin ou le début du carrousel est atteint, il est important de désactiver la flèche suivante ou précédente en conséquence. Elles peuvent également être cachées, mais cette action doit systématiquement utiliser les attributs aria-hidden ou aria-disabled.
6. Icônes : Si des balises <svg> sont utilisées pour créer des flèches visuelles, ces icônes sont décoratives et doivent posséder l'attribut aria-hidden="true". Cela les masque des technologies d'assistance pour améliorer l'accessibilité.

<button id="prevSlide" aria-label="Diapositive précédente">
    <!-- SVG ou icône pour la flèche ici -->
</button>

<button id="nextSlide" aria-label="Diapositive suivante">
    <!-- SVG ou icône pour la flèche ici -->
</button>

<button id="prevSlide" aria-label="Diapositive précédente">
    <!-- SVG ou icône pour la flèche ici -->
</button>

<button id="nextSlide" aria-label="Diapositive suivante">
    <!-- SVG ou icône pour la flèche ici -->
</button>

Boutons de pagination

1. Le Conteneur : Regroupez tous les boutons et fournissez-leur un titre significatif pour que les utilisateurs de technologies d’assistance comprennent qu’ils servent à naviguer dans le carrousel.
   Utilisez role="group" pour définir le groupe et aria-label pour fournir le titre.
2. Configuration : Il est préférable de les définir en utilisant l'élément <button>, qui offre par défaut plusieurs attributs accessibles.
3. Fournir des titres clairs : Utilisez les attributs aria-label sur chaque bouton pour clarifier leur fonction pour les utilisateurs de lecteurs d'écran. Par exemple, aria-label="Aller aux diapositives 7 à 9".
4. Indiquer le bouton actuel : Le bouton correspondant à la diapositive affichée doit être visuellement distinct (par exemple par une couleur ou une bordure). Utilisez l’attribut aria-pressed pour indiquer l’état : aria-pressed="true" pour le bouton actif et aria-pressed="false" pour les autres. Mettez ces attributs à jour dynamiquement lorsque les diapositives changent.
5. Clarté du focus visible : Assurez-vous toujours qu'une indication visuelle claire soit présente lorsque les boutons de pagination reçoivent le focus au clavier.

<div aria-label="Carousel Pagination" role="group" aria-label="Carousel pagination">
  <button aria-label="Allez à la diapositive 1 sur 3" aria-pressed="true">1</button>
  <button aria-label="Allez à la diapositive 4 sur 6" aria-pressed="false">2</button>
  <button aria-label="Allez à la diapositive 7 sur 9" aria-pressed="false">3</button>
</div>

<div aria-label="Carousel Pagination" role="group" aria-label="Carousel pagination">
  <button aria-label="Allez à la diapositive 1 sur 3" aria-pressed="true">1</button>
  <button aria-label="Allez à la diapositive 4 sur 6" aria-pressed="false">2</button>
  <button aria-label="Allez à la diapositive 7 sur 9" aria-pressed="false">3</button>
</div>

Interaction avec le clavier

Ordre initial de tabulation

L'ordre du focus dans un carrousel doit logiquement correspondre à la position visuelle du contenu, afin d'assurer la compréhension pour tous les utilisateurs, en particulier ceux qui dépendent de la navigation au clavier ou des lecteurs d'écran. Voici l'ordre du focus recommandé :

1. Diapositives : Initialement, le focus doit être dirigé vers la première diapositive visible. Dans les cas où ces diapositives contiennent des éléments interactifs comme des liens ou des boutons, il est crucial de les intégrer dans la séquence de focus existante. Si plusieurs diapositives sont visibles simultanément, le focus doit passer par chacune d'elles avant de progresser vers l'élément suivant.
2. Flèches de navigation : Ensuite, le focus doit être dirigé vers les flèches de navigation. Si la flèche précédente est visible et activée, elle doit être le premier focus avant le bouton suivant.
3. Boutons de pagination : Enfin, les boutons de pagination doivent recevoir le focus. Ces boutons permettent aux utilisateurs de choisir directement des diapositives individuelles.

Après l'interaction

Lorsque l'utilisateur clique sur le bouton suivant ou précédent dans un carrousel ou les active à l'aide du clavier, le focus doit idéalement se déplacer vers le contenu de la nouvelle diapositive présentée. L'ordre de tabulation devrait maintenant être le suivant :

1. Diapositives et tout contenu interactif qu'elles pourraient contenir.
2. Flèches de navigation. D'abord le bouton précédent, puis le bouton suivant.
3. Boutons de pagination.