tablist

Wanneer gebruiken

Rondom de rij (of kolom) van role="tab"-elementen in een tabblad­interface. De tablist MOET een toegankelijke naam hebben via aria-label of aria-labelledby — zonder deze naam hoort een schermlezergebruiker alleen “tablijst” en kan niet bepalen welke tablist op de pagina het is.

Verticale tab­stroken vereisen aria-orientation="vertical". De standaard is horizontaal; laat het attribuut weg voor horizontale tabs.

Als de “tabs” feitelijk navigatie naar andere URL’s zijn, gebruik dan <nav> met <a>-koppelingen — het patroon waarbij de URL verandert bij klikken past niet bij de tablist-semantiek.

Toetsenbord + focuscontract

Volgens het APG tabs-patroon:

• Tab verplaatst de focus naar de tablist en op de geselecteerde tab; een volgende Tab verplaatst de focus NAAR BUITEN (doorgaans naar het actieve tabpanel).
• Pijl links/rechts verplaatsen de focus tussen tabs (omhoog/omlaag bij verticale tablists). Wraparound is optioneel maar gebruikelijk.
• Home / End springen naar de eerste / laatste tab.
• Activering: in de automatische modus verplaatsen pijltoetsen de focus EN selecteren. In de handmatige modus (aanbevolen als activering kostbaar is), selecteert Spatie of Enter de gefocuste tab.

De tablist zelf behandelt geen focus — de focus gaat op de tab, niet op de tablist­container.

Veelvoorkomende fouten

• Tablist zonder toegankelijke naam. Meerdere tablists op één pagina worden dan niet van elkaar te onderscheiden.
• Alle tabs hebben tabindex="0". Het patroon heeft één tabstop; alleen de geselecteerde tab heeft tabindex="0".
• Ontbrekende aria-orientation="vertical" bij een verticale tablist — de schermlezer instrueert gebruikers om pijl links/rechts te gebruiken terwijl de visuele indeling omhoog/omlaag vereist.
• role="tablist" rondom koppelingen (<a href="#sectie">) in plaats van knoppen. Anker­scroll verschuift de pagina en breekt de terugknop.
• Tabpanel verborgen via zowel display: none als het hidden-attribuut, terwijl één methode voldoende is.

Voorbeeld

<div role="tablist" aria-label="Project sections" aria-orientation="horizontal">
  <button role="tab" id="t-overview" aria-selected="true"  aria-controls="p-overview" tabindex="0">Overview</button>
  <button role="tab" id="t-files"    aria-selected="false" aria-controls="p-files"    tabindex="-1">Files</button>
  <button role="tab" id="t-team"     aria-selected="false" aria-controls="p-team"     tabindex="-1">Team</button>
</div>