Normen · ARIA

Rol Widget

tab

Markeert een element als één tab in een tabblad­interface. Een tab MOET binnen een tablist staan en ZOU MOETEN verwijzen naar het bijbehorende tabpanel via aria-controls. Er is geen native HTML-tab­element — tabs zijn een puur ARIA-patroon.

Wanneer gebruiken

Voor één tab in een horizontaal of verticaal gerangschikt tab­blok. Een tab MOET een directe onderliggende zijn van een role="tablist"-element (of eigendom zijn via aria-owns). Elke tab MOET naar het bijbehorende paneel verwijzen met aria-controls="<tabpanel-id>". De reciproque aria-labelledby staat op het paneel en verwijst terug naar de tab.

Tabs zijn een applicatie­patroon. Als de “tabs” feitelijk navigatie tussen afzonderlijke pagina’s zijn, gebruik dan <nav> met <a>-koppelingen — de URL-wijziging maakt het tab­patroon onjuist.

De tab zelf is doorgaans een <button>. De knop­semantiek combineert goed met role="tab", en de focus- en activeringsafhandeling wordt gratis meegeleverd.

Toetsenbord + focuscontract

Volgens het APG tabs-patroon:

  • Tab verplaatst de focus naar de tablist, op de actieve tab. Tab verplaatst de focus NAAR BUITEN naar het volgende focusbare element (doorgaans naar het tabpanel als dit tabindex="0" heeft).
  • Pijl links/rechts (of omhoog/omlaag bij verticale tablists) verplaatsen de focus tussen tabs.
  • Home / End springen naar de eerste / laatste tab.
  • Activering kan automatisch zijn (focus = selectie) of handmatig (Spatie/Enter om te selecteren). Kies handmatig wanneer het activeren van een tab kostbaar werk triggert.

Gebruik een zwevende tabindex: alleen de geselecteerde tab heeft tabindex="0".

Veelvoorkomende fouten

  • Alle tabs met tabindex="0" — Tab doorloopt elke tab in plaats van het paneel.
  • Ontbrekende aria-controls die de tab aan het tabpanel koppelt.
  • aria-selected="true" op meer dan één tab.
  • Tabs geïmplementeerd met <a href="#sectie"> — het URL-fragment verandert, de terugknop navigeert nu tussen tabs, en het patroon werkt niet meer.
  • Geen focusbeheer bij activering: klikken op een tab werkt het paneel bij, maar de volgende Tab-toets gaat terug naar de paginakoptekst in plaats van het paneel in.

Voorbeeld

<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>