Composantes
Haut de page
Dans cette page :
Le bouton haut de page permet de remonter rapidement au haut de la page.
Exemple
Quand l'utiliser
Il est utilisé seulement lorsque la page est très longue, c’est-à-dire lorsqu’elle dépasse quatre écrans de défilement (2400 px).
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 haut de page apparaît automatiquement quand la profondeur de défilement atteint 2400 px. 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 90 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 : 15 juin 2022