Critère 12.6
Zones de regroupement
Les zones principales (en-tête, navigation, contenu, pied de page) doivent être identifiées et contournables.
En Bref : L'essentiel à retenir
- L'objectif est de faciliter la navigation des utilisateurs de lecteurs d'écran entre les principales zones d'une page web.
- La solution technique repose sur l'utilisation des rôles ARIA Landmarks, comme `role="banner"` pour `<header>` et `role="main"` pour `<main>`.
- Il est recommandé d'utiliser des balises HTML5 sémantiques qui ont des rôles implicites pour une meilleure accessibilité.
- Pour plusieurs éléments `<nav>`, il est essentiel d'utiliser l'attribut `aria-label` afin de les différencier clairement.
Objectif
Permettre aux utilisateurs de lecteurs d'écran de naviguer rapidement entre les grandes zones de la page (Landmarks).
Solution Technique
1. Rôles ARIA Landmarks
Utilisez les balises HTML5 sémantiques qui ont des rôles implicites.
<header>->role="banner"<nav>->role="navigation"<main>->role="main"<footer>->role="contentinfo"<aside>->role="complementary"<form role="search">->role="search"
2. Étiquetage
Si vous avez plusieurs <nav>, distinguez-les avec aria-label.
<nav aria-label="Menu principal">...</nav>
<nav aria-label="Pagination">...</nav>