En-têtes de section

Ce que le critère exige

Lorsqu’une page est divisée en sections, chaque section doit avoir un titre programmatique. Le critère n’exige pas que chaque page soit découpée en sections — les pages courtes à usage unique (un écran de connexion) peuvent se passer de sous-titres. Mais là où des sections existent, elles ont besoin d’une vraie balise <h1>–<h6> pour que les technologies d’assistance puissent construire un plan de titres.

Ce critère est au niveau AAA, mais la pratique sous-jacente — utiliser de vrais titres — est également impliquée par le critère 1.3.1 (Information et relations) au niveau A, de sorte que la plupart des sites accessibles le satisfont incidemment.

Comment s’y conformer

• Utiliser <h1> pour le titre de la page (une seule fois par page) et descendre dans la hiérarchie avec <h2>, <h3> pour les sections imbriquées sans sauter de niveaux.
• Remplacer <div class="heading"> et les « titres » stylisés avec des balises de titre réelles.
• Faire commencer chaque section distincte de contenu long (un article, une page de documentation, un panneau de paramètres avec des onglets) par un titre.
• Pour les composants de cartes formant des collections de sections similaires, donner à chaque carte un titre au niveau approprié.
• Valider le plan de titres avec l’algorithme de structure HTML5 (axe DevTools, extension navigateur headingsMap, ou le validateur W3C).

Échecs courants

• Paragraphes en gras faisant office de titres — visuellement convaincants, invisibles dans la liste de titres d’un lecteur d’écran.
• Niveaux de titres sautés (<h1> passant à <h4>) parce que l’équipe CMS a choisi les niveaux d’après la taille de la police plutôt que d’après la hiérarchie.
• Plusieurs éléments <h1> sur une même page (acceptable dans les plans HTML5 mais brise la navigation dans la plupart des technologies d’assistance).
• Chaque section libellée <h2> quelle que soit la profondeur d’imbrication, aplatissant le plan.
• Texte hero balisé en <h1> tandis que le vrai titre de la page se trouve en dessous en <h2>.

Pourquoi c’est important

Pour les utilisateurs de lecteurs d’écran, le plan des titres est la table des matières. JAWS et NVDA l’exposent dans une boîte de dialogue (Inser+F6 dans JAWS) ; VoiceOver l’expose dans le rotor. Une page sans titres, ou avec des titres uniquement pour l’emphase visuelle, oblige ces utilisateurs à parcourir ligne par ligne. Même avec un engagement AA uniquement, traiter les en-têtes de section comme une règle de rédaction de base rapporte sur le plan du référencement, de la réutilisation du contenu et de la clarté pour les rédacteurs.