38. Accessibility (a11y) — dostępność w aplikacjach React

Accessibility — dla każdego użytkownika

Accessibility (a11y) to projektowanie aplikacji dostępnych dla osób z niepełnosprawnościami — wzroku (czytniki ekranu), słuchu (napisy), ruchową (nawigacja klawiaturą). Standard WCAG 2.1 definiuje poziomy: A, AA, AAA. W React: semantyczny HTML, ARIA atrybuty, focus management.

Prawo UE wymaga dostępności aplikacji publicznych. Dostępne aplikacje są lepiej indeksowane przez Google. ~15% populacji ma jakąś formę niepełnosprawności. To kwestia etyki i prawa, nie opcjonalna funkcja.

1. Wyjaśnić czym jest a11y i standardy WCAG
2. Opisać semantyczny HTML jako podstawę dostępności
3. Omówić ARIA atrybuty i kiedy ich używać
4. Pokazać zarządzanie fokusem w React

1. WCAG 2.1 — poziomy A/AA/AAA, cztery zasady: POUR
2. Semantyczny HTML — button vs div, nav, main, article, header, label
3. ARIA — aria-label, aria-expanded, role=“dialog”, aria-live
4. Nawigacja klawiaturą — Tab, Enter, Escape, focus visible
5. Kontrast — WCAG AA wymaga 4.5:1 dla tekstu normalnego

• Struktura minimalna

1. Wstęp — czym jest a11y, dlaczego ważna
2. Rozdział 1: WCAG i semantyczny HTML
3. Rozdział 2: ARIA atrybuty
4. Rozdział 3: Focus management i nawigacja klawiaturą
5. Podsumowanie
6. Bibliografia

Dostępność to nie feature — to standard!

Przetestuj swoją aplikację: odłóż myszkę i spróbuj poruszać się tylko Tab + Enter. Albo włącz Windows Narrator i spróbuj “słyszeć” aplikację. Opisz to doświadczenie w opracowaniu.