Concevoir et développer un carrousel accessible aux personnes handicapées

Les carrousels, aussi appelés sliders, slideshows ou encore diaporamas, sont bien installés dans le paysage numérique. Des sites et des applications continuent d’en embarquer dès leur mise en production, bien que les ergonomes questionnent ce type de composant depuis plusieurs années ¹ .

À ce jour, il n’existe pas de balise <carousel> portant une sémantique à toute épreuve. Chaque équipe intègre donc ces contenus comme elle peut, au risque de créer de nouveaux défis pour les personnes handicapées.
La Web Accessibility Initiative (WAI) ² propose un guide des composants ARIA qui contient des implémentations permettant de rendre l’expérience en partie accessible aux personnes qui se servent d’une technologie d’assistance.

Cet article présente les points critiques qui peuvent créer des situations de handicap. Il apporte aussi des solutions pour produire des carrousels accessibles sur le web.

Le terme « carrousel » désigne ici les blocs dont on fait défiler les contenus au fur et à mesure pour n’en afficher qu’une partie à la fois et le terme « diapositive » désigne leurs sous-éléments.

Cet article fait des références au Référentiel général d’amélioration de l’accessibilité (RGAA) 4. Si vous êtes soumis à une norme ou à un référentiel différent (par exemple WCAG ³ , EN 301 549 ⁴ , RAWeb ⁵ ou RAAM ⁶ ), vous pouvez faire la correspondance avec votre norme depuis la partie « Références » des critères cités.

Si vous ne pouvez pas lire tout l’article, vous pouvez retrouver les points essentiels à retenir dans la conclusion.

Faciliter la navigation dans les carrousels

Gestes et boutons de navigation

Si votre carrousel est animé, il doit donc s’accompagner d’un bouton « lecture/pause ». Mais ce n’est probablement pas le seul bouton à prévoir…

En effet, dans certains carrousels, le passage d’une diapositive à l’autre se fait uniquement au moyen d’un geste de glissement, par exemple :

• sur mobile : avec un doigt posé sur l’écran allant de la droite vers la gauche ;
• sur ordinateur : en faisant défiler le contenu grâce au pavé tactile (touchpad).

Or, bon nombre de personnes handicapées peuvent rencontrer des difficultés pour réaliser ce type de mouvement. Citons notamment :

• les personnes paraplégiques dont le périphérique est fixé à leur fauteuil roulant ;
• les personnes déficientes visuelles qui ne voient pas l’interface, mais qui interagissent avec elle au moyen d’une plage braille ou d’un lecteur d’écran ;
• les personnes ayant un trouble cognitif ou des difficultés d’apprentissage, qui ne comprendront pas forcément l’action à réaliser.

Par ailleurs, toutes les technologies d’assistance ne permettent pas de réaliser des gestes de glissement : les contacteurs (qui reprennent les actions du clavier), les logiciels de contrôle visuel ou vocal, les lecteurs d’écran, les plages braille, etc.

Votre carrousel doit donc proposer des boutons de navigation visibles et utilisables au moyen d’un clic simple. Ainsi ils pourront être activés par tout le monde, que ce soit au clavier, à la voix, avec un système de contrôle visuel, etc. Il peut s’agir de boutons « Précédent » et « Suivant », de puces permettant de choisir la diapositive précise que l’on souhaite afficher, d’images miniatures, etc.

Ces boutons doivent eux aussi apparaître sur toutes les résolutions, donc également pour les personnes qui zooment à 200 % ou à 400 %.

Navigation au clavier et ordre d’accès aux éléments

Votre carrousel commence à prendre forme !

Vous disposez maintenant du contenu de votre carrousel (probablement des images, des textes et/ou des éléments interactifs tels que des liens), de boutons de navigation et peut-être d’un bouton lecture/pause.

Dans quel ordre les personnes handicapées devraient-elles interagir avec ces différents éléments ?

Distinguons ici l’affichage et l’ordre d’accès au clavier ou avec une technologie d’assistance qui lit la page de manière linéaire.

Il est préférable de permettre aux internautes d’interagir d’abord avec le bouton lecture/pause, parce qu’il s’agit de l’une des fonctionnalités les plus critiques des carrousels.

Les éléments suivants seront les boutons de navigation de votre carrousel. En effet, le fait de placer ces éléments avant le contenu du carrousel dans le code source permettra aux personnes qui naviguent au clavier d’afficher la ou les diapositives qui les intéressent avant d’y accéder.

