aria-level

När ska det användas

På role="heading" för att deklarera rubrikens djup — ARIA-motsvarigheten till att välja <h1>–<h6>. De inbyggda rubricelementen ska vara ditt förstaval; välj role="heading" + aria-level bara när du behöver en nivå högre än 6, eller när ett ramverk begränsar dig från att använda ett rubrikelement direkt.

Giltigt också på role="treeitem" (djup i trädet, börjar vid 1 för toppnivåposter) och på role="listitem" inuti ett nästlat role="list" när nästlingen inte uttrycks av DOM-strukturen.

Hur det fungerar

Värdet är ett positivt heltal. För rubriker mappar 1–6 till <h1>–<h6>; värden över 6 är giltiga i ARIA men endast ett fåtal skärmläsare exponerar dem, så förlita dig inte på att nivå 7 meddelas som sådan.

För träd-poster är nivån djupet: roten i ett träd är nivå 1, dess direkta barn är nivå 2 och så vidare. Nivånumret låter en skärmläsaranvändare förstå var de befinner sig i hierarkin utan att se indragningen.

Attributet ändrar inte visuell stilsättning. Om din “ARIA-rubriknivå 4” behöver se ut som ett h4, stilsätter du det själv.

Vanliga fel

• Att använda role="heading" plus aria-level="3" i stället för enbart <h3>. Det inbyggda elementet ger dig rollen, nivån, standardtangentbordsnavigering och dokumentdispositionsintegration direkt.
• Att sätta aria-level på ett element utan role="heading", role="treeitem" eller role="listitem". Attributet har ingen effekt på till exempel en <button> eller en <div> utan roll.
• Att hoppa över en nivå — en nivå 2 följd av en nivå 4 förvirrar dokumentdispositionen och utlöser fel vid revision av SC 1.3.1.
• Träd-poster med fel nivå: varje barn till en nivå-2-post måste vara nivå 3. Av-ett-fel bryter meddelandena om “en nivå upp” / “en nivå ned”.
• Icke-heltal eller nollvärden. Enbart positiva heltal är giltiga; aria-level="0" ignoreras.
• Att glömma att uppdatera aria-level när poster omplaceras i ett dragbart träd.

Exempel

<!-- Heading deeper than h6 (rare; needed in complex outlines) -->
<div role="heading" aria-level="7">Sub-sub-sub-section</div>

<!-- Treeitems express depth via aria-level -->
<ul role="tree">
  <li role="treeitem" aria-level="1" aria-expanded="true">
    Documents
    <ul>
      <li role="treeitem" aria-level="2">Invoices</li>
      <li role="treeitem" aria-level="2">Contracts</li>
    </ul>
  </li>
</ul>