Le fil d'Ariane est un outil d'aide à la navigation qui correspond à une suite horizontale d'hyperliens hiérarchiques. Il est complémentaire à la navigation secondaire et indique où se situe la page consultée dans l'architecture du site Internet.

Les hyperliens qui composent le fil d'Ariane sont construits à partir des titres de niveau H1 des pages. Toutefois, dans le cas où une page contient un titre de navigation alternatif, c'est celui-ci qui s'affichera, sauf si la page a une balise SEO.

Quand l'utiliser

L'utilisation du fil d'Ariane est fortement recommandée dans toutes les pages du site Internet. Toutefois, comme les titres du site de Revenu Québec sont souvent très longs, nous ne l'utilisons actuellement pas dans toutes les pages.

Utilisation en format bureau

En format bureau, pour éviter que le fil d'Ariane soit trop long, ce qui pourrait nuire à la compréhension de l'utilisatrice ou de l'utilisateur, il n'est présent qu'à partir du 4e niveau de profondeur de la navigation.

Utilisation en format mobile

Sur un appareil mobile, le fil d'Ariane est présent dès le 3e niveau de profondeur de la navigation, mais il contient seulement le titre de la page précédente, et non le chemin complet.

Structure

La structure du fil d'Ariane varie selon l'appareil utilisé.

Format bureau

1. Titre H1 ou titre de navigation alternatif (toujours cliquable)
2. Chevron (non cliquable)
3. Titre de la page courante en gras (non cliquable)

Format mobile

1. Titre H1 ou titre de navigation alternatif de la page précédente uniquement
2. Chevron (cliquable)

Positionnement

Le positionnement du fil d'Ariane varie selon l'appareil utilisé.

Format bureau

Le fil d'Ariane est placé sous le menu de navigation, juste au-dessus du titre de la page (titre H1).

Format mobile

Le fil d'Ariane est placé entre le menu déroulant et la barre de navigation.

États

Les hyperliens du fil d'Ariane n'ont pas exactement les mêmes états que les autres hyperliens. Selon que les hyperliens du fil d'Ariane sont utilisés en format bureau ou mobile, leur couleur est grise ou bleu.

État actif

L'état actif indique à l'utilisatrice ou à l'utilisateur qu'il peut cliquer sur l'hyperlien. C'est l'état que les utilisatrices et les utilisateurs voient le plus souvent dans une page.

État au survol

L'état au survol apparaît lorsque l'utilisatrice ou l'utilisateur survole l'hyperlien avec le curseur. En format bureau, l'hyperlien devient souligné, tandis qu'en format mobile, il change légèrement de nuance de couleur. Dans les deux formats, le pointeur se transforme en main pour indiquer qu'une action est possible.

État sélectionné

Lorsque l'utilisatrice ou l'utilisateur clique sur un libellé dans le fil d'Ariane, celui-ci devient alors en gras et passe à l'état sélectionné. Cet état indique la page en cours de consultation. Le fil d'Ariane format mobile n'affichent pas cet état.
 

Format bureau

État focus

L'état focus ne s'affiche que lorsque l'utilisatrice ou l'utilisateur navigue au moyen du clavier. C'est un indicateur visuel qui permet à cette dernière ou à ce dernier de savoir où elle ou il se situe dans la page par rapport aux éléments interactifs.

Accessibilité

Les hyperliens du fil d'Ariane doivent être accessibles lorsque les utilisatrices et les utilisateurs naviguent au moyen du clavier. Ils doivent aussi être cliquables lorsque l'on appuie sur la touche Entrée.