Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • 1) Images
   • 2) Cadres
   • 3) Couleurs
   • 4) Multimédia
   • 5) Tableaux
   • 6) Liens
   • 7) Code exécutable
   • 8) Eléments obligatoires
   • 9) Structuration de l'information
   • 10) Présentation de l'information
   • 11) Formulaires
   • 12) Navigation
   • 13) Consultation
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

vous êtes ici : Accueil > Fiches AccessiWeb : Liens > Critère 6.1

Critère 6.1 : Chaque lien sans titre de lien est-il explicite hors contexte ?

revenir en haut de la page

Carte d'identité du critère 6.1 [niveau AccessiWeb : Bronze]

revenir en haut de la page

Comprendre

Comprendre le critère

Bénéfices pour les utilisateurs

• 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 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

• Les principaux moteurs de recherche prennent en compte les liens pointant vers une page pour la positionner dans leurs pages de résultats. L'utilisation de liens explicites (reprenant des mots-clés par exemple) améliore le référencement des pages.

revenir en haut de la page

Comment évaluer

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

1. Sélectionner le(s) élément(s) à tester : Ouvrir le code source de la page Web et sélectionner le code des liens. Il s'agit du code associé à tous les éléments suivants (exemple de code source : <a href="nomdefichier.html">intitulé de lien</a>) :
   • texte compris entre les balises <a href="..."> et </a>
   • balise img comprise entre les balises <a href="..."> et </a>
   • balises area contenues entre les balises <map name=[...]> et </map>
   • balise img et du texte compris entre les balises <a href="..."> et </a>.
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 6.1.a [Bronze] : Chaque lien texte sans titre de lien est-il explicite hors contexte ?
   • Test 6.1.b [Bronze] : Pour chaque lien image sans titre de lien, l'alternative textuelle (contenu de l'attribut alt ou texte entre <object> et </object>) de l'image est-elle explicite hors contexte ?
   • Test 6.1.c [Bronze] : Pour chaque image réactive (balise img ou balise object avec un attribut usemap), pour chaque zone cliquable (balise area) sans titre de lien et ayant un attribut alt, le contenu de cet attribut est-il pertinent ?
   • Test 6.1.d [Bronze] : Chaque lien composite sans titre de lien est-il explicite hors contexte ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

• Pour le test 6.1.a [Bronze] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des liens [nouvelle fenêtre]".
  3. La liste des liens s'affiche dans une nouvelle fenêtre.
  4. Si dans la colonne "Title", la cellule correspondante est vide (pas de titre de lien) : dans la colonne "Intitulé du lien", vérifier que chaque lien texte sans titre de lien est explicite hors contexte.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 6.1.b [Bronze] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "IE" de la Barre d'outils Accessibilité du Web (version 2.0 beta), décocher l'option "Activer l'ActiveX".
  3. Puis, dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des liens [nouvelle fenêtre]".
  4. La liste des liens et des liens images s'affiche dans une nouvelle fenêtre.
  5. Si dans la colonne "Title", la cellule correspondante est vide (pas de titre de lien) : dans la colonne "Intitulé du lien", vérifier que pour chaque lien image sans titre de lien, l'alternative textuelle (contenu de l'attribut alt ou texte entre <object> et object>) de l'image est explicite hors contexte.
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 6.1.c [Bronze] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Images" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir les images map [nouvelle fenêtre]".
3. Chaque images réactive s'affiche avec la liste de ses balises area.
4. Vérifier que pour chaque zone cliquable ayant un attribut alt sans titre de lien, le contenu de cet attribut est pertinent.
5. Si c'est le cas, le test est validé.


• Pour le test 6.1.d [Bronze] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "IE" de la Barre d'outils Accessibilité du Web (version 2.0 beta), décocher l'option "Activer l'ActiveX".
  3. Puis, dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des liens [nouvelle fenêtre]".
  4. La liste des liens s'affiche dans une nouvelle fenêtre.
  5. Si dans la colonne "Title", la cellule correspondante est vide (pas de titre de lien) : dans la colonne "Intitulé du lien", vérifier que pour chaque lien composite sans titre de lien, le texte compris entre <a href="..."> et a> (en tenant compte de l'alternative textuelle de ou des images) est explicite hors contexte.
  6. Si c'est le cas, le test est validé.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :

• Pour le test 6.1.a [Bronze], le test 6.1.b [Bronze] et le test 6.1.d [Bronze] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "CSS" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Désactiver les styles css" puis l'option "Tous les styles".
  3. Dans le menu "Entourer", activer l'option "Entourer les liens" puis l'option "Liens sans attributs title".
  4. Dans le menu "Images", activer l'option "Afficher les attributs Alt".
  5. La page s'affiche sans les styles CSS, entoure les liens sans attribut title et affiche de tous les attributs alt.
  6. Si aucun titre de lien est présent, vérifier que le contenu de chaque lien texte / lien image / lien composite est explicite hors contexte.
  7. Si c'est le cas, le test est validé.
  
  
• Pour le test 6.1.c [Bronze] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
3. Une nouvelle fenêtre apparaît contenant le code source de la page.
4. En faisant une recherche sur le mot area (ctrl + f), vérifier que pour chaque zone cliquable ayant un attribut alt et sans titre de lien, le contenu de cet attribut est explicite hors contexte.
5. Si c'est le cas, le test est validé.

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

Qui est concerné ?

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 :

1. 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.
2. 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.
3. 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.

<html lang="fr">
<head>
<title>Liens non expliciteS</title>
</head>
<body>
<a href="http://www.accessiweb.org"><img src="images/logo.gif" /></a>
<a href="http://www.accessiweb.org/fr/accessibilite_web/actualites/">En savoir plus</a><br />
<a href="http://www.accessiweb.org/fr/accessibilite_web/Liste_accessibilite/">En savoir plus</a><br />
<a href="guide-accessiweb-fiche-6-1.html"><img src="arrow_prev.gif" alt="previous page" /></a>
</body>
</html>

Exemple de bonne pratique

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 :

1. Le premier lien graphique est doté d'une alternative textuelle appropriée
2. les deux liens dont l'intitulé était "En savoir plus" sont légèrement modifiés pour indiquer vers quelle rubrique ils mènent.
3. 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>

revenir en haut de la page

Illustrations

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.

Une série de liens peu explicites (format mp3, 123 ko)

Une série de liens explicites (format mp3, 157 ko)

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 6) : Links

revenir en haut de la page