heading
Marque un élément comme titre. Utilisez d'abord <h1>–<h6> — ils portent la bonne sémantique et un niveau correct sans effort supplémentaire. N'utilisez role="heading" que lorsque vous devez promouvoir un élément qui ne peut pas être un <h*>.
Quand l’utiliser
Privilégiez toujours <h1> à <h6> en premier lieu. L’élément de titre natif vous donne le rôle, le niveau et une feuille de style intégrée par l’agent utilisateur.
role="heading" ne convient que lorsqu’il est impossible d’utiliser un titre natif — typiquement dans un CMS contraint qui restitue tout le texte sous forme de <p> ou de <div>. Dans ce cas, vous DEVEZ définir aria-level avec un nombre de 1 à 6 (ou supérieur, mais les technologies d’assistance ignorent en pratique les niveaux au-delà de 6).
Ne sautez pas de niveaux de titre : un <h2> ne doit pas être directement suivi d’un <h4> sans <h3> entre les deux. Les utilisateurs de lecteurs d’écran qui naviguent par titre s’appuient sur la cohérence du plan.
Erreurs fréquentes
role="heading"sansaria-level. Le rôle est obligatoirement associé à un niveau.- Des « titres » visuels (texte large et gras) enveloppés dans des
<div>ou des<span>sans rôle de titre. Les utilisateurs de lecteurs d’écran les ignorent complètement. - Plusieurs éléments
<h1>sur une même page alors qu’un seul titre principal est prévu. La bonne pratique est d’avoir un seul<h1>par page qui nomme le contenu principal. - Sauter des niveaux — passer de
h2àh4— brise le plan du document. - Du texte décoratif stylisé en titre mais non destiné à en être un, balisé comme titre malgré tout. Cela perturbe la navigation par lecteur d’écran.
Exemple
<!-- Recommandé -->
<h2>Comment déposer une plainte</h2>
<!-- Seulement quand <h2> est impossible -->
<div role="heading" aria-level="2">Comment déposer une plainte</div>