Critère 9.1 – Usage approprié de headings

This post is also available in: English (Anglais)

ARIA permet de définir des titres via le rôle heading et la propriété aria-level (indication du niveau de titre). Bien qu’il soit préférable d’utiliser l’élément de titre natif en HTML <hx>, l’utilisation du rôle WAI-ARIA heading est compatible avec l’accessibilité.

Bien que la spécification HTML5 autorise l’utilisation exclusive de titre de niveau 1 (h1), le manque de support des technologies d’assistance oblige à utiliser une hiérarchie de titres pertinente.

Note

S’assurer que les headings sont structurés dans un ordre logique et hiérarchique de h1 à h6. Ne pas utiliser de hx pour du texte qui n’a pas vocation à être un titre.

Si la lecture seule des headings permet de comprendre le sens du contenu de la page, les niveaux sont correctement structurés.

Pourquoi est-ce important ?

L’objectif sous-jacent des headings est de transmettre la structure de la page. Les personnes voyantes obtiennent la même information grâce au formatage du texte (taille, type, couleur, graisse…). Tous ces éléments visuels ne sont pas perçus par les utilisateurs de lecteurs d’écrans qui ne peuvent compter que sur les niveaux de titres pour comprendre la structure du contenu.

De la même manière que les personnes voyantes peuvent focaliser leur attention sur un titre en particulier, les utilisateurs de lecteurs d’écrans peuvent naviguer de titre en titre.

La bonne structuration des niveaux de titres est par ailleurs une bonne pratique pour améliorer le référencement d’un site Internet (SEO).

Bonne pratique : Commencer le contenu principal de la page par un élément h1.

Sans être une obligation, il est recommandé de commencer le contenu principal de la page par un h1 sans autre niveau hx au préalable.

Une des principales raisons est le fait que les utilisateurs de lecteurs d’écran peuvent utiliser des raccourcis pour naviguer directement au premier h1 qui est en principe un bon moyen de se positionner sur le contenu principal de la page.