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

Critère 12.2 : Chaque page Web a-t-elle si nécessaire des liens de navigation interne ?

revenir en haut de la page

Carte d'identité du critère 12.2 [niveau AccessiWeb : Or]

revenir en haut de la page

Comprendre

Comprendre le critère

Toutes les page Web doivent avoir si nécessaire des liens de navigation interne.

Bénéfices pour les utilisateurs

• Bénéfice 1 :
  Les personnes aveugles qui lisent une page de manière linéaire, les personnes handicapées motrices qui naviguent exclusivement au clavier et les utilisateurs de très petits écrans, par exemple, seront avantagés par toute aide à la navigation au sein d'une même page. Ce type de liens internes permet, en effet de se rendre directement au bloc d'information souhaité sans avoir à faire défiler ce qui précède.
  
  
• Bénéfice 2 :
  Sur des pages d'une longueur relativement importantes (pages des techniques du W3C), par exemple, des liens de retour en haut de page, placés à intervalles réguliers, évitent à l'utilisateur d'avoir à se servir des ascenseurs pour faire défiler le texte.

Valeur ajoutée pour le site

Il n'y a pas d'élément d'information pour cette rubrique.

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 :
   • Identifier dans un navigateur graphique tous les liens de navigation interne.
   • Ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants : a avec attribut href=#identifiant" (exemple de code source : <a href="nomdelapage.html#contenu">Accéder directement au contenu de la page</a>).
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 12.2.a [Or] : Chaque page Web a-t-elle si nécessaire un lien de navigation interne (balise a avec attribut href) qui permet d'accéder directement au contenu de la page ?
   • Test 12.2.b [Or] : Chaque page Web a-t-elle si nécessaire un lien de navigation interne (balise a avec attribut href) qui permet d'accèder directement au menu de navigation de la page ?
   • Test 12.2.c [Or] : Chaque page Web a-t-elle si nécessaire des liens de navigation interne (balise a avec attribut href) ?
   • Test 12.2.d [Or] : Dans chaque page Web, pour chaque lien de navigation interne (balise a avec attribut href), le lien fonctionne-t-il correctement ?
   • Test 12.2.e [Or] : Chaque page Web a-t-elle si nécessaire un lien de navigation interne (balise a avec attribut href) qui permet de passer une figure d'art ASCII ?
   
   
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 12.2.a [Or] :
  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 "Voir les liens internes".
  3. Un élément graphique représentant une ancre et commenté par "Texte des liens internes:[texte]" précède chacun des liens internes de la page Web.
  4. Vérifier que chaque page Web a si nécessaire un lien de navigation interne (balise a avec attribut href) qui permet d'accéder directement au contenu de la page.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 12.2.b [Or] :
  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 "Voir les liens internes".
  3. Un élément graphique représentant une ancre et commenté par "Texte des liens internes:[texte]" précède chacun des liens internes de la page Web.
  4. Vérifier que chaque page Web a si nécessaire un lien de navigation interne (balise a avec attribut href) qui permet d'accéder directement au menu de navigation de la page.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 12.2.c [Or] :
  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 "Voir les liens internes".
  3. Un élément graphique représentant une ancre et commenté par "Texte des liens internes:[texte]" précède chacun des liens internes de la page Web.
  4. Vérifier que chaque page Web a si nécessaire des liens de navigation interne (balise a avec attribut href)
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 12.2.d [Or] :
  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 "Voir les liens internes".
  3. Un élément graphique représentant une ancre et commenté par "Texte des liens internes:[texte]" précède chacun des liens internes de la page Web.
  4. Vérifier que dans chaque page Web, pour chaque lien de navigation interne (balise a avec attribut href), le lien fonctionne correctement.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 12.2.e [Or] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Vérifier la présence d'art ASCII
  3. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir les liens internes".
  4. Un élément graphique représentant une ancre et commenté par "Texte des liens internes:[texte]" précède chacun des liens internes de la page Web.
  5. Vérifier que chaque page Web a si nécessaire un lien de navigation interne (balise a avec attribut href) qui permet de passer une figure d'art ASCII.
  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 12.2.a [Or] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Informations sur la page" puis l'onglet "Liens".
  3. Une nouvelle fenêtre apparaît et tous les liens s'affichent sous forme de liste.
  4. Vérifier les intitulés de liens dans la colonne "Noms", leur url dans la colonne "Adresse" et leur type dans la colonne "Type" (par exemple, "Ancre").
  5. Vérifier que chaque page Web a si nécessaire un lien de navigation interne (balise a avec attribut href) qui permet d'accéder directement au contenu de la page.
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 12.2.b [Or] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Informations sur la page" puis l'onglet "Liens".
  3. Une nouvelle fenêtre apparaît et tous les liens s'affichent sous forme de liste.
  4. Vérifier les intitulés de liens dans la colonne "Noms", leur url dans la colonne "Adresse" et leur type dans la colonne "Type" (par exemple, "Ancre").
  5. Vérifier que chaque page Web a si nécessaire un lien de navigation interne (balise a avec attribut href) qui permet d'accéder directement au menu de navigation de la page.
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 12.2.c [Or] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Informations sur la page" puis l'onglet "Liens".
  3. Une nouvelle fenêtre apparaît et tous les liens s'affichent sous forme de liste.
  4. Vérifier les intitulés de liens dans la colonne "Noms", leur url dans la colonne "Adresse" et leur type dans la colonne "Type" (par exemple, "Ancre").
  5. Vérifier que chaque page Web a si nécessaire des liens de navigation interne (balise a avec attribut href).
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 12.2.d [Or] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Informations sur la page" puis l'onglet "Liens".
  3. Une nouvelle fenêtre apparaît et tous les liens s'affichent sous forme de liste.
  4. Vérifier les intitulés de liens dans la colonne "Noms", leur url dans la colonne "Adresse" et leur type dans la colonne "Type" (par exemple, "Ancre").
  5. Vérifier que dans chaque page Web, pour chaque lien de navigation interne (balise a avec attribut href), le lien fonctionne correctement.
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 12.2.e [Or] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Vérifier la présence d'art ASCII
  3. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Informations sur la page" puis l'onglet "Liens".
  4. Une nouvelle fenêtre apparaît et tous les liens s'affichent sous forme de liste.
  5. Vérifier les intitulés de liens dans la colonne "Noms", leur url dans la colonne "Adresse" et leur type dans la colonne "Type" (par exemple, "Ancre").
  6. Vérifier que chaque page Web a si nécessaire un lien de navigation interne (balise a avec attribut href) qui permet de passer une figure d'art ASCII.
  7. 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é ?

