En-têtes

Conception à l'aide d'en-têtes

Les en-têtes de pages Web aident les utilisateurs à identifier différentes sections du contenu. Les en-têtes sont visuellement plus grands et plus distincts que le texte environnant et fournissent un aperçu de la structure de la page.

Les utilisateurs voyants peuvent parcourir la page en lisant les en-têtes. Les utilisateurs du lecteur d’écran peuvent utiliser les en-têtes pour naviguer rapidement dans les différentes sections. Les utilisateurs ayant des troubles cognitifs peuvent comprendre la structure et trouver le contenu plus facilement. Il est important de baliser les en-têtes de façon sémantique pour que tout le monde en profite.

Suivez les pratiques exemplaires suivantes pour les en-têtes :

  • Fournir des en-têtes pour chaque page
  • Utiliser les éléments <h1> à <h6> pour tous les en-têtes
  • Ne pas utiliser d’éléments d’en-tête pour du texte qui n’est pas un en-tête. Utiliser plutôt CSS pour modifier la taille ou les styles de police de caractère
  • S’assurer que les titres sont significatifs et concis, et décrivent le sujet ou le but
  • S’assurer que les titres suivent une séquence hiérarchique sans sauter aucun niveau
  • Fournir un en-tête h1 qui décrit le contenu de la page

Bon exemple : Hiérarchie des en-têtes

Exemple d’en-têtes descriptifs suivant une hiérarchie sans sauter un niveau :

HTML

<h1>Principes de base de l’accessibilité du Web</h1>
   <h2>Qu’est-ce que l’accessibilité du Web?</h2>
   <h2>Types d’incapacités</h2>
      <h3>Cécité</h3>
   <h2>Lignes directrices sur l’accessibilité<h2>
      <h3>Règles pour l’accessibilité des contenus Web </h3>

Ressources WCAG connexes

Ressources WCAG connexes

Critères de succès

Techniques

Haut de la page