Dostępność (a11y) w DS
Dostępność (accessibility, a11y) to projektowanie interfejsów działających dla wszystkich użytkowników, w tym osób z niepełnosprawnościami.
Co to jest?
Dostępność w Design Systemie to wbudowanie zasad WCAG (Web Content Accessibility Guidelines) w każdy komponent systemu. Obejmuje: kontrast kolorów (minimum 4.5:1), nawigację klawiaturą, role ARIA, obsługę czytników ekranu, focus management, czytelne etykiety i komunikaty błędów. Dostępność w DS oznacza, że każdy komponent jest dostępny "out of the box" — developer nie musi o tym myśleć.
Jak to działa?
Design System wbudowuje dostępność na każdym poziomie: 1) Fundacje — paleta kolorów spełniająca WCAG AA/AAA, czytelna typografia. 2) Komponenty — każdy ma poprawne role ARIA, obsługę klawiatury i focus styles. 3) Wzorce — formularze z etykietami, tabele z nagłówkami, nawigacja z landmarks. Dzięki temu zespół produktowy korzysta z dostępnych klocków bez dodatkowego wysiłku.
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
GOV.UK Design System jest wzorem dostępności — każdy komponent jest testowany z użytkownikami z niepełnosprawnościami. Adobe React Spectrum / React Aria oferuje gotowe hooki a11y do budowania dostępnych komponentów. Shopify Polaris dokumentuje wymagania a11y dla każdego komponentu.