Le rôleheading définit cet élément comme un en-tête d'une page ou d'une section, avec l'attributaria-level fournissant une structure supplémentaire.

Description

Le rôleheading 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é pararia-level="1", indique généralement l'en-tête principal d'une page, un en-tête de niveau 2, défini pararia-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'attributaria-level. Optez plutôt pour l'utilisation de l'élémenth1 (à traversh6).

<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'attributaria-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 unevaleur 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'attributsaria-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>  <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>  <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ôleheading et l'attributaria-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 dene pas l'utiliser du tout, et d'utiliser plutôt les balises d'en-tête nativesh1 à traversh6 comme montré dans l'exemple ci-dessus. Le rôleheading et l'attributaria-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 ARIAheading, 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'attributaria-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