Vous êtes à : Blog > Jour 58 - Carrousels

Jour 58 - Carrousels

Implémenter des carrousels accessibles.

Ce que j’ai fait :

Ce que j’ai appris

Règles relatives aux contenus animés

Nous nous intéressons au critère d’accessibilité suivant :

Critère 13.8. Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?

Par “contenu en mouvement ou clignotant”, le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) entend tout contenu animé. Il peut s’agir d’images animés au format GIF, SVG ou Flash, d’animations en CSS (Cascading Style Sheets) ou Javascript, de vidéos…

Pour chaque contenu en mouvement ou clignotant :

  • la durée doit être inférieure ou égale à 5 secondes

  • l’internaute peut arrêter et relancer le mouvement/clignotement

  • l’internaute peut masquer et afficher le mouvement/clignotement

  • la totalité de l’information peut être affichée sous mouvement/clignotement

J’ai déjà traité le cas des GIFs animés et des medias dans de précédents articles. Je m’intéresse donc ici spécifiquement aux carrousels car en tant qu’intégratrice, j’ai très souvent eu à en implémenter sur des sites.

Les carrousels

Impacts sur les internautes

Les carrousels (“carousels” avec un seul “R” en anglais !) sont des éléments très régulièrement demandés sur les sites internet. Il s’agit d’un module permettant de faire défiler des images, du texte ou des vidéos dans un site web. Pourtant ce type de fonctionnalités, s’il est mal implémenté, peut être source de nombreux problèmes.

Souvent utilisés car ils permettent de placer un maximum d’informations au-dessus de la ligne de flottaison, leur rentabilité est très faible : le taux de clic se situe en moyenne entre 1 et 3%, avec une majorité de clic sur la première slide. L’internaute se concentre avant tout sur la première slide au détriment des autres, au risque de passer à côté d’informations importantes.

En terme d’accessibilité, les carrousels peuvent également se révéler problématiques :

  • les personnes ayant des difficultés à lire auront du mal à déchiffrer un texte qui défile trop rapidement

  • le défilement automatique peut distraire et perturber des personnes ayant des troubles de l’attention et les empêcher de lire le reste de la page

  • pour les personnes utilisant un lecteur d’écran, la restitution peut s’avérer extrêmement fastidieuse car dès que le texte défile, la lecture reprend sur la nouvelle slide affichée, sans nécessairement avoir eu le temps de finir le texte de la précédente

Faut-il les utiliser ?

Au vue des problèmes précédement cités, il paraît judicieux de se poser la question suivante : dois-je implémenter un carrousel sur mon site ? Pourtant, ces résultats s’expliquent souvent par le souhait de copier un site concurrent et une mauvaise implémentation.

Le site Siècle Digital, dans son article Abandon du carrousel sur les sites ecommerce ?(lien externe) avance les problèmes techniques suivants :

  • des slides peu souvent mises à jour

  • trop de slides, souvent surchargées d’informations

  • un défilement soit trop lent ou trop rapide en fonction des internautes

Pour autant, un carrousel peu chargé, efficace et contrôlable par l’internaute permet d’animer un site et peut pousser l’internaute à rester d’avantage de temps.

En tant qu’intégrateur ou intégratrice, notre travail ne porte pas sur les contenus du carrousel, mais sur son implémentation technique : à nous donc de faire en sorte qu’il soit accessible à toutes et à tous.

Rendre un carrousel accessible

Parmi les éléments importants à implémenter sur un carrousel accessible, il faut veiller à :

  • ne pas déclencher automatiquement l’animation du carrousel

  • s’il y a un défilement automatique, prévoir un bouton marche/arrêt

  • afficher des boutons avec des intitulés clairs - “Suivant” et “Précédent” - pour faire défiler le carrousel

  • indiquer la position courante dans la totalité des slides, par exemple avec des cercles au bas du carrousel (attention l’item actif ne doit pas se distinguer uniquement par la couleur, mais avoir aussi une forme ou taille différente)

  • faire en sorte que le carrousel demeure fonctionnel sans Javascript, de telle sorte que l’on puisse lire les slides de manière linéaire

Les différents boutons du carrousel doivent pouvoir recevoir un focus visible et avoir un contraste suffisant par rapport à leur arrière plan. Sur mobile, ces boutons doivent posséder une surface de touch suffisante pour être utilisables (pour le défilement des slides, un swipe est possible).

Note de l’autrice : je me rends compte en rédigeant cet article qu’il s’agit surtout de recommandations relatives à la conception des carrousels et donc plus à destination des designers, cependant il me paraît important qu’en tant qu’intégrateurs et intégratrices nous en ayons également connaissance.

Analyse de carrousels

  • sur le site sncf.com, le carrousel possède des boutons marche/arrêt, ainsi que précédent/suivant. La position courante est indiquée par des cercles, vides ou remplis en fonction de si la slide est active ou non. Les intitulés de chaque bouton sont indiqués dans le code et sont explicites.

  • sur le site Sephora, le carrousel n’est pas en défilement automatique et possède bien des boutons précédent/suivant permettant à l’internaute de jouer l’animation comme il ou elle le souhaite. En revanche, les boutons précédent/suivant ne sont pas balisés en tant que tels dans le code HTML mais sous forme de <div> et matérialisé avec un pseudo-élément ::before. D’autre part, la position courante n’est pas indiquée et nous n’avons aucune idée du nombre de slides présentes.

Exemples de code pour implémenter un carrousel accessible