Accessibilité numérique : une obligation légale qui nécessite une expertise technique

Depuis le 1er janvier 2024, les sites internet du secteur public non accessibles aux personnes en situation de handicap peuvent faire l'objet de sanctions à hauteur de 50 000€. L'accessibilité numérique devient une obligation légale. Pour les acteurs du privé, à partir de juin 2025, les entreprises de plus de 2 millions de CA et de plus de 10 salariés devront aussi se conformer aux obligations d'accessibilité. Pour les autres, chacun met le curseur où il le souhaite. Notons que faire l'exercice de sortir un site particulièrement accessible est un plus pour tous. L'interface est claire, facile à comprendre, bien lisible et efficace. 

Vous avez peut être déjà pensé à un certain nombre d'éléments pour rendre votre site accessible :

• Faire attention aux contrastes
• Faciliter les textes avec des tailles et typographies adaptées
• Rendre les boutons et liens bien visibles

Et si vous avez déjà mis cela en place, c'est un bon début ! Mais avez-vous pensé aux labels Aria ? Ou aux options de réduction de mouvement ? Car oui : les développeurs aussi ont accès à une multitude d'outils et de techniques pour rendre leur contenu utilisable par tous. L'accessibilité numérique est un sujet vaste et complexe : décortiquons ensemble quelques points techniques peu visibles et qui ont de l'impact.

Télécharger notre livre blanc sur l'accessibilité numérique

Comment tester votre site

Pour avoir une idée du chemin à parcourir, faites le point sur l'existant. Alors, comment savoir si votre site pense à tous les handicaps ? Vous avez plusieurs moyens de le vérifier. 

La checklist WCAG

Nos normes préférées en matière d'accessibilité (oui, nous avons des normes préférées) sont celle de la WCAG. Le site de la WCAG contient une checklist exhaustive disponible en français et en anglais de tous les points d’évaluation pour le contenu web, un très bon point de départ si vous n’avez pas peur face à une marée de texte.

D’autres sites possèdent aussi leur propre checklist pour vérifier que vos composants soient bien “accessibility friendly”. 

La checklist web de magentaa11y.com permet de choisir uniquement les éléments que vous utilisez sur votre site et créé un résumé textuel pour vous permettre de tester votre contenu de la façon la plus optimale possible. L'interface a l'air un peu brute, et n'est disponible qu'en anglais... mais elle a le mérite d'offrir un résumé simple et ciblé. 

Les tests en ligne

Si vous préférez un test plus automatique, de nombreux outils en ligne vous proposent de tester votre site sur différents points qui pourraient poser problème à un utilisateur présentant un handicap.

L’accessscan d’accessible.com vous permet de découvrir facilement toute brèche des WCAG présente sur une page de votre site internet, le tout en sautant l’étape de vérification à la main. Très pratique, mais pas toujours fiable, donc faites bien attention.

Le test avec un lecteur d'écran

Le meilleur moyen de savoir si votre site est accessible aux personnes en situation de handicap visuel est de vous mettre à la place de l’utilisateur avec un test en conditions réelles. Un lecteur d’écran vous permet de visiter votre site sous un nouvel angle et découvrir ce qui marche ou ne marche pas pour vos utilisateurs non voyants.

NVDA est un lecteur gratuit et disponible sous Windows, il est souvent utilisé par les développeurs soucieux du confort de leurs utilisateurs.

Accessibilité numérique : une obligation légale qui nécessite une expertise technique

Rendre un élément interactif et accessible

Pour les personnes ne pouvant utiliser de souris durant la navigation, la touche tab permet de naviguer de lien en lien et via les champs des formulaires sur votre site, mais que faire si l’un de vos éléments interactifs est ignoré par la navigation au clavier ? 

On peut ajouter tabindex="0" à l'élément pour rendre ce dernier interactif via la touche tab. Attention ! Pas d'utilisation de tabindex sur les éléments non interactifs, cela rendrait votre site bien plus lent à naviguer au clavier et risquerait de frustrer vos utilisateurs.

