🗺️ Schéma d'Organisation des Landmarks
Organisation logique : Les landmarks structurent votre page de manière prévisible pour les utilisateurs de lecteurs d'écran. Voici comment les organiser dans l'ordre d'apparition dans le DOM.
📋 Schéma Visuel d'une Page Type
Légende du schéma
Contenu principal de la page
Contenu secondaire, sidebar
Informations sur le document
🔢 Ordre d'Apparition dans le DOM
🏠 Banner / Header
<header role="banner">
<h1>Nom du site</h1>
<!-- Logo, slogan, infos générales -->
</header>
Position : Tout en haut de la page
Contenu : Logo, titre du site, informations générales
Unicité : Un seul par page
🧭 Navigation
<nav role="navigation" aria-label="Menu principal">
<ul>
<li><a href="/accueil">Accueil</a></li>
<li><a href="/produits">Produits</a></li>
</ul>
</nav>
Position : Généralement après le header ou intégré dedans
Contenu : Menu principal, liens de navigation
Multiplicité : Plusieurs possibles avec des labels distincts
📍 Main (Contenu Principal)
<main role="main">
<h1>Titre de la page</h1>
<!-- Contenu principal unique à cette page -->
</main>
Position : Zone centrale de la page
Contenu : Contenu principal spécifique à cette page
Unicité : Un seul par page (obligatoire)
📦 Complementary (Optionnel)
<aside role="complementary" aria-label="Articles liés">
<h2>Articles similaires</h2>
<!-- Contenu complémentaire -->
</aside>
Position : Sidebar, zone latérale
Contenu : Informations complémentaires, widgets
Multiplicité : Plusieurs possibles avec des labels distincts
📄 Contentinfo / Footer
<footer role="contentinfo">
<p>© 2025 Mon Site</p>
<!-- Liens légaux, contact, etc. -->
</footer>
Position : Tout en bas de la page
Contenu : Copyright, mentions légales, contact
Unicité : Un seul par page
🎮 Landmarks Interactifs
Cliquez sur les zones ci-dessous pour voir les landmarks en action :
📍 Contenu Principal
Le contenu unique de cette page...
📦 Sidebar
Contenu complémentaire
✅ Bonnes Pratiques pour les Landmarks
🎯 Règle 1 : Un seul main par page
✅ Correct
<main>
<h1>Page d'accueil</h1>
<!-- Tout le contenu principal -->
</main>
❌ Incorrect
<main>Section 1</main>
<main>Section 2</main>
Plusieurs main créent de la confusion
🏷️ Règle 2 : Labellisez les landmarks multiples
✅ Correct
<nav aria-label="Menu principal">...</nav>
<nav aria-label="Fil d'Ariane">...</nav>
<nav aria-label="Pagination">...</nav>
❌ Incorrect
<nav>Menu</nav>
<nav>Breadcrumb</nav>
<nav>Pages</nav>
Impossible de distinguer les navigations
🔄 Règle 3 : Préférez HTML sémantique
✅ Recommandé
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
❌ À éviter
<div role="banner">...</div>
<div role="navigation">...</div>
<div role="main">...</div>
HTML sémantique est plus simple et robuste