Structure des titres et lecteur d'écran : la règle WCAG
En bref — vos titres sont le plan de votre page
Une personne aveugle qui utilise un lecteur d'écran ne « balaie » pas la page des yeux : elle saute de titre en titre pour se repérer, comme une table des matières. Si vos titres sont mal structurés — ou simplement du texte agrandi en gras — elle se perd. L'European Accessibility Act (norme EN 301 549 / WCAG 2.1 AA) exige une structure de page claire. Les points clés :
- Un seul
<h1>par page, qui décrit le contenu principal (critères 1.3.1 et 2.4.6) ; - Une hiérarchie sans saut de niveau : H1 → H2 → H3, jamais H1 → H4 (critère 1.3.1) ;
- De vrais titres balisés (
<h2>), pas du texte agrandi qui « ressemble » à un titre (critère 1.3.1) ; - Des repères de page :
<header>,<nav>, un seul<main>,<footer>(critères 1.3.1 et 2.4.1) ; - Un titre d'onglet unique et descriptif par page (critère 2.4.2) ;
- La langue de la page déclarée avec
<html lang="fr">(critère 3.1.1).
Bénéfice annexe : une bonne structure de titres aide aussi le référencement Google, qui lit la même hiérarchie pour comprendre votre page.
La structure des titres est l'une des fondations de l'accessibilité — et l'un des manquements les plus fréquents en e-commerce. Une page bien structurée se lit comme un sommaire : un titre principal, des sections, des sous-sections. Pour une personne qui utilise un lecteur d'écran, cette hiérarchie est le moyen n°1 de naviguer. Bonne nouvelle : la corriger relève surtout du balisage HTML, pas du design. Voici les six règles WCAG que l'EAA impose, et comment les vérifier.
Pourquoi la structure des titres compte autant
Un lecteur d'écran (NVDA, VoiceOver, TalkBack…) propose une commande pour lister tous les titres d'une page et y sauter directement. C'est l'équivalent, pour une personne aveugle, du coup d'œil que vous lancez sur une page pour repérer « où sont les avis », « où est le prix », « où est le panier ». Si la page n'a pas de titres — ou des titres incohérents — cette navigation devient impossible : il faut tout écouter, ligne par ligne.
L'EAA ne crée pas de règle « titres » distincte : la référence reste l'EN 301 549, fondée sur les WCAG 2.1 niveau AA, applicables aux services de commerce électronique depuis le 28 juin 2025. La structure relève surtout du critère 1.3.1 (Information et relations) : l'information véhiculée par la présentation (ceci est un titre, ceci est une section) doit aussi exister dans le code, pour être restituée aux technologies d'assistance.
Les 6 règles d'une structure accessible
Un titre principal unique qui décrit la page
Chaque page doit avoir un seul <h1>, qui résume son contenu principal : sur une fiche produit, c'est le nom du produit ; sur une page catégorie, le nom de la catégorie. C'est le point de départ de la hiérarchie. Évitez le piège fréquent où le logo du site est codé en <h1> sur toutes les pages : le vrai titre du contenu se retrouve alors sans niveau 1. Le titre doit aussi être descriptif (critère 2.4.6) : « Chaussures de running homme », pas « Bienvenue ».
<h1> = le nom du produit ; un seul par page.<h1> répété partout ; plusieurs <h1> sur la même page ; un H1 vague (« Accueil »).La hiérarchie descend sans sauter de marche
Les niveaux de titre doivent s'enchaîner dans l'ordre : un <h3> se place sous un <h2>, jamais directement sous un <h1>. Sauter de H1 à H4 « parce que la police H4 est plus jolie » casse la logique du sommaire : le lecteur d'écran annonce des niveaux manquants et l'utilisateur croit avoir raté une section. Le niveau d'un titre se choisit selon sa place dans le plan, pas selon sa taille à l'écran — la taille se règle ensuite en CSS.
<h2> ou <h4> selon la taille de police voulue.Un titre est une balise, pas seulement un style
Un texte mis en gros et en gras ressemble à un titre pour une personne voyante, mais reste invisible comme titre pour un lecteur d'écran s'il est codé en simple paragraphe. Pour qu'un titre soit « vu » par les technologies d'assistance, il doit être balisé <h2>, <h3>, etc. (ou porter le rôle ARIA correspondant). C'est exactement ce qu'exige le critère 1.3.1 : l'apparence de titre doit avoir une contrepartie dans le code.
<h2> stylé en CSS.<p> avec font-size et font-weight:bold, sans balise de titre.Header, nav, main et footer balisés
Au-delà des titres, les lecteurs d'écran s'appuient sur les repères (landmarks) pour sauter directement à une zone : l'en-tête (<header>), la navigation (<nav>), le contenu principal (<main>, un seul par page), le pied de page (<footer>). Quand plusieurs zones de même type coexistent (deux <nav>), nommez-les avec aria-label pour les distinguer. Ces repères rendent aussi le lien d'évitement (critère 2.4.1) plus efficace.
<header>, <nav>, un <main> unique et <footer>.<div> sans repères ; deux <main> ; des <nav> multiples non nommés.Chaque page a un <title> clair et distinct
Le critère 2.4.2 (Page intitulée) demande que chaque page ait un titre d'onglet (la balise <title>, affichée dans l'onglet du navigateur et lue en premier par le lecteur d'écran) qui soit descriptif et unique. C'est ce qui permet de se repérer entre plusieurs onglets ouverts et dans l'historique. Un schéma courant : « Nom du produit — Catégorie — Boutique ». Évitez le même titre (« Boutique » ou « Accueil ») répété sur toutes les pages.
<title> = « Sac à dos 20 L gris — Bagagerie — MaBoutique ».<title> = « MaBoutique » identique sur 5 000 pages produit ; un onglet sans titre.Le code indique la langue de la page
Le critère 3.1.1 (Langue de la page) impose de déclarer la langue principale dans le code : <html lang="fr">. Sans cette information, un lecteur d'écran peut lire un texte français avec une prononciation anglaise (ou l'inverse), rendant le contenu incompréhensible. Si une partie de la page est dans une autre langue (une citation, un nom de produit en anglais), signalez-la avec lang sur l'élément concerné (critère 3.1.2). C'est une correction d'une ligne, mais souvent oubliée.
<html lang="fr"> ; un passage en anglais marqué <span lang="en">.<html> sans attribut lang ; un site multilingue qui garde lang="en" sur ses pages françaises.Récapitulatif des critères de structure
| Point à vérifier | Niveau | Critère WCAG |
|---|---|---|
| Information et relations (titres, listes, structure dans le code) | A | 1.3.1 |
| Intitulés de titres et d'étiquettes descriptifs | AA | 2.4.6 |
| Titre d'onglet (<title>) clair et unique | A | 2.4.2 |
| Langue de la page déclarée | A | 3.1.1 |
| Langue d'un passage déclarée | AA | 3.1.2 |
| Contournement de blocs (repères, lien d'évitement) | A | 2.4.1 |
| Titres de section (bonne pratique) | AAA | 2.4.10 |
Comment vérifier la structure de vos pages
Plusieurs vérifications rapides, du plus automatique au plus parlant :
- Un scan automatique détecte très bien cette famille de problèmes : absence de
<h1>, sauts de niveau, titres vides, repères manquants,langabsent,<title>manquant. C'est l'un des points où les outils sont les plus fiables. - Une extension de plan de titres (ou la fonction « structure » d'un outil d'audit) affiche la hiérarchie H1-H6 d'un coup d'œil : les trous et incohérences sautent aux yeux.
- Un lecteur d'écran (NVDA sous Windows, VoiceOver sur Mac) permet d'écouter la liste des titres : c'est le test le plus représentatif de l'expérience réelle.
→ Méthode complète : comment tester l'accessibilité de son site. Voir aussi la navigation au clavier, qui s'appuie sur les mêmes repères de page.
Vérifiez l'accessibilité de votre boutique gratuitement
DeclareAccess analyse une page de votre site avec le moteur axe-core selon les WCAG 2.1 AA, repère les manquements (structure des titres, repères, langue, contraste, formulaires…) et génère la déclaration d'accessibilité prête à publier — modèle français (RGAA), allemand (BFSG), italien ou espagnol. Gratuit, sans carte bancaire.
Rapport WCAG par e-mail sous 24 h ouvrées.
C'est noté. Votre client e-mail va s'ouvrir avec la demande pré-remplie — il vous suffit de l'envoyer.
Questions fréquentes
Peut-on avoir plusieurs H1 sur une page ?
En pratique, la recommandation la plus sûre est d'avoir un seul <h1> par page, qui décrit son contenu principal. La spécification HTML5 autorise techniquement plusieurs H1 au sein de sections, mais le support par les lecteurs d'écran reste inégal ; pour l'accessibilité comme pour le référencement, un H1 unique est le choix le plus fiable. Le reste de la structure se construit ensuite avec des H2, H3, etc.
Le niveau d'un titre dépend-il de sa taille à l'écran ?
Non, et c'est l'erreur la plus courante. Le niveau (<h2>, <h3>…) reflète la place du titre dans le plan de la page, pas son apparence. Choisissez d'abord le bon niveau pour la logique du document, puis ajustez la taille et le style en CSS. Ainsi un H2 peut très bien être affiché plus petit qu'un H3 si votre charte le demande, sans casser la structure pour les lecteurs d'écran.
Que sont les repères (landmarks) et faut-il de l'ARIA ?
Les repères sont des zones de la page que les lecteurs d'écran peuvent lister et atteindre directement : en-tête, navigation, contenu principal, pied de page. La façon la plus simple de les créer est d'utiliser les balises HTML natives (<header>, <nav>, <main>, <footer>), qui portent déjà le bon rôle ; nul besoin d'ajouter des rôles ARIA dans ce cas. On réserve l'ARIA aux situations où le HTML natif ne suffit pas, par exemple aria-label pour distinguer deux navigations.
Une bonne structure de titres aide-t-elle le référencement ?
Oui. Les moteurs de recherche lisent la même hiérarchie de titres pour comprendre l'organisation et le sujet d'une page. Un <h1> clair, des <h2>/<h3> cohérents et un <title> descriptif servent donc à la fois l'accessibilité et le SEO : c'est un des rares chantiers où l'on gagne sur les deux tableaux avec le même travail.
Un scan automatique suffit-il pour la structure ?
Pour cette famille de critères, le scan est particulièrement fiable : il détecte l'absence de H1, les sauts de niveau, les titres vides, les repères et la langue manquants. Il ne peut toutefois pas juger si un intitulé est pertinent (un H2 « Cliquez ici » passe le scan mais n'est pas descriptif). Un coup d'œil humain sur le plan de titres complète utilement le scan, et reste rapide.