Haut de page
Le bouton haut de page permet de remonter rapidement vers le haut de la page.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Quand l’utiliser
Le bouton haut de page s’utilise en tout temps lorsque l’utilisateur défile vers le haut de la page.
Quand ne pas l’utiliser
Ajouter un bouton après chaque section de la page n’est pas une bonne pratique : cela augmente la charge cognitive.
À faire
À ne pas faire
Anatomie
- Zone cliquable
- Icône
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Haut de page (complet)
On ne retrouve qu’un seul bouton par page, dans le coin inférieur droit.
Zone cliquable
La zone cliquable est composée d’une icône accompagnée d’un texte alternatif « Retour en haut » afin d’assurer l’accessibilité.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Zone cliquable
Positionnement et alignement : Il est positionné dans le coin inférieur droit de l’écran.
Espacements : L’espacement vertical est de 96 px et l’espacement horizontal, de 32 px.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Haut de page (complet)
Le bouton se rend visible uniquement lorsque l’utilisateur défile vers le haut de la page. Ce comportement est le même dans les formats bureau et mobile.
Un clic permet de revenir immédiatement en haut de la page.
Pour des raisons d’accessibilité, s’il est impossible de rendre le bouton atteignable et utilisable à l’aide du clavier, l’attribut aria-hidden="true" doit lui être associé. Cet attribut lui permettra de ne pas être détecté par les outils de synthèse vocale.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur la zone cliquable pour remonter en haut de la page.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Naviguer jusqu’à la zone cliquable à l’aide de la touche Tab (si non masqué par aria-hidden="true").
- Appuyer sur Entrée ou Espace pour activer le retour en haut de la page.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026