Czytanie APG: wzorce, klawisze i przykłady

ARIA Authoring Practices Guide to oficjalny przewodnik W3C dotyczący prawidłowego tworzenia niestandardowych widżetów. Gdy nie masz pewności, to właśnie w nim znajdziesz specyfikację. 📘

APG udostępnia sprawdzone patterns dla kart, menu, okien dialogowych i innych elementów. Zamiast samodzielnie zgadywać role i klawisze, korzystasz ze sprawdzonego rozwiązania.

Każdy wzorzec APG ma te same sections: omówienie, opis interakcji z klawiaturą, wymagane role i atrybuty ARIA oraz działające przykłady do analizy.

Tabela Keyboard Interaction dokładnie określa działanie każdego klawisza. Użytkownicy oczekują tych klawiszy, dlatego traktuj tabelę jako bezwzględny wymóg.

Tabela WAI-ARIA Roles, States, and Properties zawiera wszystkie atrybuty potrzebne widżetowi oraz określa, kiedy każdy z nich się zmienia. Nie pomijaj żadnego.

Każdy wzorzec zawiera działający example z pełnym kodem źródłowym. Przeczytaj go, przetestuj z czytnikiem ekranu, a następnie dostosuj znaczniki do własnego interfejsu.

APG zaczyna się od ostrzeżenia: jeśli istnieje odpowiedni element, należy preferować native HTML. Po te wzorce sięgaj tylko wtedy, gdy żaden rzeczywisty element nie spełnia zadania.

Wzorce oddzielają stałe role od zmieniających się states. Atrybuty aria-expanded lub aria-selected ustawiasz za pomocą JavaScriptu w trakcie interakcji użytkownika, a nie tylko raz w kodzie HTML.

Wiele wzorców dokładnie opisuje, gdzie powinien znaleźć się focus i jak ma się przemieszczać. Przestrzeganie tej choreografii fokusu jest równie ważne jak sama ARIA.

Po zbudowaniu widżetu przejdź przez jego tabelę keyboard table z APG, sprawdzając każdy klawisz. Jeśli każdy wiersz działa poprawnie, widżet odwzorowuje sprawdzone zachowanie.

APG jest versioned i aktualizowany wraz z rozwojem ARIA, dlatego sprawdzaj bieżące wydanie, a nie stary wpis na blogu, który je kopiuje.

APG to specyfikacja Twojego widżetu: najpierw rozwiązania natywne, a następnie role, stany, klawisze i fokus zgodne z danym wzorcem. Testuj według jego tabel, a dostarczysz zachowanie znane już użytkownikom. ✅