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.4

Critère 6.4 : Chaque lien a-t-il une longueur maximum de 80 caractères (hors cas particuliers) ?

revenir en haut de la page

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

revenir en haut de la page

Comprendre

Comprendre le critère

Bénéfices pour les utilisateurs

• Bénéfice 1 :
  La majorité des afficheurs braille utilisés par les personnes aveugles ont une longueur moyenne de 40 caractères. Un lien de plus de 80 caractères (deux lignes sur un afficheur braille) oblige à plusieurs manipulations pour prendre connaissance de l'intitulé complet du lien.
  
  
• Bénéfice 2 :
  Si un utilisateur malvoyant se sert d'une loupe logicielle pour agrandir l'affichage de l'information, des intitulés de liens dépassant 80 caractères l'obligeront à déplacer plus fréquemment sa fenêtre de visualisation pour lire la totalité des liens.

Valeur ajoutée pour le site

• La rédaction de liens de 80 caractères maximum permet une réflexion en amont sur la pertinence et la concision à apporter sur chacun des liens présents sur la page.

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" title="titre de lien">intitulé de lien </a>) :
   • texte compris entre les balises a et /a
   • balise img comprise entre les balises a et /a
   • balises area contenues entre les balises <map name=[...]> et </map>
   • balise img et du texte compris entre les balises a et /a.
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 6.4.a [Bronze] : Chaque lien texte a-t-il une longueur maximum de 80 caractères (hors cas particuliers) ?
   • Test 6.4.b [Bronze] : Chaque lien image a-t-il une longueur maximum de 80 caractères (hors cas particuliers) ?
   • Test 6.4.c [Bronze] : Pour chaque image réactive (balise img ou balise object avec un attribut usemap), le lien de chaque zone cliquable (balise area) a-t-il une longueur au maximum de 80 caractères (hors cas particuliers) ?
   • Test 6.4.d [Bronze] : Chaque lien composite a-t-il une longueur maximum de 80 caractères (hors cas particuliers) ?
   
   
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.4.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. Dans la colonne "Intitulé du lien", vérifier que chaque lien texte (texte compris entre <a href="..."> et a>) a une longueur maximum de 80 caractères (hors cas particuliers).
  5. Dans la colonne Title", vérifier que chaque titre de lien a une longueur maximum de 80 caractères (hors cas particuliers).
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 6.4.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. Dans la colonne "Intitulé du lien", vérifier que pour chaque lien image, l'alternative textuelle (contenu de l'attribut alt ou texte entre <object> et object>) de l'image a une longueur maximum de 80 caractères (hors cas particuliers).
  6. Dans la colonne Title", vérifier que chaque titre de lien a une longueur maximum de 80 caractères (hors cas particuliers).
  7. Si c'est le cas, le test est validé.
  
  
• Pour le test 6.4.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 une alternative textuelle, le contenu de cette alternative a une longueur maximum de 80 caractères (hors cas particuliers).
5. Vérifier que pour chaque zone cliquable ayant une alternative textuelle et un titre de lien, le contenu du titre de lien a une longueur maximum de 80 caractères (hors cas particuliers).
6. Si c'est le cas, le test est validé.


• Pour le test 6.4.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. Dans la colonne "Intitulé du lien", vérifier que pour chaque lien composite, le texte compris entre <a href="..."> et a> (en tenant compte de l'alternative textuelle de ou des images) a une longueur maximum de 80 caractères (hors cas particuliers).
  6. Dans la colonne Title", vérifier que chaque titre de lien a une longueur maximum de 80 caractères (hors cas particuliers).
  7. 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.4.a [Bronze], le test 6.4.b [Bronze] et le test 6.4.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 "Information", activer l'option "Afficher les attributs Title".
  4. Dans le menu "Images", activer l'option "Afficher les attributs Alt".
  5. La page s'affiche sans les styles CSS, affiche le contenu de tous les attributs title et de tous les attributs alt.
  6. Vérifier que chaque lien texte / lien image / lien composite a une longueur maximum de 80 caractères (hors cas particuliers).
  7. Vérifier que chaque titre de lien a une longueur maximum de 80 caractères (hors cas particuliers).
  8. Si c'est le cas, le test est validé.
  
  
• Pour le test 6.4.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 une alternative textuelle, le contenu de cette alternative a une longueur maximum de 80 caractères (hors cas particuliers).
5. Vérifier que pour chaque zone cliquable ayant une alternative textuelle et un titre de lien, le contenu du titre de lien a une longueur maximum de 80 caractères (hors cas particuliers).
6. 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

Veiller à rédiger des intitulés de liens comportant de 7 à 8 mots en moyenne (hors cas particuliers).
Tout intitulé de lien dépassant 7 à 8 mots en moyenne peut être considéré comme "suspect" et doit faire l'objet d'un comptage précis du nombre de caractères.
Remarque identique pour la rédaction des titres de lien (hors cas particuliers).

Exemple de mauvaise pratique

Le lien suivant ne mesure pas moins de 103 caractères.

<a href="...">Le référendum sur le traité de la constitution européenne dépasse les clivages politiques traditionnels</a>

Exemple de bonne pratique

En ne retenant que la partie la plus significative, mais en faisant en sorte que le lien demeure explicite hors contexte, on peut le réduire à 57 caractères.

<a href="...">Le référendum sur le traité de la constitution européenne</a> dépasse les clivages politiques traditionnels.

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.

revenir en haut de la page

Références

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

revenir en haut de la page