region
Landmark générique pour le contenu qui ne correspond pas à banner, main, navigation, complementary ou contentinfo — mais qui est suffisamment important pour y accéder par navigation. Un <section> devient un landmark region uniquement lorsqu'il possède un nom accessible.
Quand l’utiliser
Pour une section de page importante qui ne correspond à aucun autre landmark et vers laquelle les utilisateurs de lecteur d’écran doivent pouvoir se rendre directement : un rail « Produits en vedette », l’étape courante d’un formulaire en plusieurs étapes, une région de transcript de chat dans une application plus large.
<section> est exposé comme landmark region UNIQUEMENT lorsqu’il possède un nom accessible (aria-label ou aria-labelledby). Un <section> sans nom est simplement un groupe générique — sans exposition comme landmark. C’est voulu : trop de landmarks rend le menu des landmarks inutile.
role="region" sur un <div> fonctionne de la même façon — un nom est requis.
Quand utiliser region plutôt que group
Utiliser role="region" (ou <section aria-label>) | Utiliser role="group" |
|---|---|
| Section de page principale méritant une navigation par landmark | Regroupement de contrôles liés sans statut de landmark |
| Une ou deux occurrences par page | Peut en avoir plusieurs par page |
| Toujours pourvu d’un nom accessible | Nom facultatif |
En cas de doute : posez-vous la question « voudrais-je qu’un utilisateur de lecteur d’écran puisse se rendre directement ici ? » Si oui, region. Si non, group.
Erreurs fréquentes
<section>sansaria-labelniaria-labelledby. Pas un landmark ; la balise ne fait rien pour l’accessibilité.- Marquer chaque
<section>comme region. Cela surcharge le menu des landmarks et en dilue la valeur. aria-label="Section"— sans signification. Le label doit décrire ce qui rend cette section distincte.- Utiliser
role="region"pour une barre latérale — c’estcomplementary. Choisissez le landmark le plus spécifique. role="region"sur le<div>englobant ET sur un<section>intérieur — landmarks dupliqués pour le même contenu.
Exemple
<section aria-labelledby="recent">
<h2 id="recent">Recently published</h2>
<ul>
<li><a href="/articles/aria-roles">ARIA roles overview</a></li>
<li><a href="/articles/wcag-22">WCAG 2.2 changes</a></li>
</ul>
</section>