1. Accueil  
  2. Design  
  3. Composants  
  4. Haut de page

Haut de page

Le bouton haut de page permet de remonter rapidement vers le haut de la page.

Exemple


Quand l'utiliser

Le bouton haut de page s’utilise en tout temps lorsque l’utilisateur défile vers le haut de la page.

Comment l'utiliser

On ne retrouve qu’un seul bouton par page, dans le coin inférieur droit.

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



Informations techniques

Le bouton apparaît automatiquement lorsque l’utilisateur défile vers le haut de la page. Ce comportement est le même dans les formats bureau et mobile.

Il est positionné dans le coin inférieur droit de l’écran. L’espacement vertical est de 96 px, et l’espacement horizontal, de 32 px.

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.

Dimensions

Le bouton a une dimension de 40 px de haut par 40 px de large.

L’icône du bouton est accompagnée du texte alternatif suivant : « Retour en haut ».

États

Bouton haut de page - défaut
background-color: #095797;
box-shadow: 0 1px 4px rgba(9, 87, 151, 0.24);

Bouton haut de page - survol
background-color: #1472bf;
box-shadow: 0 1px 4px rgba(9, 87, 151, 0.24);

Bouton haut de page - focus
background-color: #1472bf;
outline: 2px solid #4a98d9;
border: 2px solid #223654;
box-shadow: 0 2px 8px rgba(9, 87, 151, 0.24);

Dernière mise à jour : 6 novembre 2023

Évaluation de page

L’information sur cette page vous a-t-elle été utile?
Avis général

Des questions ou besoin de renseignements?

Communiquez avec Services Québec