C'est quoi
Le critère RGAA 12.6 exige que les zones structurantes récurrentes (présentes sur plusieurs pages) soient balisées de façon à pouvoir être atteintes directement ou contournées par les technologies d'assistance.
Deux approches sont acceptées :
- Les éléments HTML5 sémantiques :
<header>,<nav>,<main>,<footer>,<form role="search">. - Les rôles ARIA landmarks :
role="banner"(en-tête),role="navigation"(navigation),role="main"(contenu principal),role="contentinfo"(pied de page),role="search"(moteur de recherche interne).
Un lecteur d'écran comme NVDA ou JAWS propose une liste des landmarks de la page. L'utilisateur saute directement à la zone souhaitée, sans parcourir tout le contenu intermédiaire.
Qui est touché
- Les personnes aveugles utilisant un lecteur d'écran : sans landmarks, elles doivent naviguer titre par titre ou élément par élément pour trouver le contenu principal.
- Les personnes avec des troubles moteurs utilisant la navigation au clavier : le skip link (RGAA 12.7) permet d'aller directement au contenu, mais les landmarks offrent une granularité supplémentaire.
- Les personnes utilisant des technologies d'assistance vocale qui s'appuient sur la structure sémantique pour analyser la page.
Impact business
L'absence de landmarks transforme chaque page en texte linéaire sans entrée directe. Un utilisateur de lecteur d'écran qui cherche le menu de navigation doit tout écouter depuis le début jusqu'à le trouver.
Sur un site avec un en-tête riche (logo, menus, panier, barre de recherche), cela représente des dizaines d'éléments à parcourir avant d'atteindre le contenu. Multiplié par chaque page, l'expérience devient épuisante.
L'impact est d'autant plus fort que les sites e-commerce et les sites riches ont souvent les en-têtes les plus chargés.
Comment le détecter
- Audit Mynto : le scan vérifie la présence des landmarks principaux (
<main>,<header>,<nav>,<footer>ou leurs équivalents ARIA). - Extension Landmarks : l'extension Landmark Navigation (disponible sur Chrome et Firefox) liste les landmarks détectés sur la page courante.
- Manuel : dans les DevTools, cherche les balises
<main>,<header>,<nav>,<footer>. Leur absence ou leur remplacement par des<div>sans rôle ARIA signale un problème.
Comment corriger
<!-- Structure sans landmarks -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div><!-- Structure avec landmarks sémantiques -->
<header>...</header>
<nav aria-label="Navigation principale">...</nav>
<main>...</main>
<footer>...</footer>Remplace les <div> de structure par leurs équivalents HTML5 sémantiques.
Si le thème ou le constructeur ne le permet pas, ajoute les rôles ARIA
directement sur les <div> existants.
Sur WordPress, la plupart des thèmes modernes (Twenty Twenty-Three,
Twenty Twenty-Four) utilisent déjà les balises sémantiques. Si ton thème
est plus ancien, vérifie le fichier header.php, footer.php et les
templates de page.
Avec Elementor ou Bricks, utilise les widgets "Header" et "Footer" natifs qui génèrent les balises sémantiques correctes. Vérifie ensuite dans le DOM que les rôles sont bien présents.
Si plusieurs zones <nav> sont présentes, distingue-les avec aria-label :
aria-label="Navigation principale" et aria-label="Navigation secondaire".
Questions fréquentes
Peut-on avoir plusieurs balises <nav> sur une même page ?
Oui, mais chaque <nav> doit avoir un aria-label distinct pour que l'utilisateur puisse les distinguer. Sans label, un lecteur d'écran annonce juste "landmark de navigation" sans préciser laquelle.
Les balises HTML5 et les rôles ARIA font-ils doublon ?
<header> a implicitement role="banner" et <footer> a role="contentinfo", mais uniquement quand ils sont des descendants directs de <body>. Imbriqués dans <main>, <article> ou <section>, ils perdent ce rôle landmark. Il ne faut pas cumuler balise native et rôle ARIA (<header role="banner"> est redondant), mais vérifier la profondeur d'imbrication.
RGAA 12.6 exige-t-il aussi la zone de recherche ?
Oui, si le site dispose d'un moteur de recherche interne. Entoure le formulaire de recherche d'un élément avec role="search". La balise <search> (HTML Living Standard, 2023) est une alternative, mais son support navigateur étant récent, role="search" reste plus sûr.
À 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.