aria-level

Description

aria-level précise le niveau hiérarchique d’un élément dans une structure. La valeur est un entier positif (1, 2, 3…). Il est surtout utilisé avec role="heading" quand il n’est pas possible d’utiliser les éléments natifs <h1>–<h6>, ou avec role="treeitem" dans une arborescence.

Syntaxe

<div role="heading" aria-level="2">Titre de niveau 2</div>
<div role="treeitem" aria-level="1" aria-expanded="true">Dossier racine</div>

Exemples

Titres dans un éditeur de contenu :

<div role="heading" aria-level="1">Titre principal</div>
<div role="heading" aria-level="2">Sous-titre</div>
<div role="heading" aria-level="3">Sous-sous-titre</div>

Arborescence imbriquée :

<ul role="tree">
  <li role="treeitem" aria-level="1" aria-expanded="true">
    Documents
    <ul role="group">
      <li role="treeitem" aria-level="2">Rapport 2024.pdf</li>
      <li role="treeitem" aria-level="2">Budget.xlsx</li>
    </ul>
  </li>
</ul>

Notes

Préférer les éléments natifs : <h1>–<h6> portent implicitement leur niveau ARIA. N’utiliser aria-level que pour des widgets personnalisés ne pouvant pas utiliser ces éléments.

Valeur minimale : 1. La valeur 0 ou négative est invalide.

Ne pas sauter de niveaux : maintenir une hiérarchie cohérente (1 → 2 → 3…) pour ne pas désorienter les utilisateurs de lecteurs d’écran qui naviguent par titres.