Description de l’exemple 1 : carrousel avec ordre de tabulation cohérent

Carrousel qui affiche une photo (cliquable) d’une falaise et sa légende « Un morceau de l’Altschlossfelsen, aux airs de petites maisons troglodytes ».

L’image est cliquable et la légende contient un lien.

Le contenu du carrousel est suivi de trois boutons : « précédent », « lecture/pause » et « suivant ».

Des numéros indiquent l’ordre de tabulation :

1. Bouton lecture/pause
2. Bouton précédent
3. Bouton suivant
4. Contenu du carrousel : image cliquable puis le lien.

Placer les boutons de navigation avant les diapositives permet de réduire le nombre de manipulations au clavier en évitant aux utilisateurs et utilisatrices de revenir en arrière pour interagir avec la ou les diapositives qui les intéressent.

Description de l’exemple 2 : carrousel avec ordre de tabulation incohérent

Carrousel qui affiche une photo (cliquable) d’une falaise et sa légende « Un morceau de l’Altschlossfelsen, aux airs de petites maisons troglodytes ».

L’image est cliquable et la légende contient un lien.

Le contenu du carrousel est suivi de trois boutons : « précédent », « lecture/pause » et « suivant ».

Des numéros indiquent l’ordre de tabulation incohérent :

1. Contenu du carrousel : image cliquable puis le lien
2. Bouton lecture/pause
3. Bouton précédent
4. Bouton suivant.

Il est donc possible d’utiliser un ordre d’affichage et un ordre d’accès au clavier différents, tant que la mise en forme ne laisse pas de doute sur la relation entre ces éléments, par exemple en utilisant la proximité.

Développer un carrousel accessible avec ARIA

Le site ARIA Authoring Practices Guide propose de nombreux exemples de composants interactifs et des manières de les rendre accessibles. Certains de ces exemples sont tout de même à sélectionner avec soin. Lisez toujours les avertissements accompagnant les différents motifs de conception.

Permettre l’utilisation du carrousel avec les technologies d’assistance

Le motif de conception ARIA Carousel a l’avantage de proposer deux exemples presque « clé-en-main » qui incluent une navigation au clavier cohérente :

• un carrousel « basique » avec des boutons « précédent » et « suivant ». Ce code est relativement simple ;
• un carrousel dont le fonctionnement s’apparente à celui d’un système d’onglets, avec des puces de navigation. C’est cet exemple dont vous auriez intérêt à vous servir pour développer un carrousel dont la navigation se fait à l’aide de numéros ou d’images miniatures. Le code est un peu plus complexe (attributs et interactions au clavier supplémentaires à implémenter en JavaScript).

Heureusement, la documentation est claire et des exemples de code HTML, CSS et JavaScript sont proposés.

Nom, rôle et changements d’état

Les carrousels sont des composants interactifs dans la mesure où l’on peut interagir avec différentes parties de la zone (notamment les boutons de navigation) pour en faire défiler le contenu.

Les éléments interactifs doivent posséder un nom, un rôle et leurs changements d’état doivent être signalés aux personnes qui se servent de technologies d’assistance.

Utilisez le rôle region (implicite sur la balise <section>) ou le rôle group. Une fois nommé avec un attribut aria-label ou un attribut aria-labelledby, les lecteurs d’écran annonceront le début et la fin du composant ⁹ .

<section aria-labelledby="carousel-heading">
  <h2 id="carousel-heading">Galerie photos</h2>
  […]
</section>

<div role="region" aria-label="Actualités">
  […]
</div>

<div role="group" aria-labelledby="testimonies-header">
  <h2 id="testimonies-header">Témoignages</h2>
  […]
</div>

Note : les régions nommées (rôle region ou balise <section>) proposent un raccourci qui peut être utilisé au moyen d’un lecteur d’écran ou d’une extension de navigateur pour les personnes qui naviguent au clavier. Ce rôle devrait être réservé aux zones principales de la page.

---

Les rôles region et group restent des rôles généraux qui n’indiquent pas nécessairement l’interactivité de votre carrousel. Le guide des composants ARIA propose d’utiliser l’attribut aria-roledescription pour expliciter le rôle du carrousel aux personnes qui consultent votre site à l’aide d’une technologie d’assistance.

Il est donc suggéré d’ajouter un attribut aria-roledescription="carousel" sur votre carrousel (là où vous avez utilisé une balise <section>, un rôle region ou group) et dans le cas d’un carrousel « basique », un attribut aria-roledescription="slide" sur chacune des diapositives.

