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 <section> communique automatiquement qu'une section possède le rôle region si elle a un nom accessible. Privilégiez autant que possible must be provided 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.)