Komponent kart z użyciem :checked a JavaScript

Komponent zakładek powinien zapewniać: wizualny wskaźnik aktywnej zakładki, powiązany panel wyświetlany lub ukrywany po wybraniu zakładki, nawigację między zakładkami za pomocą klawiatury oraz dostępne atrybuty ARIA. Można to osiągnąć za pomocą czystego CSS, wykorzystując sztuczkę :checked, albo za pomocą JavaScriptu, aby zapewnić lepszą dostępność.

Ukryte dane wejściowe radio służą jako stan: każda zakładka jest elementem <label> powiązanym z danymi wejściowymi radio. Gdy radio jest zaznaczone, kombinatory rodzeństwa CSS pokazują odpowiadający mu panel i stylizują etykietę aktywnej zakładki. Nie jest wymagany JavaScript.

Umieść dane wejściowe radio, następnie wszystkie etykiety (zakładki), a potem wszystkie panele w tym samym kontenerze. Użyj kombinatora ogólnego rodzeństwa (~), aby połączyć zaznaczone radio z odpowiadającym mu panelem. Panele domyślnie mają display: none, a dopasowany panel otrzymuje display: block.

Sztuczka :checked nie może aktualizować atrybutów ARIA (aria-selected, aria-controls), nie może włączyć nawigacji między zakładkami za pomocą klawiszy strzałek, a ograniczenia kolejności elementów w DOM (dane wejściowe przed panelami) mogą kolidować z wymaganiami dotyczącymi wyglądu. Luki te ograniczają rzeczywistą dostępność.

Komponent zakładek w JS nasłuchuje zdarzeń click na przyciskach zakładek, ustawia aria-selected na aktywnej zakładce, aktualizuje aria-hidden na panelach i zarządza fokusem. Takie podejście umożliwia pełną zgodność z ARIA oraz wzorce interakcji klawiaturowej zgodne z ARIA Authoring Practices.

Użyj role="tablist" na kontenerze, role="tab" na każdym przycisku zakładki wraz z aria-selected i aria-controls oraz role="tabpanel" na każdym panelu wraz z aria-labelledby. Czytniki ekranu ogłaszają liczbę zakładek, ich pozycję oraz stan zaznaczenia.

Zasady ARIA Authoring Practices dotyczące zakładek: klawisz Tab wprowadza fokus do listy zakładek i ustawia go na aktywnej zakładce. Arrow Left/Right przenosi fokus między zakładkami. Home/End przenosi fokus odpowiednio do pierwszej lub ostatniej zakładki. Każde przeniesienie fokusu za pomocą klawisza strzałki aktywuje zakładkę, na której znalazł się fokus (wzorzec automatycznej aktywacji).

Stylizuj aktywną zakładkę za pomocą dolnego obramowania lub zmiany tła, używając selektora [aria-selected="true"] — działa on zarówno z podejściem JS, jak i :checked. Dzięki temu CSS pozostaje zsynchronizowany z atrybutem stanu ARIA, co pozwala uniknąć podwójnego zarządzania stanem.

Animowany wskaźnik kart przesuwa się między kartami: należy umieścić element wskaźnika pozycjonowany absolutnie, użyć JavaScriptu do ustawienia jego pozycji left i szerokości zgodnie z wymiarami aktywnej karty oraz dodać animację za pomocą transition: left 200ms ease, width 200ms ease.

Gdy karty przepełniają kontener na małych ekranach, należy użyć przewijania poziomego (overflow-x: auto; scrollbar-width: none) albo zamienić karty na rozwijaną listę wyboru na urządzeniach mobilnych. Podejście z listą wyboru wymaga użycia JS do synchronizacji natywnej listy wyboru z widocznością panelu karty.

Hacku :checked należy używać w przypadku prostych, niekrytycznych elementów interfejsu, gdy dostępność nie jest kluczowym wymaganiem. Kart JavaScript należy używać w każdym produkcyjnym interfejsie obsługującym użytkowników klawiatury, czytników ekranu lub aplikacje wymagające zgodności z ARIA podczas audytów albo ze względów prawnych.

Jakie jest główne ograniczenie dostępności hacku CSS :checked w przypadku kart?

Hack :checked umożliwia przełączanie kart wyłącznie za pomocą CSS, z użyciem pól radio i kombinatorów rodzeństwa, ale nie zapewnia obsługi ARIA ani klawiatury. Karty JavaScript z rolami ARIA (tablist, tab, tabpanel), zarządzaniem aria-selected i obsługą klawiszy strzałek zapewniają kompletny, dostępny interfejs wymagany w komponentach produkcyjnych.