WCAG 2.4.10 : Titres de section

Ce que signifie cette règle

La WCAG 2.4.10 — Titres de section (Niveau AAA) stipule : « Des titres de section sont utilisés pour organiser le contenu. » Cela signifie que lorsqu’une page web ou un document est divisé en plusieurs sections distinctes, chaque section doit avoir un titre déterminable de manière programmatique qui décrit son sujet ou son objectif. L’intention n’est pas simplement d’avoir du texte stylisé visuellement qui ressemble à un titre, mais d’utiliser un véritable balisage de titre qui transmet une structure hiérarchique à la fois aux navigateurs et aux technologies d’assistance.

En HTML, cela signifie utiliser de manière appropriée les éléments de titre natifs <h1> à <h6>. Une page avec un sujet principal doit comporter un <h1>, les sections majeures doivent utiliser <h2>, les sous-sections à l’intérieur de celles-ci utilisent <h3>, et ainsi de suite. Le niveau de titre doit refléter la profondeur logique du contenu, et ne pas être choisi arbitrairement pour des raisons de style visuel. Lorsque ARIA est utilisé, le role="heading" combiné avec aria-level est également acceptable, même si les éléments HTML natifs sont toujours préférés.

Un succès selon ce critère signifie que chaque section de contenu distincte sur la page possède un titre qui décrit avec précision ce qui suit, que le titre est balisé sémantiquement (et pas seulement stylisé visuellement en gras ou en grand texte), et que la hiérarchie des titres reflète logiquement l’organisation du contenu du document. Un échec se produit lorsque des sections de contenu n’ont aucun titre, lorsque des niveaux de titres sont sautés de manière arbitraire (en passant de <h1> à <h4> sans raison logique), ou lorsque du simple texte stylisé est utilisé à la place de véritables éléments de titre pour étiqueter une section.

Il est important de noter l’exception officielle des WCAG : ce critère s’applique uniquement lorsque la page elle-même contient des sections. Les pages très courtes avec un seul sujet unifié — comme un simple formulaire de connexion sans sections distinctes — ne sont pas tenues d’avoir plusieurs titres. L’exigence est déclenchée par la présence de plusieurs zones de contenu distinctes qui bénéficient d’un étiquetage. De plus, ce critère n’impose pas une structure hiérarchique de titres spécifique au-delà d’une organisation logique ; l’exigence clé est que des titres existent et soient utilisés de manière significative partout où des sections existent.

Ce critère est classé Niveau AAA, ce qui signifie qu’il n’est pas requis pour la conformité de base aux WCAG 2.2, mais qu’il représente une pratique d’accessibilité de premier ordre qui améliore considérablement l’expérience d’un large éventail d’utilisateurs.

Pourquoi c’est important

Les utilisateurs de lecteurs d’écran s’appuient sur les titres comme principal moyen de navigation dans les longs documents et pages web. Selon l’enquête WebAIM sur les utilisateurs de lecteurs d’écran, la grande majorité des utilisateurs de lecteurs d’écran naviguent régulièrement par les titres — c’est constamment classé parmi les méthodes de navigation les plus utilisées. Lorsque les titres sont absents ou mal structurés, un utilisateur de lecteur d’écran doit écouter chaque élément de contenu séquentiellement depuis le haut de la page, ce qui équivaut à obliger un utilisateur voyant à lire un livre entier sans table des matières ni titres de chapitres.

Considérez un exemple réel : un site de e-commerce turc vendant de l’électronique peut avoir une page de détail produit avec des sections couvrant les spécifications du produit, les avis clients, les informations de livraison et la politique de retour. Si aucune de ces sections n’a d’élément de titre, un utilisateur aveugle naviguant avec NVDA sur Firefox ne peut pas sauter de l’une à l’autre. Il doit soit écouter tout le contenu, soit utiliser des stratégies de recherche par essais et erreurs, ce qui augmente considérablement la charge cognitive et le temps nécessaire pour accomplir la tâche. Avec des titres <h2> appropriés pour chaque section, le même utilisateur peut appuyer sur la touche H pour passer instantanément d’une section à l’autre en quelques secondes.

