Structure des titres et points de repère

Une façon courante de lire une page avec un lecteur d'écran est de sauter de titre en titre : une page sans éléments h2 se lit donc comme un livre sans chapitres.

Les titres sont une table des matières

Les lecteurs voyants survolent. Ils jettent un coup d'œil aux grandes lignes en gras, trouvent la section voulue et commencent à lire là. Les utilisateurs de lecteurs d'écran font la même chose avec les titres. MDN note qu'une technique courante consiste à sauter rapidement de titre en titre pour comprendre ce que contient une page, et que la plupart des lecteurs d'écran peuvent lister tous les titres de la page. Cela ne fonctionne que si les titres sont de vrais éléments h1 à h6. Un paragraphe rendu grand et gras avec CSS ressemble à un titre, mais il est annoncé comme du texte ordinaire.

Les WCAG 2.2 traitent cela dans le critère de succès 1.3.1 Information et relations, de niveau A : une structure présentée visuellement doit aussi être disponible dans le code. Le critère 2.4.6 En-têtes et étiquettes, de niveau AA, ajoute que les titres doivent décrire le sujet de leur section. Un titre qui dit « Plus » ou « Section 2 » réussit le premier test et échoue au second.

Trois règles de MDN

D'abord, ne saute pas de niveau. Passe de h1 à h2 puis à h3. Quelqu'un qui entend un h4 juste après le h1 se demande où sont passés les niveaux manquants. Ensuite, préfère un seul h1 par page, qui nomme son contenu, un peu comme l'élément title. Le standard HTML en autorise plusieurs, mais MDN présente un seul h1 comme la bonne pratique habituelle. Enfin, ne choisis pas un niveau de titre pour sa taille. Si un h3 paraît trop petit, change la taille de police en CSS et garde le niveau qui correspond à la structure.

Écrire des titres utiles

Une liste de titres ne vaut que par ses mots. Mets le mot utile en premier, car les gens qui parcourent une liste de vingt titres entendent le début de chacun et passent au suivant : « Horaires d'ouverture » fonctionne mieux que « Quand vous pouvez nous rendre visite ». Garde des titres courts et différents les uns des autres, pour que deux sections ne s'appellent jamais toutes les deux « Détails ». Puis teste le plan. Le panneau d'accessibilité des outils de développement d'un navigateur, ou la liste des titres d'un lecteur d'écran, montre les titres seuls. Lis-les à la suite et demande-toi s'ils ont du sens comme table des matières. Si c'est le cas, les lecteurs voyants qui survolent en profitent aussi.

Les points de repère

Les titres divisent le contenu ; les points de repère divisent la page en régions. Les éléments header, nav, main et footer portent chacun un rôle intégré : un lecteur d'écran peut donc proposer une liste de régions et aller directement au contenu principal ou à la navigation. Une page a normalement un seul main. Tu obtiens ces rôles gratuitement en choisissant le bon élément, ce qui applique la première règle d'ARIA : aucun attribut supplémentaire n'est nécessaire.

<header>
  <nav>
    <a href="/">Home</a> <a href="/menu">Menu</a>
  </nav>
</header>
<main>
  <h1>Corner Bakery</h1>
  <h2>Bread</h2>
  <h3>Sourdough</h3>
</main>
<footer>12 Mill Lane</footer>