Liens et boutons accessibles
J'ai quelques astuces pour vous aider à rédiger des intitulés de liens et de boutons accessibles. Dans certains cas, ce sont des bonnes pratiques plutôt que des critères obligatoires du Référentiel Général d’Amélioration de l’Accessibilité (RGAA).
Certaines recommandations proviennent des critères des Web Content Accessibility Guidelines (WCAG) au niveau AAA – le plus élevé. Ce niveau n'est imposé nulle part dans le monde, mais quand les améliorations sont faciles à mettre en place, je préfère les adopter. À vous de voir ce qui est possible dans votre situation.
Ne rédigez pas les intitulés de boutons en majuscules
Un texte en majuscules est plus difficile à lire, surtout pour les personnes dyslexiques. C’est dû au fait que les majuscules sont moins faciles à distinguer que les minuscules. Selon la police utilisée, les mots peuvent former une seule forme rectangulaire difficile à déchiffrer.
Les majuscules peuvent aussi poser problème aux personnes qui utilisent un lecteur d’écran, car la vocalisation peut les restituer lettre par lettre, comme pour un acronyme.
De plus, le texte en majuscules peut être perçu comme étant un texte crié. Il vaut donc mieux les utiliser qu'en cas de nécessité absolue.
Ne faites pas de copié-collé d’URL pour envoyer un lien
L’accessibilité s’applique aussi à la rédaction de vos e-mails et de vos messages. Quand vous envoyez un lien à quelqu’un qui utilise un lecteur d’écran, intégrez-le dans un intitulé. Si vous faites un copié-collé de l’URL, le lecteur d’écran va devoir la vocaliser, parfois lettre par lettre, ce qui peut être très long.
Pour rappel, il n’y a pas que les personnes malvoyantes ou aveugles qui utilisent un lecteur d’écran. C’est aussi une aide technique précieuse pour les personnes dyslexiques.
Inutile de préciser “lien” dans un intitulé
Le soulignement permet d’identifier un lien dans un corps de texte aux personnes voyantes. Avec un lecteur d’écran, les liens sont annoncés avant l’intitulé. Par exemple, "mon blog" sera lu par la plupart des lecteurs d’écran de la façon suivante : “Lien mon blog”. C’est donc inutile d’écrire “lien” dans l’intitulé.
N’utilisez pas de liens ou boutons “en savoir plus”
Quand on utilise un lecteur d’écran, on peut naviguer sur une page de lien en lien. La vocalisation restitue alors les intitulés les uns après les autres, en ignorant le contexte. Si ces liens ont tous le même intitulé, ce sera difficile de comprendre où ils mènent.
Vous pouvez ajouter une ligne de code visible uniquement par les lecteurs d’écran pour préciser la destination du lien. Mais pourquoi ne pas donner les mêmes informations à tout le monde ? Vous gagnerez du temps car vous n’aurez pas à maintenir deux versions (une pour les lecteurs d'écran et une pour les autres utilisateurs). Vos utilisateurs auront aussi accès à des informations plus précises, qu’ils aient un handicap ou non.
Cette recommandation fait partie des critères du WCAG au niveau AAA uniquement.
Testez les intitulés de vos liens avec Wave
Pour comprendre comment un lecteur d'écran scanne une page, je vous recommande l'extension Wave. Elle liste tous les intitulés de liens et de boutons sur une page, comme le fait un lecteur d'écran.
Une fois l’extension installée, faites un clic droit n’importe où sur la page, puis sélectionnez “Wave this page”. Dans l’onglet “Order”, vous pourrez consulter la liste des intitulés de liens et de boutons. Vous pouvez télécharger l’extension Wave sur tous les navigateurs.
