Carrousels et accessibilité web

Les carrousels, également connus sous le nom de « sliders » ou « diaporamas », sont des éléments visuels couramment utilisés sur les sites web pour afficher plusieurs images ou contenus dans un espace restreint. Ils présentent l’information de façon attrayante mais également des offres promotionnelles, des témoignages de clients, et bien plus encore.. Cependant, malgré leur popularité, les carrousels peuvent représenter un véritable défi en terme d’accessibilité.

Qu’est ce qu’un carrousel ?

Un carrousel est un composant interactif qui permet de présenter plusieurs contenus (comme des images, des vidéos ou des articles) sous forme d’une liste défilante.

Fonctionnement

Son fonctionnement est assez simple : il affiche une série d’éléments les uns après les autres, généralement en boucle, en utilisant des transitions visuelles pour passer d’un élément à l’autre.

Quelques fonctionnalités courantes d’un carrousel :

  1. Les utilisateurs peuvent passer d’un élément à l’autre en cliquant sur des flèches de navigation ou en utilisant des boutons de pagination.
  2. Le carrousel peut être configuré pour défiler automatiquement, sans intervention de l’utilisateur, en affichant périodiquement chaque élément.
  3. Des indicateurs peuvent être inclus pour montrer le nombre total d’éléments et celui qui est actuellement visible.
  4. Sur les appareils mobiles, les utilisateurs peuvent faire glisser leur doigt pour naviguer dans le carrousel.
  5. Certains carrousels offrent des options pour personnaliser le design, les transitions et le comportement.

Problèmes d’accessibilité liés aux carrousels

L’un des principaux problèmes auxquels font face les utilisateurs est la complexité de la navigation dans les carrousels. Certains carrousels changent automatiquement de diapositive, ce qui peut désorienter les utilisateurs et les empêcher de prendre le temps nécessaire pour comprendre les informations.

Lorsque les carrousels ne proposent pas de contrôles de navigation clairement visibles, tels que des boutons de lecture/pause ou des flèches de défilement, les utilisateurs peuvent se sentir frustrés en essayant de contrôler le mouvement du carrousel.

Pour les personnes souffrant de déficience visuelle, un carrousel mal étiqueté ou mal structuré peut rendre difficile l’accès au contenu. Les lecteurs d’écran ne sont pas en mesure de fournir une description adéquate du contenu des diapositives, ce qui limite l’expérience utilisateur.

Le défilement automatique des diapositives peut être distrayant pour certains utilisateurs souffrant de difficultés de concentration.

Bonnes pratiques pour une accessibilité améliorée des carrousels

Les contrôles de navigation

Fournir des contrôles de navigation évidents, tels que des boutons de lecture/pause et des flèches de défilement, permet aux utilisateurs de contrôler le carrousel à leur rythme.

Les contrôles clavier

Assurez-vous que le carrousel peut être facilement navigué à l’aide du clavier en mettant en évidence les éléments sélectionnables à l’aide des touches Tab et Shift+Tab.

Le support tactile

Puisque de nombreux utilisateurs accèdent aux sites web via des appareils mobiles, assurez-vous que les carrousels sont faciles à contrôler avec des gestes tactiles, tels que les balayages.

Un contenu statique

Évitez les carrousels avec des changements automatiques de diapositives, sauf s’ils sont absolument nécessaires. Permettre aux utilisateurs de naviguer manuellement à travers les diapositives donne plus de contrôle sur leur expérience.

Les balises sémantiques

Utilisez des balises HTML appropriées pour structurer le carrousel et étiqueter clairement chaque diapositive. Cela facilite la compréhension du contenu pour les lecteurs d’écran.

Le texte alternatif

Fournissez un texte alternatif significatif pour chaque image dans le carrousel. Cela permet aux utilisateurs ayant des lecteurs d’écran de comprendre le contenu même si les images ne sont pas visibles.

Qu’est-ce qui rend un carrousel accessible ?

Les utilisateurs doivent pouvoir interrompre le mouvement du carrousel car il peut être trop rapide ou distrayant, ce qui rend le texte difficile à lire. Toutes les fonctionnalités, y compris la navigation entre les éléments du carrousel, doivent être utilisables au clavier. Les modifications apportées aux éléments du carrousel doivent être communiquées à tous les utilisateurs, y compris les utilisateurs de lecteurs d’écran. La position du clavier (« focus ») est gérée de manière raisonnable et compréhensible.
Source : w3.org

Rôles, états et propriétés ARIA

  • role="tablist" doit être appliqué sur l’élément englobant les onglets de pagination.
  • role="tab" doit être appliqué sur chaque onglet de pagination.
  • L’attribut tabindex doit être appliqué sur chaque onglet de pagination. Sa valeur doit être renseignée dynamiquement en fonction de l’état de l’onglet de pagination associé : tabindex="0" sur l’onglet de pagination sélectionné et tabindex="-1" sur les autres onglets de pagination.
  • L’attribut aria-selected doit être appliqué sur chaque onglet de pagination. Sa valeur doit être renseignée dynamiquement en fonction de l’état de l’onglet de pagination associé :
  • aria-selected="true" sur l’onglet de pagination sélectionné.
  • aria-selected="false" sur les autres onglets de pagination.
  • role="tabpanel" doit être appliqué sur chaque panneau.
  • L’attribut aria-hidden doit être appliqué sur chaque panneau. Sa valeur doit être renseignée dynamiquement en fonction de l’état du panneau associé :
  • aria-hidden="false" sur le panneau affiché.
  • aria-hidden="true" sur les autres panneaux.
  • tabindex="-1" doit être appliqué dynamiquement sur chaque élément interactif contenu dans un panneau masqué. L’attribut ne doit pas être présent sur les éléments interactifs contenus dans le panneau affiché.

Exemple de carrousel accessible

Source : www.w3.org

Études de cas d’accessibilité réussie

Certains sites web ont réussi à rendre leurs carrousels plus accessibles en suivant les bonnes pratiques mentionnées ci-dessus. En mettant en œuvre ces changements, ils ont pu offrir une expérience inclusive à un large éventail d’utilisateurs, tout en conservant l’aspect attrayant du carrousel.

Impacts positifs de l’accessibilité sur l’expérience utilisateur

En améliorant l’accessibilité des carrousels, les sites web peuvent toucher davantage d’utilisateurs, y compris ceux ayant des limitations. Cela peut augmenter la satisfaction des clients, renforcer la fidélité et contribuer à une image de marque positive axée sur l’inclusivité.

Conclusion

Les carrousels peuvent être des éléments visuels puissants pour attirer l’attention des visiteurs, mais il est essentiel de prendre en compte l’accessibilité web pour garantir que tous les utilisateurs puissent en bénéficier pleinement. En suivant les bonnes pratiques et en se basant sur des exemples d’accessibilité réussie, nous pouvons créer des carrousels plus inclusifs et offrir une expérience utilisateur positive à chacun, quelles que soient leurs capacités. En unissant nos efforts pour rendre le web accessible, nous créons un espace en ligne plus équitable et accueillant pour tous.

Sources :

  • https://www.w3.org/WAI/tutorials/carousels/
  • https://www.accede-web.com/notices/interface-riche/carrousels/
  • https://www.google.com/amp/s/www.boia.org/blog/carousels-and-accessibility-7-tips%3fhs_amp=true
  • https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
  • https://codepen.io/pen

Chaque projet est unique, souhaitez-vous un devis ?

Parlez-moi de votre projet
Retourner en haut de la page