Nouvelles et conseils

Six changements ont été apportés aux actualités et aux conseils du Centre AT3 afin d'améliorer la lisibilité pour tous, y compris les personnes handicapées et les personnes âgées.

C'est un véritable aveu : J'aime écrire sur des sujets dont je ne connais pas grand-chose. Au fil des ans, j'ai constaté que cette naïveté était précieuse pour toucher un grand nombre de personnes. Après tout, ce qui est nouveau pour moi l'est souvent pour d'autres. Mais lorsque j'ai commencé à chercher comment créer des liens accessibles, j'ai pensé qu'il s'agissait d'un sujet que je connaissais assez bien.
Je me suis trompé.
"Les liens étant essentiels à la fonctionnalité du contenu web, les liens inaccessibles constituent l'un des obstacles les plus importants à l'accessibilité globale. —WebAIM "Introduction aux liens et à l'hypertexte".
Gulp.
En conséquence, ce mois-ci, quelques changements ont été apportés à AT3CenterBlog.com afin d'améliorer l'expérience et la convivialité du site pour un public plus large. Ce public comprend les visiteurs souffrant de handicaps visuels et/ou cognitifs, les personnes âgées, ainsi que tous ceux qui utilisent un smartphone ou une tablette. Oui, il s'agit de la plupart d'entre nous.
Vous trouverez ci-dessous six règles d'accessibilité des liens hypertextes qui ont entraîné des modifications sur ce site.

Un : le texte du lien doit informer hors contexte

Je pensais avoir déjà réglé ce problème. Vous ne trouverez pas de "cliquez ici" ou "lisez plus" comme liens autonomes sur AT3CenterBlog. Je savais que les utilisateurs de lecteurs d'écran parcourent souvent les liens d'une page pour en parcourir le contenu et la structure. Les liens doivent être descriptifs et intelligibles par eux-mêmes. En outre, la mention "cliquez ici" est inutile et agaçante. Les lecteurs d'écran annoncent déjà lorsqu'un texte est un lien.
Pourtant, le menu de mon site proposait deux pages : "Qu'est-ce qu'AT ?" et "À propos".
À quel sujet ?
On peut maintenant lire "À propos de ce blog".
En savoir plus l'accessibilité du texte du lien et les phrases à éviter (comme la raison pour laquelle je n'inclus plus la mention "en savoir plus" dans le lien).

Deux : les liens doivent ressembler à des liens

C'est tellement évident. Je pensais avoir fait le tour de la question. Le corollaire de cette règle est que le texte qui n'est pas un lien ne doit pas ressembler à un lien. C'est pourquoi plus personne ne souligne les titres de livres (bien que les dinosaures aient appris à le faire sur nos copies dactylographiées).
Pourtant, le menu de ce site proposait les rubriques "Qu'est-ce qu'AT" et "À propos" dans la même police grise que le corps du texte.
Aujourd'hui, ils sont rouges.
Remarque : il existe une exception à cette règle pour les liens de navigation principaux d'un site. Je remarque que WebAIM.org a également un menu sans liens distinctifs. Cependant, je pense que le fait de rendre le mien rouge aiderait les personnes qui ne connaissent pas bien les conventions du Web (comme certains membres de ma famille...).

Trois : Les liens colorés doivent avoir un rapport de contraste de 3:1

La meilleure pratique consiste à souligner tous les liens dans le contenu. Toutefois, si vos liens ne sont pas soulignés, les lignes directrices sur l'accessibilité du web (WCAG 2.0) exigent que le texte du lien soit discernable du corps du texte par un rapport de contraste d'au moins 3:1.
J'ai utilisé le logiciel WebAIM vérificateur de contraste de liens après avoir inspecté ma page pour connaître la valeur hexagonale de mes couleurs. J'ai constaté que je devais ajuster à la fois les couleurs de mon corps de texte et celles de mes liens pour obtenir ce rapport. Bien sûr, une solution plus simple consisterait à souligner tous les liens, mais je n'aime pas trop l'aspect chargé de la page.
En savoir plus sur exigences en matière de couleur et de contraste.

Quatre : La couleur ne suffit pas pour le survol de la souris ou la focalisation du clavier

C'était une nouvelle pour moi. Si un site web utilise une couleur au lieu d'un soulignement pour désigner les liens, ces liens doivent changer d'une manière différente lorsque la souris les survole. Il en va de même pour la "focalisation sur le clavier" (l'utilisation des touches pour naviguer dans les liens). Les liens "doivent présenter un 'désignateur non coloré'".
En testant cette règle, je n'ai constaté aucun changement lorsque j'ai utilisé ma souris pour passer au-dessus d'un lien AT3CenterBlog. Avec le focus clavier (en utilisant la touche tabulation), j'ai constaté qu'ils apparaissaient en surbrillance avec un subtil contour en forme de boîte.
Pour être en conformité avec WCAG 2.0, j'ai modifié mes liens pour qu'ils soient plus perceptibles à la sélection. Tous les liens sont désormais soulignés lorsqu'ils sont survolés par la souris ou par le clavier (merci l'aide de WordPress).
En savoir plus sur apparence du lien.

Cinq : Les Linktips ne peuvent pas fournir d'informations vitales

Ouch. Celle-ci m'a fait mal. Une info-bulle (ou infobulle) est le texte qui s'affiche parfois lorsque vous survolez un lien. Pourtant, personne ne voit d'info-bulle sur un appareil mobile ou en utilisant la focalisation du clavier. Les lecteurs d'écran doivent être configurés pour les lire (certains ne le peuvent pas).
Les infobulles sont créées en HTML à l'aide de l'attribut "title". Bien que je ne sois pas un codeur, j'avais sérieusement codé à la main. Les info-bulles sont désormais mortes pour moi. En savoir plus problèmes d'accessibilité avec l'attribut title.

Six : Les liens qui s'ouvrent dans un nouvel onglet ont besoin d'une étiquette visible en permanence

Encore une fois. J'avais l'impression que je pouvais utiliser l'info-bulle pour avertir les utilisateurs des liens qui s'ouvrent dans un nouvel onglet. Or, cette information doit faire partie du texte du lien lui-même. Par ailleurs, j'avais appris que la mention "tous les liens s'ouvrent dans un nouvel onglet" était tout à fait acceptable sur une page. Mais comment un lecteur d'écran pourrait-il trouver cette mention ?
Plus je lis, plus je suis résigné à ce que les liens s'ouvrent dans le même onglet (et laissent les visiteurs se fier à leur bouton de retour). C'est une modification que j'ai apportée à cet article et aux suivants.
Le World Wide Web Consortium (W3C) recommande de n'ouvrir les liens dans une nouvelle fenêtre ou un nouvel onglet que lorsque cela est nécessaire. (par exemple, lorsque l'ouverture d'un lien déconnecte un utilisateur d'une zone sécurisée d'un site).
Si vous rencontrez un problème d'accessibilité avec les actualités et les conseils de l'AT3 Center, veuillez m'envoyer un courriel. Ensemble, nous pourrons améliorer le site (et bloguer à ce sujet !).