tabpanel

Kiedy używać

Na kontenerze przechowującym treść dla karty. Powiąż każdy tabpanel z jego kartą przez aria-labelledby (wskazujące na identyfikator karty). Karta z kolei wskazuje panel przez aria-controls. Ukrywaj nieaktywne panele atrybutem hidden — nie tylko przez display: none w CSS — aby drzewo dostępności odzwierciedlało stan wizualny.

Jeśli panel zawiera interaktywną treść (formularz, listę łączy), możesz uczynić panel fokusowanym przez tabindex="0". Dzięki temu po aktywacji karty kolejne naciśnięcie Tab trafia do panelu.

Jeśli panel zawiera jeden duży nagłówek z treścią, tabindex="0" na panelu wystarczy. Jeśli panel jest pełen kontrolek interaktywnych, użytkownik dotrze do nich przez Tab bezpośrednio i tabindex jest opcjonalny.

Typowe błędy

• Tabpanel ukryty przez CSS, ale bez atrybutu hidden. Czytniki ekranu mogą nadal ujawniać jego treść.
• Tabpanel bez aria-labelledby — ogłaszany tylko jako „panel kart” bez nazwy.
• Karta wskazuje tabpanel przez aria-controls, ale panel nie wskazuje z powrotem przez aria-labelledby. Powiązanie musi być wzajemne.
• Wszystkie tabpanel są w DOM z dynamicznie przełączanym display: none, ale bez atrybutu hidden. Audytorzy oznaczają tę niespójność.
• Umieszczenie role="tabpanel" na panelu, który NIE jest powiązany z role="tab" — osierocony tabpanel.

Przykład

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