Dernière mise à jour : 31 mars 2026
Savoir hiérarchiser les titres, pour structurer l'information de manière accessible.
Comment baliser les en-têtes pour qu’elles soient accessibles
Quand on parle d’en-têtes, on parle tout simplement des titres, des sous-titres ou des surtitres d’une page. En HTML, ces titres sont représentés par les balises <h1> à <h5>.
Les en-têtes ne sont pas seulement un bon repère visuel. Elles permettent aussi de structurer l’information et de guider la lecture des gens qui utilisent des lecteurs d’écran.
Durant la conception
Si un texte est mis en gras ou rédigé dans une taille de police plus grande, vérifier s’il ne devrait pas aussi être transformé en en-tête (c’est-à-dire en titre ou en sous-titre).
Dans le code
Utiliser une balise <h1> pour le titre principal et <h2> à <h5> sur chaque titre subséquent, pour que le lecteur d’écran annonce « Titre niveau X » lors de sa lecture. Utiliser une seule et unique balise <h1> par page, sauf dans de très rares exceptions.
Respecter l’ordre des niveaux.
Par exemple, il n’est pas recommandé de passer d’un <h2> à un <h4> sans <h3> intermédiaire.
Lorsqu’un titre est accompagné d’un surtitre, les deux éléments peuvent être associés de façon à ce que les lecteurs d’écran les lisent comme un seul titre.
En HTML, le surtitre et le titre principal peuvent être regroupés dans la même balise d’en-tête <h1> à <h5>, en utilisant par exemple une balise <span> pour segmenter et styliser le surtitre.
Dans le code, le titre doit toujours précéder le texte et les éléments qui y sont associés selon l’ordre de lecture.
Cette règle doit être appliquée même si, à l’écran, le titre et les éléments qui y sont reliés ont une disposition différente (comme dans le composant vidéo, par exemple).
Exemple d’ordre de titres cohérent
<h1> Résidentiel </h1>
<h2> Espace client </h2>
<h3> Compte et facture </h3>
<h4> Compteur et relève </h4>
[ contenu ]
<h4> Historique de factures et de paiements </h4>
[ contenu ]
<h4> Comprendre ma facture </h4>
[ contenu ]