tabpanel

Verwendung

Auf dem Behälter, der den Inhalt eines Tabs enthält. Jedes tabpanel wird mit aria-labelledby (auf die ID des Tabs zeigend) mit seinem Tab verknüpft. Der Tab verweist seinerseits mit aria-controls auf das Panel. Inaktive Panels werden mit dem hidden-Attribut ausgeblendet — nicht nur über display: none per CSS — damit der Accessibility-Baum den visuellen Zustand widerspiegelt.

Enthält das Panel interaktive Inhalte (ein Formular, eine Linkliste), kann das Panel mit tabindex="0" fokussierbar gemacht werden. Auf diese Weise landet der nächste Tab-Tastendruck nach dem Aktivieren eines Reiters innerhalb des Panels.

Enthält das Panel nur einen einzigen fokussierbaren Bereich — beispielsweise eine große Überschrift gefolgt von Inhalt — genügt tabindex="0" auf dem Panel. Ist das Panel mit fokussierbaren Steuerelementen gefüllt, navigieren Nutzer direkt per Tab dorthin, und das tabindex-Attribut ist optional.

Häufige Fehler

• tabpanel per CSS ausgeblendet, aber ohne hidden-Attribut. Screenreader legen möglicherweise seinen Inhalt dennoch offen.
• tabpanel ohne aria-labelledby — wird lediglich als „Tab-Panel“ ohne Namen angesagt.
• Der Tab verweist per aria-controls auf eine tabpanel-ID, aber das Panel verweist nicht per aria-labelledby zurück. Die Verknüpfung muss wechselseitig sein.
• Alle tabpanels befinden sich im DOM mit dynamisch umgeschaltetem display: none, aber ohne hidden-Attribut. Auditoren bemängeln die Inkonsistenz.
• role="tabpanel" auf einem Panel, das NICHT mit einem role="tab" verknüpft ist — verwaistes tabpanel.

Beispiel

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