tabpanel

Wanneer gebruiken

Op de container die de inhoud van een tab bevat. Koppel elk tabpanel aan zijn tab via aria-labelledby (verwijzend naar de id van de tab). De tab verwijst op zijn beurt naar het paneel met aria-controls. Verberg inactieve panelen met het hidden-attribuut — niet alleen via display: none in CSS — zodat de toegankelijkheidsstructuur de visuele toestand weerspiegelt.

Als het paneel interactieve inhoud bevat (een formulier, een lijst met koppelingen), kunt u het paneel focusbaar maken met tabindex="0". Na het activeren van een tab belandt de volgende Tab-toets dan in het paneel.

Als het paneel één focusbaar gebied bevat — een grote koptekst gevolgd door inhoud — volstaat tabindex="0" op het paneel. Als het paneel vol focusbare elementen staat, navigeert de gebruiker er direct naartoe met Tab en is tabindex optioneel.

Veelvoorkomende fouten

• Tabpanel verborgen via CSS maar niet via het hidden-attribuut. Schermlezers kunnen de inhoud nog steeds blootstellen.
• Tabpanel mist aria-labelledby — aangekondigd als alleen “tabpaneel” zonder naam.
• Tab verwijst via aria-controls naar een tabpanel-id, maar het paneel verwijst niet terug via aria-labelledby. De koppeling moet wederkerig zijn.
• Alle tabpanels leven in de DOM met dynamisch omgeschakeld display: none, maar geen hidden-attribuut. Auditors markeren de inconsistentie.
• role="tabpanel" plaatsen op een paneel dat NIET is gekoppeld aan een role="tab" — een weespaneel.

Voorbeeld

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