Carrousels accessibles : faut-il vraiment les utiliser ?

Les carrousels (ou sliders) sont partout sur le web, particulièrement sur les pages d'accueil des sites e-commerce et institutionnels. Pourtant, ils cumulent de nombreux problèmes d'accessibilité et d'utilisabilité. Faut-il les bannir complètement ou peut-on les rendre accessibles ?

Le problème avec les carrousels

Avant de parler d'accessibilité, rappelons les problèmes fondamentaux des carrousels.

Statistiques d'utilisation décevantes

Des études UX montrent régulièrement que :

• Moins de 1% des utilisateurs cliquent sur un carrousel
• La quasi-totalité des clics concernent la première slide visible
• Le contenu des slides suivantes est rarement vu

Problèmes d'accessibilité récurrents

Les carrousels posent plusieurs défis :

• Rotation automatique : Distrait et désoriente certains utilisateurs
• Navigation clavier : Souvent incomplète ou absente
• Lecteurs d'écran : Contenu qui change sans avertissement
• Contrôle utilisateur : Impossibilité de stopper le mouvement

[!NOTE] Si vous pouvez éviter d'utiliser un carrousel, c'est probablement la meilleure solution d'accessibilité. Mais si le carrousel est imposé, voici comment le rendre accessible.

Exigences WCAG pour les carrousels

WCAG 2.2.2 : Pause, Stop, Hide

Ce critère (niveau A) exige que pour tout contenu en mouvement, défilant ou mis à jour automatiquement :

• L'utilisateur puisse le mettre en pause, l'arrêter ou le masquer
• Le mécanisme de contrôle soit facilement accessible

Pour un carrousel avec rotation automatique, cela signifie un bouton pause/lecture visible et accessible au clavier.

WCAG 2.1.1 : Clavier

Tous les contrôles du carrousel doivent être utilisables au clavier :

• Navigation entre les slides (flèches précédent/suivant)
• Bouton pause/lecture
• Pagination (points indicateurs)
• Contenu interactif dans les slides

WCAG 4.1.2 : Nom, rôle, valeur

Les contrôles doivent avoir :

• Un nom accessible (aria-label ou texte visible)
• Un rôle sémantique compréhensible
• Un état communiqué aux technologies d'assistance

Implémentation d'un carrousel accessible

Structure HTML de base

<section
  aria-roledescription="carrousel"
  aria-label="Promotions en cours"
>
  <div class="carousel-controls">
    <button
      class="carousel-pause"
      aria-pressed="false"
      aria-label="Mettre en pause le carrousel"
    >
      <span aria-hidden="true">⏸</span>
    </button>

    <button
      class="carousel-prev"
      aria-label="Slide précédente"
    >
      <span aria-hidden="true">←</span>
    </button>

    <button
      class="carousel-next"
      aria-label="Slide suivante"
    >
      <span aria-hidden="true">→</span>
    </button>
  </div>

  <div
    class="carousel-slides"
    aria-live="off"
  >
    <div
      role="group"
      aria-roledescription="slide"
      aria-label="1 sur 3"
      class="slide active"
    >
      <!-- Contenu slide 1 -->
    </div>
    <div
      role="group"
      aria-roledescription="slide"
      aria-label="2 sur 3"
      class="slide"
      hidden
    >
      <!-- Contenu slide 2 -->
    </div>
    <!-- ... -->
  </div>

  <div class="carousel-pagination" role="tablist">
    <button
      role="tab"
      aria-selected="true"
      aria-label="Aller à la slide 1"
    ></button>
    <button
      role="tab"
      aria-selected="false"
      aria-label="Aller à la slide 2"
    ></button>
    <!-- ... -->
  </div>
</section>

Attributs ARIA expliqués

Gestion de aria-live

Le paramètre aria-live nécessite une gestion fine :

// Quand l'autoplay est actif
slidesContainer.setAttribute('aria-live', 'off');

// Quand l'utilisateur interagit manuellement
slidesContainer.setAttribute('aria-live', 'polite');

// Annoncer le changement
function announceSlide(index, total) {
  // Mise à jour pour les lecteurs d'écran
  currentSlide.setAttribute('aria-label', `${index} sur ${total}`);
}

[!TIP] N'utilisez aria-live="polite" que pour les changements manuels. Avec l'autoplay, les annonces continues seraient très intrusives.

Navigation clavier complète

Comportement attendu

Implémentation JavaScript

