Standarder · ARIA

Roll Widget

tab

Markerar ett element som en flik i ett flikgränssnitt. En flik MÅSTE ligga inuti en tablist och BÖR referera till sitt kopplade tabpanel via aria-controls. Det finns inget inbyggt HTML-flikelement — flikar är ett ARIA-exklusivt mönster.

När ska du använda det

För en flik i en horisontell eller vertikal fliklist. En flik MÅSTE vara ett direkt barn till ett role="tablist"-element (eller ägas via aria-owns). Varje flik MÅSTE peka på sitt kopplade panel med aria-controls="<tabpanel-id>". Det ömsesidiga aria-labelledby ligger på panelen och pekar tillbaka på fliken.

Flikar är ett applikationsmönster. Om dina “flikar” i verkligheten bara navigerar mellan separata sidor, använd <nav> med <a>-länkar i stället — URL-ändringen gör flikmönstret felaktigt.

Själva fliken är vanligtvis en <button>. Knappens semantik kombineras smidigt med role="tab", och fokus- och aktiveringshantering ingår automatiskt.

Tangentbords- och fokuskontrakt

Enligt APG:s flikmönster:

  • Tab flyttar fokus in i fliklistan, till den aktiva fliken. Tab flyttar UT till nästa fokusbara element (vanligtvis in i tabpanelen om den har tabindex="0").
  • Vänster-/höger­pilar (eller upp/ned för vertikala tablistor) flyttar fokus mellan flikar.
  • Home / End hoppar till den första / sista fliken.
  • Aktivering kan vara automatisk (fokus = val) eller manuell (Space/Enter för att välja). Välj manuell när aktivering av en flik utlöser kostsamt arbete.

Använd ett rörligt tabindex: bara den valda fliken har tabindex="0".

Vanliga fel

  • Alla flikar med tabindex="0" — Tab cyklar genom varje flik i stället för till panelen.
  • aria-controls saknas — länken mellan flik och tabpanel saknas.
  • aria-selected="true" på fler än en flik.
  • Flikar implementerade med <a href="#section"> — URL-fragmentet ändras, bakåtknappen navigerar nu mellan flikar och mönstret går sönder.
  • Ingen fokushantering vid aktivering: att klicka på en flik uppdaterar panelen men nästa Tab-knapptryckning går tillbaka till sidhuvudet i stället för in i panelen.

Exempel

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