ARIA : rôle heading

Description

Le rôle heading indique aux technologies d'assistance que cet élément doit être traité comme un en-tête. Les lecteurs d'écran liraient le texte et indiqueraient qu'il est formaté comme un en-tête. De plus, le niveau indique aux technologies d'assistance quelle partie de la structure de la page cet en-tête représente. Un en-tête de niveau 1, indiqué par aria-level="1", indique généralement l'en-tête principal d'une page, un en-tête de niveau 2, défini par aria-level="2", la première sous-section, un niveau 3 est une sous-section de cela, et ainsi de suite.

<div role="heading" aria-level="1">Ceci est un en-tête principal de page</div>

Ceci définit le texte dans le <div> comme étant l'en-tête principal de la page, indiqué par le niveau 1 via l'attribut aria-level. Optez plutôt pour l'utilisation de l'élément h1 (à travers h6).

<h1>Ceci est un en-tête principal de page</h1>

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

aria-level

L'attribut aria-level spécifie le niveau de l'en-tête dans la structure du document. Cet attribut est requis : les auteurs doivent indiquer le niveau d'imbrication approprié pour garantir que les éléments ayant un rôle d'en-tête sont organisés dans un plan logique. Si l'attribut est erronément omis, les navigateurs utiliseront une valeur de secours de 2 ^(angl.).

Interactions au clavier

Ce rôle ne nécessite pas de navigation au clavier spéciale. Comme pour tout en-tête, lui donner un ID garantit qu'il peut être référencé à partir de liens d'ancrage, le rendant accessible via le clavier.

Fonctionnalités JavaScript requises

Gestionnaires d'événements requis

Aucun.

Changer les valeurs des attributs

Généralement pas nécessaire, sauf si le contenu est inséré dynamiquement. Dans ce cas, les nouveaux en-têtes ont besoin d'attributs aria-level dont les valeurs sont cohérentes avec le reste de la structure du document.

Exemples

L'exemple suivant montre une structure de page typique.

<div id="container">
  <div role="heading" aria-level="1">L'en-tête principal de la page</div>
  <p>Cet article traite de la structure d'une page.</p>
  <div role="heading" aria-level="2">Introduction</div>
  <p>Un texte d'introduction.</p>
  <div role="heading" aria-level="2">Chapitre 1</div>
  <p>Texte</p>
  <div role="heading" aria-level="3">Chapitre 1.1</div>
  <p>Plus de texte dans une sous-section.</p>
</div>

Cependant, vous devriez plutôt faire :

<div id="container">
  <h1>L'en-tête principal de la page</h1>
  <p>Cet article traite de la structure d'une page.</p>
  <h2>Introduction</h2>
  <p>Un texte d'introduction.</p>
  <h2>Chapitre 1</h2>
  <p>Texte</p>
  <h3>Chapitre 1.1</h3>
  <p>Plus de texte dans une sous-section.</p>
</div>

Problèmes d'accessibilité

Si vous devez utiliser le rôle heading et l'attribut aria-level, ne dépassez pas le niveau 6 afin de rester cohérent avec HTML. Bien qu'en théorie vous puissiez aller plus haut, et que certains lecteurs d'écran puissent le prendre en charge, les résultats peuvent être imprévisibles avec d'autres combinaisons de navigateurs et de lecteurs d'écran.

Bonnes pratiques

La meilleure façon d'utiliser ce rôle est de ne pas l'utiliser du tout, et d'utiliser plutôt les balises d'en-tête natives h1 à travers h6 comme montré dans l'exemple ci-dessus. Le rôle heading et l'attribut aria-level ne devraient être utilisés que pour adapter l'accessibilité sur du code hérité que vous ne pouvez pas modifier en profondeur.

Au lieu d'utiliser le rôle ARIA heading, utilisez l'élément HTML sémantique :

Avantages supplémentaires

Aucun.

Spécifications

Ordre de priorité

Le rôle d'en-tête remplace la signification sémantique native de l'élément pour lequel il est utilisé. L'attribut aria-level, en plus, détermine quel niveau d'en-tête est exposé.

Voir aussi

• <h1> à <h6> : Les éléments de titre de section HTML