Communications numériques gouvernementales Beta

Système de design gouvernemental

Haut de 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. Le dégagement vertical est de 90 px, et le dégagement horizontal, de 30 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

Dimension du bouton

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 : 17 juillet 2020