Ce critère est implémenté par l'intégrateur HTML.

Implémentation

Un lien interne se définit par deux éléments :

• Un bloc d'information (une division, un tableau, un paragraphe, une liste etc...) doté d'un identifiant unique dans la page.
• Un lien pointant vers cet élément de bloc et dont l'adresse de destination contient l'identifiant de l'élément, précédé du signe dièse ("#").

Syntaxe générale :

<a href="#identifiant_unique">Aller à l'élément</a>
... autre contenu ...
<element id="identifiant_unique">
... contenu de l'élément de bloc ...
</element>

Ces aides à la navigation, au sein d'une page, donnent à l'utilisateur la possibilité :

• D'atteindre rapidement un point précis.
• De sauter un contenu qu'il ne souhaite pas lire.
• De retourner en haut de page sans avoir à utiliser les ascenseurs de défilement.

Il existe de nombreuses hypothèses d'implémentation de liens de saut de section.

1. Une balise div placée hors cadre, contenant un simple lien vers une ancre dans la page
(cela ne provoque pas de barre de défilement, tous navigateurs et plateformes confondus).
2. Une division de largeur si petite que le contenu ne s'affiche pas mais reste lisible pour les lecteurs d'écran, par exemple, qui lisent le code source.
3. Une image d'un pixel sur un, sans bordure, pointant vers une ancre dans la page, et portant un attribut alt pertinent.
;
4. Un lien visible, afin que les utilisateurs de petits écrans puissent également en bénéficier.

Attention à coder la division indépendamment de son placement par feuille de style: c'est son ordre d'apparition dans le code qui sera respecté par un lecteur d'écran.

D'un point de vue ergonomique, une image d'un pixel de côté affichera un petit carré en cas de désactivation des images sous un navigateur graphique.

Le lien visible est de plus en plus apprécié, par les utilisateurs de très petits écrans par exemple.

Remarque : bien que le règle du langage CSS : "display: none" permette de masquer ce type de lien sous un navigateur graphique, elle est à exclure, car toutes les aides techniques ne les prennent pas en charge.

En ce qui concerne les liens vers le haut de page, il convient de pointer vers le début du texte courant, et pas simplement vers le vrai début de page. On évitera donc de placer l'ancre "#top" avant la bannière du site, par exemple. On placera l'ancre de préférence avant le titre principal de la page.

Pour des pages particulièrement longues, une liste de liens pointant vers des ancres, placées à d'autres endroits que le haut de page, constitue également une aide à la navigation.

Exemple de mauvaise pratique

La mauvaise pratique à éviter est celle qui consiste à ne pas proposer ce type de lien sur des pages relativement longues. Mais il est plus pertinent de parler de ce qu'il faut faire.

Exemple de bonne pratique

En matière de liens de saut de section ou vers une section, il faudra en premier lieu se demander ce que l'utilisateur veut savoir: veut-il savoir quelle section il saute ou vers laquelle il est dirigé ? Ainsi, l'intitulé du lien (ou de l'alternative textuelle associée à l'image lien) sera-t-il de type "sauter le menu de navigation" ou "aller au menu de navigation" ? Le second cas ne laisse pas deviner quelle information sera sautée, alors qu'il pourrait s'agir d'une information importante.

Pour une première visite, l'utilisateur préfère savoir quelle information il saute, quitte à passer consécutivement plusieurs sections. En revanche, un visiteur habitué préférera rencontrer rapidement un lien vers le contenu, étant déjà conscient qu'il ne sautera pas d'information utile pour lui.

Un lien direct vers le contenu, dont l'intitulé peut être "Aller au contenu", trouvera donc plutôt sa place en tout début du code source. Tandis qu'un lien de saut de section trouvera sa place juste avant des sections répétitives comme la barre de navigation ou le menu.

Attention : ce type de lien ne doit pas non plus être inséré abusivement sous peine d'alourdir la page. En étudiant, par exemple le code source d'une page présentant une fiche de ce guide, on constate que celle-ci comporte deux grandes divisions principales : le menu et le contenu. Juste avant le menu, un lien invisible propose à l'utilisateur d'"aller au contenu". Après chaque grande rubrique d'une fiche, un lien permet de "revenir en haut de la page", car le texte contenu dans une fiche peut s'avérer relativement long.

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.2) : Grouping and bypassing links
• WAI Curriculum (section 13.10) : Provide a means to skip over multi-line ASCII art

revenir au sommaire de la fiche

revenir en haut de la page

---

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.