Les utilisateurs ayant des handicaps cognitifs en bénéficient également de manière substantielle. Des titres clairs agissent comme des panneaux de signalisation, permettant aux personnes ayant des troubles de l’attention, des difficultés de lecture ou des troubles de la mémoire de se réorienter rapidement après une perte de concentration. L’Organisation mondiale de la Santé estime qu’environ 1,3 milliard de personnes vivent avec une forme de handicap dans le monde, et les troubles cognitifs et neurologiques représentent une part importante et croissante de cette population.

Les utilisateurs ayant des limitations motrices qui s’appuient sur la navigation au clavier uniquement ou sur des dispositifs d’accès par contacteurs en bénéficient également, car la structure des titres est utilisée par de nombreuses technologies d’assistance pour créer des possibilités de navigation par saut, réduisant l’effort physique nécessaire pour atteindre la zone de contenu souhaitée.

Au-delà de l’accès pour les personnes handicapées, une structure de titres correcte présente des avantages SEO significatifs. Les moteurs de recherche utilisent la hiérarchie des titres pour comprendre la structure thématique d’une page, ce qui peut influencer le classement et la manière dont le contenu est présenté dans les résultats de recherche. Une structure de titres bien organisée signale la qualité du contenu à la fois aux utilisateurs et aux robots d’indexation. Cela rend l’argument commercial en faveur de la mise en œuvre de ce critère AAA convaincant, même pour les organisations qui ne sont pas légalement tenues de le respecter.

Règles Axe-core associées

La WCAG 2.4.10 nécessite des tests manuels et ne peut pas être entièrement automatisée. Voici pourquoi les outils automatisés sont insuffisants, et ce qu’ils peuvent ou ne peuvent pas détecter :

• Test manuel requis — Complétude structurelle : Les outils automatisés comme axe-core peuvent détecter la présence ou l’absence d’éléments de titre sur une page, et peuvent signaler des problèmes tels que des niveaux de titres sautés (par exemple, passer de <h1> à <h3>). Cependant, ils ne peuvent pas déterminer si le contenu d’une page a été divisé logiquement en sections ou si un titre décrit avec précision la section qu’il introduit. Un outil peut voir une hiérarchie de titres correcte et valider le contrôle, alors que la page comporte en réalité quatre sections de contenu distinctes, dont trois n’ont aucun titre. L’adéquation sémantique du placement des titres nécessite un examinateur humain qui comprend l’objectif et la structure du contenu.
• Règle axe-core — heading-order : Cette règle signale les cas où des niveaux de titres sont sautés d’une manière qui rompt la structure logique du document (par exemple, passer directement de <h1> à <h4>). Bien qu’il s’agisse d’un indicateur de qualité connexe, réussir cette règle ne garantit pas la conformité à 2.4.10, car la règle ne vérifie que l’ordre relatif des titres existants — elle ne peut pas déterminer si un titre est manquant dans une section qui en a besoin.
• Règle axe-core — page-has-heading-one : Cette règle vérifie si la page contient au moins un élément <h1>, ce qui est une exigence structurelle de base. Là encore, réussir ce contrôle est un signal positif mais ne confirme pas la conformité complète à 2.4.10, puisqu’une page peut avoir un <h1> et avoir tout de même plusieurs sections non étiquetées en dessous.
• Pourquoi l’automatisation complète est impossible : Déterminer si une zone de contenu constitue une « section » qui mérite un titre nécessite de comprendre la sémantique et l’objectif du contenu — une tâche qui requiert actuellement un jugement humain. Un algorithme ne peut pas distinguer de manière fiable un paragraphe cohérent qui s’inscrit naturellement dans la continuité de ce qui précède d’une véritable nouvelle zone thématique qui mérite son propre titre. C’est pourquoi 2.4.10 est toujours répertorié comme nécessitant une évaluation manuelle dans tout audit complet.

Comment tester

