Design system z dostępnością w DNA
Długi, praktyczny kurs dla zespołów design systemów: dostępne tokeny, kolory i tryby, typografia, fokus, komponenty w React i HTML, dokumentacja, testy automatyczne i governance - z dziesiątkami przykładów kodu.
O czym jest ten kurs?
Design system to największa dźwignia dostępności w organizacji. Jeden poprawiony komponent naprawia setki ekranów - ale jeden błąd w komponencie powiela się wszędzie tam, gdzie zostanie użyty. Dlatego dostępność nie może być "warstwą dodawaną na końcu". Musi być wpisana w DNA systemu: w tokeny, API komponentów, dokumentację, testy i proces.
Kurs prowadzi przez cały design system, warstwa po warstwie. Zaczynamy od standardu i definicji "dostępnego komponentu". Potem budujemy fundamenty: tokeny kolorów z automatycznym sprawdzaniem kontrastu, tryb ciemny, wysoki kontrast i tryb wymuszonych kolorów, typografię i odstępy, fokus, ruch i ikony. W module komponentów projektujemy API, które utrudnia popełnienie błędu: przyciski, pola formularzy, okna dialogowe, podpowiedzi, powiadomienia, zakładki, karty, tabele i komponenty złożone. Na koniec zajmujemy się dokumentacją, adnotacjami w projektach, testami w CI, treściami oraz governance i planem wdrożenia.
Kurs jest przeznaczony dla zespołów design systemów: projektantek i projektantów, programistek i programistów front-end, product ownerów i osób odpowiedzialnych za jakość. Przykłady kodu są w HTML, CSS, JSON i React z TypeScript, ale zasady przeniesiesz na każdą technologię.
Program szkolenia
- 1. Moduł 1, lekcja 1: Design system jako dźwignia dostępności quiz
- 2. Moduł 1, lekcja 2: Standard, kryteria akceptacji i definicja "dostępnego komponentu" quiz
- 3. Moduł 2, lekcja 3: Tokeny kolorów z kontrastem w DNA quiz
- 4. Moduł 2, lekcja 4: Tryb ciemny, wysoki kontrast i tryb wymuszonych kolorów quiz
- 5. Moduł 2, lekcja 5: Typografia, odstępy i rozmiary celów quiz
- 6. Moduł 2, lekcja 6: Fokus, ruch i ikonografia quiz
- 7. Moduł 3, lekcja 7: API komponentu, które zapobiega błędom - na przykładzie przycisku quiz
- 8. Moduł 3, lekcja 8: Komponenty formularzy quiz
- 9. Moduł 3, lekcja 9: Nakładki - dialog, popover, tooltip i powiadomienia quiz
- 10. Moduł 3, lekcja 10: Nawigacja i struktura - zakładki, akordeon, okruszki, karty, tabele quiz
- 11. Moduł 3, lekcja 11: Komponenty złożone - combobox, wybór daty, karuzela, wykresy, przeciąganie quiz
- 12. Moduł 4, lekcja 12: Dokumentacja dostępności i adnotacje w projektach quiz
- 13. Moduł 4, lekcja 13: Testy dostępności w design systemie quiz
- 14. Moduł 4, lekcja 14: Treści i mikroteksty w design systemie quiz
- 15. Moduł 4, lekcja 15: Governance - kontrybucje, wersje, metryki i zespoły quiz
- 16. Moduł 4, lekcja 16: Plan wdrożenia na 90 dni i finalna checklista quiz
Tematy omawiane w kursie
Kryteria WCAG
- 2.4.13 Wygląd fokusu
- 2.4.7 Widoczny fokus
- 2.4.11 Fokus nie jest zasłonięty (minimum)
- 2.4.12 Fokus nie jest zasłonięty (rozszerzony)
- 2.5.8 Rozmiar celu (minimum)
- 2.5.5 Rozmiar celu (rozszerzony)
- 1.4.11 Kontrast elementów nietekstowych
- 1.4.3 Kontrast (minimum)
- 2.3.3 Animacje z interakcji
- 1.4.12 Odstępy w tekście
Pojęcia ze słownika dostępności
229,00 PLN
Zaloguj się, aby kupić
Rejestracja nowych kont ruszy 30 października 2026. Dostęp do kursu jest przypisywany do konta, więc do tego czasu kurs mogą kupić tylko osoby, które już je mają. Masz konto? Zaloguj się. Nie masz? Zapisz się na listę oczekujących, a damy znać, gdy otworzymy rejestrację.