tabpanel

Hvornår bruges det

På den beholder, der indeholder indholdet for en fane. Par hvert tabpanel med sin fane via aria-labelledby (der peger på fanens id). Fanen peger igen på panelet med aria-controls. Skjul inaktive paneler med hidden-attributten — ikke blot display: none via CSS — så tilgængelighedstræet afspejler den visuelle tilstand.

Hvis panelet indeholder interaktivt indhold (en formular, en liste med links), kan du gøre panelet fokuserbart med tabindex="0". På den måde lander næste Tab-tast inde i panelet efter aktivering af en fane.

Hvis panelet indeholder én enkelt fokuserbar region — f.eks. én stor overskrift efterfulgt af indhold — er tabindex="0" på panelet tilstrækkeligt. Hvis panelet er fyldt med fokuserbare kontroller, vil brugeren Tab’e direkte til dem, og tabindex er valgfri.

Typiske fejl

• Tabpanel skjult via CSS men ikke via hidden-attributten. Skærmlæsere kan stadig eksponere dets indhold.
• Tabpanel mangler aria-labelledby — annonceres blot som “tab panel” uden navn.
• Fanen peger på et tabpanel-id via aria-controls, men panelet peger ikke tilbage via aria-labelledby. Parringen skal være gensidig.
• Alle tabpanels befinder sig i DOM’en med display: none skiftet dynamisk, men ingen hidden-attribut. Auditorer markerer uoverensstemmelsen.
• Placering af role="tabpanel" på et panel, der IKKE er parret med en role="tab" — forældrelos tabpanel.

Eksempel

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