N’oublions pas aussi de lier l’animation de votre élément via la touche entrée pour éviter les mauvaises surprises.

See the Pen Exemple Tabindex by Concept Image (@concept-image) on CodePen.

Changer le style du focus tab

Saviez-vous que l'on peut changer le style du focus de la touche tab avec :focus-visible en CSS ? Ce détail est important, car le style :focus-visible de base n’est pas aux normes du WCAG. Les malvoyants auront du mal à repérer le style de focus de base sur un fond foncé à cause d’un manque de contraste. Créer un style CSS de focus plus visible pour votre site permet de s’assurer que ce dernier sera parfaitement visible.

See the Pen Exemple focus-visible by Concept Image (@concept-image) on CodePen.

Images décoratives et descriptions

Ajouter une balise alt dans votre <img> pour une description texte, c'est bien, mais que faire si votre image n’est là que pour de la décoration ?

Pour cela, deux options s’offrent à vous :

• Placer votre image dans le CSS via le background, la solution classique
• Laisser votre balise alt vide (alt=””), la solution WCAG pour des images spécifiques, comme les images dans les liens ou les images d’ambiance

See the Pen Image décorative by Concept Image (@concept-image) on CodePen.

Prefers-reduced-motion

Plus la technologie web avance, plus nous débloquons de nouveaux moyens de rendre nos sites plus vivants avec de nouvelles animations. Pourtant, certains utilisateurs préfèrent une expérience moins animée, par question de santé ou de goût.

Les navigateurs proposent maintenant une option prefers-reduced-motion pour prévenir les sites lorsqu’un utilisateur ne souhaite pas voir trop de mouvement. Attention cependant, il n’est pas question de désactiver l’intégralité des animations, mais plutôt de ralentir ou cacher celles qui posent un problème.

Si vous êtes sous Windows, vous pouvez tester cette option via le paramètre suivant : Accessibilité > Effets visuels > Effets d’animation

De même, selon la WCAG, un élément ne devrait JAMAIS flasher plus de trois fois de suite en une seconde, et ce même si l’option de “Reduced Notion” n’est pas activée. Cela risquerait de rendre votre site dangereux pour les utilisateurs souffrant d’épilepsie.

See the Pen Exemple Reduced Motion by Concept Image (@concept-image) on CodePen.

Améliorer les liens des articles

Une règle bien connue d’accessibilité est d’éviter les liens du type “En apprendre plus” ou “Lire l’article” car il manque d’information pour les lecteurs d’écran. Alors, comment faire quand vous avez une boucle d’article ou une page produit ? Rajouter des infos sur chaque lien serait très encombrant.

Pour que les utilisateurs de lecteur d’écran ne perdent pas d’information essentielle sur les liens, on peut utiliser un aria-labelledby pour combiner le contenu textuel du read more et celui du titre, par exemple : 

Le lien ci-dessus serait lu “En savoir plus Titre de l'article” par un lecteur d’écran !

Merci beaucoup à Geoff Graham pour cette astuce. Restons tout de même prudent avec les labels. Une mauvaise utilisation des labels Aria fera plus de mal que de bien et risque de compliquer l’utilisation de votre site pour vos utilisateurs. L'enfer est pavé de bonnes intentions.

Accessibilité numérique : une obligation légale complexe ? 

Contrairement à ce que l'on peut penser, ce n'est pas sur la partie design que le gros du travail se fait. Car une fois que l'on pense son interface dans ce référentiel, on peut faire de nombreuses choses et s'amuser. Côté technique, de nombreux curseurs sont à régler : en attestent les quelques exemples de cet article. Sur ce point, faites confiance à notre équipe technique pour travailler sur tous les changements invisibles pour la majorité de vos utilisateurs, mais pourtant nécessaires pour être en conformité.

Réalisez un audit d'accessibilité numérique RGAA sur votre site avec Concept Image