Certains lecteurs d’écran remplacent le rôle de l’élément par la valeur de l’attribut. D’autres lecteurs d’écrans ajoutent la valeur au rôle de l’élément. Ils annonceront donc par exemple « Actualités, carousel » ou « 1 sur 6, groupe, slide ».

Attention : la valeur de l’attribut aria-roledescription est restituée telle quelle, elle doit donc être traduite ! En effet, le terme « slide » n’est a priori pas connu des dictionnaires français. Sa prononciation par les lecteurs d’écran risque donc d’être hasardeuse.
Dans ce cas, utilisez par exemple aria-roledescription="diapositive".

---

Certains carrousels indiquent visuellement la diapositive active dans les boutons de navigation au moyen d’une couleur, d’une bordure, d’un arrière-plan ou d’une autre mise en forme. Cette indication doit également être transmise aux personnes qui se servent d’une technologie d’assistance.

Pour transmettre une information visuelle à une personne qui se sert d’un lecteur d’écran, il est possible d’utiliser un attribut title sur un élément interactif (bouton), un texte positionné hors écran ¹⁰ ou un attribut ARIA permettant de transmettre un état.

Le motif de conception ARIA Carousel propose un exemple avec puces de navigation qui utilise l’attribut aria-selected sur la puce qui indique la diapositive active du carrousel.

Note : l’utilisation des attributs ARIA correspond à des rôles précis. Consultez la documentation ARIA avant d’ajouter ce type d’attribut à votre code.

Restituer des informations « en direct »

Vous avez positionné les boutons qui permettent de naviguer dans votre carrousel avant les diapositives dans le code source afin de faciliter la navigation pour les personnes qui naviguent au clavier.

Il reste à informer les personnes qui se servent d’un lecteur d’écran du contenu de la nouvelle diapositive à chaque activation de l’un des boutons de navigation.

Le motif de conception ARIA Carousel propose justement une utilisation intéressante de l’attribut aria-live qui permet de gérer des régions « en direct ». À chaque fois qu’un changement de contenu se produit dans la zone qui possède l’attribut aria-live="polite" (dans notre cas : l’affichage d’une nouvelle diapositive), les lecteurs d’écran restituent ces changements.

Attention : dans le cas d’un carrousel qui défilerait automatiquement, la restitution des changements gênerait les utilisateurs et utilisatrices. L’exemple y répond bien : lorsque le carrousel défile automatiquement, l’attribut aria-live="polite" devient un attribut aria-live="off".

Pour mieux comprendre les bonnes pratiques d’utilisation de l’attribut aria-live, lisez l’article « Live regions ARIA : bonnes et mauvaises pratiques ».

Les carrousels avec CSS sont-ils accessibles ?

Au mois de mars 2025, Chrome a commencé à communiquer sur des carrousels réalisés sans JavaScript, grâce à la spécification CSS Overflow 5. Le site Carousel Gallery propose plusieurs exemples de zones défilantes implémentant ces fonctionnalités ¹¹ .

Sara Soueidan a écrit un article détaillé et très pédagogique sur l’accessibilité de ces « carrousels CSS ».

Bien que la navigation au clavier soit impressionnante sur les pseudo-éléments CSS interactifs, les carrousels CSS ne proposent pas une expérience suffisamment accessible aux personnes handicapées pour l’instant.

Pour aller plus loin

• Dans l’article What's an interactive element?, Manuel Matuzović s’interroge sur ce qui définit un élément interactif. Les carrousels, qui embarquent des boutons de navigation, rentrent bien dans ce cas. Voir aussi son livre Web Accessibility Cookbook. O’Reilly, qui donne des recettes de code accessible accompagnées d’explications sur les impacts utilisateur.
• Dans l’article Horizontal Scrolling Containers Are Not a Content Strategy, Adrian Roselli s’intéresse aux blocs de contenu défilants… qui ne sont pas des carrousels ! Ceux-ci représentent de nouveaux défis pour les utilisateurs et utilisatrices.
• Dans son guide A Content Slider, Heydon Pickering explore l’accessibilité des carrousels avec des exemples de code. Il a aussi écrit le livre Inclusive Components. Smashing Magazine où il propose des exemples de code accessible pour d’autres composants interactifs.
• Dans l’article Carrousels LinkedIn avec Canva : peut-on les rendre accessibles ?, Coryse Quibel s’intéresse à l'accessibilité des carrousels sur les réseaux sociaux qui peuvent également être rendus accessibles, moyennant l’ajout d’une alternative.