Rôles ARIA Landmark : Guide complet pour Structurer vos Pages
En Bref : L'essentiel à retenir
- Les landmarks ARIA permettent aux utilisateurs de lecteurs d'écran de naviguer rapidement entre les grandes sections d'une page.
- Privilégiez les éléments HTML5 sémantiques (main, nav, header, footer) qui ont des rôles landmark implicites.
- Si vous utilisez plusieurs landmarks du même type, différenciez-les avec aria-label ou aria-labelledby.
- N'utilisez jamais role="landmark" directement - utilisez les sous-types spécifiques (main, navigation, banner, etc.).
Les rôles ARIA landmark sont des repères qui permettent aux technologies d'assistance d'identifier les grandes zones d'une page web. Bien utilisés, ils transforment la navigation d'un utilisateur de lecteur d'écran.
Qu'est-ce qu'un landmark ?
Un landmark (ou "région repère") est une section significative de la page que les utilisateurs peuvent vouloir atteindre directement. Les lecteurs d'écran permettent de lister tous les landmarks et de naviguer de l'un à l'autre avec des raccourcis clavier.
Bénéfices pour les utilisateurs
- Gain de temps : Accès direct aux sections importantes
- Orientation : Savoir où l'on se trouve dans la page
- Navigation efficace : Passer du contenu principal au pied de page en un clic
Les landmarks principaux
role="main"
Identifie le contenu principal de la page. Une seule occurrence par page.
<!-- Élément HTML5 avec rôle implicite -->
<main>
<h1>Titre de la page</h1>
<!-- Contenu principal -->
</main>
<!-- Alternative avec ARIA explicite -->
<div role="main">
<!-- Contenu principal -->
</div>
role="navigation"
Identifie une zone de navigation contenant des liens.
<!-- Élément HTML5 (recommandé) -->
<nav aria-label="Navigation principale">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/services">Services</a></li>
</ul>
</nav>
<!-- Si plusieurs navigations, différenciez-les -->
<nav aria-label="Navigation principale">...</nav>
<nav aria-label="Navigation de pied de page">...</nav>
role="banner"
Identifie l'en-tête du site (logo, navigation principale, recherche). Une seule occurrence par page au niveau global.
<!-- Élément HTML5 avec rôle implicite -->
<header>
<a href="/"><img src="logo.png" alt="RGAA Checker - Accueil"></a>
<nav>...</nav>
</header>
[!NOTE] Un
<header>à l'intérieur d'un<article>ou<section>n'a PAS le rôle banner implicite.
role="contentinfo"
Identifie le pied de page avec les informations du site (mentions légales, contact, liens secondaires). Une seule occurrence par page.
<!-- Élément HTML5 avec rôle implicite -->
<footer>
<p>2026 RGAA Checker. Tous droits réservés.</p>
<nav aria-label="Liens légaux">...</nav>
</footer>
role="complementary"
Identifie un contenu complémentaire mais distinct du contenu principal (sidebar, widgets).
<!-- Élément HTML5 avec rôle implicite -->
<aside aria-label="Articles connexes">
<h2>À lire aussi</h2>
<ul>...</ul>
</aside>
role="search"
Identifie une fonctionnalité de recherche.
<form role="search" aria-label="Recherche sur le site">
<label for="search">Rechercher</label>
<input type="search" id="search" name="q">
<button type="submit">Rechercher</button>
</form>
<!-- HTML5.2 : élément search (support limité) -->
<search>
<form>...</form>
</search>
role="region"
Identifie une section générique importante. Doit toujours avoir un nom accessible.
<section aria-labelledby="stats-titre">
<h2 id="stats-titre">Statistiques du mois</h2>
<!-- Contenu -->
</section>
HTML5 vs ARIA explicite
Éléments HTML5 avec rôles implicites
| Élément HTML5 | Rôle ARIA implicite | Condition |
|---|---|---|
<main> | main | Toujours |
<nav> | navigation | Toujours |
<header> | banner | Si pas dans article/section |
<footer> | contentinfo | Si pas dans article/section |
<aside> | complementary | Toujours |
<section> | region | Si nom accessible présent |
<form> | form | Si nom accessible présent |
Recommandation
Privilégiez toujours les éléments HTML5 sémantiques. Ils sont mieux supportés et plus simples à maintenir.
<!-- Recommandé -->
<header>...</header>
<main>...</main>
<footer>...</footer>
<!-- À éviter (sauf contrainte technique) -->
<div role="banner">...</div>
<div role="main">...</div>
<div role="contentinfo">...</div>
Bonnes pratiques
Nommer les landmarks multiples
Si vous avez plusieurs landmarks du même type, différenciez-les :
<!-- INCORRECT : deux nav sans distinction -->
<nav>Menu principal</nav>
<nav>Menu de pied de page</nav>
<!-- CORRECT : labels uniques -->
<nav aria-label="Menu principal">...</nav>
<nav aria-label="Liens utiles">...</nav>
Ne pas décrire le type dans le label
Le lecteur d'écran annonce déjà le type de landmark :
<!-- INCORRECT : redondant -->
<nav aria-label="Navigation principale">
<!-- Annonce : "Navigation principale navigation" -->
<!-- CORRECT -->
<nav aria-label="Menu principal">
<!-- Annonce : "Menu principal navigation" -->
Structure type complète
<!DOCTYPE html>
<html lang="fr">
<head>...</head>
<body>
<header>
<a href="/">Logo</a>
<nav aria-label="Menu principal">
<ul>...</ul>
</nav>
<form role="search" aria-label="Recherche">
<input type="search">
<button>Rechercher</button>
</form>
</header>
<main>
<h1>Titre de la page</h1>
<article>...</article>
</main>
<aside aria-label="Contenus connexes">
<h2>À voir aussi</h2>
<ul>...</ul>
</aside>
<footer>
<nav aria-label="Liens légaux">
<a href="/mentions-legales">Mentions légales</a>
<a href="/confidentialite">Politique de confidentialité</a>
</nav>
<p>2026 Mon Site</p>
</footer>
</body>
</html>
Tester vos landmarks
Avec un lecteur d'écran
NVDA : Touche Insert + F7 > Liste des régions VoiceOver : VO + U > Rotor > Régions JAWS : Insert + Ctrl + R > Liste des régions
Outils de développement
- Extension Landmarks pour Firefox/Chrome
- RGAA Checker : Analyse des landmarks
- axe DevTools : vérification des rôles ARIA
[!TIP] Consultez notre guide de test avec lecteurs d'écran pour maîtriser ces outils.
Erreurs courantes
role="landmark" direct
<!-- INCORRECT -->
<div role="landmark">...</div>
<!-- CORRECT : utiliser un sous-type -->
<div role="main">...</div>
Landmarks sans nom quand nécessaire
<!-- INCORRECT : section sans nom -->
<section>
<h2>Statistiques</h2>
</section>
<!-- N'est pas reconnu comme landmark -->
<!-- CORRECT -->
<section aria-labelledby="stats">
<h2 id="stats">Statistiques</h2>
</section>
Trop de landmarks
Évitez de tout transformer en landmark. Réservez-les aux sections vraiment significatives.
Conclusion
Les rôles ARIA landmark sont un outil puissant pour améliorer la navigation des utilisateurs de technologies d'assistance. En utilisant les éléments HTML5 sémantiques et en nommant correctement vos landmarks multiples, vous créez une structure de page claire et navigable.
Pour vérifier votre structure de landmarks, utilisez notre outil d'audit RGAA qui détecte les landmarks manquants et mal configurés.
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
Chaque champ de formulaire doit avoir une étiquette (label) qui lui est liée explicitement.
Chaque image porteuse d'information doit avoir une alternative textuelle pertinente via l'attribut alt. Les images décoratives doivent avoir un attribut alt vide.
Dans chaque page web, un lien d'évitement ou d'accès rapide au contenu principal doit être présent, visible au focus, et placé en premier élément focusable.
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.