Aller au contenu principal
Mynto
AccessibiliteRGAA 9.2Niveau AStructuration de l'information

Structure du document non cohérente

Un lecteur d'écran peut naviguer directement vers le contenu principal, le menu ou le pied de page - à condition que ces zones soient balisées correctement. Sans landmarks HTML, cette navigation est impossible. C'est le critère RGAA 9.2, niveau A.

C'est quoi

Le critère RGAA 9.2 exige que la structure du document soit cohérente : les zones de la page doivent être délimitées par des balises sémantiques adaptées.

Balises de structure principales :

  • <header> : en-tête de la page ou d'une section.
  • <nav> : zone de navigation (menu principal, fil d'Ariane).
  • <main> : contenu principal de la page, unique par page.
  • <footer> : pied de page ou pied d'une section.
  • <aside> : contenu complémentaire ou barre latérale.
  • <section> et <article> : zones de contenu thématiques (ne constituent un landmark que s'ils ont un nom accessible via aria-label ou aria-labelledby).

Ces balises correspondent aux rôles ARIA banner, navigation, main, contentinfo, complementary. Le rendu visuel ne change pas, mais les technologies d'assistance peuvent naviguer directement entre ces zones.

Qui est touché

  • Les personnes aveugles qui utilisent un lecteur d'écran : elles utilisent les raccourcis de navigation par landmark (touche D sur NVDA, rotor sur VoiceOver) pour sauter directement à la zone voulue.
  • Les utilisateurs clavier avancés qui évitent de tabuler sur des dizaines d'éléments pour atteindre le contenu principal.

Impact business

Sur une page sans landmarks, l'utilisateur de lecteur d'écran doit parcourir tout le contenu linéairement depuis le début. Sur un site avec un menu de 20 liens, cela signifie écouter ces 20 liens à chaque chargement de page avant d'atteindre le contenu.

C'est exactement le problème que le lien d'évitement (critère 12.7) cherche à résoudre. Les landmarks sont la solution structurelle : ils permettent une navigation directe sans avoir besoin d'un lien "aller au contenu".

Sources des chiffres

Comment le détecter

  • Audit Mynto : le scan vérifie la présence des landmarks principaux (header, main, footer, nav) sur chaque page.
  • Extension navigateur : "Landmarks" (Chrome/Firefox) visualise les zones de la page et signale les absences.
  • Lecteur d'écran : navigue par landmarks avec NVDA (touche D) ou VoiceOver (VO+U pour le rotor). Combien de zones sont annoncées ?

Comment corriger

Avant - HTML
<!-- Structure div sans sémantique -->
<div id="header">Logo et navigation</div>
<div id="content">Contenu principal</div>
<div id="footer">Pied de page</div>
Après - HTML
<!-- Structure avec balises sémantiques -->
<header>Logo et en-tête du site</header>
<nav aria-label="Navigation principale">...</nav>
<main>Contenu principal de la page</main>
<footer>Informations légales et liens du pied de page</footer>

Remplace les <div> structuraux par leurs équivalents sémantiques. Le rendu visuel ne change pas (sans CSS spécifique aux balises), mais la structure est exposée aux technologies d'assistance.

Deux règles importantes :

  • Il ne doit y avoir qu'un seul <main> par page.
  • Si plusieurs <nav> existent (menu principal, fil d'Ariane), distingue-les avec aria-label pour qu'ils soient nommés différemment.

Sur WordPress, les thèmes modernes utilisent déjà ces balises. Si ton thème utilise uniquement des <div>, c'est un indicateur de dette technique.

Questions fréquentes

Peut-on utiliser role="main" sur un div plutôt que la balise main ?

Oui, role="main" sur un <div> est valide et produit le même résultat. Mais la balise <main> native est préférable : elle est plus robuste et ne nécessite pas d'attribut ARIA supplémentaire.

Combien de balises nav peut-on avoir sur une page ?

Autant que nécessaire. Si tu en as plusieurs, utilise aria-label pour distinguer chaque zone : "Navigation principale", "Fil d'Ariane", etc.

La balise section suffit-elle pour satisfaire le critère RGAA 9.2 ?

Non. <section> contribue à la structure mais ne suffit pas si <main> et <header> sont absents. Les landmarks principaux sont header, nav, main, footer : ce sont eux que les lecteurs d'écran cherchent en premier.

À lire aussi

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.