1. Analyse automatisée avec axe DevTools ou Lighthouse : Installez l’extension de navigateur axe DevTools (disponible pour Chrome et Firefox) et lancez une analyse de page complète. Examinez tous les problèmes liés à heading-order et page-has-heading-one. Notez qu’une analyse automatisée sans erreur ne confirme pas la conformité à la WCAG 2.4.10 — elle ne couvre que le sous-ensemble de contrôles automatisables. Lighthouse dans Chrome DevTools met également en évidence les problèmes liés aux titres dans son audit Accessibilité ; recherchez les avertissements « Heading elements are not in a sequentially-descending order ».
2. Revue manuelle du contenu — plan du document : Utilisez une extension de navigateur telle que HeadingsMap (disponible pour Chrome et Firefox) pour générer un plan visuel de tous les éléments de titre sur la page. Examinez ce plan de manière critique : reflète-t-il fidèlement la structure du contenu de la page ? Chaque section distincte est-elle représentée par un titre ? Y a-t-il des sections de contenu visibles sur la page qui n’apparaissent pas dans le plan ? Si oui, ces sections n’ont pas de titres et la page échoue à 2.4.10.
3. Navigation avec lecteur d’écran via NVDA et Firefox : Ouvrez la page dans Firefox avec NVDA en cours d’exécution. Appuyez sur H pour avancer de titre en titre et sur Shift+H pour revenir en arrière. À chaque titre, notez si le titre annoncé décrit avec précision le contenu qui suit. Notez également si vous rencontrez des blocs de contenu substantiels qui ne sont jamais annoncés comme étant sous un titre. Ouvrez la liste des éléments de NVDA (NVDA+F7), sélectionnez l’onglet Titres, et examinez la liste complète des titres pour repérer les sections manquantes ou mal étiquetées.
4. Navigation avec lecteur d’écran via VoiceOver et Safari (macOS/iOS) : Sur macOS, activez VoiceOver (Command+F5) et ouvrez la page dans Safari. Utilisez VO+Command+H pour naviguer entre les titres. Sur iOS, utilisez le rotor (balayez avec deux doigts pour le régler sur Titres) puis balayez vers le bas pour parcourir les titres. Vérifiez que toutes les sections de contenu sont accessibles via la navigation par titres.
5. Navigation avec lecteur d’écran via JAWS et Chrome : Dans JAWS, appuyez sur H pour parcourir les titres et ouvrez la liste des titres avec Insert+F6. Examinez la liste pour vérifier sa complétude et sa hiérarchie logique. Confirmez que les titres ne sont pas utilisés uniquement à des fins de style — seuls les véritables libellés de section doivent apparaître comme titres.
6. Vérification de la navigation au clavier uniquement : En utilisant uniquement le clavier, essayez de naviguer dans toutes les sections majeures de la page sans utiliser les titres. Notez combien de fois vous devez appuyer sur Tab pour parcourir les éléments interactifs afin d’atteindre chaque section. Cela donne une idée de la charge imposée aux utilisateurs de clavier lorsque la structure de titres appropriée est absente.

Comment corriger

Sections étiquetées uniquement avec du texte stylisé — Incorrect

<div class='section'>
  <p class='section-title'>Product Specifications</p>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</div>

<div class='section'>
  <p class='section-title'>Customer Reviews</p>
  <p>This product exceeded my expectations.</p>
</div>

Sections étiquetées uniquement avec du texte stylisé — Correct

<!-- Using semantic heading elements makes sections navigable by screen readers -->
<section>
  <h2>Product Specifications</h2>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</section>

<section>
  <h2>Customer Reviews</h2>
  <p>This product exceeded my expectations.</p>
</section>

Niveaux de titres sautés pour des raisons de style — Incorrect

<h1>Annual Report 2024</h1>
<!-- h4 used here because it looks smaller visually, skipping h2 and h3 -->
<h4>Financial Overview</h4>
<p>Revenue grew by 12% this year...</p>
<h4>Regional Performance</h4>
<p>The Istanbul region led growth...</p>

Niveaux de titres sautés pour des raisons de style — Correct

