tablist

Kiedy używać

Wokół rzędu (lub kolumny) elementów role="tab" w interfejsie zakładkowym. Tablist MUSI mieć dostępną nazwę przez aria-label lub aria-labelledby — bez niej użytkownik czytnika ekranu słyszący „lista kart” nie może określić, o którą listę na stronie chodzi.

Pionowe paski kart wymagają aria-orientation="vertical". Domyślna wartość to pozioma, więc dla poziomych kart atrybut można pominąć.

Jeśli „karty” tak naprawdę prowadzą do innych adresów URL, użyj <nav> z łączami <a> — zmiana URL po kliknięciu nie pasuje do semantyki tablist.

Kontrakt klawiatury i fokusu

Zgodnie z wzorcem APG dla kart:

• Tab przenosi fokus do tablist na wybraną kartę; kolejny Tab przenosi fokus NA ZEWNĄTRZ (zazwyczaj do aktywnego tabpanel).
• Strzałki Lewo/Prawo przesuwają fokus między kartami (Góra/Dół dla pionowych tablist). Zawijanie jest opcjonalne, lecz przyjęte.
• Home / End przeskakują do pierwszej / ostatniej karty.
• Aktywacja: w trybie automatycznym strzałki jednocześnie przenoszą fokus i dokonują wyboru. W trybie ręcznym (zalecany, gdy aktywacja jest kosztowna) Space lub Enter wybiera skoncentrowaną kartę.

Sam tablist nie obsługuje fokusu — fokus trafia na kartę, nie na kontener tablist.

Typowe błędy

• Tablist bez dostępnej nazwy. Wiele tablist na jednej stronie staje się niemożliwych do odróżnienia.
• Wszystkie karty mają tabindex="0". Wzorzec zakłada jeden punkt tabulacji; tylko wybrana karta ma tabindex="0".
• Brak aria-orientation="vertical" na pionowym tablist — czytnik ekranu informuje użytkowników, by używali Lewo/Prawo, gdy układ wizualny wymaga Góra/Dół.
• role="tablist" otaczający łącza (<a href="#section">) zamiast przycisków. Kotwica powoduje przewijanie strony i psuje przycisk „wstecz”.
• Tabpanel ukryty przez display: none ORAZ atrybut hidden, gdy wystarczy jedno z nich.

Przykład

<div role="tablist" aria-label="Project sections" aria-orientation="horizontal">
  <button role="tab" id="t-overview" aria-selected="true"  aria-controls="p-overview" tabindex="0">Overview</button>
  <button role="tab" id="t-files"    aria-selected="false" aria-controls="p-files"    tabindex="-1">Files</button>
  <button role="tab" id="t-team"     aria-selected="false" aria-controls="p-team"     tabindex="-1">Team</button>
</div>