# Carrousels et sliders : pourquoi ce composant reste un cauchemar d’accessibilité

> Aucun autre composant de site web ne cumule autant de défauts d'accessibilité qu'un carrousel d'images. Défilement automatique, focus perdu, contenu caché : le tour du problème.

- Auteur : Clément Hadrot
- Publié le : 2025-01-15
- Mis à jour le : 2025-01-15
- Catégorie : Accessibilité
- URL : https://wpmoderne.dev.wordpress-developpement.fr/accessibilite/carrousels-sliders-probleme-accessibilite-wordpress/

## L’essentiel

- Un carrousel qui défile seul doit pouvoir être mis en pause
- Le contenu des diapositives masquées ne doit pas rester dans l'ordre de tabulation
- Beaucoup de sites gagnent à simplement supprimer le carrousel

Le carrousel d'images en page d'accueil reste l'un des composants les plus demandés par les clients, et l'un des plus problématiques du point de vue de l'accessibilité, au point que de nombreux experts du domaine recommandent de s'en passer purement et simplement plutôt que de tenter de le corriger. Comprendre pourquoi ce composant cumule autant de défauts aide à mieux orienter la conversation avec un client qui en réclame un.

Voici les problèmes les plus fréquents rencontrés sur les carrousels WordPress, qu'ils soient générés par un plugin dédié ou par le bloc natif de l'éditeur, et les corrections possibles quand la suppression pure et simple n'est pas envisageable.

## Premier problème : le défilement automatique non maîtrisé

Le critère WCAG 2.2.2 Pause, arrêt, masquage impose qu'un contenu en mouvement automatique, qui dure plus de cinq secondes, puisse être mis en pause, arrêté ou masqué par l'utilisateur. Un carrousel qui change de diapositive automatiquement toutes les trois ou quatre secondes, sans bouton de pause visible, échoue systématiquement à ce critère. Ce défaut ne touche pas qu'un public en situation de handicap : un utilisateur qui commence à lire le texte d'une diapositive et se la voit retirer avant d'avoir terminé sa lecture, quelle que soit sa situation, subit la même frustration.

## Deuxième problème : le contenu masqué reste focusable

Un défaut technique plus subtil, mais tout aussi fréquent : les liens et boutons des diapositives non visibles à l'écran restent souvent présents dans le DOM sans être retirés de l'ordre de tabulation. Un utilisateur clavier, en appuyant sur Tab, voit alors son focus « disparaître » sur un élément invisible, sans retour visuel, une expérience profondément déroutante.

> L'essentiel à retenir : Un carrousel qui défile seul doit pouvoir être mis en pause ; Le contenu des diapositives masquées ne doit pas rester dans l'ordre de tabulation ; Beaucoup de sites gagnent à simplement supprimer le carrousel

```
// Retirer les diapositives masquées de l'ordre de tabulation
document.querySelectorAll('.slide:not(.is-active) a, .slide:not(.is-active) button')
  .forEach(function (element) {
    element.setAttribute('tabindex', '-1');
    element.setAttribute('aria-hidden', 'true');
  });
```

Cette correction doit être appliquée dynamiquement à chaque changement de diapositive, en retirant `tabindex="-1"` et `aria-hidden` dès que la diapositive redevient active, sous peine de rendre son contenu inaccessible en permanence.

## Troisième problème : des libellés de navigation peu clairs

Les flèches précédent et suivant, ainsi que les puces de pagination, sont fréquemment codées sans texte alternatif exploitable, réduites à une icône seule sans `aria-label`. Un lecteur d'écran annonce alors « bouton » sans autre précision, sans indiquer s'il s'agit d'avancer, de reculer, ou d'atteindre une diapositive précise.

- Bouton précédent : `aria-label="Diapositive précédente"`
- Bouton suivant : `aria-label="Diapositive suivante"`
- Puce de pagination : `aria-label="Aller à la diapositive 3 sur 5"`
- Conteneur du carrousel : `role="region"` avec `aria-label="Carrousel d'images"`

## Faut-il simplement supprimer le carrousel ?

Face à l'accumulation de ces défauts, et au coût de leur correction complète, une partie non négligeable des experts en accessibilité et en expérience utilisateur recommande une option plus radicale : remplacer le carrousel par une image statique unique, accompagnée d'un texte clair et d'un seul appel à l'action. Plusieurs études indépendantes sur le comportement des visiteurs ont montré que le taux de clic sur les diapositives autres que la première d'un carrousel reste marginal, ce qui affaiblit fortement l'argument commercial en faveur du composant, indépendamment même de la question de l'accessibilité.

> Un carrousel bien corrigé pour l'accessibilité reste un carrousel complexe à maintenir. Un client qui accepte de le remplacer par une bannière statique gagne souvent en simplicité, en performance de chargement, et en accessibilité, les trois d'un seul geste.

## Quand le carrousel reste incontournable

Certains contextes justifient malgré tout un carrousel, notamment une galerie de portfolio ou une liste de témoignages clients à défilement volontaire. Dans ce cas, le bloc Galerie natif de l'éditeur ou une extension reconnue pour son sérieux en matière d'accessibilité doit être préféré à un développement improvisé, et chacun des trois points ci-dessus doit être vérifié individuellement avant mise en production.

## En résumé

Le carrousel d'accueil cumule à lui seul plusieurs défauts d'accessibilité parmi les plus fréquents : défilement automatique incontrôlé, focus perdu sur du contenu invisible, et libellés de navigation insuffisants. Corriger ces trois points reste possible, mais l'option la plus efficace, dans bien des cas, consiste à remettre en question la pertinence même du composant plutôt que de multiplier les correctifs sur une base fragile.