Dernière mise à jour : 21 juillet 2025
La section héros introduit le sujet principal de la page et permet à l'utilisateur de se repérer rapidement dans le site.
- Guide d'utilisation
- Design
- Accessibilité
Utilisation
La section héros accueille l'utilisateur sur la page. Elle est positionnée directement sous l'en-tête qui contient les éléments de navigation. Puisque son titre correspond au niveau H1, elle est structurelle à la composition d'une page et son utilisation est obligatoire.
Principales règles d'utilisation
Sémantiquement, le titre de la section héros correspond au niveau H1 de la page.
La description complète le titre et donne un aperçu du contenu qui sera abordé.
Un surtitre peut être ajouté au besoin.
Selon le variant utilisé, un visuel peut faire partie de sa composition ou non.
Chaque élément textuel doit respecter des limites de caractères.
Aucun appel à l'action n'est permis dans la section héros.
Variants possibles
Il existe trois variants pour la section héros :
1. Section héros épurée
Visuellement allégé, le variant épuré est composé uniquement d'éléments textuels, soit d'un titre et d'une description. Il peut, au besoin, être accompagné d'un surtitre. Son format court permet d'accéder rapidement au contenu de la page.
2. Section héros standard
Le variant standard se divise en deux régions permettant l'intégration d'un visuel à droite du titre et de la description. Verticalement, il occupe moins d'espace que le variant inspirationnel.
3. Section héros inspirationnelle
Le variant inspirationnel se distingue par son visuel qui occupe la pleine largeur de la grille. Plus imposant que le variant standard, il convient, entre autres, parfaitement à une page de campagne.
Un variant pour la page d'accueil
Un bandeau promotionnel a été développé pour la page d'accueil. Il comporte ses spécificités et ses propres règles d'usage. Il n'est pas possible de l'utiliser sur d'autres pages du site.
Éléments périphériques
Fil d'Ariane
Le fil d’Ariane est un élément de navigation qui est visuellement situé dans le coin supérieur gauche de la section héros.
Il trace le parcours emprunté par l'utilisateur jusqu'à sa destination actuelle par une série de liens hiérarchiques suivis d'un chevron pointant vers la droite qui indique la page suivante du parcours.
Ancres
Règle générale, si la page requiert des ancres, elles sont placées juste en dessous de la section héros.
Appel à l'action
L'appel à l'action est un élément cliquable qui incite l'utilisateur à effectuer une action ou qui le fait basculer vers un autre contenu. Puisque l'on veut encourager l'utilisateur à consulter le contenu de la page et éviter qu'il ne la quitte prématurément, il est interdit d'intégrer un appel à l'action dans la section héros.
Si les objectifs de la page nécessitent d'afficher rapidement une action clé en lien avec le sujet ou souvent employée par l'utilisateur, un bloc d'action peut être positionné directement sous la section héros.
Rédaction UX
Contenu
Les éléments textuels composant la section héros doivent se compléter. On évite donc de répéter les mots ou les idées dans le titre et les autres éléments.
Le titre
Le titre doit faire comprendre à l'utilisateur le sujet de la page en quelques secondes.
Il doit être cohérent avec le libellé utilisé dans la navigation.
Sémantiquement, il correspond au niveau H1 de la page.
Lorsqu'il est accompagné d'un surtitre, ils sont tous les deux lus comme une seule entité et associés au niveau H1.
Surtitre
Le surtitre est facultatif.
Il aide l'utilisateur à mieux contextualiser le sujet de la page, soit :
- en précisant le titre avec une information courte et complémentaire, comme un nom de programme ou une thématique ;
- en reprenant le libellé de la navigation pour accompagner un titre de nature plus promotionnelle.
Description
La description est complémentaire au titre et donne un aperçu du contenu de la page sous forme d'accroche.
On la préfère courte et directe pour un maximum d'impact.
Ponctuation
Surtitre
Il ne doit pas inclure de signe de ponctuation.
Titre
Il n'y a pas de point après un titre.
Si le contexte s'y prête, on peut utiliser un point d'interrogation.
Même chose pour le point d'exclamation, mais il est préférable d'en restreindre l'usage.
L'utilisation du deux-points ou du tiret permet de réduire le nombre de mots ou de structurer un long titre.
Description
Elle peut contenir des signes de ponctuation. Toutefois, on en dose l'usage pour une meilleure lisibilité.
Nombre de caractères maximal
1. Section héros épurée
Surtitre : Un à trois mots pour catégoriser le sujet de la page
Titre : 80 caractères, espaces incluses
Description : 250 caractères, espaces incluses
2. Section héros standard
Surtitre : Un à trois mots pour catégoriser le sujet de la page
Titre : 80 caractères, espaces incluses
Description : 180 caractères, espaces incluses
3. Section héros inspirationnelle
Surtitre : Un à trois mots pour catégoriser le sujet de la page
Version alignée à gauche :
- Titre : 80 caractères, espaces incluses
- Description : 180 caractères, espaces incluses
Version centrée :
- Titre : 40 caractères, espaces incluses
- Description : 150 caractères, espaces incluses
1. Section héros épurée
Options de contenu textuel
La section héros comprend toujours un titre et une description.
Un surtitre peut être ajouté au besoin.
Styles typographiques possibles
Le Titre 1 est le seul style typographique utilisé pour le titre de la section héros épurée.
Pour la description, deux styles sont possibles :
2. Section héros standard
Le variant standard de la section héros est agrémenté d'un visuel qui se positionne à droite du titre et de la description.
Options de contenu textuel
La section héros comprend toujours un titre et une description.
Un surtitre peut être ajouté au besoin.
Styles typographiques possibles
Seuls les styles Titre 1 (H1) et Corps de texte normal (description) sont utilisés pour la section héros standard.
Styles de visuel à utiliser
Ratio d'image
3. Section héros inspirationnelle
Dans le variant inspirationnel, c'est le visuel qui prime en occupant toute la largeur de la grille.
Options de contenu textuel
La section héros comprend toujours un titre.
Dans ce variant, la description peut être retirée si l'on souhaite plonger l'utilisateur dans une expérience immersive.
Le cas échéant, le visuel doit non seulement être inspirant, mais aussi significatif et évocateur du sujet de la page.
Un surtitre peut être ajouté au besoin.
Styles typographiques possibles
Le variant inspirationnel est celui qui permet le plus de diversité dans l'utilisation des styles typographiques avec quatre compositions possibles pour le titre et la description.
Composition 1
Titre d'affichage + Corps de texte normal
Composition 2
Titre d'affichage + Chapeau
Composition 3
Titre 1 + Chapeau
Composition 4
Titre 1 + Corps de texte normal
Alignements possibles
Selon l'alignement retenu, la limite de caractères varie.
Styles de visuel à utiliser
Ratio d'image
Options de couleurs
Cinq couleurs d'arrière-plan sont proposées pour la section héros.
Blanc
#FFFFFF
Gris-bleu-10
#F1F5F8
Bleu-10
#E7F1FC
Bleu-80
#0F096C
Bleu-90
#0A0952
Choisir le visuel
Le visuel doit refléter le sujet de la page ou établir un lien évident avec celui-ci.
Il peut communiquer visuellement un message.
On évite un visuel abstrait ou purement décoratif qui n’apporte aucune valeur à l'expérience de l’utilisateur. On privilégie plutôt le variant épuré.
Le visuel ne doit inclure aucun caractère, à l'exception de quelques mots-clés informatifs ou de chiffres nécessaires à la compréhension.
Principes d'accessibilité
La section héros correspond à l'introduction d'une page. Elle se trouve obligatoirement au début de celle-ci, tout de suite après l'en-tête, qui contient les éléments de navigation.
Comme le fil d'Ariane se positionne dans la section héros, les principes d'accessibilité en lien avec ce composant seront également abordés dans cet onglet pour faciliter la compréhension des interactions.
Mouvement ou animation
- On évite d'intégrer tout mouvement ou toute animation dans la section héros.
- Toutefois, si le mouvement ou l'animation est un élément essentiel à la compréhension du contenu, voici les règles à suivre :
- on privilégie une durée de moins de 5 secondes ;
- pour une durée de plus de 5 secondes, l'utilisateur doit être en mesure de mettre en pause, d'arrêter ou de masquer l'élément.
Fil d'Ariane
Anatomiquement, le fil d'Ariane est une liste non ordonnée de liens qui établit la hiérarchie de la page par rapport à la structure du site.
Contenus textuels
Lorsque le titre est accompagné d'un surtitre, ils sont tous les deux considérés comme une seule entité et associés au niveau H1 afin de respecter l'ordre séquentiel logique des titres.
Contenus visuels
Visuel informatif
Ce visuel communique une information complémentaire au contenu ou contribue à la bonne compréhension de la page. Dans une section héros, il doit être en lien avec le sujet ou aider à contextualiser le contenu.
Afin de déterminer les besoins du code pour répondre aux critères d'accessibilité numérique, il faut catégoriser l'information véhiculée par le visuel :
1. Si son information est disponible dans le contenu textuel adjacent.
- On traite ce visuel comme s'il est décoratif. Il n'a donc pas besoin de texte de remplacement.
2. Si son information n'est pas disponible dans le contenu textuel adjacent.
- On accompagne le visuel d'un texte de remplacement concis pour rendre son information accessible aux utilisateurs d'un lecteur d'écran.
3. Si son information est complexe et non disponible à proximité (exemple : un graphique).
- On déplace ce visuel ailleurs dans la page, puisque son utilisation n'est pas permise dans une section héros.
Rédiger un texte de remplacement
Le texte de remplacement doit décrire littéralement le contenu ou l'information véhiculée par le visuel. Il permet de rendre accessible le contenu de l'image aux personnes souffrant d'une déficience visuelle par le biais d'un lecteur d'écran ou d'un lecteur de braille.
Règles de rédaction
Communiquer l'information de façon exhaustive tout en étant clair et concis.
Intégrer tout texte informatif contenu dans le visuel.
Ne pas répéter les textes adjacents.
Ne pas commencer le texte par « image de » ou « photo de », car le codage attribue déjà au lecteur d'écran la fonction de l'annoncer.
Astuce
Une technique efficace pour rédiger un texte de remplacement est de faire comme si l'on décrit au téléphone le visuel à une autre personne.
Visuel décoratif
Si un visuel abstrait ou purement décoratif est utilisé dans une section héros, on recommande de changer de variant pour la version épurée qui ne contient que du texte.
Bien qu'elle apporte une touche d'esthétisme à la page, ce type d'image n'ajoute aucune valeur à l'expérience de l'utilisateur.
Interactions au clavier
Puisque la section héros est composée d'éléments statiques, elle ne comporte aucune interaction particulière au clavier.
Les seules interactions qui la touchent sont spécifiques au fil d'Ariane :
- Touche Tab. : pour naviguer d'un lien à l'autre de façon séquentielle, soit de gauche à droite.
- La combinaison des touches Majuscule et Tab. permet de faire le chemin inverse.
- Touche Entrée : pour activer le lien et diriger l’utilisateur vers la page associée.
Interactions au lecteur d'écran
- Afin d'aider l'utilisateur d'un lecteur d'écran à comprendre d'entrée de jeu la mécanique du fil d'Ariane, une mise en contexte non visible à l'écran est lue pour l'aviser de son emplacement, soit « Fil d'Ariane, vous êtes ici ».
- Tous les éléments du fil d'Ariane sont lus de façon séquentielle, soit de gauche à droite, incluant le libellé de la page courante.
- Bien que cette dernière ne soit pas visible à la fin du fil d'Ariane, elle est annoncée à l'utilisateur d'un lecteur d'écran afin de bien le situer dans son parcours.
- En second lieu, le titre de la section héros, qui correspond au H1 de la page, est perçu par les outils d'adaptation.
- Lorsque le titre est accompagné d'un surtitre, ils sont tous les deux lus comme une seule entité.