SEO vs A11y — hiérarchie des titres.

Votre maquette est validée, l'intégration commence. L'expert SEO relit, propose un balisage. L'expert accessibilité relit, en propose un autre — et invalide celui du premier. Bienvenue dans l'un des conflits les plus classiques de l'intégration web. Bonne nouvelle : il existe une solution propre, standardisée, et validée par les deux camps.

№ 01Pourquoi la hiérarchie compte.

La hiérarchie des titres est cruciale dans les deux mondes, mais pour des raisons différentes :

• Pour les moteurs de recherche — elle sert à indexer et pondérer le contenu. Un titre <h2> pèse plus qu'un paragraphe, et les mots-clés qu'il contient gagnent en visibilité.
• Pour les technologies d'assistance — elle permet aux utilisateurs de lecteurs d'écran de naviguer la page à la volée, titre par titre (touche H sur NVDA / JAWS). Sans hiérarchie claire, le parcours de lecture s'effondre.

C'est le critère 9.1 du RGAA qui cadre ce point : l'information doit être structurée par l'utilisation appropriée des titres.

№ 02Le conflit, en pratique.

Imaginons une maquette validée pour la page d'un film. Deux blocs principaux : un bloc de contenu avec des podcasts associés, et un footer avec une liste de liens « Ressources ». L'expert SEO et l'expert A11y proposent chacun leur balisage — et les deux ne sont pas d'accord.

№ 03La vision SEO.

L'expert SEO veut optimiser les mots-clés. Il ne conserve que les titres porteurs de sens pour l'indexation et déclasse les titres « génériques » (type « Ressources », « Podcasts »). En contrepartie, il promeut certains liens en <h2> pour leur donner du poids.

<h1>Lorem ipsum, le film</h1>
...
<p>Ressources</p>   <!-- Titre générique déclassé en P -->

<p>Podcasts</p>
<h2>Le podcast de Lorem</h2>   <!-- mot-clé important en H2 -->
...
<h2><a href="#">Lorem 1</a></h2>   <!-- lien footer valorisé en H2 -->

№ 04Le refus de l'A11y.

L'expert accessibilité invalide ce code. Deux raisons, deux critères RGAA :

Le code strictement accessible utiliserait une hiérarchie logique (<h1> → <h2> → <h3>), mais il diluerait le « jus SEO » en multipliant les niveaux et en rétrogradant les mots-clés stratégiques. Impasse.

№ 05La solution ARIA.

Heureusement, on peut satisfaire les deux camps grâce aux attributs role="heading", aria-level et role="presentation". L'idée est simple : on garde les balises HTML que veut le SEO (pour Google) et on redéfinit leur sémantique pour les lecteurs d'écran (pour l'accessibilité).

<h1>Lorem ipsum, le film</h1>

<!-- SEO voit un P ; A11y voit un H2 -->
<p role="heading" aria-level="2">Ressources</p>

<p role="heading" aria-level="3">Podcasts</p>

<!-- SEO voit un H2 ; A11y voit un H4 -->
<h2 role="heading" aria-level="4">Le podcast de Lorem</h2>

<!-- SEO voit un H2 ; A11y ne voit qu'un lien -->
<h2 role="presentation"><a href="#">Lorem 1</a></h2>

№ 06Quand s'en servir.

Cette technique est puissante — donc à manier avec discernement. Elle se justifie quand :

• Un audit SEO externe impose un balisage qui entre en conflit avec le RGAA.
• Un CMS ou un template tiers impose une structure Hn qu'on ne peut pas modifier.
• Le design lui-même porte une hiérarchie visuelle que la sémantique HTML ne peut pas refléter sans lourdeur.

Hors de ces cas, préférez toujours une hiérarchie <h1>–<h6> native et logique. ARIA ne remplace pas une bonne sémantique HTML — il la répare quand elle est contrainte par ailleurs.

Conclusion.

Les attributs ARIA permettent de décorréler la structure sémantique (pour l'utilisateur) de la structure des balises (pour le robot). C'est une technique avancée mais extrêmement puissante pour résoudre les conflits qui surgissent en phase d'intégration — ou lors d'un audit.

Pour aller plus loin, découvrez notre offre d'accompagnement technique ou nos formations développeurs.