Standarder · ARIA

Rolle Widget

tab

Markerer et element som én fane i en fanebladsgrænseflade. En fane SKAL være indlejret i en tablist og BØR referere til det tilknyttede tabpanel via aria-controls. Der er intet native HTML-faneelement — faner er et ARIA-eksklusivt mønster.

Hvornår bruges det

Til én fane i en vandret eller lodret arrangeret fanerække. En fane SKAL være et direkte barn af et role="tablist"-element (eller ejet via aria-owns). Hver fane SKAL pege på sit tilknyttede panel med aria-controls="<tabpanel-id>". Det gensidige aria-labelledby sidder på panelet og peger tilbage på fanen.

Faner er et applikationsmønster. Hvis dine “faner” reelt er navigation mellem separate sider, brug <nav> med <a>-links i stedet — URL-ændringen gør fane-mønsteret forkert.

Selve fanen er normalt en <button>. Button-semantikken kombineres rent med role="tab", og fokus- og aktiveringshandling kommer gratis.

Tastatur + fokuskontrakt

I henhold til APG tabs-mønsteret:

  • Tab flytter ind i tablist’en, til den aktive fane. Tab flytter UD til det næste fokuserbare element (typisk ind i tabpanelet, hvis det har tabindex="0").
  • Venstre/Højre-pile (eller Op/Ned for lodrette tablists) flytter fokus mellem faner.
  • Home / End springer til den første / sidste fane.
  • Aktivering kan være automatisk (fokus = selektion) eller manuel (Mellemrum/Enter for at vælge). Vælg manuel, når aktivering af en fane udløser tungt arbejde.

Brug et rullende tabindex: kun den valgte fane har tabindex="0".

Typiske fejl

  • Alle faner med tabindex="0" — Tab gennemløber alle faner frem for panelet.
  • Manglende aria-controls, der kobler fane til tabpanel.
  • aria-selected="true" på mere end én fane.
  • Faner implementeret med <a href="#section"> — URL-fragmentet ændres, tilbage-knappen navigerer nu mellem faner, og mønsteret bryder sammen.
  • Ingen fokusstyrring ved aktivering: klik på en fane opdaterer panelet, men næste Tab-tast går tilbage til sidehovedet frem for ind i panelet.

Eksempel

<div role="tablist" aria-label="Account settings">
  <button role="tab" id="t-profile"  aria-selected="true"  aria-controls="p-profile"  tabindex="0">Profile</button>
  <button role="tab" id="t-billing"  aria-selected="false" aria-controls="p-billing"  tabindex="-1">Billing</button>
  <button role="tab" id="t-security" aria-selected="false" aria-controls="p-security" tabindex="-1">Security</button>
</div>
<section role="tabpanel" id="p-profile"  aria-labelledby="t-profile"  tabindex="0">…</section>
<section role="tabpanel" id="p-billing"  aria-labelledby="t-billing"  hidden>…</section>
<section role="tabpanel" id="p-security" aria-labelledby="t-security" hidden>…</section>