aria-level

Quand l’utiliser

Sur role="heading" pour déclarer la profondeur du titre — l’équivalent ARIA du choix entre <h1> et <h6>. Les éléments de titre natifs doivent rester votre option par défaut ; n’utilisez role="heading" + aria-level que lorsque vous avez besoin d’un niveau supérieur à 6, ou lorsque vous êtes contraint par un framework qui ne vous permet pas d’utiliser directement un élément de titre.

Également valide sur role="treeitem" (profondeur dans l’arborescence, à partir de 1 pour les éléments de premier niveau) et sur role="listitem" dans un role="list" imbriqué lorsque l’imbrication n’est pas exprimée par la structure du DOM.

Comportement

La valeur est un entier positif. Pour les titres, 1 à 6 correspondent à <h1>–<h6> ; les valeurs supérieures à 6 sont valides en ARIA, mais peu de lecteurs d’écran les exposent, donc ne comptez pas sur le niveau 7 étant annoncé comme tel.

Pour les éléments d’arborescence, le niveau est la profondeur : la racine d’une arborescence est au niveau 1, ses enfants directs au niveau 2, et ainsi de suite. Le numéro de niveau permet à l’utilisateur d’un lecteur d’écran de comprendre où il se trouve dans la hiérarchie sans voir l’indentation.

L’attribut ne modifie pas la mise en forme visuelle. Si votre « titre ARIA de niveau 4 » doit ressembler à un h4, vous le stylisez vous-même.

Erreurs fréquentes

• Utiliser role="heading" avec aria-level="3" au lieu de simplement <h3>. L’élément natif vous donne le rôle, le niveau, la navigation clavier par défaut et l’intégration dans le plan du document gratuitement.
• Définir aria-level sur un élément sans role="heading", role="treeitem" ou role="listitem". L’attribut n’a aucun effet, par exemple, sur un <button> ou un <div> sans rôle.
• Sauter un niveau — un niveau 2 suivi d’un niveau 4 perturbe le plan du document et déclenche des alertes lors des audits du critère de succès 1.3.1.
• Des éléments d’arborescence avec un niveau incorrect : chaque enfant d’un élément de niveau 2 doit être au niveau 3. Les erreurs d’un niveau brisent les annonces « monté d’un niveau » / « descendu d’un niveau ».
• Des valeurs non entières ou nulles. Seuls les entiers positifs sont valides ; aria-level="0" est ignoré.
• Oublier de mettre à jour aria-level lorsque des éléments sont déplacés dans une arborescence glissable.

Exemple

<!-- Titre plus profond que h6 (rare ; nécessaire dans les plans complexes) -->
<div role="heading" aria-level="7">Sous-sous-sous-section</div>

<!-- Les éléments d'arborescence expriment la profondeur via aria-level -->
<ul role="tree">
  <li role="treeitem" aria-level="1" aria-expanded="true">
    Documents
    <ul>
      <li role="treeitem" aria-level="2">Factures</li>
      <li role="treeitem" aria-level="2">Contrats</li>
    </ul>
  </li>
</ul>