Dostępne zakładki (tablist)

Strony produktów często dzielą opis, specyfikację, dostawę i opinie na zakładki. Dobrze zrobione, są szybkie w obsłudze klawiaturą. Zrobione z elementów div i obsługi kliknięć, ukrywają większość informacji o produkcie przed użytkownikami klawiatury i czytników ekranu. Ta strona należy do serii dostępne wzorce interfejsu.

Kiedy używać zakładek

APG definiuje zakładki jako „warstwowe sekcje treści, zwane panelami zakładek, z których jednocześnie wyświetlany jest jeden panel”, przy czym każdy panel ma zakładkę, której aktywacja go wyświetla. Zakładek warto użyć dla kilku powiązanych, równoległych sekcji o podobnej wadze, między którymi użytkownicy się przełączają. Nie należy ich stosować do:

• Nawigacji między stronami – to linki w nav, nawet jeśli wyglądają jak zakładki; bieżącą oznacza się aria-current="page".
• Długiej, sekwencyjnej treści ani więcej niż kilku sekcji – lepsze są nagłówki lub akordeon.

Kryteria WCAG

• 4.1.2 Nazwa, rola, wartość (A): role tab, tablist, tabpanel i stan zaznaczenia.
• 1.3.1 Informacje i relacje (A): relacja między zakładką a panelem jest w kodzie.
• 2.1.1 Klawiatura (A): do wszystkich zakładek można dotrzeć i aktywować je klawiaturą.
• 2.4.3 Kolejność fokusu (A) i 2.4.7 Widoczny fokus (AA).
• 1.4.11 Kontrast elementów nietekstowych (AA): wskaźnik wybranej zakładki wymaga kontrastu 3:1.
• 1.4.1 Użycie koloru (A): wybrana zakładka jest pokazana czymś więcej niż kolorem.
• 1.4.10 Dopasowanie do ekranu (AA): zakładki nadal działają na ekranie o szerokości 320 pikseli CSS.

Przykład kodu

<div class="tabs">
  <div role="tablist" aria-label="Informacje o produkcie">
    <button type="button" role="tab" id="tab-desc" aria-selected="true"
            aria-controls="panel-desc">Opis</button>
    <button type="button" role="tab" id="tab-specs" aria-selected="false"
            aria-controls="panel-specs" tabindex="-1">Specyfikacja</button>
    <button type="button" role="tab" id="tab-reviews" aria-selected="false"
            aria-controls="panel-reviews" tabindex="-1">Opinie (12)</button>
  </div>

  <div role="tabpanel" id="panel-desc" aria-labelledby="tab-desc" tabindex="0">…</div>
  <div role="tabpanel" id="panel-specs" aria-labelledby="tab-specs" tabindex="0" hidden>…</div>
  <div role="tabpanel" id="panel-reviews" aria-labelledby="tab-reviews" tabindex="0" hidden>…</div>
</div>

Co musi zrobić skrypt:

• Strzałki przenoszą fokus między zakładkami. Używa się roving tabindex: aktywna zakładka ma tabindex="0", pozostałe tabindex="-1", jak opisuje przewodnik APG po obsłudze klawiatury.
• Przy aktywacji: ustawić aria-selected="true" na nowej zakładce i false na pozostałych, pokazać jej panel, a resztę ukryć przez hidden.
• tablist ma aria-label, albo aria-labelledby, jeśli jest widoczny nagłówek.
• APG mówi, że panel „powinien mieć tabindex="0"”, gdy nie zawiera elementów przyjmujących fokus lub pierwszy element treści go nie przyjmuje, aby Tab mógł do niego dotrzeć.
• Pionowa lista zakładek dostaje aria-orientation="vertical" i używa strzałek w górę i w dół.

Obsługa klawiaturą

Z wzorca zakładek w APG (pozioma lista zakładek):

