Guide pour une accessibilité optimale des sites web

L’accessibilité est devenue un aspect incontournable en France, notamment depuis l’application du décret du 24 juillet 2019, qui impose à de nombreuses entreprises de respecter le RGAA 4, sous peine de lourdes amendes. Cependant, l’accessibilité reste un sujet mystérieux pour de nombreux développeurs.

Ce guide a pour objectif de présenter plusieurs points essentiels à prendre en compte pour rendre votre site accessible.

Introduction

L’accessibilité concerne tout le monde, et pas seulement les personnes aveugles. Elle permet notamment de répondre aux incapacités temporaires telles que les reflets sur l’écran d’un smartphone ou une blessure qui oblige à naviguer au clavier.

La direction interministérielle du numérique (DINUM) définit l’accessibilité comme l’ensemble des technologies visant à améliorer la perceptibilité, l’utilisabilité, la simplicité de compréhension et la robustesse. Il y a donc plus à faire que simplement ajouter des attributs « alt » aux images.

Maintenant que nous avons clarifié cela, plongeons dans le monde merveilleux (ou presque) de l’accessibilité !

Navigation au clavier

Pour qu’un site soit accessible, il doit pouvoir être entièrement utilisé au clavier. La navigation se fait généralement à l’aide de la touche de tabulation. La navigation doit être cohérente et tous les éléments interactifs doivent pouvoir être utilisés au clavier.

Affichage du focus

L’un des points les plus importants pour un utilisateur qui navigue au clavier est de savoir où il se trouve. Il est donc essentiel d’afficher clairement le focus sur l’élément en cours. Ne pas afficher le focus peut créer de la confusion pour l’utilisateur. Laissez le focus natif afin de maintenir une cohérence avec les autres sites web et de permettre à l’utilisateur de savoir directement quel élément est en focus.

Liens d’évitement

Lorsque vous changez de page, le navigateur replace le focus avant le premier élément de la page. Pour faciliter la navigation, il est donc conseillé de proposer des liens en début de page permettant de mettre directement le contenu en focus. Ces liens peuvent être masqués et ne s’afficher que lorsqu’ils sont en focus.

Utilisation des design patterns d’accessibilité

Le W3C a défini des règles pour certains composants usuels, tels que les barres de menu, les arbres, les tableaux de données, les pop-ins, les carrousels, etc. Consultez les recommandations du W3C pour savoir comment implémenter ces composants de manière accessible.

Boutons et liens

Lorsque vous utilisez l’événement JavaScript « onclick », assurez-vous d’utiliser une balise <button type="button">. Une zone cliquable doit être accessible via la tabulation, activable avec la touche Entrée ou Espace et avoir le rôle « button ». Utiliser un bouton permet d’offrir ces comportements.

La validation d’un formulaire doit se faire via une balise <button type="submit">. Pour ajouter un comportement JavaScript à la validation d’un formulaire, utilisez l’événement « onsubmit » de la balise « form ».

Tous les changements de page qui ne sont pas provoqués par la validation d’un formulaire doivent être effectués via des liens hypertextes (balise « a »). Si un designer vous demande d’utiliser un bouton, utilisez du CSS pour que le lien s’affiche comme un bouton.

Lecture du site

Votre site doit pouvoir être lu par un lecteur d’écran, tel que JAWS, NVDA ou VoiceOver. Pour cela, votre code HTML doit être structuré de manière à être compréhensible par le lecteur d’écran. Utilisez les rôles ARIA ou les balises sémantiques HTML5 pour donner un sens à votre code.

Donner du sens au HTML

Utilisez les balises de titres, les paragraphes et les balises sémantiques HTML5 pour donner du sens à votre code. Vous pouvez également enrichir vos balises avec des attributs ARIA.

Décrire les tableaux

Chaque tableau doit être accompagné d’une description. Cela peut être fait via la balise « caption » ou les attributs « aria-label » ou « aria-labelledby ». Cette description sera lue par le lecteur d’écran et permettra à l’utilisateur de décider s’il souhaite lire le contenu du tableau ou passer au reste de la page.

Lier les champs de saisie avec leurs libellés

Idéalement, chaque champ de saisie doit être associé à un libellé visible. Utilisez la balise « label » avec l’attribut « for » ou utilisez la balise « label » pour envelopper le champ de saisie. En dernier recours, vous pouvez utiliser l’attribut « aria-labelledby ».

Évitez de mettre des informations importantes dans l’attribut « placeholder ». Utilisez plutôt un paragraphe et liez-le au champ de saisie à l’aide de l’attribut « aria-describedby ». Utilisez également l’attribut « aria-describedby » pour lier un message d’erreur de validation à un champ de saisie.

Alternatives textuelles

Ajoutez une alternative textuelle à chaque élément visuel important, tels que les images, les icônes ou les vidéos. Cette alternative permet aux utilisateurs de lecteurs d’écran de comprendre ce qui se passe sur le site. Décrivez l’image ou l’élément visuel de la manière la plus précise possible.

Couleurs et contraste

Choisissez des couleurs et un contraste appropriés pour votre site. Évitez de transmettre des informations uniquement par la couleur, car les utilisateurs peuvent avoir des anomalies de vision des couleurs ou ne pas pouvoir distinguer les couleurs en raison d’un faible contraste. Assurez-vous que les éléments visuels sont clairement visibles pour tous les utilisateurs.

Permettre à l’utilisateur de prendre son temps

Évitez d’utiliser des timers pour afficher ou masquer des éléments. Préférez des notifications qui restent visibles jusqu’à ce que l’utilisateur les ferme manuellement. Cela permet à l’utilisateur de lire et de comprendre le message à son propre rythme.

Pour aller plus loin

Ce guide présente les points essentiels pour rendre votre site plus accessible, mais il reste encore beaucoup à apprendre. Pour approfondir vos connaissances, consultez le site WebAIM, qui est une référence en matière d’accessibilité. La DINUM propose également un guide de l’intégrateur qui détaille la construction d’un site accessible, y compris les images, les tableaux, les liens, et bien d’autres éléments.

En suivant ces recommandations, vous pourrez créer des sites web plus accessibles et offrir une meilleure expérience utilisateur à tous les visiteurs.