<h1>Annual Report 2024</h1>
<!-- h2 used for major sections; CSS controls visual size, not heading level -->
<h2>Financial Overview</h2>
<p>Revenue grew by 12% this year...</p>
<h2>Regional Performance</h2>
<p>The Istanbul region led growth...</p>

Aucun titre pour une section majeure de la page — Incorrect

<main>
  <h1>Contact Us</h1>
  <form>
    <label for='name'>Name</label>
    <input type='text' id='name' name='name'>
    <label for='message'>Message</label>
    <textarea id='message' name='message'></textarea>
    <button type='submit'>Send</button>
  </form>
  <!-- This office locations section has no heading -->
  <div>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </div>
</main>

Aucun titre pour une section majeure de la page — Correct

<main>
  <h1>Contact Us</h1>
  <section>
    <h2>Send Us a Message</h2>
    <form>
      <label for='name'>Name</label>
      <input type='text' id='name' name='name'>
      <label for='message'>Message</label>
      <textarea id='message' name='message'></textarea>
      <button type='submit'>Send</button>
    </form>
  </section>
  <!-- Office locations section now has a descriptive heading -->
  <section>
    <h2>Our Offices</h2>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </section>
</main>

Rôle de titre ARIA utilisé sans aria-level — Incorrect

<!-- role=heading without aria-level defaults to level 2, which may be wrong -->
<div role='heading'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

Rôle de titre ARIA utilisé sans aria-level — Correct

<!-- Native HTML is strongly preferred; if ARIA is used, aria-level must be explicit -->
<!-- Preferred: -->
<h2>Shipping Policy</h2>
<p>Orders are shipped within 2 business days...</p>

<!-- Acceptable when native heading cannot be used: -->
<div role='heading' aria-level='2'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

Erreurs courantes

• Utiliser des classes CSS comme .title ou .section-header sur des éléments <p> ou <div> au lieu de véritables éléments <h1>–<h6> : Le style visuel seul ne communique pas la structure aux technologies d’assistance. Le titre doit être un véritable élément de titre ou porter un rôle ARIA de titre valide avec un niveau explicite.
• Choisir les niveaux de titres en fonction de la taille de police plutôt que de la hiérarchie du document : Sélectionner <h4> parce qu’il s’affiche à la taille visuelle souhaitée, alors qu’il devrait logiquement s’agir d’un <h2>, rompt le plan du document et perturbe les utilisateurs de lecteurs d’écran qui entendent « heading level 4 » sans aucun niveau 2 ou 3 précédent.
• Appliquer des substitutions de font-size ou font-weight pour réduire visuellement un <h1> au lieu d’utiliser un élément de titre de niveau inférieur : Cela crée un décalage entre la hiérarchie visuelle et la hiérarchie sémantique ; utilisez le CSS pour contrôler la taille et les niveaux de titres natifs pour transmettre la structure.
• Omettre des titres dans les sections de contenu chargées dynamiquement (par exemple, panneaux d’onglets, boîtes de dialogue modales ou résultats chargés via AJAX) : Lorsque du nouveau contenu est injecté dans la page, il manque souvent de structure de titres. Chaque section rendue dynamiquement doit inclure un titre approprié afin que les utilisateurs qui naviguent par titres ne se retrouvent pas bloqués dans une île de contenu non étiquetée.
• Utiliser un seul <h1> pour le titre de la page et aucun autre titre sur une page comportant cinq sections de contenu distinctes ou plus : L’existence d’un <h1> satisfait les contrôles automatisés mais ne répond pas à 2.4.10 si les sections majeures suivantes ne sont pas étiquetées.
• Imbriquer des titres à l’intérieur d’éléments <button> ou <a> : Placer un titre à l’intérieur d’un élément interactif crée des rôles conflictuels pour les technologies d’assistance et constitue un HTML invalide. Les titres doivent étiqueter des sections de contenu, pas des contrôles interactifs.
• Utiliser role='heading' sans spécifier aria-level : Le niveau implicite ARIA par défaut est 2, ce qui peut ne pas correspondre à la structure de document souhaitée et produira silencieusement un plan incorrect si la section se situe à un niveau différent.
• Ajouter des titres décoratifs ou répétés — par exemple, répéter le titre de la page en <h2> à l’intérieur de chaque carte de contenu — qui créent du bruit de titres sans valeur de navigation significative : Les titres doivent décrire de manière unique et précise la section qu’ils introduisent ; des titres redondants réduisent l’utilité de la navigation par titres pour les utilisateurs de lecteurs d’écran.
• Masquer visuellement des titres avec display:none ou visibility:hidden pour tenter de fournir une structure réservée aux lecteurs d’écran : Ces propriétés CSS masquent également l’élément pour les technologies d’assistance. Utilisez la technique standard de masquage visuel (position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);) si un titre doit être présent dans l’arbre d’accessibilité mais ne pas être visible à l’écran.
• Ne pas mettre à jour la structure des titres lorsque le contenu de la page est réorganisé lors d’une refonte : Les titres ajoutés lors du développement initial restent souvent obsolètes lorsque les sections de contenu sont réorganisées, fusionnées ou remplacées. Les audits de titres doivent faire partie de tout cycle de révision de contenu ou de design, et non être une correction d’accessibilité ponctuelle.

