Standarder · ARIA

Rolle Sammensat widget

tablist

Markerer en beholder som fanebladrækken i en fanebladsgrænseflade. Indeholder role="tab"-børn. Faner og tabpanels er et ARIA-eksklusivt mønster — der er intet native HTML-tablist.

Hvornår bruges det

Rundt om rækken (eller kolonnen) af role="tab"-elementer i en fanebladsgrænseflade. Tablist’en SKAL have et tilgængeligt navn via aria-label eller aria-labelledby — uden det kan en skærmlæserbruger, der hører “tab list”, ikke afgøre, hvilken tablist på siden det er.

Lodrette fanerækker kræver aria-orientation="vertical". Standarden er vandret, så udelad attributten for vandrette faner.

Hvis dine “faner” reelt er navigation til andre URL’er, brug <nav> med <a>-links i stedet — mønsteret med URL-ændring ved klik passer ikke til tablist-semantik.

Tastatur + fokuskontrakt

I henhold til APG tabs-mønsteret:

  • Tab flytter fokus ind i tablist’en og til den valgte fane; endnu et Tab flytter UD (typisk ind i det aktive tabpanel).
  • Venstre/Højre-pile flytter fokus mellem faner (Op/Ned for lodrette tablists). Omslutning er valgfri, men konventionel.
  • Home / End springer til den første / sidste fane.
  • Aktivering: i automatisk tilstand fører piletaster både fokusflytning OG selektion. I manuel tilstand (anbefalet når aktivering er dyr) vælger Mellemrum eller Enter den fokuserede fane.

Tablist’en selv håndterer ikke fokus — fokus går til fanen, ikke tablist-beholderen.

Typiske fejl

  • Tablist uden tilgængeligt navn. Flere tablists på én side bliver uadskillelige.
  • Alle faner har tabindex="0". Mønsteret er enkelt-tab-stop; kun den valgte fane har tabindex="0".
  • Manglende aria-orientation="vertical" på en lodret tablist — skærmlæseren instruerer brugere om at bruge Venstre/Højre, når det visuelle layout kræver Op/Ned.
  • role="tablist" der omslutter links (<a href="#section">) i stedet for knapper. Anker-scroll-hopper siden og ødelægger tilbage-knappen.
  • Tabpanel skjult via display: none OG hidden-attributten, når én er nok.

Eksempel

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