Fil d'Ariane: Système de conception de Canada.ca

Obligatoire sur les pages standards et de campagne

Le fil d’Ariane est une série horizontale de liens qui permet aux gens de se situer par rapport au modèle de navigation du site Canada.ca. Il représente l’emplacement d’une page par rapport à son parent et donne un moyen clair de naviguer vers les niveaux supérieurs de la structure du site.

Quand l’utiliser

Le fil d’Ariane est obligatoire sur toutes les pages, à l’exception des pages transactionnelles.

Quoi éviter

Ne programmez pas le fil d’Ariane pour qu’il soit généré dynamiquement en fonction du parcours d’un visiteur 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 du contenu et de conception ainsi que des exemples visuels.

Spécifications du contenu

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).

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 le titre de la page dans l’étiquette du fil d’Ariane.

• Abrégez les étiquettes du fil d’Ariane dans la mesure du possible pour améliorer la lisibilité et réduire l’espace occupé.

Ainsi, 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 fil d’Ariane doit amener l’utilisateur à une page unique.

Spécifications de conception

• Type : lien
• Position : coin supérieur gauche
• Police : Noto sans
• Taille : 16px
• Couleur du texte :
  • lien par défaut : #284162
  • lien sélectionné (passé par-dessus ou mise au point) : #0535d2
  • lien visité : #7834bc
• 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 et promotions

Le fil d’Ariane n’est pas exigé pour les campagnes de promotion. Si vous en ajoutez un, il peut renvoyer à l’arborescence thématique, au profil institutionnel ou organisationnel ou encore à la page d’accueil du site Canada.ca.

Nouvelles

Application

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

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