<h1>-<h6> : les éléments de titre de section

Ces éléments incluent uniquement les attributs universels.

• Les informations de titre peuvent être utilisées par les agents utilisateur afin de construire automatiquement la table des matières d'un document.
• Il ne faut pas utiliser des éléments de titre pour ajuster la taille du texte. Pour cela, on utilisera la propriété CSS font-size.
• Il ne faut pas sauter de niveaux entre les titres : on commencera toujours par <h1>, suivi <h2> et ainsi de suite.

Bien qu'il soit permis par le standard HTML d'utiliser plusieurs éléments <h1> sur une même page tant que ceux-ci ne sont pas imbriqués, cela est considéré comme une mauvaise pratique. Une page devrait généralement avoir un seul élément <h1> qui décrit le contenu de la page (semblable à l'élément <title>).

Mieux vaudra donc utiliser un seul élément <h1> par page et l'imbrication de titres d'autres niveaux sans sauter de niveaux.

On utilise ici tous les niveaux de titre.

HTML

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

Résultat

Ici, on utilise des titres avec du contenu intercalaire.

HTML

<h1>Éléments de titre</h1>
<h2>Résumé</h2>
<p>Du texte ici…</p>

<h2>Exemples</h2>
<h3>Exemple 1</h3>
<p>Du texte ici…</p>

<h3>Exemple 2</h3>
<p>Du texte ici…</p>

<h2>Voir aussi</h2>
<p>Du texte ici…</p>

Résultat

Les personnes qui utilisent des lecteurs d'écran naviguent en sautant de titre en titre afin de déterminer rapidement le contenu de la page. Aussi, il faut éviter de sauter des niveaux de titre. En effet, s'il y a un trou, la personne qui navigue ainsi pourrait se demander où est passé le titre manquant.

À ne pas faire

<h1>Titre de niveau 1</h1>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>

À privilégier

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>

Imbrication

Les titres peuvent être imbriqués en sous-sections afin de modéliser l'organisation du contenu de la page. La plupart des lecteurs d'écran peut générer une liste ordonnée des titres d'une page, l'aidant ainsi à déterminer rapidement la hiérarchie du contenu :

1. h1 Coléoptères

   1. h2 Étymologie

   2. h2 Distribution et diversité

   3. h2 Évolution

      1. h3 Paléozoïque
      2. h3 Jurassique
      3. h3 Crétacé
      4. h3 Cénozoïque

   4. h2 Morphologie externe

      1. h3 Tête

         1. h4 Mandibules

      2. h3 Thorax

         1. h4 Prothorax
         2. h4 Pterothorax

      3. h3 Pattes

      4. h3 Ailes

      5. h3 Abdomen

Lorsque les titres sont imbriqués, il est possible de sauter des niveaux lors de la fermeture d'une sous-section.

• Tutoriel sur la structure d'une page et les titres, par la WAI
• Comprendre les règles pour l'accessibilité des contenus web (WCAG), explications sur la règle 1.3
• Comprendre le critère de succès 1.3.1, WCAG 2.0
• Comprendre les règles pour l'accessibilité des contenus web (WCAG), explications sur la règle 2.4
• Comprendre le critère de succès 2.4.1, WCAG 2.0
• Comprendre le critère de succès 2.4.6, WCAG 2.0
• Comprendre le critère de succès 2.4.10, WCAG 2.0

Une autre technique de navigation employée par celles et ceux qui utilisent les lecteurs d'écran consiste à générer une liste du contenu sectionnant et à l'utiliser afin de déterminer le plan de la page.

Le contenu sectionnant peut être libellé en utilisant une combinaison des attributs aria-labelledby et id, où le libellé décrit de façon concise l'objet de la section. Cette technique s'avère utile lorsqu'il y a plus d'un élément sectionnant sur la même page.

Exemples

<header>
  <nav aria-labelledby="navigation-1">
    <h2 id="navigation-1">Navigation primaire</h2>
    <!-- Items de navigation -->
  </nav>
</header>

<!-- Contenu de la page -->

<footer>
  <nav aria-labelledby="navigation-2">
    <h2 id="navigation-2">Navigation du pied de page</h2>
    <!-- Items de navigation -->
  </nav>
</footer>

Résultat

Avec cet exemple, un lecteur d'écran annoncera la présence de deux sections <nav>, la première appelée « Navigation primaire » et l'autre appelée « Navigation du pied de page ». Si les libellés n'avaient pas été fournis, la personne aurait dû consulter le contenu de chaque élément <nav> afin de déterminer leur utilité.

• Utiliser l'attribut aria-labelledby
• Tutoriels sur les libellés pour les régions et la structure des pages, par la WAI

• <p>
• <div>
• <section>