Aktywacja automatyczna a ręczna. APG mówi, że „zaleca się, aby zakładki aktywowały się automatycznie po otrzymaniu fokusu”, jeśli panel wyświetla się bez zauważalnego opóźnienia, co zwykle oznacza, że jego treść jest już załadowana. Jeśli pokazanie panelu wymaga zapytania sieciowego, aktywacja automatyczna spowalnia nawigację strzałkami – wtedy należy użyć aktywacji ręcznej klawiszem Spacja lub Enter. APG ma przykłady obu.

Typowe błędy w sklepach internetowych

• Zakładki zbudowane z elementów li lub div z obsługą kliknięć: brak roli, brak klawiatury, brak stanu zaznaczenia.
• Wszystkie zakładki w kolejności tabulacji i brak strzałek – albo strzałki są, ale brakuje role="tab", więc czytniki ekranu nie ogłaszają „zakładka 2 z 3”.
• aria-selected pozostaje true na pierwszej zakładce po wybraniu innej.
• Panele ukryte przez opacity: 0 lub przesunięte poza ekran, ale nadal czytelne i przyjmujące fokus.
• Nawigacja ostylowana jak zakładki z role="tab", podczas gdy każda „zakładka” ładuje nową stronę.
• Zakładka z opiniami ładowana skryptem i aktywacja automatyczna wysyłająca zapytanie przy każdym naciśnięciu strzałki.
• Wybrana zakładka pokazana wyłącznie nieco innym kolorem.

Co wychwytuje kontrola automatyczna, a co wymaga testu ręcznego

Wszystkie to karty z naszej biblioteki reguł. Test ręczny: proszę wejść Tabem do listy zakładek, użyć strzałek, Home i End, sprawdzić, że w kolejności tabulacji jest tylko jedna zakładka, że panel się zmienia i że czytnik ekranu ogłasza rolę, pozycję i stan zaznaczenia. Wskaźnik wizualny można sprawdzić narzędziem do kontroli kontrastu.

Darmowa kontrola jednej strony uruchomiona na stronie produktu to automatyczna kontrola, a nie pełny audyt.

Najczęstsze pytania

Jakich ról ARIA potrzebują dostępne zakładki?

Kontenera z role="tablist" i etykietą, elementów z role="tab" wewnątrz niego, każdego z aria-selected i aria-controls, oraz paneli z role="tabpanel" opisanych przez ich zakładkę.

Jak użytkownicy klawiatury przechodzą między zakładkami?

Tab przenosi do listy zakładek na aktywną zakładkę; strzałki w lewo i w prawo przechodzą między zakładkami, zawijając się na końcach; Home i End są opcjonalne; kolejny Tab przenosi do panelu. W kolejności tabulacji jest tylko jedna zakładka.

Czy zakładka powinna aktywować się po fokusie, czy po Enter?

APG zaleca, by zakładki aktywowały się automatycznie po otrzymaniu fokusu, o ile panel pojawia się bez zauważalnego opóźnienia. Jeśli panel trzeba najpierw załadować, należy użyć aktywacji ręcznej klawiszem Enter lub Spacja.

Co lepsze na mobilnej stronie produktu: zakładki czy akordeon?

Oba mogą być dostępne. Zakładki potrzebują miejsca w poziomie i pełnego modelu klawiatury; akordeon z przycisków disclosure jest prostszy i dobrze działa na wąskich ekranach. Wiele sklepów używa zakładek na komputerze i akordeonu na telefonie.

Czy kontrola automatyczna przetestuje zakładki?

Znajduje role tab poza tablist, tablist bez zakładek, aria-controls wskazujące brakujące identyfikatory i nieprawidłowe wartości aria-selected. Nie sprawdzi strzałek ani tego, czy aria-selected zmienia się po wybraniu innej zakładki.

Źródła

• W3C WAI, APG Tabs pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
• W3C WAI, APG Developing a Keyboard Interface (roving tabindex): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/