Accessibilité et titres de section

Les titres dans une page web sont essentiels pour organiser ses contenus.

Cette organisation doit être véhiculée visuellement mais aussi dans le code.

Visuellement, des titres hiérarchisés via leur mise en forme permettent d’identifier rapidement les différentes sections de la page.

Dans le code, les titres <hx> permettent notamment de transmettre la structure de la page aux technologies d’assistance et de naviguer facilement d’une section à l’autre.

Prenons l’exemple d’une personne aveugle naviguant avec un lecteur d’écran (plage braille et/ou synthèse vocale) : une bonne structuration par titres lui donne, entre autres, la possibilité d’avoir une table des matières de la page et de naviguer facilement de titre en titre.

Utiliser des titres

Un titre est un passage de texte décrivant le contenu qui le suit.

Chaque titre a un niveau d’importance sur la page.

Visuellement, cela peut se traduire par une taille plus ou moins grande de la police en fonction du niveau, par exemple.

Dans le code, les différentes balises de <h1> à <h6> donnent un niveau au titre. <h1> représente le titre de la plus haute importance sur la page. <h6> représente celui de la moindre importance.

Exemple de hiérarchie de titres :

<h1>Risotto aux cèpes</h1>
 <h2>La recette</h2>
  <h3>Ingrédients</h3>
  <h3>Préparation</h3>

Côté RGAA

Le critère 9.1 du Référentiel Général d’Amélioration de l’Accessibilité (RGAA) demande de vérifier que l’information de chaque page est correctement structurée par des titres.

Pour cela, trois tests doivent être validés :

1. La hiérarchie des titres est-elle pertinente ?
2. Chaque titre est-il pertinent ?
3. Chaque titre visuel l’est-il aussi dans le code ?

Hiérarchie des titres

L’attribution des niveaux aux titres doit être cohérente avec la structure de la page et ses contenus. Ainsi, il faut veiller à ce qu’un titre de grande importance ait un niveau de titre cohérent par rapport à un autre titre de moindre importance : c’est-à-dire que le niveau du premier titre soit inférieur au second.

Exemple incorrect :

<h2>Risotto aux cèpes</h2>
 <h3>La recette</h3>
  <h1>Ingrédients</h1>
  <h1>Préparation</h1>

Ici, les titres <h1> devraient être de niveau 4.

Pertinence des titres

Les passages de texte structurés en titres doivent décrire de façon pertinente le contenu qu’ils introduisent.

Exemple incorrect :

<h2>La recette</h2>
 <p>Risotto aux cèpes</p>
 <h3>Les ingrédients</h3>
<h2>La recette</h2>
 <p>La carbonnade</p>
 <h3>Les ingrédients</h3>

Les titres <h2> ne décrivent pas de façon pertinente le contenu qui les suit. Ces titres devraient contenir le nom de la recette.

Sémantique des titres

Les passages de texte qui sont visuellement des titres structurant les contenus de la page doivent avoir la sémantique de titre dans le code.

Cette sémantique s’obtient de deux façons :

• En utilisant les balises HTML <hx>.
• Ou en utilisant les attributs ARIA (Accessible Rich Internet Applications) role="heading" et aria-level, représentant le niveau du titre.

La deuxième méthode n’est à utiliser que dans des cas très spécifiques où il est impossible d’utiliser les balises <hx> natives. Par exemple, dans le cadre de la mise en accessibilité d’un code hérité qui ne peut être drastiquement modifié.

Exemple incorrect :

<h1>Risotto aux cèpes</h1>
<p>Un plat réconfortant végétarien</p>
<p style="font-weight:bold;font-size:1.5rem;">Les ingrédients</p>

Le passage de texte « Les ingrédients » doit être structuré avec un élément <h2>.

Bonnes pratiques

Pour une structuration par titres la plus accessible possible, voici une liste de règles à respecter :

• La page contient un titre de niveau 1 (<h1>) qui décrit son contenu principal ou sa fonctionnalité principale : en pratique, idéalement, il devrait être identique à l’élément <title>, titre de la page.
• Les sous-titres <h2> jusqu’à <h6> structurent les titres des sous-sections de la page et se distinguent du texte environnant par une mise en forme spécifique à chaque niveau.
• Les niveaux de titre sont utilisés sans discontinuité : il faut éviter les sauts de niveau pouvant perturber les personnes naviguant avec une technologie d’assistance. Par exemple, après un titre de niveau 2 <h2>, passer à un titre de niveau 3 <h3> plutôt qu’à un titre de niveau 4 <h4>.

Conforme ? Non conforme ?

Les règles énoncées précédemment restent du domaine des bonnes pratiques. En ce qui concerne la conformité stricte, voici ce qu’il faut retenir.

Ce qui est non-conforme :

• Une hiérarchie de titre non cohérente.
• Un titre ne décrivant pas de façon pertinente la section qu’il introduit.
• Un titre visuel sans la sémantique dans le code.
• La sémantique de titre utilisée sur un élément autre qu’un titre (élément <hx> utilisé pour la mise en forme et non pour la structuration).
• Un titre vide (élément <hx> sans contenu).
• Un titre n’introduisant aucun contenu (élément <hx> non suivi d’un contenu de section).

Exemples non conformes :

Titre vide :

<h1></h1>

Titre utilisé pour la mise en forme d’une citation :

<h2>« Le pouvoir du Web est dans son universalité »</h2> <span>- Tim Berners-Lee</span>

Ce qui est conforme :

• L’absence de titre de niveau 1 <h1>.
• Plusieurs titres de niveau 1 <h1>.
• Les sauts dans les niveaux de titre si la hiérarchie reste cohérente.
• Plusieurs titres identiques si le niveau est différent de 1.
• L’insuffisance de titres dans la page, sauf si le niveau AAA des WCAG (règles internationales pour l’accessibilité des contenus web) est visé.
• Les titres visuellement cachés en CSS, si ce masquage est accessible, permettant leur restitution par les technologies d’assistance (voir l’entrée du glossaire du RGAA).
• Différentes mises en forme pour un même niveau de titre.
• Une mise en forme identique pour des niveaux de titre différents.

Exemples conformes :

Saut de niveau : passage à un niveau 5 juste après un niveau 3

<h2>Risotto aux cèpes</h2>
 <h3>La recette</h3>
  <h5>Ingrédients</h5>
  <h5>Préparation</h5>

Titres identiques :

<h2>Risotto aux cèpes</h2>
 <h3>La recette</h3>
  <h4>Ingrédients</h4>
  <h4>Préparation</h4>
<h2>Carbonnade flamande</h2>
 <h3>La recette</h3>
  <h4>Ingrédients</h4>
  <h4>Préparation</h4>

Mises en forme différentes pour un même niveau de titre :

Il est à noter que si l’on s’en tient à la conformité stricte, le niveau d’accessibilité peut s’avérer largement perfectible. Une occasion de rappeler que la conformité ne garantit pas l’accessibilité optimale de la page. L’application de l’ensemble des bonnes pratiques permet d’améliorer l’expérience de l’utilisateur et de l’utilisatrice en facilitant sa navigation dans la page.

Ressources

• Critère 9.1 du RGAA concernant la structuration par titres de la page.
• Règle n°227 OPQUAST (règles de qualité web) concernant la structuration par titres de la page.
• Les éléments de titre de section HTML.
• ARIA : le rôle « heading » (en anglais).
• HeadingMaps : extension de navigateur pour Firefox et Chrome permettant d’afficher la hiérarchie de titres de la page.
• Article de TPGi à propos de la conformité WCAG des titres (en anglais).