Le 28 juin 2025, la Loi Européenne sur l'Accessibilité (EAA), qui concerne l'accessibilité des produits, des sites web et d'autres services, entrera en vigueur. En tant qu'entreprise, vous pourriez faire face à des sanctions si les exigences légales ne sont pas respectées. Pour vous conformer à la loi et éviter d’exclure des utilisateurs, nous vous recommandons d’adopter les WCAG (Web Content Accessibility Guidelines).
Les Web Content Accessibility Guidelines (WCAG) sont une norme internationale visant à rendre le contenu web accessible à tous, quelles que soient les limitations des utilisateurs. Elles regroupent un large éventail de recommandations favorisant l’accessibilité. Dans cet article, nous allons en explorer certaines. En plus de ses différents niveaux, les WCAG reposent sur quatre principes fondamentaux de l'accessibilité web :
Robuste
Perceptible
Utilisable
Compréhensible
Ces principes constituent une base solide pour évaluer votre conformité aux normes d’accessibilité.
Pour garantir l'inclusion de tous les utilisateurs, le site web doit être accessible via différents navigateurs et compatible avec diverses technologies d’assistance.
Un lecteur d’écran est un outil qui lit à voix haute le texte et le contenu visuel, utilisé par les personnes malvoyantes. Pour inclure les utilisateurs ayant des déficiences visuelles ou motrices et qui dépendent exclusivement du clavier ou du contrôle vocal, les composants doivent être décrits en fonction de leur fonction, et la structure de la page doit être bien organisée.
Par exemple, utilisez l’élément button dans le code lorsqu’un bouton est prévu. Pour valider l’accessibilité, vous pouvez utiliser des outils de validation tels que le Markup Validation Service.
Il est essentiel de s’assurer que les utilisateurs peuvent percevoir les éléments et comprendre la structure du contenu. Les médias visuels doivent inclure des descriptions verbales, le contraste des couleurs doit être suffisant et le contenu audio doit être clair et distinct. Ces aspects sont particulièrement importants pour les utilisateurs qui s’appuient sur des technologies d’assistance.
Le contenu de la page doit être structuré de manière à faciliter la navigation avec un lecteur d’écran, aussi bien pour les éléments visuels que pour le texte. Une structure insuffisante peut compliquer l’orientation des utilisateurs. Gardez à l’esprit que répéter le même texte pour plusieurs éléments cliquables peut rendre impossible la distinction entre eux pour une personne qui ne voit pas la mise en page.
Le texte alternatif (alt text) est utilisé pour décrire les médias visuels afin que les lecteurs d’écran puissent transmettre leur message visuel. Sans texte alternatif, une image ne peut pas être perçue par les utilisateurs malvoyants.
Pour vérifier si le contraste entre le texte et l’arrière-plan respecte le minimum requis de 4,5:1, plusieurs outils sont disponibles. Toutefois, certaines exceptions existent, comme les graphiques et autres éléments visuels, qui nécessitent seulement un contraste de 3:1. Les éléments superposés ou imbriqués doivent également avoir un contraste de couleur suffisant et être testés ensemble. Des outils comme le Contrast Checker de WebAIM permettent d’évaluer le contraste des couleurs.
Il est aussi important de ne pas s’appuyer uniquement sur la couleur pour transmettre une information. Des différences structurelles doivent être utilisées afin que les personnes atteintes de divers types de daltonisme puissent percevoir l’information. De plus, vous pouvez intégrer des infobulles (texte apparaissant au survol) pour clarifier et renforcer le message.
Les composants de l’interface utilisateur et la navigation doivent être utilisables. Cela signifie que les utilisateurs doivent pouvoir interagir avec l’interface, quelles que soient leurs capacités motrices. Par exemple, toutes les fonctionnalités doivent être accessibles via la navigation au clavier, et les éléments interactifs doivent avoir un indicateur de focus clair pour montrer où se trouve l’utilisateur sur la page.
L’espace blanc entre les éléments est bénéfique, car il facilite l’interaction avec les composants interactifs, que ce soit sur les écrans tactiles mobiles ou avec une souris sur un ordinateur. Il est important de veiller à ce que cette accessibilité soit maintenue sur tous les formats lorsque la page est responsive.
Pour éviter les répétitions et aider les utilisateurs à comprendre le lien entre les éléments interactifs et le contenu associé, un lien descriptif basé sur le titre peut être plus efficace que l’utilisation répétée d’un lien générique "En savoir plus" sous le texte. Cela permet aux utilisateurs de lecteurs d’écran d’avoir immédiatement du contexte dans le texte du lien, afin qu’ils sachent exactement sur quoi ils cliquent pour avancer.
Les raccourcis clavier peuvent améliorer l’efficacité de nombreux utilisateurs, mais ils sont particulièrement essentiels pour les personnes ayant des handicaps moteurs ou visuels, car la souris repose uniquement sur la navigation visuelle. Différents appareils et systèmes d’exploitation utilisent des commandes de raccourcis différentes, il est donc important de prendre en compte ces variations.
Puisque la communication est le seul moyen d’inciter les utilisateurs à interagir avec votre site, le contenu doit être informatif et facile à comprendre. Ce que l’utilisateur voit sur la page doit également être prévisible. Il est donc utile d’utiliser des modèles de conception et des messages reconnus et familiers sur le web.
Il est aussi important que les éléments de la page restent cohérents, afin que les utilisateurs n’aient pas à réapprendre l’utilisation des fonctionnalités à chaque fois. Cela réduit la charge cognitive inutile et permet de mieux capter l’attention sur le message principal et les informations essentielles. Les lecteurs d’écran doivent également pouvoir interpréter le contenu de la page, c’est pourquoi il est fortement recommandé de tester le site avec un lecteur d’écran pour s’assurer que tout fonctionne comme prévu.
Les utilisateurs doivent pouvoir faire une pause à différentes étapes et toujours savoir où ils se trouvent sur la page, afin de reprendre leur interaction facilement. Une navigation claire est essentielle, notamment lorsqu’un événement se produit. Par exemple, en cas d’affichage d’un message d’erreur, l’utilisateur doit comprendre quelle action effectuer ensuite.
Un bon exemple est de placer le texte d’aide avant les champs de saisie, afin que les utilisateurs de lecteurs d’écran reçoivent les instructions avant de commencer à remplir le champ.
Il est également important que les éléments interactifs se comportent de manière prévisible, surtout pour les utilisateurs ayant des handicaps cognitifs. Par exemple, lorsqu'un bouton est cliqué, l'utilisateur doit être dirigé exactement là où le bouton l'indique. C'est pourquoi il est essentiel que le contenu et la navigation soient alignés et cohérents.
Concevoir des éléments en utilisant des modèles de conception établis est tout aussi important. De plus, les éléments interactifs de la page doivent être conçus de manière cohérente, afin que les utilisateurs puissent facilement reconnaître qu’un bouton est un bouton et qu’un champ de saisie est un champ de saisie.
À partir du 28 juin 2025, la Loi Européenne sur l'Accessibilité (EAA) deviendra obligatoire, et de nombreuses entreprises seront concernées et devront commencer à adapter la structure de leurs sites web, produits ou autres systèmes en développement. Plus tôt la norme Web Content Accessibility Guidelines (WCAG) est suivie, plus il sera facile et économique de mettre en œuvre les améliorations d'accessibilité nécessaires. Il est donc avantageux de vérifier dès que possible si le produit que vous possédez ou sur lequel vous travaillez répond aux exigences d'accessibilité de l'UE, bien avant l'entrée en vigueur de la loi.
Nous réalisons des audits d'accessibilité qui montrent clairement ce qui doit être amélioré pour respecter les exigences légales.
Cet article a été mis à jour le 9 janvier 2025 par l'équipe QESTIT UX.