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 :

  • Que tous les éléments qui ont valeur de titres doivent être balisés comme tels.
  • Qu’il ne doit pas y avoir d’incohérences dans la hiérarchie des titres.
  • Qu’idéalement, il ne doit pas y avoir de « sauts » dans la structure des titres (passage brutal d’un <h1> à un <h3> sans <h2> intermédiaire, par exemple).

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

Capture d'écran de la page d'accueil du site de Lafarge.

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>
[…]
<h4>Pologne : notre béton prend la route pour rapprocher les villes</h4>
[…]
<h4>Villes plus durables : Un nouveau stade en granulats recyclés pour la ville de Guelph (Canada)</h4>
[…]
<h4>Trafic fluidifié et économie boostée grâce à la rocade d'Edmonton</h4>
[…]

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>
[…]
<h3>Pologne : notre béton prend la route pour rapprocher les villes</h3>
[…]
<h3>Villes plus durables : Un nouveau stade en granulats recyclés pour la ville de Guelph (Canada)</h3>
[…]
<h3>Trafic fluidifié et économie boostée grâce à la rocade d'Edmonton</h3>
[…]

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>
[…]
<h2>À lire également</h2>
[…]
<h2>Nos réalisations Granulats</h2>
[…]
<h2>Pologne : notre béton prend la route pour rapprocher les villes</h2>
[…]
<h2>Villes plus durables : Un nouveau stade en granulats recyclés pour la ville de Guelph (Canada)</h2>
[…]
<h2>Trafic fluidifié et économie boostée grâce à la rocade d'Edmonton</h2>
[…]

Dans cet exemple de code HTML, la structure des titres est incorrecte car elle comporte des incohérences (les titres des réalisations sont au même niveau que le titre de section « Nos réalisations granulats »).
Aussi, le titre « Contacts » n’est pas balisé comme tel.

2 commentaires

  • Par sahla tata, le 5 février 2019 à 11h13.

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    Êtes-vous sûr que nous avons le doit d’utiliser plus d’un seul h1 dans une page ?

    Répondre

    • Par Johan Ramon, le 5 février 2019 à 16h23.

      Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

      Bonjour,

      Côté accessibilité, nous vous confirmons qu’il est tout à fait possible d’utiliser plusieurs balises <h1> dans une page web.

      À ce propos, on peut par exemple lire dans la partie « Titre » du glossaire du RGAA (Référentiel Général d’Accessibilité pour les Administrations) : « Dans chaque page web, il doit y avoir un titre h1, au moins. »

      Johan

      Répondre

Ajouter un commentaire

Tous les champs sont obligatoires.

Mises à jour

19/04/2021
Prise en compte du RGAA 4.1 (les sauts hiérarchiques sont désormais admis).

Haut de page