ARIA

WAI-ARIA — Accessible Rich Internet Applications — to specyfikacja W3C wypełniająca konkretną lukę: gdy natywne elementy HTML nie wystarczają do opisania niestandardowego elementu interfejsu, ARIA dostarcza słownictwa ról, stanów i właściwości, które technologie asystujące (zwłaszcza czytniki ekranu) mogą rozumieć.

Czym ARIA jest, a czym nie jest

ARIA to warstwa nad HTML. Nie dodaje zachowania. Dodanie role="button" do <div> sprawia, że czytnik ekranu ogłasza go jako przycisk, ale nie czyni <div> fokusowalnym, nie dodaje obsługi klawiatury ani stylowania wizualnego. Wszystko to musisz dodać samodzielnie.

To właśnie jest źródłem większości błędów ARIA na produkcji: deweloperzy dodają rolę i kończą, po czym dostarczają „przycisk”, który nie reaguje na Enter ani Spację, nie jest osiągalny Tabulatorem i nie ma wskaźnika fokusa.

Pierwsza reguła ARIA

Jeśli możesz użyć natywnego elementu HTML z wymaganą semantyką i zachowaniem, zrób to.

Każda linijka ARIA, którą piszesz, to linijka semantyki HTML, którą postanowiłeś reimplementować ręcznie. <button> już jest ogłaszany jako przycisk, jest fokusowalny, reaguje na Enter i Spację oraz ma pierścień fokusa — bezpłatnie. <div role="button" tabindex="0"> z niestandardowymi obsługami klawiatury doprowadza do tego samego miejsca, ale krucho, z większą ilością kodu.

Główne kategorie

ARIA definiuje trzy rodzaje atrybutów:

• Role — czym element jest (role="button", role="dialog", role="navigation", role="alert"). Pełna lista ról obejmuje ponad 80 pozycji; Przewodnik po Praktykach Tworzenia ARIA grupuje je w role orientacyjne, role widżetów i role struktury dokumentu.
• Stany — jaki jest aktualny stan elementu (aria-expanded="true", aria-checked="false", aria-disabled="true"). Stany zmieniają się w czasie wykonywania.
• Właściwości — jakie są relacje elementu (aria-labelledby="title-id", aria-describedby="help-id", aria-controls="menu-id"). Właściwości są zazwyczaj statyczne.

Pozostałe trzy reguły ARIA

Sekwencja pięciu reguł W3C po „używaj natywnego HTML, gdy to możliwe”:

2. Nie zmieniaj natywnej semantyki, chyba że naprawdę musisz. (<h1 role="button"> dezorientuje czytniki ekranu co do tego, czy element jest nagłówkiem, czy przyciskiem.)
3. Wszystkie interaktywne elementy sterujące ARIA muszą być obsługiwalne za pomocą klawiatury.
4. Nie używaj role="presentation" ani aria-hidden="true" na elemencie fokusowalnym.
5. Wszystkie elementy interaktywne muszą mieć dostępną nazwę.

Przestrzeganie tych pięciu reguł eliminuje ponad 80% błędów ARIA.

Gdzie szukać

Najbardziej użytecznym operacyjnym odniesieniem jest ARIA Authoring Practices Guide (APG), który zawiera kompleksowe wzorce implementacji popularnych widżetów — comboboxów, okien dialogowych, widoków drzewa, kart — wraz z tabelami interakcji klawiaturowych i przykładami DOM.