Landmarks

Les landmarks sont des régions sémantiques qui définissent la structure principale d’une page web.

Les principaux landmarks à utiliser sont :

• Header (<header role="banner">) : en-tête principal de la page
• Navigation (<nav role="navigation">) : menu de navigation
• Main (<main role="main">) : contenu principal
• Footer (<footer role="contentinfo">) : pied de page
• Aside (<aside>) : contenu annexe
• Search (<div role="search">) : zone de recherche

Bonnes pratiques

• Utiliser les balises HTML5 sémantiques appropriées (<header>, <nav>, <main>, etc.)
• Ajouter les rôles ARIA correspondants pour une meilleure compatibilité
• Donner des noms accessibles aux landmarks avec aria-label ou aria-labelledby
• S’assurer que tout le contenu est inclus dans des landmarks
• Éviter les landmarks dupliqués, sauf pour la navigation

Les landmarks sont essentiels pour créer des sites web accessibles, ergonomiques et bien structurés.

Syn. : zones