1. Accueil  
  2. Composantes  
  3. Navigation  
  4. Haut de page

Haut de page

Le bouton haut de page permet de remonter rapidement au 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.

Dernière mise à jour : 16 août 2022