Comment organiser les titres H1 à H6 pour l’accessibilité ?

Par l’équipe Limpi. Les faits externes sont distingués des méthodes Limpi et aucune visibilité, position ou citation automatique n’est garantie.

Les titres servent à structurer le contenu

Les éléments de titre H1 à H6 donnent une hiérarchie au document et peuvent aider les technologies d’assistance à naviguer rapidement entre les sections. Ils ne doivent pas être choisis uniquement pour obtenir une taille de police. Une page claire présente des sections dont les niveaux reflètent les relations entre sujets. L’objectif n’est pas d’imposer un nombre fixe de titres, mais de rendre la structure compréhensible lorsque le contenu devient long ou complexe.

Distinguer niveau sémantique et apparence visuelle

Un H2 peut être stylé plus petit qu’un H3 sans changer sa place dans la hiérarchie. Utilisez le CSS pour l’apparence et les éléments de titre pour la structure. Les composants de design system qui choisissent un niveau uniquement selon la taille souhaitée peuvent créer des séquences difficiles à comprendre. Vérifiez donc le markup rendu, pas seulement la maquette. La structure doit rester logique même si les styles sont désactivés ou modifiés.

Construire une hiérarchie à partir du plan de la page

Identifiez d’abord le sujet principal puis les sections et sous-sections. Le H1 représente généralement le titre principal de la page dans votre modèle, les H2 ouvrent les grandes parties et les H3 détaillent une partie lorsque nécessaire. Évitez de choisir H4 simplement parce qu’un composant est imbriqué visuellement. Le niveau dépend de la relation éditoriale. Une bonne méthode consiste à lire uniquement les titres et vérifier si le plan obtenu reste compréhensible.

Évaluer les sauts de niveaux dans leur contexte

Un passage de H2 à H4 peut signaler qu’un niveau intermédiaire manque ou qu’un composant a choisi un niveau par défaut. Examinez le contenu pour comprendre la relation réelle avant de modifier. Ne corrigez pas automatiquement tous les sauts en renumérotant les titres sans tenir compte de la structure. Les composants réutilisés peuvent nécessiter un niveau configurable selon l’endroit où ils sont insérés. L’objectif est une hiérarchie cohérente, pas une suite numérique artificielle.

Éviter les faux titres fabriqués avec du style

Un texte en gras ou très grand peut sembler être un titre visuellement tout en restant un simple paragraphe dans le document. Les utilisateurs qui naviguent par titres ne le trouveront pas. Inversement, un H2 utilisé uniquement pour agrandir une phrase décorative pollue la structure. Comparez les éléments qui ressemblent à des titres avec les éléments réellement balisés. Corrigez le composant ou le CMS afin que le rôle sémantique corresponde à la fonction visuelle.

Tester les composants réutilisables

Les accordéons, cartes, modales et zones latérales peuvent introduire leurs propres titres. Vérifiez comment ils s’intègrent dans la page complète, pas uniquement dans une démonstration isolée. Un composant réutilisable peut avoir besoin de recevoir le niveau de titre depuis son parent. Testez plusieurs emplacements pour éviter un H2 correct sur une page mais incohérent lorsqu’il est placé dans une sous-section. Cette flexibilité doit rester encadrée par le design system.

Naviguer par titres pour valider la structure

Utilisez l’inspecteur d’accessibilité ou un lecteur d’écran pour afficher la liste des titres. Vérifiez qu’elle représente le plan attendu et qu’aucune grande section n’est invisible. Lisez également la page sans styles si cela aide à voir la structure brute. Les outils automatiques peuvent signaler certains motifs, mais ils ne peuvent pas toujours juger la logique éditoriale. Une revue humaine reste nécessaire pour confirmer que les niveaux expriment de vraies relations.

Documenter les règles pour les auteurs et développeurs

Définissez comment le CMS gère le H1 et quels niveaux sont disponibles dans le contenu. Expliquez aux auteurs qu’un titre sert à structurer, pas à styliser. Pour les composants, prévoyez des options sûres ou une hiérarchie calculée. Intégrez un contrôle dans les revues de templates et les nouvelles pages importantes. Une convention partagée réduit les sauts incohérents et évite que chaque équipe reconstruise sa propre logique de titres.

Clôturer le contrôle sur hiérarchie des titres accessible

Pour clôturer ce contrôle, conservez une URL représentative, le constat initial, la cause identifiée, la modification appliquée et le résultat du test après correction. Sur un motif répété, notez aussi le nombre d’occurrences avant et après afin de distinguer une résolution globale d’un exemple isolé. Vérifiez la cohérence avec les pages liées /site/accessibilite, /seo/h1-manquant-incoherent, /seo/contenu-on-page et assurez-vous qu’aucune nouvelle contradiction n’a été créée dans le template, le maillage ou la configuration concernée. Présenter les titres comme structure de navigation et d’organisation du contenu. Distinguer hiérarchie accessible et simple choix visuel de taille de texte. Si plusieurs équipes interviennent, attribuez la correction à une source précise — CMS, template, build, contenu ou configuration — et documentez les exceptions volontaires. Rejouez le contrôle avec les mêmes critères lors d’une prochaine migration ou refonte. Une anomalie ambiguë doit rester en revue plutôt qu’être corrigée automatiquement : la fermeture de l’alerte doit reposer sur une preuve reproductible et sur le comportement réellement servi au public. Pour hiérarchie des titres accessible, ajoutez enfin un contrôle sur un second gabarit ou un second état afin de vérifier que la règle ne dépend pas d’un seul exemple. Comparez le résultat au besoin décrit par « Comment organiser les titres H1 à H6 pour l’accessibilité ? » et conservez dans le rapport la raison pour laquelle la correction choisie respecte l’intention de cette URL. Cette vérification complémentaire donne un point de comparaison utile si le même motif réapparaît après une mise à jour du CMS ou du design system.

Sources officielles

Les règles des moteurs et des fournisseurs de crawlers peuvent évoluer. Les affirmations techniques de cette page sont bornées par les documentations officielles ci-dessous.

• w3c headings