Accessia

Composant accessible · outil gratuit

Carrousel accessible : boutons nommés, pause, diapositives masquées

Un carrousel accessible a des boutons « Diapositive précédente » et « Diapositive suivante » nommés, masque réellement les diapositives inactives et, s'il défile tout seul plus de cinq secondes, propose un bouton pour arrêter le défilement. Le plus accessible reste souvent un carrousel qui ne défile pas seul.

Critères RGAA 4.1.2 : 7.1, 7.3, 10.8, 13.8 · WCAG 2.2 : 2.2.2, 4.1.2, 2.1.1, 1.3.1 · mis à jour le .

Générer et vérifier le composant

Réglez le composant : le code se met à jour, l'aperçu fonctionne pour de vrai, et chaque version est vérifiée en direct par les contrôles du composant, un test de comportement et axe-core. « Introduire une erreur fréquente » montre ce que chaque contrôle détecte ; « Tester mon code » vérifie le vôtre.

Réglages

Pour voir le contrôle qui la détecte (les erreurs de comportement apparaissent avec « Tester le comportement »).

<section class="carrousel" aria-roledescription="carrousel" aria-label="Actualités">
  <div class="carrousel-commandes">
    <button type="button" class="carrousel-prec" aria-label="Diapositive précédente"><span aria-hidden="true">‹</span></button>
    <button type="button" class="carrousel-suiv" aria-label="Diapositive suivante"><span aria-hidden="true">›</span></button>
  </div>
  <div class="carrousel-diapos" aria-live="polite">
    <div class="diapo" role="group" aria-roledescription="diapositive" aria-label="1 sur 3">
      <h3>Nouveautés</h3>
      <p>Découvrez la collection d'automne. <a href="#">En savoir plus<span class="sr-only"> : Nouveautés</span></a></p>
    </div>
    <div class="diapo" role="group" aria-roledescription="diapositive" aria-label="2 sur 3" hidden>
      <h3>Promotions</h3>
      <p>Jusqu'à -30 % cette semaine. <a href="#">En savoir plus<span class="sr-only"> : Promotions</span></a></p>
    </div>
    <div class="diapo" role="group" aria-roledescription="diapositive" aria-label="3 sur 3" hidden>
      <h3>Événements</h3>
      <p>Rencontrez-nous au salon du 12 décembre. <a href="#">En savoir plus<span class="sr-only"> : Événements</span></a></p>
    </div>
  </div>
</section>

Aperçu réel (utilisable à la souris et au clavier)

Vérification en direct

Qui est gêné quand le composant est mal fait

  • Personnes qui lisent lentement : une diapositive qui change avant la fin de leur lecture leur fait perdre l'information.
  • Personnes ayant des troubles de l'attention : un mouvement continu les empêche de lire le reste de la page.
  • Personnes aveugles : des flèches « ‹ › » sans nom sont annoncées « bouton » ; des diapositives transparentes sont lues toutes à la suite.
  • Personnes qui naviguent au clavier : les liens des diapositives invisibles reçoivent le focus : elles ne voient plus où elles sont.

Le comportement attendu

Au clavier

Touche ou momentCe qui doit se passer
TabAtteint le bouton de pause (s'il y a un défilement), puis Précédente, Suivante, puis le contenu de la diapositive affichée.
Entrée ou EspaceActive le bouton : pause ou reprise, diapositive précédente ou suivante.
Entrée du focus dans le carrouselLe défilement automatique s'arrête, pour lire sans que le contenu change.

Avec un lecteur d'écran

  • Le carrousel est annoncé « Actualités, carrousel » ; chaque diapositive « 1 sur 3, diapositive ».
  • Sans défilement automatique, le changement de diapositive est annoncé (aria-live="polite") ; pendant le défilement, il ne l'est pas, pour ne pas interrompre la lecture.

Les erreurs les plus fréquentes

  • Un défilement sans pause. Plus de cinq secondes de mouvement automatique sans bouton pour l'arrêter (critère 13.8).
  • Des flèches sans nom. « ‹ » et « › » ne disent pas l'action à un lecteur d'écran.
  • Des diapositives seulement transparentes. opacity: 0 ou décalage hors cadre : invisibles mais lues et atteignables (critère 10.8).
  • Une pause au seul survol. Le carrousel s'arrête sous la souris, jamais au clavier.

Tester soi-même

  1. Si le carrousel défile seul, vérifiez qu'un bouton l'arrête, atteignable au clavier avant les diapositives.
  2. Avec Tab, parcourez le carrousel : seul le contenu de la diapositive affichée doit recevoir le focus.
  3. Avec un lecteur d'écran, vérifiez les noms des boutons et l'annonce « 1 sur 3 ».

Ce qu'Accessia détecte dans un audit

Avec le rendu navigateur, Accessia mesure la présence de contenu en mouvement : sans aucun, les critères 13.7 et 13.8 sont proposés comme non applicables ; avec un carrousel, ils restent à vérifier. Les boutons sans nom (« ‹ » vide) sont signalés automatiquement (critère 11.9). La présence d'une pause et le masquage des diapositives se vérifient en utilisant le carrousel, comme le fait le test ci-dessus.

Auditer une page gratuitement, ou vérifiez ce composant directement dans votre éditeur de code avec le serveur MCP d'Accessia.

Critères RGAA concernés

Questions fréquentes

Un carrousel est-il interdit ?

Non. Mais un carrousel qui ne défile pas seul pose beaucoup moins de problèmes ; s'il défile, il lui faut un bouton pour l'arrêter (critère 13.8).

Faut-il des points de navigation (1, 2, 3) ?

Ce n'est pas exigé. S'il y en a, ce sont des boutons nommés (« Diapositive 2 ») et celui de la diapositive affichée l'indique (aria-current ou aria-pressed).

Pourquoi aria-live="off" pendant le défilement ?

Sinon chaque changement automatique interromprait le lecteur d'écran toutes les cinq secondes. Quand le défilement est arrêté, les changements voulus par la personne sont annoncés.

Ce code rend-il mon site conforme ?

Il rend ce carrousel conforme aux contrôles affichés. Les images et textes des diapositives restent à vérifier.

Autres composants accessibles