UX et accessibilité numérique : repenser vos interfaces pour éviter le défilement horizontal

Sur le web, on a tendance à concevoir comme si tout le monde utilisait les sites de la même manière. Pourtant, ce n’est pas le cas. Certaines personnes naviguent au clavier, d’autres à la voix, certaines ont des troubles moteurs, visuels ou cognitifs. Et bien souvent, ces difficultés sont invisibles à celles et ceux qui n’en font pas l’expérience.

C’est pour ça que certains choix de design, qui paraissent anodins ou esthétiques, peuvent devenir de vrais obstacles. Le défilement horizontal en est un bon exemple : agréable à regarder pour certains, mais complexe, fatigant, voire inaccessible pour d’autres.

Pour répondre à ces enjeux, il existe des référentiels d’accessibilité numérique : en France par exemple, l’accessibilité numérique est encadrée par le RGAA (Référentiel Général d’Amélioration de l’Accessibilité), qui via une directive européenne transpose les WCAG (Web Content Accessibility Guidelines notamment adoptées aux États-Unis) 2.1 niveaux A et AA en critères testables adaptés au contexte local.

Loin d’être seulement une exigence légale, l’accessibilité numérique sert à rendre le web plus inclusif et à garantir un accès équitable à l’information, permettant au passage d'améliorer l’expérience de toutes et tous.

En rendant les contenus utilisables par le plus grand nombre, elle renforce aussi la satisfaction et la fidélisation, ce qui se traduit souvent par de meilleurs résultats en termes de conversions et d’engagement.

Dans ce contexte, un choix de design revient souvent : les conteneurs à défilement horizontal (galeries, carrousels, barres d’outils…). S’ils paraissent séduisants visuellement, ils posent de vrais problèmes d’accessibilité et d’expérience utilisateur.

Ce qu’on entend par défilement horizontal

Un conteneur à défilement horizontal est une zone où le contenu est affiché côte à côte et nécessite un geste latéral (scroll, swipe ou clic) pour accéder aux éléments non visibles.

Cela peut prendre la forme :

• d’un carrousel
• d’une galerie d’images, de films, ou autre qui défile
• de blocs de contenu textuel disposés horizontalement.

Ce modèle est souvent utilisé pour gagner de l’espace vertical ou créer un effet visuel immersif. Mais il présente des limites fortes.

Les difficultés rencontrées par les utilisateurs

• Contenu manqué : beaucoup de personnes ne voient pas qu’il y a d’autres éléments hors écran, et passent donc à côté d’informations importantes.

• Navigation compliquée : au clavier, à la voix ou avec des aides techniques, accéder à ces zones peut devenir un vrai parcours du combattant.

• Gestes complexes : maintenir une touche ou un clic tout en défilant latéralement demande une précision difficile pour les personnes avec des troubles moteurs.

• Perte de repères : le focus peut disparaître hors champ, rendant la navigation confuse.

• Mauvaise compatibilité : selon le navigateur ou l’appareil, l’expérience peut varier et devenir frustrante.

Ces enjeux montrent pourquoi, malgré sa popularité croissante, notamment dans les interfaces desktop (navigateurs de bureau sur grand écran) comme les carrousels de produits en e-commerce, le défilement horizontal ne constitue pas une stratégie optimale pour présenter le contenu à un large public, car il est trop souvent mal réalisé et mal géré par les navigateurs (indépendamment de notre volonté).

Comment limiter la casse quand un défilement horizontal est incontournable

Même si, globalement, le défilement horizontal est à éviter, certains composants complexes l’emploient par nécessité.

Pour créer par exemple un carrousel conforme au RGAA, il est recommandé de suivre les pratiques du WAI-ARIA Authoring Practices Guide (APG).

• Identifier la zone de manière claire : utiliser aria-label ou aria-labelledby pour nommer la zone, et éventuellement aria-roledescription (ex. « galerie défilante ») pour préciser son rôle.
• Fournir des contrôles accessibles : boutons « Précédent » / « Suivant » avec aria-controls et étiquettes claires.
• Assurer une navigation clavier complète : Tab pour entrer/sortir, flèches pour défiler, Home / End pour aller aux extrémités.
• Annoncer l’élément actif grâce à aria-live="polite" ou une zone masquée (live region) pour les lecteurs d’écran (uniquement dans le cas où il n'y a pas de défilement automatique : en cas de défilement automatique, pas de aria-live. Mais évidemment, le défilement automatique n'est pas du tout conseillé).
• Gérer la visibilité du focus automatiquement : l’élément actif doit toujours être entièrement visible dans la zone.

Accessibilité et défilement horizontal : penser au-delà des effets de mode

Même si le défilement horizontal est très en vogue aujourd’hui (notamment dans les interfaces desktop de e-commerce avec les carrousels de produits ou les galeries) cette popularité ne garantit pas pour autant que ce modèle soit réellement efficace.

Les recherches en expérience utilisateur et les retours de terrain montrent qu’un grand nombre de personnes passent à côté de ces contenus défilants sur desktop, ce qui entraîne une interaction limitée. J'en parle d'ailleurs dans un article consacré aux carrousels : Les carrousels (slider) sont-ils vraiment utiles ?.

Les choix de design devraient être guidés par :

• la clarté : un contenu visible et compréhensible d’emblée,
• la simplicité : une navigation intuitive, sans effort inutile,
• l’inclusion : penser à celles et ceux qui utilisent d’autres modes d’interaction.

Conclusion

Au final, la meilleure tendance reste celle qui place tout le monde au centre.

Les choix de design devraient toujours être guidés par l’inclusion et l’efficacité, plutôt que par les tendances du moment.