1.7. Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6>

Sur chaque page, pour baliser les titres, utiliser les balises de titres allant de <h1> jusqu’à <h6>. La structure des titres doit être à la fois logique et exhaustive.

C’est-à-dire :

Remarques

  • Il n’est jamais gênant d’utiliser plusieurs <h1> dans une page si plusieurs titres de premier niveau sont présents.
  • Une bonne pratique d’accessibilité consiste à ne pas ajouter de titres cachés.

Astuce

Pour mettre en place une hiérarchie de titres logique et exhaustive, il faut imaginer que les titres forment la « Table des matières » de la page. Est-elle logique ? Exhaustive ?

Remarque

Le role ARIA heading associé à un attribut aria-level (renseigné avec une valeur allant de 1 à 6) permet d’affecter la valeur d’un titre à n’importe quelle balise <html>.

Concrètement, par exemple :

  • <p role="heading" aria-level="1">Titre de niveau 1</p> est sémantiquement équivalent à <h1>Titre de niveau 1</h1>.
  • <div role="heading" aria-level="3">Titre de niveau 3</div> à <h3>Titre de niveau 3</h3>.

Cette technique n’étant toutefois pas optimale pour l’accessibilité, elle est à utiliser en ultime recours.

Exemples

Ci-dessous, 3 exemples de structuration de titres pour cette page. Les deux premiers sont corrects tandis que le troisième est incorrect.

Exemple 1 (correct)

<h1><a href="/"><img src="lafarge.png" alt="Lafarge - Construire des villes meilleures (aller à l'accueil)" /></a></h1>
[…]
<h2>Les sables & granulats décoratifs et esthétiques Lafarge</h2>
[…]
<h3>Contacts</h3>
[…]
<h3>À lire également</h3>
[…]
<h3>Nos réalisations Granulats</h3>
[…]

Dans cet exemple de code HTML, la structure des titres est logique et exhaustive.

Exemple 2 (correct)

<a href="/"><img src="lafarge.png" alt="Lafarge - Construire des villes meilleures (aller à l'accueil)" /></a>
[…]
<h1>Les sables & granulats décoratifs et esthétiques Lafarge</h1>
[…]
<h2>Contacts</h2>
[…]
<h2>À lire également</h2>
[…]
<h2>Nos réalisations Granulats</h2>
[…]

Dans cet exemple de code HTML, la structure des titres est également logique et exhaustive.

À noter que d’autres structurations de titres sont envisageables.

Exemple 3 (incorrect)

<a href="/"><img src="lafarge.png" alt="Lafarge - Construire des villes meilleures (aller à l'accueil)" /></a>
[…]
<h1>Les sables & granulats décoratifs et esthétiques Lafarge</h1>
[…]
<p class="titre">Contacts</p>
[…]
<h4>À lire également</h4>
[…]
<h4>Nos réalisations Granulats</h4>
[…]

Dans cet exemple de code HTML, la structure des titres est incorrecte car elle comporte des « sauts » et des incohérences (passage brutal d’un <h1> à des <h4>.
Aussi, le titre « Contacts » n’est pas balisé comme tel.

Aller plus loin

1 commentaire

  • Par Sébastien Delorme, le 10 août 2017 à 17h24.

    Fiche mise à jour le 10 août 2017 : suppression de l’encart Attention qui mentionne l’outline HTML5.

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page