En-tête
<gcds-header>

Autres noms : en-tête général, en-tête de marque.

L'en-tête porte l'image de marque réactive du gouvernement du Canada.

• GitHub
• Figma

Structure de l'en-tête — éléments recommandés

1. L'emplacement skip-to-nav comprend le lien « Passer au contenu » qui permet à une personne de sauter un ensemble de liens de navigation et ainsi passer au contenu de la page principale.
2. L'en-tête de signature s'étend sur la partie supérieure du site et contient la signature officielle du gouvernement du Canada et la bascule de lange. On peut également y insérer un champ de recherche. Une ligne séparatrice s'affiche au bas de l'en-tête. Lorsque la langue d'un site est réglée à l'aide de l'attribut lang, la signature reflète la langue officielle du contenu de la page.
3. Le composant de la bascule de langue est un commutateur du contenu en français et en anglais. Utilisez l'attribut lang pour définir la langue du site; le bouton à bascule proposera l'autre langue officielle.

Éléments facultatifs de l'en-tête — avec titre H1

1. L'emplacement skip-to-nav comprend le lien « Passer au contenu » qui permet à une personne de sauter un ensemble de liens de navigation et ainsi passer au contenu de la page principale.
2. Lorsque vous utilisez la bannière , placez-la devant l'en-tête de signature. Il s'agit d'un élément facultatif utilisé pour communiquer l'état du site ou de la page sur les sites expérimentaux, les sites utilisés à des fins de recherche, les projets pilotes et les produits en mode essai.
3. L'en-tête de signature s'étend sur la partie supérieure du site et contient la signature officielle du gouvernement du Canada et la bascule de lange. On peut également y insérer un champ de recherche. Une ligne séparatrice s'affiche au bas de l'en-tête. Lorsque la langue d'un site est réglée à l'aide de l'attribut lang, la signature reflète la langue officielle du contenu de la page.
4. Le composant de la bascule de langue est un commutateur du contenu en français et en anglais. Utilisez l'attribut lang pour définir la langue du site; le bouton à bascule proposera l'autre langue officielle.
5. Le menu ou le menu du site comprend les repères de navigation pour le site. Le menu sert de carte simplifiée du site et aide les visiteurs à comprendre l'objectif et les priorités du site. Pour les produits et sites transactionnels, comme ceux contenant des formulaires, des flux, des processus ou des vitrines, l'utilisation d'un menu de site simplifié ou personnalisé est facultative. L'ajout d'un menu est également facultatif.
6. Le chemin de navigation établit une voie entre chaque niveau de la hiérarchie du site et la page actuelle, comme indiqué dans le titre de la page. Le chemin de navigation indique à une personne son parcours et lui permet de faire marche arrière ou de passer d'un niveau à un autre.
7. Le titre H1 est un élément séparé du composant d'en-tête. Il indique aux lecteur·rice·s la nature de la page ou du site et sert de repère.

L'élément de recherche permet d'inclure un champ de recherche locale ou générale.

Design et accessibilité de l'en-tête

Assembler l'en-tête de votre produit

• Incluez l'en-tête de signature du GC et la bascule de langue pour les sites et produits du gouvernement du Canada.
• Maintenez toujours l'intégrité de la signature du gouvernement du Canada. Évitez à tout prix de modifier le mot-symbole. Évitez surtout d'étirer le texte ou de changer les couleurs.
• Ajoutez un lien « Passer au contenu » pour aider les personnes naviguant sur le site à l'aide de technologies d'assistance.
• Pensez à utiliser le menu comme solution de navigation simplifiée pour un produit transactionnel, comme une application, un formulaire ou une vitrine virtuelle.
• Incluez la bannière de statut si votre page ou votre site est en stade expérimental. Par exemple, s'il s'agit d'un projet pilote, mentionnez que vous l'utilisez à des fins de recherche ou qu'il est en mode d'essai.

Améliorer l'accessibilité de l'en-tête

• Pensez à rendre le lien « Passer au contenu » visible afin que toute personne naviguant sur le site puisse bénéficier du raccourci.
• Écrivez le contenu H1 de l'en-tête avec une majuscule.

Rédiger du texte de lien précis

• Rendre le texte du lien clair et précis pour aider une personne à décider si elle doit quitter la page actuelle. Indiquez l'endroit où une personne sera redirigée ou ce qu'elle trouvera en cliquant sur un lien.
• Gardez le texte des liens court et précis afin qu'une personne puisse parcourir les liens dans l'en-tête et trouver ce qu'elle recherche. Évitez de nommer les liens « cliquer ici » ou « lire plus ».
• Limitez le nombre de liens dans votre en-tête. Une surabondance d'information peut augmenter la charge cognitive, et rendre la navigation difficile pour certain·e·s lecteur·rice·s.

Donnez un titre à votre page

• Donnez à la page un titre qui indique aux lecteurs la nature de la page (ou de la page d'accueil sur laquelle porte le site), son utilisation ou les actions à faire sur celle-ci.
• Choisissez de faire correspondre le nom de la page à celui de la page affichée dans le navigateur, de sélectionner un nom similaire, mais légèrement plus long ou d'utiliser un appel à l'action sur les pages comprenant des tâches ou des actions à réaliser par l'utilisateur·rice.
• Inscrivez le titre H1 en insérant les majuscules appropriées. Tous les autres éléments d'en-tête (autres que les noms propres) s'écrivent avec une majuscule.