Hiérarchie des titres h1, h2… h6 : le guide accessibilité

Pourquoi la hiérarchie des titres h1 h2 compte pour l'accessibilité

Pour une personne qui voit l'écran, un titre se repère au premier coup d'œil. Les explications du critère 1.3.1 le décrivent ainsi : les titres sont souvent affichés dans une police plus grande et en gras, séparés des paragraphes par des lignes vides. Cette structure est perçue grâce à la présentation visuelle.

Le problème survient quand cette présentation change. La documentation du W3C cite deux situations : le contenu est lu par un lecteur d'écran, ou l'utilisateur remplace la feuille de style de l'auteur par la sienne. Le critère 1.3.1 (niveau A) exige donc que l'information, la structure et les relations transmises par la présentation puissent être déterminées par un programme, ou soient disponibles sous forme de texte.

Un titre balisé correctement remplit cette condition : son existence et son rang sont exposés aux navigateurs et aux technologies d'assistance, qui peuvent alors offrir une navigation dans la page. Un simple paragraphe mis en gras, lui, n'expose pas son rôle de titre.

Les six niveaux de titres et la règle d'imbrication

Le tutoriel du W3C pose une règle centrale : imbriquer les titres selon leur rang (ou niveau). Le rang 1 est le plus important, le rang 6 le moins important. Un titre de rang égal ou supérieur ouvre une nouvelle section ; un titre de rang inférieur ouvre une sous-section qui fait partie de la section de rang supérieur.

Sauter des rangs peut être déroutant et doit être évité dans la mesure du possible. Il y a toutefois un cas où c'est acceptable : la fermeture de sous-sections.

• À éviter : un h2 suivi directement d'un h4, sans h3 entre les deux.
• Acceptable : un h4 suivi d'un h2, qui ferme les sous-sections en cours et ouvre une nouvelle section.
• Exception : dans les zones fixes de la page, comme une barre latérale, le rang des titres ne doit pas varier selon les rangs utilisés dans le contenu principal, car la cohérence d'une page à l'autre y est plus importante.

Où placer le h1 : les exemples du W3C

Le tutoriel présente plusieurs exemples d'organisation. Dans le cas le plus simple, les titres servent uniquement à organiser des blocs de texte, par exemple le contenu principal : l'exemple comporte un h1 suivi de trois h2.

Premier exemple de page complète : le titre de rang 1 est le premier titre du document. Le menu de navigation, la barre latérale, le pied de page et le contenu principal portent des titres d'un rang inférieur, des h2. Dans le contenu, une sous-section est un h3, elle-même découpée par un h4 ; le h2 suivant ferme ces deux sous-sections d'un coup.

Second exemple : le titre principal n'est pas le nom du site mais le titre du contenu, de rang 1. La page commence par un h2 pour le menu de navigation, puis un h2 pour la barre latérale, puis le h1. Tous les autres titres, pied de page compris, sont des h2, et les intertitres du contenu sont également de rang 2, au même niveau que les autres titres structurels.

On peut en retenir, à notre sens, que l'essentiel n'est pas la position du h1 dans le code, mais la cohérence entre le rang de chaque titre et la place de la section qu'il introduit.

Choisir un titre pour sa taille : une erreur à éviter

À notre sens, choisir un niveau de titre parce que son rendu visuel convient (un h4 parce qu'il est « plus petit », un h1 parce qu'il est « plus gros ») risque de produire un rang qui ne correspond plus à l'organisation réelle du contenu, et donc de casser l'imbrication recommandée par le W3C.

Parmi les techniques listées pour le critère 1.3.1, certaines concernent le balisage de la structure : H42 (utiliser h1 à h6 pour identifier les titres), ARIA12 (utiliser role=heading), G115 (utiliser des éléments sémantiques pour baliser la structure). D'autres portent sur la présentation : C22, technique conseillée (utiliser CSS pour contrôler la présentation visuelle du texte), et G140, technique suffisante (séparer l'information et la structure de la présentation pour permettre différentes présentations). Notre recommandation en découle : choisir le niveau selon la structure, puis ajuster la taille en CSS.

L'erreur inverse existe aussi : un texte stylé en grand et en gras pour ressembler à un titre, sans balisage de titre. Elle correspond à l'échec F2, défini comme un échec au critère 1.3.1 dû à l'utilisation de changements de présentation du texte pour transmettre une information sans le balisage ou le texte appropriés. Plus largement, l'échec F43 vise l'utilisation d'un balisage structurel qui ne représente pas les relations du contenu.

Titres et régions de la page

Les titres servent aussi à étiqueter les régions d'une page. Le tutoriel recommande d'utiliser aria-labelledby pour associer un titre à la région qu'il introduit, et rappelle que des titres visibles aident tous les utilisateurs à identifier ces régions.

Les explications du critère 1.3.1 citent d'ailleurs, parmi les techniques suffisantes, ARIA13 (utiliser aria-labelledby pour nommer des régions et des landmarks), ARIA11 (identifier les régions avec des landmarks ARIA) et H101 (identifier les régions avec des éléments HTML sémantiques).

Critères WCAG et techniques à connaître

Le tutoriel « Headings » rattache les titres à quatre critères de succès, de niveaux de conformité différents. Il précise qu'il présente des bonnes pratiques qui combinent ces niveaux.

• 1.3.1 Info and Relationships, niveau A.
• 2.4.1 Bypass Blocks, niveau A.
• 2.4.6 Headings and Labels, niveau AA.
• 2.4.10 Section Headings, niveau AAA.
• Techniques associées : G130 (fournir des titres descriptifs), G141 (organiser une page à l'aide de titres), H69 (placer un élément de titre au début de chaque section de contenu), H80 (identifier la fonction d'un lien grâce à son intitulé combiné au titre qui le précède) et PDF9 (baliser les titres dans les documents PDF).

Vérifier la hiérarchie des titres de votre page

Les explications du critère 1.3.1 proposent une façon de vérifier : accéder à l'information de manière séquentielle, par différentes modalités. À notre sens, appliqué aux titres, cela revient à se demander si la structure reste compréhensible une fois la mise en forme retirée. Voici une liste de contrôle tirée des règles ci-dessus.

Pour repérer rapidement les problèmes sur l'ensemble de vos pages, vous pouvez lancer un test gratuit, puis mettre en place une surveillance continue pour détecter les régressions à chaque mise à jour du site.

• Chaque texte qui joue visuellement le rôle de titre est-il balisé avec un élément h1 à h6 (ou role=heading) ?
• Les rangs sont-ils imbriqués, sans saut comme un h2 suivi directement d'un h4 ?
• Les niveaux ont-ils été choisis selon la structure, et non selon leur taille d'affichage ?
• Les titres des zones fixes, comme la barre latérale, gardent-ils le même rang sur toutes les pages ?
• Les régions importantes sont-elles introduites par un titre visible, associé via aria-labelledby si besoin ?

Questions fréquentes

À lire aussi sur Conformly

• Critère RGAA 9.1 expliqué en détail
• Critère RGAA 9.2 expliqué en détail
• Scanner RGAA gratuit pour votre site

Sources

Article appuyé sur les sources officielles citées en fin de page.

• W3C — Tutoriel titres
• W3C — Comprendre 1.3.1