Carrousels
Les carrousels sont des modules dynamiques qui contrôlent l’affichage de diapositives défilantes. Ils sont souvent utilisés sur des pages d'accueil pour mettre en avant certains contenus.
Le carrousel contient des images et des textes d'appel, avec des liens vers des pages du site. Dans certains carrousels, l'utilisateur doit activer un contrôle pour visualiser la diapositive suivante ou précédente. Cependant, en règle générale, le déroulement est automatique et s’effectue tous les 5-30 secondes. Pour certains carrousels il existe des contrôles pour activer et pauser l'animation.
A quoi ressemble un carrousel ?
Cette vidéo montre le fonctionnement d'un carrousel classique.
Description vidéo
Sur la page existenzgruender.de, des diapositives de carrousel défilent automatiquement tous les 9 seconds.
- L'utilisateur tabule dans le carrousel jusqu'au contrôle Pause.
- Il active le contrôle avec ENTER.
- Le défilement est interrompu.
- L'utilisateur remonte en tabulant au lien "MEHR" et l'active.
- Cette action ouvre la page associée.
Quelles sont les difficultés rencontrées par les utilisateurs face aux carrousels
Les carrousels sont source de difficultés non seulement pour les personnes en situation de handicap. Ils sont a déployer avec prudence. Voici quelques problèmes identifiés :
Le défilement automatique interrompe d'autres activités sur la page
Les carrousels modifient les contenus de la page. Ils sont souvent utilisés sur la page d'accueil et peuvent occuper beaucoup de place sur la page. Les contenus se renouvellent à un rythme déterminé, typiquement tous les 5-20 secondes.
Cela signifie que lors de la lecture des contenus, les utilisateurs peuvent voir ces mêmes contenus disparaître et être remplacés sans avertissement. Ce comportement peut être très gênant pour l'utilisateur, et peut également distraire son attention alors qu'il est en train de consulter d'autres contenus sur la page.
Il peut être difficile, voir impossible, d'arrêter les contenus en mouvement
Souvent les carrousels ne sont pas accompagnés de contrôles et l'utilisateurs n'a pas moyen d'arrêter le défilement. Parfois, l'utilisateur peut arrêter le mouvement en passant la souris dessus ou en tabulant dans les contenus du carrousel, mais ces possibilités sont mal connues.
Lorsque les contrôles existent, ils viennent souvent après le carrousel et peuvent être difficiles à localiser. Le ratio de contraste est souvent insuffisant, le focus n'est pas toujours visible, et les contrôles ne sont pas forcement accessibles au clavier. Pour les utilisateurs mal voyants, ces difficultés peuvent être particulièrement pénalisantes.
Exemples
Les exemples suivants montrent le type de difficultés que les utilisateurs peuvent rencontrées face aux carrousels.
1 Utilisateurs mal voyants : L'impossibilité d'arrêter le carrousel
Nombreux sont les carrousels qui n'ont pas de mécanisme permettant aux utilisateurs d'arrêter le défilement des contenus. Lorsque le carrousel est accompagné de bouton PAUSE, ce contrôle peut être difficile à localiser (ratio de contraste ou taille insuffisants, localisation peu visible).
Description vidéo
Un utilisateur mal voyant consulte le site Web de Berlin (berlin.de). L'utilisateur a légèrement agrandi les contenus avec le zoom du navigateur. On l'a demande d'arrêter le carrousel.
- L'utilisateur ne trouve pas de manière simple d'arrêter le carrousel - il y a un bouton "pause" mais qui a un ratio de contraste faible.
- Elle clique gauche sur la souris et pense que cette action a du arrêter le mouvement.
- Elle commence à explorer les contenus du carrousel en utilisant les flèches pour passer de diapositive à diapositive.
- Les contenus du carrousel continuent à défiler et elle se rende compte que son action n'a pas eu l'effet attendu.
- Sur une diapositive avec un fond plus foncé, l'utilisateur voit le bouton "pause" et l'actionne.
- Elle attend de voir si le mouvement a cessé et exprime sont sentiment que tout carrousel doit avoir un contrôle permettant de l'arrêter.
2 Utilisateurs de lecteurs d'écran : Restitution de contenus du carrousel qui empêche la consultation d'autres contenus
Les contenus des carrousels sans bouton "pause" sont verbalisés sans cesse, même lorsque d'autre contenus sont sélectionnés. Ce comportement rend la compréhension des éléments d'interface en dehors du carrousel très difficile.
Description vidéo
Un utilisateur de lecteur d'écran interagit avec le site web de la mutuelle barmer.de. Sur la page d'accueil se trouve un carrousel sans bouton "pause".
- L'utilisateur tabule dans la page - la restitution des éléments qui prennent le focus se superpose aux contenus du carrousel qui sont annoncés en continu.
- Plus tard, l'utilisateur ouvre un champ de recherche avec une liste déroulante de suggestions de termes de recherche.
- L'utilisateur n'arrive pas à activer le champ de recherche afin de taper sa requête dedans.
- Pendant qu'il essaie d'interagir avec le formulaire, les contenus du carrousel sont restitués en continu et empêchent la restitution des éléments qui ont le focus.
- L'utilisateur dit au lecteur d'écran "tais-toi !"
Comment créer des carrousels accessibles ?
Vérifier si un carrousel est nécessaire. Pour certains, au-delà des difficultés d'accessibilité, un carrousel n'est pas forcement bien adapté à la présentation de contenus. Voir Should I use a Carousel ? (Est-ce que je devrais utiliser un carrousel?) - en anglais
Si toutefois vous souhaiter utiliser un carrousel :
- Proposer un bouton visible permettant d'arrêter la défilement des diapositives. Habituellement, une fois actionné le bouton "pause" se transforme en bouton "play". Une option consiste à présenter le bouton par dessus la diapositive en s'assurant que le ratio de contraste est suffisant.
- Donner aux boutons "pause" et "play" des intitulés qui reflètent leur état. Les utilisateurs de lecteur d'écran devraient entendre quelque chose comme "Arrêter l'animation" quand le bouton "pause" est visible et l'animation est active, et "Démarrer l'animation" quand le bouton "play" est visible et les contenus sont arrêtés.
- Faire en sorte que le défilement des diapositive n'est pas trop vite. Des contenus en mouvement peuvent être très perturbants, en particulier pour les utilisateurs mal voyants qui ne voient pas toujours l'ensemble des contenus présentés à l'écran.
- Arrêter le défilement lorsque les contenus du carrousel ont pris le focus (via le clavier ou la souris). Cela facilite la lecture des textes et permet à l'utilisateur de cliquer sur les liens sans être interrompu par l'animation.
- Donner un ratio de contraste et une taille suffisants aux boutons permettant de passer de diapositive à diapositive. Les utilisateurs peuvent avoir envie de consulter les contenus du carrousel à leur propre rythme.
- Vérifier que les contenus des diapositives sont accessibles au clavier. Les flèches doivent permettre de passer de diapositive en diapositive, ou la tabulation doit permettre de déplacer le focus sur la diapositive et de passer à la suivante ou à la précédente. Les liens présentés dans le carrousel doivent également être accessibles au clavier.
- Réfléchir sur la possibilité de présenter le carrousel dans son état inactif par défaut. Si les utilisateurs souhaitent voir l'animation, ils peuvent sélectionner "play".
Pour aller plus loin (ressources en anglais)
- Should I use a carousel? Jared Smith, Webaim (sans date). Un regard critique sur les carrousels.
- A content slider, Heydon Pickering, Inclusive Components, novembre 2017. Une implémentation élégante et légère.
- Simple Swipe With Vanilla JavaScript - Ana Tudor, CSS Tricks, avril 2018. L'utilisation de touch event handlers pour des contenus défilants / des carrousels.
Note: Cette solution devrait être accompagnée d'une alternative statique pour respecter le critère WCAG 2.1 2.5.1 Pointer Gestures.