class AccessibleCarousel {
  constructor(element) {
    this.carousel = element;
    this.slides = element.querySelectorAll('.slide');
    this.pauseBtn = element.querySelector('.carousel-pause');
    this.isPlaying = true;
    this.currentIndex = 0;

    this.init();
  }

  init() {
    // Gestion du bouton pause
    this.pauseBtn.addEventListener('click', () => this.togglePlay());

    // Navigation clavier
    this.carousel.addEventListener('keydown', (e) => {
      switch(e.key) {
        case 'ArrowLeft':
          this.prev();
          break;
        case 'ArrowRight':
          this.next();
          break;
        case 'Escape':
          this.pause();
          break;
      }
    });

    // Pause au survol et focus
    this.carousel.addEventListener('mouseenter', () => this.pause());
    this.carousel.addEventListener('focusin', () => this.pause());
    this.carousel.addEventListener('mouseleave', () => {
      if (this.isPlaying) this.play();
    });
  }

  togglePlay() {
    this.isPlaying ? this.pause() : this.play();
  }

  pause() {
    clearInterval(this.autoplayTimer);
    this.pauseBtn.setAttribute('aria-pressed', 'true');
    this.pauseBtn.setAttribute('aria-label', 'Reprendre le carrousel');
  }

  play() {
    this.autoplayTimer = setInterval(() => this.next(), 5000);
    this.pauseBtn.setAttribute('aria-pressed', 'false');
    this.pauseBtn.setAttribute('aria-label', 'Mettre en pause le carrousel');
  }

  goTo(index) {
    this.slides[this.currentIndex].hidden = true;
    this.slides[this.currentIndex].classList.remove('active');

    this.currentIndex = index;

    this.slides[this.currentIndex].hidden = false;
    this.slides[this.currentIndex].classList.add('active');

    // Mise à jour aria-label
    this.slides[this.currentIndex].setAttribute(
      'aria-label',
      `${index + 1} sur ${this.slides.length}`
    );
  }

  next() {
    const nextIndex = (this.currentIndex + 1) % this.slides.length;
    this.goTo(nextIndex);
  }

  prev() {
    const prevIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
    this.goTo(prevIndex);
  }
}

Bonnes pratiques additionnelles

Désactiver l'autoplay par défaut

Le mouvement automatique est problématique pour :

• Les personnes avec troubles de l'attention
• Les utilisateurs de lecteurs d'écran
• Les personnes souffrant de troubles vestibulaires

// Respecter les préférences utilisateur
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (prefersReducedMotion) {
  carousel.pause();
}

Vitesse de rotation adéquate

Si l'autoplay est activé, laissez suffisamment de temps pour lire le contenu :

• Minimum 5 secondes par slide
• Idéalement 7-10 secondes pour du contenu textuel
• Pause automatique au survol/focus

Indicateurs visuels clairs

• Points de pagination visibles indiquant le nombre de slides
• Slide actuelle clairement identifiée
• Boutons précédent/suivant toujours visibles
• Icône pause/lecture explicite

Alternatives aux carrousels

Avant d'implémenter un carrousel, considérez ces alternatives plus accessibles :

[!NOTE] Le défilement horizontal avec boutons (sans autoplay) est souvent une meilleure alternative qu'un carrousel traditionnel.

Test d'accessibilité du carrousel

Checklist de validation :

1. Bouton pause : Visible, focusable, fonctionnel ?
2. Navigation clavier : Flèches, Tab, Échap fonctionnent ?
3. Lecteur d'écran : Slides annoncées correctement ?
4. Contenu interactif : Liens/boutons dans les slides accessibles ?
5. prefers-reduced-motion : Respecte les préférences utilisateur ?
6. Focus visible : Indicateur de focus sur tous les contrôles ?

Vérifiez l'accessibilité globale de votre site avec notre outil d'audit RGAA.

Conclusion

Les carrousels peuvent être rendus accessibles, mais cela demande un effort considérable. La question fondamentale reste : le carrousel apporte-t-il suffisamment de valeur pour justifier cet effort ?

Dans la plupart des cas, une alternative statique ou un défilement horizontal contrôlé par l'utilisateur offrira une meilleure expérience pour tous, y compris les personnes handicapées.

Si vous devez absolument utiliser un carrousel, assurez-vous qu'il respecte les critères WCAG 2.2.2 (contrôle du mouvement) et 2.1.1 (accessibilité clavier), avec une implémentation soignée des attributs ARIA et une gestion appropriée des annonces pour lecteurs d'écran.