Fil d'Ariane: Conception de Canada.ca

Dernière mise à jour : 2026-02-11

Obligatoire sur les pages standards et de campagne

Le fil d’Ariane est une suite horizontale de liens indiquant aux utilisateurs leur position dans la structure du site de Canada.ca. Il représente l’emplacement d’une page par rapport à son parent et permet de naviguer aisément vers les niveaux supérieurs de la structure du site.

Sur cette page

• Quand l’utiliser
• Quoi éviter
• Contenu et conception
• Comment procéder à la mise en œuvre
• Recherche et justification
• Derniers changements

Quand l’utiliser

Le fil d’Ariane est un élément de l’en-tête général. Il est obligatoire sur toutes les pages, à l’exception des pages transactionnelles, des pages d’erreur, et des pages dont le contenu est rédigé en français et en anglais.

Quoi éviter

Ne programmez pas le fil d’Ariane pour qu’il soit généré dynamiquement en fonction de la manière dont le visiteur arrive sur une page. Il doit représenter l’emplacement d’une page par rapport au modèle de navigation du site.

Évitez les longues étiquettes de liens. Utilisez une version abrégée du titre de la page, au besoin.

N’affichez pas la page actuelle à la fin du fil d’Ariane (avec ou sans lien). Cela augmente inutilement la longueur du fil d’Ariane, surtout sur les appareils mobiles. L’en-tête de la page est suffisant pour indiquer aux internautes où ils se trouvent.

Contenu et conception

Trouver des spécifications de contenu et de conception et des exemples visuels.

Spécifications du contenu

Utilisez « Canada.ca » comme texte du premier lien du fil d’Ariane sur les pages standards et les pages de campagne.

• Créez un lien vers la page d’accueil du site Canada.ca dans la langue de la page actuelle.

Vous pouvez utiliser « Accueil » ou le nom du processus ou de l’application comme texte du premier lien du fil d’Ariane sur les pages transactionnelles qui utilisent un fil d’Ariane.

• Présentez un lien vers la page de départ du processus ou la page de renvoi de la demande.

Utilisez un GLYPHICON de chevron droit simple pour séparer chaque lien du fil d’Ariane.

Incluez les liens de la page parent dans l’ordre de leur niveau correspondant à partir de la page actuelle.

Incluez le titre de chaque page dans l’étiquette du fil d’Ariane, mais abrégez l’étiquette dans la mesure du possible pour améliorer la lisibilité et réduire l’espace occupé.

Par exemple, les étiquettes de ce fil d’Ariane :

Peuvent être abrégés comme suit :

Accessibilité

Incluez le texte d’aide invisible « Vous êtes ici : ».

Interactions

Lorsqu’il est sélectionné, chaque lien du fil d’Ariane doit amener l’utilisateur à une page unique.

Spécifications de conception

Alignez le fil d’Ariane à gauche, directement sous le bouton de menu ou la ligne de séparation s’il n’y a pas de bouton de menu.

• Spécification de la police de caractères : Noto Sans, 16px
• Utilisez des couleurs normalisées pour les liens du fil d’Ariane
  • Reportez-vous aux directives concernant les couleurs pour obtenir les codes de couleur exacts.
• Espaces :
  • Marges intérieures (padding) verticales : 13 px
  • Marges intérieures (padding) horizontales : 2 px
  • Marge du haut : 15 px
  • Hauteur des lignes : 23 px
• Icône : glyphicon-chevron-right

Accessibilité

Programmez le fil d’Ariane en tant que liste ordonnée.

Structure du fil d’Ariane

Voici des exemples de fils d’Ariane dans différents endroits sur le site Canada.ca.

Pages thématiques, institutionnelles et organisationnelles

Pages de sujet de premier niveau

Pages de sujet de deuxième niveau

Pages de contenu ministériel et lié aux programmes ou aux politiques

Pages de profils de partenariats et d’ententes de collaboration

Pages de recherche de base

Pages de recherche avancée

Campagnes publicitaires ou promotionnelles

Le fil d’Ariane peut renvoyer à l’arborescence du sujet, à la page de renvoi d’une campagne, à la page de renvoi d’une institution ou simplement à la page d’accueil du site Canada.ca.

Nouvelles

Application

Pages d’erreur

Dans le cas d’une page d’erreur d’erreur, telle qu’une page d’erreur 404 (page introuvable), n’incluez pas de fil d’Ariane car :

• Les pages d’erreur ne sont généralement pas consultées et ne font pas partie du modèle de navigation du site.
• Ces pages sont des pages système (qui peuvent être considérées comme transactionnelles).
• Les liens d’erreur doivent comporter un autre chemin de retour vers la page d’accueil, tel qu’un lien.

Exemples visuels

Description de l’image : en-tête général avec fil d’Ariane – grand écran

Le fil d’Ariane apparaît sous le bouton de menu sur une ligne horizontale.

Description de l’image : en-tête général avec fil d’Ariane – petit écran

Le fil d’Ariane apparaît sous le bouton de menu.

Comment procéder à la mise en œuvre

Trouver des exemples fonctionnels de l’implémentation du fil d’Ariane.

Référence pour la mise en œuvre du thème GCWeb (BOEW)

La référence à l’implémentation comprend la façon de configurer chaque élément de l’en-tête.

• Fil d’Ariane – Documentation de GCWeb (Boîte à outils de l’expérience Web)
• Documentation de l’en-tête GCWeb (Boîte à outils de l’expérience Web)

Mises en œuvre

Déterminez ce qui convient le mieux au type de page que vous créez. Consultez les instructions applicables à votre implémentation si vous souhaitez exclure les fils d’Ariane.

Recherche et justification

Consulter les conclusions des recherches et la justification stratégique.

Constatations découlant des recherches

• Canada.ca est une source fiable Explique la décision d’utiliser « Canada.ca » comme étiquette du premier lien du fil d’Ariane.
• Résumé de recherche – Orientation dans Canada.ca La recherche montre que les personnes qui naviguent sur le site utilisent les liens du fil d’Ariane près de deux fois plus souvent que le menu des thèmes et des sujets.

Justification stratégique

Les spécifications relatives aux espaces dans les liens du fils d’Ariane sont conçues de façon à ce que les cibles tactiles respectent les règles AAA pour l’accessibilité des contenus Web.

Le fil d’Ariane fait partie de l’en-tête général et est un élément obligatoire de la spécification du contenu et de l’architecture de l’information.

• Éléments obligatoires du système de conception

Derniers changements

2026-02-11

Mise à jour des directives relatives au fil d'Ariane afin de préciser :

• quand le fil d’Ariane est obligatoire (et quand il ne l’est pas)
• comment le fil d’Ariane s’applique aux pages de campagne
• quels liens doivent apparaître dans un fil d’Ariane

2023-06-26

Mise à jour de l’orientation pour y inclure des conseils sur quoi éviter, les spécifications du contenu et de conception, des exemples visuels, une orientation sur l’implémentation, les conclusions des recherches et la justification stratégique