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 : 30 août 2023