ARIA : rôle region

Description

Le rôle region est un repère ARIA. Il doit être réservé aux sections de contenu suffisamment importantes pour que les utilisateur·ice·s veuillent pouvoir y accéder facilement et les retrouver dans un résumé de la page. Le rôle region est un terme générique, à utiliser uniquement si la section à identifier ne correspond pas à un autre rôle de repère, comme banner, main, contentinfo, complementary ou navigation.

Chaque élément avec le rôle region doit inclure un label décrivant la finalité du contenu, de préférence via aria-labelledby référant à un titre visible. Si aucun titre visible n'est présent, utilisez aria-label.

Le contenu d'un repère region doit avoir du sens s'il est séparé du contenu principal du document.

L'utilisation de l'élément <section> communique automatiquement qu'une section possède le rôle region si elle a un nom accessible. Il est toujours préférable d'utiliser l'élément HTML sémantique approprié, ici <section>, plutôt que d'utiliser ARIA.

Propriétés, états et rôles WAI-ARIA associés

• aria-labelledby ou aria-label - : Utilisez cet attribut pour labelliser la région. Souvent, la valeur de aria-labelledby sera l'identifiant de l'élément titrant la section. Si aucun titre visible n'est présent, utilisez aria-label.

Exemples

<div role="region" aria-labelledby="region-heading">
  <h2 id="region-heading">
    L'attribut `id` de ce titre permet à la région d'avoir un nom accessible
  </h2>
  <!-- contenu de la région -->
</div>

Problèmes d'accessibilité

À utiliser avec parcimonie ! Les rôles de repère sont conçus pour identifier les grandes sections du document. En utiliser trop peut créer du « bruit » pour les lecteur·ice·s d'écran, rendant la compréhension de la structure globale plus difficile.

N'utilisez le rôle region que si aucun autre élément de sectionnement de contenu ou rôle de repère pertinent ne s'applique. Si plusieurs régions existent sur une page, il peut être utile de revoir la structure globale du document.

Bonnes pratiques

Privilégier le HTML

L'utilisation de l'élément HTML <section> communique automatiquement que l'élément possède le rôle region s'il a un nom accessible. Si possible, préférez utiliser l'élément sémantique <section> à la place du rôle region.

Labelliser les repères

S'il y a plus d'un repère region dans un document, fournissez un label unique à chacun. Ce label permet à l'utilisateur·ice de technologie d'assistance de comprendre rapidement la finalité de chaque repère.

<div role="region" aria-labelledby="use-discretion">
  <h3 id="use-discretion">
    Veuillez utiliser le rôle `region` avec discernement
  </h3>
  <!-- contenu -->
</div>

…

<div role="region" aria-labelledby="please-reconsider">
  <h3 id="please-reconsider">
    Veuillez reconsidérer la structure de votre document
  </h3>
  <!-- contenu -->
</div>

Dans cet exemple, le label de la région est généré par l'attribut aria-labelledby.

Zones de contenu défilantes avec texte débordant

Si une zone de contenu possède tabindex="0", ajoutez role="region" pour indiquer aux utilisateur·ice·s de lecteur d'écran qu'il s'agit d'une région générique. Cela permet aux utilisateur·ice·s clavier de faire défiler les régions avec du texte débordant.

SVG

role="region" peut être déclaré sur des zones de <svg> avec un aria-label pour permettre de décrire chaque section de l'image SVG.

Spécifications

Voir aussi

• L'élément HTML <section>
• ARIA : rôle banner
• ARIA : rôle main
• ARIA : rôle contentinfo
• ARIA : rôle complementary
• ARIA : rôle navigation
• Rôles de repère : Utiliser ARIA : rôles, états et propriétés
• Utiliser les repères WAI-ARIA - 2013 | The Paciello ^(angl.) Group
• Repères accessibles | scottohara.me ^(angl.)