Dernière mise à jour : 20 mai 2025
Les ancres sont des éléments interactifs présentés sous forme d’hyperliens, qui permettent à l'utilisateur de se rendre directement à des contenus précis situés plus bas dans la page.
- Guide d'utilisation
- Design
Utilisation
Les ancres permettent une vue d'ensemble sur la structure des contenus de la page, à la manière d'une table des matières. Elles sont utilisées en groupe et sont introduites par le titre « Dans cette page : ».
Elles se positionnent toujours avant les contenus auxquels elles réfèrent, soit après la section héros, le titre et l'introduction de la page.
Chaque ancre prend la forme d'un hyperlien et est introduite par une icône de flèche à angle droit.
Contexte d'utilisation
- Les ancres sont surtout utilisées pour les pages de 2e ou 3e niveau.
- On ne devrait jamais les retrouver dans une page sommaire de section ou de sous-section (hub), sauf exception.
- Il n'est pas possible de les utiliser dans la section héros.
Styles possibles
Les ancres peuvent adopter l'un des deux styles suivants, que l'on choisit en fonction du design ou de la structure de la page.
Rédaction UX
En tant qu'élément interactif, chaque ancre doit communiquer avec précision sa destination, plus bas dans la page.
Contenu
Le libellé d'une ancre reprend le titre de sa section de destination de manière concise et significative.
L'usage de mots-clés tirés de cette section est une bonne pratique pour rédiger un libellé efficace. L'utilisateur saura ainsi quel contenu sera abordé plus bas et pourra y accéder directement, s'il le souhaite.
Les articles, les déterminants, les pronoms, les adjectifs et les adverbes sont à éviter ou à doser avec parcimonie, sauf si leur utilisation apporte une valeur communicationnelle évidente.
Ponctuation
Comme l'ancre correspond à un titre de section, elle ne devrait en aucun cas utiliser de ponctuation, sauf celle contenue dans le titre de destination.
Nombre de caractères maximal
Libellé d'une ancre :
- Pas de nombre limite de caractères, mais le libellé doit demeurer concis.
- Idéalement, on vise un maximum de quatre à cinq mots.
Anatomie
Couleurs et styles
Ancres dans un encadré
Deux couleurs de typographie sont permises pour les ancres présentées dans un encadré :
- Bleu d’interactivité, lorsque le fond de l'encadré est blanc ou gris-bleu-10.
- Blanc, lorsque le fond de l'encadré est foncé.
Ancres alignées avec le texte
Deux couleurs de typographie sont acceptées pour les ancres alignées avec le texte :
- Bleu d’interactivité, lorsque l'arrière-plan est clair.
- Blanc, lorsque l'arrière-plan est foncé.
Taille
Voici les tailles des différents éléments :
- Titre « Dans cette page : » : même taille qu'un titre 4.
- Libellé d'une ancre : 16 px, soit la même taille que celle généralement utilisée pour un corps de texte.
- Icône de flèche à angle droit : invariable.
Placement
Les ancres doivent être positionnées avant les contenus auxquels elles réfèrent, soit après la section héros, le titre et l'introduction de la page.
Ancres dans un encadré
Lorsqu'elles sont présentées dans un encadré, les ancres sont alignées à gauche, jamais centrées. De plus, si la taille de la grille le permet, on place l'encadré à droite de l'introduction.
Ancres alignées avec le texte
Interactivité
Voici les différents états interactifs prévus pour une ancre :
Défaut
Survol
Clic
Focus
