Chapitre 3.3 — Titres & listes

⏱️ TL;DR — Les titres <h1>–<h6> forment le plan de ta page. Un lecteur d’écran s’en sert pour naviguer : sauter de titre en titre est le raccourci le plus utilisé. Trois règles : un seul <h1> (idéalement), ne saute pas de niveaux (pas de <h2> suivi d’un <h4>), et ne choisis jamais un niveau pour sa taille — le style, c’est le CSS. Les listes <ul>/<ol>/<dl> comptent tout autant : elles font annoncer « liste de 5 éléments » et permettent de naviguer d’item en item. Une fausse liste de <div> perd ce dénombrement et ce repère.

🎯 Objectifs

• Construire une hiérarchie de titres logique et continue.
• Comprendre pourquoi la navigation par titres est centrale au lecteur d’écran.
• Dissocier niveau de titre (sémantique) et taille (CSS).
• Utiliser la bonne liste (<ul>, <ol>, <dl>) et savoir ce qu’elle apporte.

Les titres sont le plan de la page

Chaque titre <h1>–<h6> déclare un niveau dans le plan du document, exactement comme les titres imbriqués d’un mémoire (1, 1.1, 1.1.1…). Le navigateur en construit une table des matières invisible que le lecteur d’écran expose. Trois règles fondent une hiérarchie correcte :

• Un seul <h1> par page, idéalement : le titre principal, le sujet de la page.
• Ne saute pas de niveaux en descendant : après un <h2>, le sous-titre est un <h3>, jamais directement un <h4>. Un niveau manquant fait croire à une section absente.
• Le niveau suit la structure, pas l’apparence. Tu n’utilises jamais un <h3> « parce que c’est la bonne taille ». Si tu veux un titre plus petit, tu gardes le bon niveau et tu réduis la taille en CSS.

<!-- ❌ Niveau choisi pour la taille, saut de h1 à h4 : plan cassé -->
<h1>Catalogue</h1>
<h4>React accessible</h4>        <!-- devrait être un h2 -->
<h2>Détails</h2>                  <!-- niveau incohérent -->
 
<!-- ✅ Hiérarchie continue ; la taille se règle en CSS -->
<h1>Catalogue</h1>
<h2>React accessible</h2>
<h3>Détails</h3>

/* Le titre reste un h2 sémantiquement, mais s'affiche discret */
.card h2 { font-size: 1rem; font-weight: 600; }

La navigation par titres : le raccourci roi

Demande à un utilisateur de lecteur d’écran comment il explore une longue page : il te répondra qu’il saute de titre en titre. La touche H (sur NVDA/JAWS) ou le rotor des titres (VoiceOver) permet de parcourir uniquement les titres, comme on survole les gros caractères d’un journal. À partir de ce plan, l’utilisateur choisit la section qui l’intéresse et y plonge.

C’est le mode de navigation dominant, avant même les landmarks. D’où l’enjeu : si tes titres sont faux (niveaux sautés, <div class="title"> au lieu de <h2>, ou tout en <h1>), ce plan est inutilisable. À l’inverse, une hiérarchie propre offre un sommaire gratuit et parfaitement navigable.

♿ Côté utilisateur — Sur une page d’article longue, l’utilisateur ouvre la liste des titres (« Introduction », « Installation », « Configuration », « Dépannage »), reconnaît « Configuration » et y saute en une frappe. Sans titres réels, cette liste est vide : il doit tout écouter linéairement pour trouver sa section. Des titres corrects, c’est la différence entre feuilleter un livre par son sommaire et le lire intégralement à voix haute.

💡 Réflexe — Avant de styler quoi que ce soit, écris le plan en titres de ta page comme tu écrirais celui d’un document : un <h1>, ses <h2>, leurs <h3>. Si ce plan lu à voix haute a du sens tout seul, ta structure est bonne. Ensuite seulement, tu appliques le CSS. Ne laisse jamais le design dicter le niveau d’un titre.

Un <h1> faible mais lisible

