aria-level

Hvornår bruges den

På role="heading" for at angive overskriftens dybde — ARIA-ækvivalenten til at vælge <h1>–<h6>. De native overskriftselementer bør være standardvalget; brug kun role="heading" + aria-level, når du har brug for et niveau over 6, eller når et framework forhindrer dig i at bruge et overskriftselement direkte.

Gyldigt også på role="treeitem" (dybde i træet, startende ved 1 for elementer på øverste niveau) og på role="listitem" inde i et indlejret role="list", når indlejringen ikke er udtrykt af DOM-strukturen.

Sådan fungerer den

Værdien er et positivt heltal. For overskrifter svarer 1–6 til <h1>–<h6>; værdier over 6 er gyldige i ARIA, men kun få skærmlæsere eksponerer dem, så undgå at stole på, at niveau 7 annonceres som sådant.

For traelementer er niveauet dybden: roden af et træ er niveau 1, dens direkte børn er niveau 2 og så videre. Niveaunummeret lader en skærmlæserbruger forstå, hvor de befinder sig i hierarkiet uden at se indrykket.

Attributten ændrer ikke visuel styling. Hvis din “ARIA-overskrift niveau 4” skal se ud som en h4, styler du det selv.

Hyppige fejl

• Brug af role="heading" plus aria-level="3" i stedet for blot <h3>. Det native element giver dig rollen, niveauet, standard tastaturnavigation og dokumentstrukturintegration gratis.
• Angivelse af aria-level på et element uden role="heading", role="treeitem" eller role="listitem". Attributten har ingen effekt på for eksempel en <button> eller en <div> uden rolle.
• Spring af et niveau — et niveau 2 efterfulgt af et niveau 4 forvirrer dokumentstrukturen og udløser advarsler ved SC 1.3.1-revisioner.
• Traelementer med forkert niveau: alle børn af et niveau 2-element skal være niveau 3. Fejl på ét trin her bryder annonceringerne “gik et niveau op” / “gik et niveau ned”.
• Ikke-heltal- eller nulværdier. Kun positive heltal er gyldige; aria-level="0" ignoreres.
• Glemsel af at opdatere aria-level, når elementer flyttes i et træ, der kan trækkes rundt.

Eksempel

<!-- Overskrift dybere end h6 (sjældent; nødvendigt i komplekse strukturer) -->
<div role="heading" aria-level="7">Underunderunderafsnit</div>

<!-- Traelementer udtrykker dybde via aria-level -->
<ul role="tree">
  <li role="treeitem" aria-level="1" aria-expanded="true">
    Dokumenter
    <ul>
      <li role="treeitem" aria-level="2">Fakturaer</li>
      <li role="treeitem" aria-level="2">Kontrakter</li>
    </ul>
  </li>
</ul>