Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ?
Un utilisateur naviguant au clavier refait le même trajet depuis le début à chaque chargement de page. Sans mécanisme d’évitement, il traverse l’intégralité du menu avant d’atteindre le contenu, parfois 40 à 50 pressions sur Tab pour accéder à un article. Le critère 12.6 impose de résoudre ce problème.
Cinq zones sont concernées : l’en-tête, la navigation principale, le contenu principal, le pied de page et le moteur de recherche, dès qu’elles apparaissent sur plusieurs pages. Pour chacune, au moins une méthode doit être en place : un rôle WAI-ARIA landmark, un titre de hiérarchie décrivant la zone, un bouton de masquage précédant directement la zone dans l’ordre du code source, un lien d’évitement précédant directement la zone, ou un lien d’accès rapide visible par défaut ou à la prise de focus.
Les landmarks ARIA sont la solution la plus économique à déployer : role="banner" sur l’en-tête, role="navigation" sur la navigation, role="main" sur le contenu principal, role="contentinfo" sur le pied de page, role="search" sur le moteur de recherche. Les balises HTML5 sémantiques <header>, <nav>, <main> et <footer> portent ces rôles implicitement, ce qui couvre déjà la majorité des zones sans attribut supplémentaire.
Un lien d’évitement vers le contenu principal ne dispense pas de traiter les autres zones. C’est l’erreur la plus fréquente en audit.
Un test pour vérifier l'identification correcte des grandes zones de la page
Landmark ARIA ou mécanisme d'accès rapide sur chaque zone
- Identifiez toutes les zones récurrentes présentes dans la page : en-tête, navigation principale, contenu principal, pied de page, moteur de recherche.
- Pour chaque zone identifiée, vérifiez qu’au moins une des conditions suivantes est remplie :
a. La zone possède un rôle ARIA landmark correspondant à sa nature (
role="banner",role="navigation",role="main",role="contentinfo",role="search"), ou une balise HTML5 sémantique équivalente (<header>,<nav>,<main>,<footer>) utilisée dans le bon contexte ; b. La zone est précédée directement, dans l’ordre du code source, d’un titre de hiérarchie dont le contenu décrit la nature de la zone ; c. La zone est précédée directement d’un bouton permettant de la masquer ; d. La zone est précédée directement d’un lien d’évitement ; e. La zone est accessible via un lien d’accès rapide visible par défaut ou visible à la prise de focus lors d’une tabulation. - Résultat : toutes les zones satisfont au moins une condition → test validé. Une seule zone n’en satisfait aucune → test échoué.
Exemples
❌ Non conforme : Zones structurelles sans mécanisme d’accès ni de saut
<div class="header">
<div class="logo"><img src="logo.png" alt="Mon site"></div>
<div class="nav">
<a href="/">Accueil</a>
<a href="/services">Services</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
</div>
</div>
<div class="main">
<h1>Bienvenue</h1>
<p>Contenu de la page.</p>
</div>
<div class="footer">
<p>© 2025 Mon site</p>
</div>Les zones sont délimitées par des <div> sans rôle ARIA et sans lien d’évitement. Un lecteur d’écran ne détecte aucune région navigable : l’utilisateur ne peut pas sauter directement à la navigation ou au contenu principal. Un utilisateur au clavier doit parcourir chaque lien du menu à chaque changement de page.
✅ Conforme : Zones avec landmarks ARIA et lien d’évitement
<a href="#contenu-principal" class="skip-link">Aller au contenu principal</a>
<header role="banner">
<nav role="navigation" aria-label="Navigation principale">
<a href="/">Accueil</a>
<a href="/services">Services</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main id="contenu-principal" role="main">
<h1>Bienvenue</h1>
<p>Contenu de la page.</p>
</main>
<footer role="contentinfo">
<p>© 2025 Mon site</p>
</footer>Chaque zone porte un rôle ARIA landmark : les lecteurs d’écran proposent une liste de régions navigables directement accessible via le raccourci dédié. Le lien d’évitement, premier élément focusable de la page, permet aux utilisateurs au clavier d’atteindre le contenu principal sans traverser la navigation. Les attributs role explicites s’ajoutent aux rôles implicites des balises HTML5 pour une couverture maximale.
Astuces et pièges
⚠️ Un lien d’évitement vers le contenu ne couvre pas toutes les zones
C’est l’erreur numéro un en audit : le développeur implémente <a href="#main">Aller au contenu</a> et considère le critère satisfait. Mais l’en-tête, la navigation, le pied de page et le moteur de recherche n’ont toujours aucun mécanisme d’accès. Le critère 12.6 exige une solution pour chacune des zones présentes sur plusieurs pages, pas seulement pour le contenu principal.
⚠️ Le lien d’évitement masqué avec display:none ne fonctionne pas
Un lien d’évitement caché par display:none ou visibility:hidden est ignoré par les technologies d’assistance et n’est pas activable au clavier. La technique correcte consiste à positionner le lien hors de l’écran (par exemple position:absolute; left:-9999px) et à le ramener dans le flux visible uniquement à la prise de focus via :focus { position:static }. Pour vérifier le bon fonctionnement, appuyez sur Tab immédiatement après le chargement de la page.
💡 Les balises HTML5 sémantiques fournissent les rôles ARIA implicitement
<header> porte role="banner", <nav> porte role="navigation", <main> porte role="main", <footer> porte role="contentinfo". Si votre gabarit utilise ces balises correctement, la majorité des zones sont déjà couvertes sans ajouter un seul attribut ARIA. Attention toutefois : <footer> imbriqué dans <article> ou <section> perd son rôle implicite contentinfo et redevient un élément générique.
⚠️ Plusieurs zones <nav> sur la même page : les distinguer avec aria-label
Si la page contient plusieurs zones de navigation (menu principal, fil d’Ariane, navigation de pied de page), chaque <nav> doit porter un aria-label distinct. Sans cela, un lecteur d’écran liste plusieurs régions intitulées « Navigation » et l’utilisateur ne sait pas laquelle correspond à la navigation principale. Le critère 12.6 ciblant spécifiquement la navigation principale, nommez-la explicitement : aria-label="Navigation principale".
⚠️ role="search" n’a pas d’équivalent HTML5 natif universellement supporté
Contrairement à <main> ou <nav>, il n’existe pas de balise HTML ayant role="search" implicitement avec un support généralisé. Pour identifier une zone de moteur de recherche, ajoutez explicitement role="search" sur l’élément conteneur du formulaire : <form role="search"> ou <div role="search">. Sans cela, la zone de recherche n’est pas détectée comme région par les lecteurs d’écran.
Questions fréquentes
Quand les balises HTML5 <main> ou <nav> nécessitent-elles un role ARIA explicite selon le RGAA ?
Les balises HTML5 sémantiques suffisent dans la grande majorité des cas : <header>, <nav>, <main> et <footer> portent leurs rôles ARIA implicitement et sont acceptées par le RGAA. Ajouter role="main" sur un <main> est redondant mais pas incorrect. Ajoutez les rôles explicites uniquement si vous utilisez des <div> ou <span> à la place des balises sémantiques, ou si vous devez couvrir des navigateurs qui ne mappent pas correctement les éléments HTML5 vers leurs rôles ARIA.
Quel rôle ARIA possède un <footer> imbriqué dans un <article> selon le RGAA ?
Non. <footer> ne possède le rôle implicite contentinfo que lorsqu’il est descendant direct de <body>, en dehors de tout <article>, <section>, <aside> ou <nav>. Dans ces contextes imbriqués, <footer> devient un élément générique sans rôle landmark. Si votre pied de page structurel se trouve dans une telle imbrication, ajoutez role="contentinfo" explicitement sur l’élément.
Comment auditer le critère RGAA 12.6 sur les zones de regroupement sans lecteur d'écran ?
Trois vérifications suffisent pour un premier diagnostic : (1) inspectez le code source et cherchez role="banner", role="navigation", role="main", role="contentinfo", role="search" ou leurs équivalents HTML5 ; (2) appuyez sur Tab dès le chargement de la page et vérifiez qu’un lien d’évitement apparaît, puis activez-le et confirmez que le focus atterrit bien sur la cible ; (3) utilisez l’onglet « Accessibility » des DevTools Chrome ou Includdy pour visualiser les régions détectées.
Comment le critère RGAA 12.6 s'applique-t-il aux pages sans navigation récurrente, comme une landing page ?
Non, dans ce cas précis. Le critère vise les zones « présentes dans plusieurs pages web ». Une zone absente d’une page n’est pas concernée pour cette page. Si votre landing page ne comporte ni navigation principale ni moteur de recherche, ces zones sont hors périmètre. Seules les zones effectivement présentes et récurrentes doivent satisfaire l’une des cinq méthodes admises.
Quelle différence y a-t-il entre un titre <h2> et un attribut ARIA pour identifier une zone de regroupement ?
Oui, sous deux conditions : le contenu du titre doit permettre de comprendre la nature de la zone (par exemple <h2>Navigation principale</h2>), et le titre doit précéder directement la zone dans l’ordre du code source. Cette méthode est moins pratique qu’un landmark ARIA car elle contraint l’utilisateur à naviguer titre par titre, mais elle est valide au sens du RGAA 12.6.1.