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

    É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