Bénéfice 1:
Certaines aides techniques offrent la possibilité d'afficher la liste des liens présents sur une page web pour permettre aux utilisateurs une navigation rapide et aisée. Pour que de telles listes de liens soient exploitables, il est impératif que les intitulés des liens soient compréhensibles hors du contexte dans lequel ils sont utilisés, c'est-à-dire, sans le texte qui les entoure.
Valeur ajoutée pour le site
Bénéfice 1:
Les principaux moteurs de recherche prennent en compte l'intitulé des liens pointant vers une page pour la positionner dans leurs pages de résultats. L'utilisation d'intitulés explicites (reprenant des mots-clés par exemple) améliore le référencement des pages.
Copier/coller l'intitulé du lien ou le contenu de l'attribut alt (pour les images cliquables) dans un éditeur de texte.
En lisant ces liens pris isolément, se demander s'ils sont suffisamment explicites.
Par l'utilisation d'outils
Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.
Evaluer avec la barre AccessiWeb (version 1.0) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "6. Liens" de la Barre AccessiWeb, activer le critère 6.2.
La liste des liens s'affiche dans une nouvelle fenêtre sous forme d'un tableau contenant le numéro du lien, son intitulé, son adresse Internet et le cas échéant, le contenu de l'attribut title.
Note : Les images cliquables (images qui sont en même temps des liens) sont aussi affichées avec le contenu de leur alternative textuelle.
Vérifier ensuite que l'intitulé de chacun des liens ainsi que le contenu de l'alternative textuelle de chacune des images cliquables (contenu de l'attribut alt) sont explicites hors du contexte de la page. L'intitulé du lien est le texte qui apparaît dans la colonne "Intitulé du lien".
Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Cliquer sur l'option "Liste des liens [Nouvelle fenêtre]" du menu "Infos Doc".
Une nouvelle fenêtre apparaît et présente, sous forme de tableau, le numéro du lien, son intitulé, son adresse Internet et, le cas échéant, le contenu de l'attribut title. Note : Les images cliquables (images qui sont en même temps des liens) sont aussi affichées mais pas le contenu de leur alternative textuelle. Pour connaître le contenu des alternatives textuelles des images cliquables, cliquer ensuite (à partir de la fenêtre présentant le tableau des liens) dans le menu "Images" sur l'option "Liste des images [Nouvelle fenêtre]". Le code source des images cliquables sera alors affiché.
Vérifier ensuite que l'intitulé de chacun des liens ainsi que le contenu de l'alternative textuelle de chacune des images cliquables sont explicites hors du contexte de la page. L'intitulé du lien est le texte qui apparaît dans la colonne "Intitulé du lien".
Evaluer avec la Barre d'Outils Web Developper pour Firefox (version
1.0.2 en français) :
Activer l'option "Informations sur la page" du menu "Information" puis cliquer sur l'onglet "Liens".
Une nouvelle fenêtre apparaît et présente, sous forme de tableau, le nom du lien (intitulé), son adresse Internet et le type d'élément. Note : Le contenu de l'alternative textuelle des images cliquables (images qui sont en même temps des liens) est aussi affiché mais sous forme de texte, au même titre que les intitulés de liens eux-même : pas de distinction possible entre un lien textuel et le contenu de l'attribut alt d'une image.
Vérifier ensuite que l'intitulé de chacun des liens ainsi que le contenu de l'alternative textuelle de chacune des images cliquables sont explicites hors du contexte de la page. L'intitulé du lien est le texte qui apparaît dans la colonne "Nom".
Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Après le chargement de la page, appuyer simultanément sur les touches Insert+F7. Une fenêtre contenant la liste des liens s'affiche en superposition de la fenêtre de Internet Explorer.
Lire chaque intitulé de lien ainsi listé pour savoir s'il est explicite sans le texte qui l'entoure.
Les personnes responsables de la partie rédactionnelle ont la charge du respect de ce
critère.
Implémentation
Utiliser exclusivement des intitulés de liens (portion de texte située entre les balises A et /A) explicites hors du contexte de la page.
Par exemple, préférer "En savoir plus sur l'association BrailleNet" plutôt que "En savoir plus".
Exemple de mauvaise pratique
Dans l'exemple de code qui suit, on peut relever les problèmes d'accessibilité suivants concernant l'intitulé des liens :
Le premier lien est un lien graphique représentant le logo AccessiWeb et permettant de se rendre sur ce site. Or cette image ne comporte pas d'alternative textuelle. Il en résulte que les lecteurs d'écran ou les navigateurs textuel ne donneront, comme intitulé pour ce lien, que le chemin du fichier, c'est-à-dire "images/logo". Ceci n'indique pas à l'utilisateur sur quelle page il va aboutir en cliquant sur ce lien.
Les deux liens suivants ont pour intitulé unique "En savoir plus". Pour un utilisateur qui passe de lien en lien avec la seule touche "tabulation", rien ne lui permet de les distinguer. D'autant qu'ils conduisent vers des pages différentes.
Enfin, le dernier lien graphique possède bien une alternative textuelle, mais elle est en anglais sur une page dont la langue principale est le français. Ceci n'est donc pas adapté au contexte.
En reprenant l'extrait de code précédent, on peut sensiblement améliorer les intitulés de liens pour qu'ils deviennent explicites et indiquent bien à l'utilisateur vers quelle page il sera conduit :
Le premier lien graphique est doté d'une alternative textuelle appropriée
les deux liens dont l'intitulé était "En savoir plus" sont légèrement modifiés pour indiquer vers quelle rubrique ils mènent.
L'alternative textuelle du dernier lien graphique est francisé".
<html lang="fr"> <head> <title>Liens explicites</title> </head> <body> <a href="http://www.accessiweb.org"><img src="images/logo.gif" alt="accéder au site AccessiWeb" /></a> <a href="http://www.accessiweb.org/fr/accessibilite_web/actualites/">En savoir plus sur les actualités</a><br /> <a href="http://www.accessiweb.org/fr/accessibilite_web/Liste_accessibilite/">En savoir plus sur la liste accessibilité</a><br /> <a href="guide-accessiweb-fiche-6-1.html"><img src="arrow_prev.gif" alt="page précédente" /></a> </body> </html>
Note : pour lire les extraits sonores au format mp3 proposés sur ce guide, vous devez disposer d'un lecteur capable de lire ce type de fichier. Les enregistrements ont été réalisés à partir soit de la synthèse vocale utilisée par Jaws, soit celle utilisée par Home Page Reader.
Pour plus d'informations sur le téléchargement de lecteurs de fichiers mp3, consulter le paragraphe Lecteurs multimédia de la page Outils d'aide à l'évaluation de ce guide.
Voici ce que dit Jaws :
"Liens explicites.
Tab, lien graphique accéder au site AccessiWeb. Tab, lien en savoir plus sur les actualités.
Tab, lien en savoir plus sur la liste accessibilité. Tab, lien graphique page
précédente."