# Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Aide à la navigation > Fiche 12.4

## Fiche 12.4 : Y a-t-il des liens facilitant la navigation dans la page ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### Carte d'identité

- Critère AccessiWeb : 12.4
- Niveau AccessiWeb : argent
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 13.4
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 3 de WAI) : 13.5, 13.6, 13.10

revenir en haut de la page

### Comprendre

#### 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 moteur 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.
  Par exemple, une personne qui clique sur un lien de menu, pourra se rendre directement à la zone de contenu qui aura changé dans la page.
- 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

#### Par le code source

1. Il n'existe pas de moyen systématique de vérification. Cependant, on peut éventuellement rechercher les balises `A` dont le premier caractère de l'attribut `href` comporte le signe dièse ("#").

#### 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 "12. Aide à la navigation" de la Barre AccessiWeb, activer le critère 12.4.
- Si des liens internes sont codés dans la page, une nouvelle fenêtre apparaît pour indiquer leur nombre et ils sont affichés sur la page elle-même.
- Vérifier que la page comporte au moins un lien comme "Passer le menu" pour accéder directement au contenu de la page (lien "invisible" en haut de page par exemple) et qu'elle propose aussi des liens de retour vers le haut de page lorsque les pages sont longues.

##### Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :

1. Dans "Infos Doc" puis "Montrer les liens internes".
2. Si des liens internes sont prévus, une fenêtre apparaît pour les dénombrer et ils sont affichés sur la page elle-même.
3. Vérifier que la page comporte au moins un lien comme "Passer le menu" pour accéder directement au contenu de la page (lien "invisible" en haut de page par exemple) et qu'elle propose aussi des liens de retour vers le haut de page lorsque les pages sont longues.

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

1. Dans le menu "Information" puis dans l'option "Informations sur la page" et sur l'onglet "Liens".
2. 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.
3. Vérifier que la page comporte au moins un lien comme "Passer le menu" pour accéder directement au contenu de la page (lien "invisible" en haut de page par exemple) et qu'elle propose aussi des liens de retour vers le haut de page lorsque les pages sont longues.

##### Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :

1. Lorsque la page est chargée, passer de lien en lien avec la touche "tabulation".
2. Pour chaque lien interne, Jaws annonce "lien sur la même page", suivi de l'intitulé du lien.
3. Valider sur ce type de lien pour vérifier qu'il mène bien à l'emplacement annoncé.

revenir en haut de la page

### Comment mettre en oeuvre

#### 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 revanche, la règle "visibility: hidden" est supportée.

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.
On évitera autant que possible les pages dépassant 3 défilements en résolution 1024 par 768, mais en cas de nécessité, on aura recours à des ancres après 3 défilements dans cette résolution.

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

Cette capture d'écran montre une page sur laquelle ont été définis des liens de navigation internes, entre autres un lien de bas de page qui permet de retourner juste avant le titre de niveau 1 (balise `H1`).

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 6.7 : Y a-t-il moins de 40 liens actifs dans la page, hors liens nécessaires à la navigation ?
- Fiche 9.2 : La page web est-elle structurée de manière cohérente ?
- Fiche 13.13 : La page fait-elle au maximum 3 écrans en résolution 1024*768 si aucune navigation interne n'est prévue ?

#### Autres ressources

- html techniques (section 6.2) : Grouping and bypassing links
- Web Content Accessibility 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 2.1, 30 août 2006) | Conditions d'utilisation | Contact