Zone de regroupement
Dans le vocabulaire du RGAA, une zone de regroupement désigne une grande section structurelle d'une page web : en-tête, navigation, contenu principal, pied de page. Elle doit être balisée avec un élément HTML5 sémantique pour que les lecteurs d'écran puissent proposer un accès direct à chaque section.
Ouvrez votre site dans un lecteur d'écran. Appuyez sur D dans NVDA ou faites pivoter le rotor VoiceOver sur «\u00a0Repères\u00a0». Si la liste reste vide, vos visiteurs doivent parcourir chaque ligne de HTML, du premier logo jusqu'au dernier lien du pied de page. Le RGAA désigne ces sections manquantes par un terme précis\u00a0: «\u00a0zone de regroupement\u00a0».
#Ce que le RGAA attend
Le glossaire du RGAA définit la zone de regroupement comme une grande région structurelle de la page\u00a0: en-tête, navigation principale, contenu, pied de page, zone complémentaire.
Le critère 12.6 exige que chacune de ces zones soit identifiable par les technologies d'assistance. La méthode la plus directe\u00a0: utiliser les balises HTML5 sémantiques.
<body>
<header><!-- en-tête du site --></header>
<nav><!-- navigation principale --></nav>
<main><!-- contenu de la page --></main>
<aside><!-- contenu complémentaire --></aside>
<footer><!-- pied de page --></footer>
</body>Ces balises créent des landmarks que les lecteurs d'écran exposent dans leur liste de régions. Ajouter role="banner" sur un <header> est redondant.
Les zones de regroupement complètent les liens d'évitement. Un lien «\u00a0Aller au contenu principal\u00a0» saute un bloc en un clic. Les landmarks vont plus loin\u00a0: ils permettent de naviguer librement entre toutes les sections, dans n'importe quel ordre.
Un détail que beaucoup de développeurs ignorent\u00a0: un <header> imbriqué dans un <article> ou un <section> ne crée pas de landmark banner. Même règle pour <footer> et contentinfo. Seuls les enfants directs de <body> comptent.
#Le piège du contenu orphelin
Le problème le plus courant sur le critère 12.6 n'est pas l'absence totale de balises sémantiques. C'est le contenu orphelin. Un bandeau promotionnel glissé entre </header> et <main>. Un formulaire de recherche qui flotte hors de tout conteneur.
Le W3C recommande que tout le contenu perceptible réside dans une zone de regroupement. Ce qui n'est dans aucun landmark disparaît de la navigation par régions.
Autre erreur fréquente\u00a0: deux <nav> sans distinction. Le lecteur d'écran annonce «\u00a0navigation\u00a0» deux fois, sans préciser laquelle est le menu principal et laquelle le fil d'Ariane. Un aria-label sur chaque élément lève l'ambiguïté\u00a0:
<nav aria-label="Menu principal">...</nav>
<nav aria-label="Fil d'Ariane">...</nav>#En résumé
Utilisez <header>, <nav>, <main>, <aside> et <footer> comme enfants directs de <body>. Placez tout le contenu visible dans l'une de ces zones. Étiquetez avec aria-label quand un même type de zone apparaît plusieurs fois.