Structure du document
La structure du document, c'est l'organisation logique d'une page web au moyen des titres hiérarchiques (h1 à h6) et des balises sémantiques HTML5. Les lecteurs d'écran s'en servent pour construire une table des matières navigable et permettre à leurs utilisateurs de sauter directement à la section voulue.
71,6 % des utilisateurs de lecteurs d'écran naviguent dans une page par ses titres, selon la dixième enquête WebAIM. Sans hiérarchie de titres, ces utilisateurs reçoivent un flux de texte continu. Pas de repères, pas de raccourcis.
#Titres : la colonne vertébrale de la page
Les balises <h1> à <h6> découpent le contenu en sections imbriquées. Un <h1> coiffe la page, les <h2> identifient les grandes sections, les <h3> les sous-sections. NVDA, JAWS et VoiceOver construisent une table des matières à partir de cette hiérarchie : l'utilisateur saute d'un titre à l'autre avec une seule touche.
La technique H42 du W3C pose le principe : les titres doivent refléter la structure du contenu, pas son apparence visuelle.
<!-- Hiérarchie logique -->
<h1>Recettes italiennes</h1>
<h2>Entrées</h2>
<h3>Bruschetta</h3>
<h3>Carpaccio</h3>
<h2>Plats</h2>
<h3>Risotto</h3>#L'erreur que presque tout le monde commet
Sauter des niveaux. Un <h1> suivi directement d'un <h4>. Visuellement, personne ne voit la différence. Le CSS masque le problème. Le lecteur d'écran, lui, annonce un trou dans la hiérarchie. L'utilisateur se demande s'il a raté trois sections entières.
Le tutoriel WAI sur les titres est net : les niveaux doivent se suivre sans saut. Un <h2> après un <h1>, un <h3> après un <h2>.
Autre piège classique : choisir un <h3> parce que sa taille par défaut convient au design. Les titres structurent le contenu. Le CSS gère l'apparence. Mélanger les deux casse l'accessibilité.
#Au-delà des titres : les balises sémantiques
Les titres découpent le contenu. Les balises HTML5 sémantiques découpent la page elle-même :
<body>
<header><!-- en-tête du site --></header>
<nav aria-label="Menu principal"><!-- navigation --></nav>
<main><!-- contenu principal --></main>
<footer><!-- pied de page --></footer>
</body>Chaque balise crée un landmark que les technologies d'assistance exploitent pour la navigation par régions. Le critère 9.2 du RGAA exige cette structuration.
Le code doit transmettre la structure que l'œil perçoit visuellement. C'est le principe du critère 1.3.1 des WCAG.
#En résumé
Structurez vos titres de <h1> à <h6> sans sauter de niveaux. Utilisez <header>, <nav>, <main> et <footer> pour baliser les grandes zones. Testez avec un lecteur d'écran : affichez la liste des titres et vérifiez que la hiérarchie reflète le contenu réel de la page.