aria-level

Wanneer te gebruiken

Op role="heading" om de diepte van de koptekst te declareren — het ARIA-equivalent van het kiezen van <h1>–<h6>. Native heading-elementen verdienen de voorkeur; gebruik role="heading" + aria-level alleen wanneer een niveau hoger dan 6 nodig is, of wanneer een framework het gebruik van een heading-element direct verhindert.

Ook geldig op role="treeitem" (diepte in de boom, beginnend bij 1 voor items op het hoogste niveau) en op role="listitem" in een geneste role="list" wanneer de nesting niet door de DOM-structuur wordt uitgedrukt.

Gedrag

De waarde is een positief geheel getal. Voor kopteksten komt 1–6 overeen met <h1>–<h6>; waarden boven 6 zijn geldig in ARIA, maar slechts enkele schermlezers geven ze weer, dus wees niet afhankelijk van een aankondiging van niveau 7 als zodanig.

Voor tree-items is het niveau de diepte: de wortel van een boom is niveau 1, de directe kinderen zijn niveau 2, enzovoort. Het niveaugetal laat een schermlezergebruiker begrijpen waar men zich in de hiërarchie bevindt, zonder de inspringing te zien.

Het attribuut verandert de visuele opmaak niet. Als een “ARIA-koptekstniveau 4” er als een h4 moet uitzien, moet dit zelf worden opgemaakt.

Veelvoorkomende fouten

• role="heading" plus aria-level="3" gebruiken in plaats van gewoon <h3>. Het native element geeft gratis de role, het niveau, standaard toetsenbordnavigatie en documentstructuurintegratie.
• aria-level instellen op een element zonder role="heading", role="treeitem" of role="listitem". Het attribuut heeft geen effect op, bijvoorbeeld, een <button> of een <div> zonder role.
• Een niveau overslaan — een niveau 2 gevolgd door een niveau 4 verstoort de documentstructuur en veroorzaakt problemen bij SC 1.3.1-audits.
• Tree-items met het verkeerde niveau: elk kind van een niveau-2-item moet niveau 3 zijn. Off-by-one-fouten hier verbreken de aankondigingen “een niveau omhoog gegaan” / “een niveau omlaag gegaan”.
• Niet-gehele of nulwaarden. Alleen positieve gehele getallen zijn geldig; aria-level="0" wordt genegeerd.
• Vergeten aria-level bij te werken wanneer items in een versleepbare boom worden verplaatst.

Voorbeeld

<!-- Koptekst dieper dan h6 (zeldzaam; nodig in complexe structuren) -->
<div role="heading" aria-level="7">Sub-sub-sub-sectie</div>

<!-- Tree-items drukken diepte uit via aria-level -->
<ul role="tree">
  <li role="treeitem" aria-level="1" aria-expanded="true">
    Documenten
    <ul>
      <li role="treeitem" aria-level="2">Facturen</li>
      <li role="treeitem" aria-level="2">Contracten</li>
    </ul>
  </li>
</ul>