tabpanel

När ska du använda det

På den behållare som håller innehållet för en flik. Para varje tabpanel med sin flik via aria-labelledby (pekande på flikens id). Fliken pekar i sin tur på panelen med aria-controls. Dölj inaktiva paneler med hidden-attributet — inte bara display: none via CSS — så att tillgänglighetsträdet speglar det visuella tillståndet.

Om panelen innehåller interaktivt innehåll (ett formulär, en länklista) kan du göra panelen fokuserbar med tabindex="0". På det sättet hamnar nästa Tab-knapptryckning inuti panelen efter att en flik aktiverats.

Om panelen innehåller ett enda fokuserbart område — t.ex. en stor rubrik följd av innehåll — räcker tabindex="0" på panelen. Om panelen är full av fokuserbara kontroller kommer användaren att Tab:a till dem direkt och tabindex är valfritt.

Vanliga fel

• Tabpanel dold via CSS men inte via hidden-attributet. Skärmläsare kan fortfarande exponera innehållet.
• Tabpanel saknar aria-labelledby — presenteras bara som “tab panel” utan namn.
• Fliken pekar på ett tabpanel-id via aria-controls men panelen pekar inte tillbaka via aria-labelledby. Kopplingen måste vara ömsesidig.
• Alla tabpaneler finns i DOM:en med display: none som byts dynamiskt, men inget hidden-attribut. Granskare flaggar inkonsekvensen.
• role="tabpanel" placeras på en panel som INTE är kopplad till ett role="tab" — en föräldrarlös tabpanel.

Exempel

<div role="tablist" aria-label="Settings">
  <button role="tab" id="t-account" aria-selected="true"  aria-controls="p-account" tabindex="0">Account</button>
  <button role="tab" id="t-billing" aria-selected="false" aria-controls="p-billing" tabindex="-1">Billing</button>
</div>

<section role="tabpanel" id="p-account" aria-labelledby="t-account" tabindex="0">
  <h2>Account</h2>
  <p>…</p>
</section>
<section role="tabpanel" id="p-billing" aria-labelledby="t-billing" tabindex="0" hidden>
  <h2>Billing</h2>
  <p>…</p>
</section>