Donner des titres aux rubriques

Cible : tout le monde, et en particulier les personnes déficientes cognitives, avec des difficultés pour lire et déficientes visuelles.
Quand : dès la conception, à la rédaction du contenu et pendant le développement.

Description :
Identifier les balises de titres à utiliser (balises HTML h1 jusqu’à h6) pour structurer le contenu des pages. Les personnes malvoyantes naviguant à l’aide d’un lecteur d’écran peuvent accéder à la liste des titres de la page pour naviguer rapidement. Tout comme dans un fichier Word, il est possible d’utiliser la table des matières si des titres ont correctement été positionnés à l’intérieur du document.

À vérifier :

  • Les titres doivent être pertinents et non vides.
  • Il ne doit pas exister de saut dans la hiérarchie des titres (on ne passe pas directement d’un titre h2 à un titre h4).
  • On peut mettre plusieurs h1 par page (se limiter tout de même à deux dans la majorité des cas).
  • Les lecteurs d’écran ne prennent pas en compte les titres masqués (visibility: hidden;, display: none; ou aria-hidden).
  • Le contenu généré dynamiquement doit aussi respecter cette exigence.

Objectif utilisateur :

  • Pour tous les utilisateurs : améliorer la structure de la page et de son contenu.
  • Pour les utilisateurs déficients visuels, déficients cognitifs ou ayant des difficultés de lecture : faciliter la navigation et l’accès au contenu.

Objectif technique :

  • Pour les moteurs de recherche : améliorer le référencement.

Exemple valide :

Un titrage de page cohérent et pertinent :


<h1>Accueil – Orange</h1>
    <h2>Les actualités</h2>
    <h2>La fibre arrive !</h2>
        <h3>Êtes-vous éligible ?</h3>

Exemple non-valide :
Un titrage de page avec un saut de niveau h2 → h4 :


<h1>Accueil – Orange</h1>
    <h2>Les actualités</h2>
    <h2>La fibre arrive !</h2>
        <h4>Êtes-vous éligible ?</h4>

Outils :
Des extensions à installer dans votre navigateur permettent d'extraire la liste des titres :

Référence WCAG :