Lien avec la réglementation turque en matière d’accessibilité

La Circulaire présidentielle 2025/10 de la Turquie, publiée au Journal officiel n° 32933 le 21 juin 2025, établit des obligations complètes en matière d’accessibilité numérique pour un large éventail d’entités opérant en Turquie. La circulaire s’aligne sur la WCAG 2.2 comme norme technique pour la conformité en accessibilité numérique et s’applique aux institutions publiques, aux plateformes de e-commerce, aux banques et institutions financières, aux hôpitaux et prestataires de soins de santé, aux entreprises de télécommunications comptant 200 000 abonnés ou plus, aux agences de voyage, aux entreprises de transport privé et aux écoles privées autorisées par le ministère de l’Éducation nationale (MoNE).

La WCAG 2.4.10 — Titres de section est un critère de Niveau AAA. Cela signifie qu’il ne fait pas partie des critères minimaux légalement requis par la circulaire, qui impose la conformité aux niveaux A et AA pour les entités concernées. Cependant, l’objectif plus large de la circulaire est d’assurer un accès numérique significatif pour tous les utilisateurs, et les critères de niveau AAA comme 2.4.10 sont explicitement reconnus comme représentant des pratiques d’accessibilité de premier ordre.

Pour les entités concernées — en particulier les institutions publiques, les banques, les hôpitaux et les grands opérateurs télécoms — la mise en œuvre de la WCAG 2.4.10 démontre un engagement en faveur de l’accessibilité qui va au-delà des exigences réglementaires minimales. En pratique, des hiérarchies de titres bien structurées sont également une condition préalable à plusieurs critères de succès de niveau AA (tels que 1.3.1 Informations et relations et 2.4.6 Titres et étiquettes), ce qui signifie que les organisations visant une conformité complète au niveau AA se rapprocheront naturellement de la conformité à 2.4.10 dans le cadre de cet effort.

Les services spécialisés destinés aux utilisateurs handicapés, ou les services numériques offerts par des institutions publiques desservant des populations de citoyens diverses, y compris les personnes âgées, les personnes ayant des handicaps cognitifs ou les utilisateurs de technologies d’assistance, bénéficieraient particulièrement de la mise en œuvre complète de 2.4.10. L’importance croissante accordée par la Turquie aux services de gouvernement numérique (e-devlet) et l’expansion du e-commerce font d’une structure de contenu robuste non seulement une exigence d’accessibilité, mais aussi une priorité en matière d’utilisabilité et de gestion des risques juridiques.

Les organisations en Turquie qui se certifient volontairement au niveau AAA de la WCAG 2.2 — y compris 2.4.10 — se positionnent comme des leaders en matière d’accessibilité, ce qui renforce la confiance dans la marque, réduit le risque de litiges et élargit leur audience potentielle pour inclure les quelque 8,5 millions de personnes handicapées en Turquie, comme le rapporte l’Institut turc de statistique (TÜİK).