Le menu d'ancres peut être utilisé quand l'effort de défilement dans une page est significatif et que celle-ci contient au moins deux titres de niveau H2. Il est particulièrement utile sur un appareil mobile pour permettre de visualiser le contenu d'une page, sans avoir à défiler celle-ci.

Le menu d'ancres est tout indiqué lorsque la structure d'information d'une page est en entonnoir, c'est-à-dire lorsque l'on passe d'une information générale à une action précise à poser.

Afin que soit optimisée l'utilisation du menu d'ancres, nous recommandons de toujours utiliser la même structure dans les pages, pour des raisons tant d'utilisabilité que de référencement naturel.
 

1. Titre H1
2. Courte introduction (elle ne doit contenir aucun contenu important ni tâche à réaliser)
3. Encadré bleu de couleur #EDF8FD
4. Titre « Dans cette page : », en gras.
5. Hyperliens correspondant aux titres H2 de la page
6. Titre H2

Le menu d'ancres est une composante automatisée qui reprend automatiquement tous les titres H2 d'une page. Vous ne pouvez donc rien ajouter manuellement dans la composante.

Le menu d'ancres reprend exactement le même comportement et les mêmes états que les hyperliens.

Les titres des ancres (H2) doivent être le plus précis possible. On évite les mots seuls et on essaie d'être le plus clair et concis possible, comme s'il s'agissait de la table des matières d'un guide.

Les libellés ne doivent habituellement pas être numérotés, ils doivent être présentés dans une liste à puces.

Étant donné que les ancres servent à naviguer à l'intérieur d'une page, il faut utiliser une balise avec un attribut aria-label="Table des matières".

Cela indique à l'utilisatrice ou à l'utilisateur qu'il y a un lien fort entre les hyperliens des ancres et les contenus de la page et l'aide à comprendre plus facilement qu'en cliquant, elle ou il demeurera dans la page.