En pratique, viser « exactement un <h1> » est le bon objectif. Certaines architectures (composants réutilisés, sections HTML5 imbriquées) peuvent en amener plusieurs ; ce n’est pas un échec absolu, mais le cas simple et sûr reste un seul <h1> qui nomme la page, puis des <h2> pour ses grandes parties. Dans le doute, garde un unique <h1> : c’est le repère le plus fiable pour l’utilisateur, qui sait ainsi « de quoi parle cette page ».

Les listes : bien plus que des puces

Une liste HTML n’est pas qu’un moyen d’afficher des puces. Elle déclare un ensemble : le lecteur d’écran annonce « liste de 5 éléments », puis « élément 2 sur 5 » à mesure qu’on avance. L’utilisateur connaît d’avance la taille du groupe et peut sauter d’item en item ou sortir de la liste d’un raccourci. Trois types selon le sens :

• <ul> — liste non ordonnée : l’ordre n’a pas de signification (une liste de fonctionnalités, de tags).
• <ol> — liste ordonnée : l’ordre compte (étapes d’un tutoriel, classement).
• <dl> — liste de définitions : des paires terme/description (<dt>/<dd>), comme un glossaire ou des métadonnées.

<!-- ❌ Fausse liste : aucun dénombrement, aucun repère de groupe -->
<div class="list">
  <div>• HTML sémantique</div>
  <div>• Clavier</div>
  <div>• Lecteurs d'écran</div>
</div>
 
<!-- ✅ Vraie liste : annoncée « liste de 3 éléments », navigable item par item -->
<ul>
  <li>HTML sémantique</li>
  <li>Clavier</li>
  <li>Lecteurs d'écran</li>
</ul>

Pour des étapes numérotées, utilise <ol> — et ne code pas les numéros à la main : le navigateur les génère et le lecteur d’écran les annonce.

<!-- ✅ L'ordre est porteur de sens → liste ordonnée -->
<ol>
  <li>Installe les dépendances</li>
  <li>Configure les variables d'environnement</li>
  <li>Lance le serveur de développement</li>
</ol>

⚠️ Piège — Fabriquer une liste avec des <br> ou des <div> et un caractère « • » collé devant. Visuellement identique, sémantiquement nul : le lecteur d’écran n’annonce ni « liste », ni le nombre d’éléments, et l’utilisateur perd le raccourci de navigation par liste. Dès que tu alignes des éléments de même nature, la balise <ul>/<ol> est presque toujours la bonne.

🧭 Sur A11yLearn — La page d’un cours affichait son sommaire en <div class="lesson"> empilés et ses titres de leçon en <span> gras dimensionnés « à l’œil ». Au lecteur d’écran : aucun plan, aucune liste. On convertit le sommaire en <ol> (les leçons sont ordonnées) et les titres en <h2>/<h3> selon leur niveau réel, la taille revenant au CSS. Désormais l’utilisateur entend « liste de 8 éléments », saute de leçon en leçon, et parcourt le plan du cours par les titres. Deux balises, une page enfin navigable.

📚 Aller plus loin — La structure des titres et des listes relève du critère 1.3.1 (Information et relations) : les relations véhiculées par la présentation (hiérarchie, regroupement) doivent aussi exister dans le code. Les libellés de titres renvoient au critère 2.4.6 (En-têtes et étiquettes), qui demande des titres descriptifs. Un plan de titres correct est l’un des tests les plus simples et les plus révélateurs d’un audit d’accessibilité.

✏️ Exercices

Exercice 1 — Répare la hiérarchie. Corrige les niveaux de ce plan pour qu’il soit continu, sans changer le texte.

<h1>Formation React</h1>
<h3>Module 1 : les bases</h3>
<h2>Leçon 1.1</h2>
<h5>Exercice</h5>

<h1>Formation React</h1>
<h2>Module 1 : les bases</h2>
<h3>Leçon 1.1</h3>
<h4>Exercice</h4>

Exercice 2 — Quelle liste ? Pour chacun, dis quel élément de liste utiliser : (a) les prérequis d’un cours, sans ordre ; (b) les étapes d’installation, dans l’ordre ; (c) un glossaire terme → définition.

🧠 Quiz de révision

Chapitre suivant : Boutons, liens & contrôles — quand un <button>, quand un <a href>, et pourquoi jamais une <div> cliquable.