Unsplash / Annie Spratt

Szkolenie: Tworzenie dostępnych cyfrowo stron interaktywnych zgodnie z WCAG

Czy Twoje strony internetowe są dostępne dla wszystkich? Zgodność z WCAG to klucz, by zapewnić równość w dostępie do treści. Sprawdź nasze szkolenie, na którym dowiedsz się, jak tworzyć interaktywne strony, które będą dostępne dla każdego.

26.08.2025 10:18
4 minuty czytania

Tworzenie dostępnych cyfrowo stron interaktywnych

Dwudniowe, intensywne szkolenie praktyczne dla agencji i software house’ów — projektowanie, development i wdrożenie dostępnych animacji i interakcji zgodnie z WCAG.
[Zapisz zespół →] [Poproś o ofertę dla firmy →]

W skrócie: 2 dni warsztatów (40% teoria, 60% praktyka), grupy 3-12 osób. Prowadzący: eksperci UX i WCAG, front-end i audytorzy dostępności.

Dlaczego warto (korzyści)

  • Zmniejszysz ryzyko prawne i biznesowe — szkolenie wyjaśnia obowiązki wynikające z polskich i unijnych przepisów oraz praktyczne konsekwencje w projektach.  
  • Zwiększysz konwersję i zasięg — dostępność poprawia użyteczność dla wszystkich użytkowników (m.in. lepsze SEO, mniejsze porzucenia formularzy).
  • Zintegrujesz dostępność z procesem SDLC - tworzenia i utrzymania systemów IT — od designu, przez komponenty, testy automatyczne, po CI/CD i monitoring.
  • Aktualne standardy techniczne — wcielenie WCAG 2.1 oraz 2.2 (aktualne kryteria zgodnie z obowiązującymi przepisami i te przyszłościowe oraz rekomendacje praktyczne).  

Dla kogo

  • agencje interaktywne tworzące nowoczesne, animowane strony i aplikacje webowe
  • software house’y rozwijające SPA / PWA / strony z intensywną interakcją (drag&drop, canvas, JS)
  • zespoły front-end, UX/UI, product ownerzy, testerzy automatyzujący testy dostępności

Efekty po szkoleniu (co potrafią uczestnicy)

  • Mapować wymagania prawne na backlog projektowy i zakres audytu (PL / UE / USA).  
  • Projektować interaktywne komponenty (modal, carousel, drag&drop, dynamiczne menu) z prawidłowym ARIA, obsługą klawiatury i kontrolą fokusu.
  • Tworzyć dostępne animacje (oszczędne użycie ruchu, kontrola redukcji ruchu, prefer-reduced-motion).
  • Wdrożyć zestaw testów: automatyczne skanery + ręczne testy z NVDA/VoiceOver + testy użytkowników z niepełnosprawnościami.
  • Przygotować dostępność jako część CI (axe-core, jest-axe, Lighthouse, Pa11y, integracja z pipeline).

Program (szczegółowa agenda — 2 dni)

Dzień 1 — fundamenty i projektowanie (8:30–16:30)

Rano (8:30–12:30)

  1. Wprowadzenie: dlaczego dostępność jest biznesowo i prawnie istotna (PL / EU / USA).
  2. Kryteria WCAG 2.1 i 2.2 — przegląd najważniejszych SC na poziomach A i AA (2.1 i co się zmieniło w 2.2).
  3. Zasady POUR i zastosowanie w projektach interaktywnych.

Południe (13:15–16:30)

  1. Projektowanie dostępnych interfejsów: struktura, semantyka, kontrast, typografia, etykiety, mikrointerakcje.
  2. Warsztat projektowy (praca w grupach): redesign fragmentu interaktywnej strony (koncentracja na formularzach, nawigacji i animacjach).
  3. Powtórka: heurystyki dostępności + feedback od prowadzących.

Dzień 2 — development, testy, wdrożenie (8:30–16:30)

Rano (9:00–12:30)

  1. Dostępny HTML & ARIA w praktyce: kiedy i jak używać ARIA, role, właściwości, live regions.
  2. Warsztat developerski: zbuduj dostępny komponent (modal z trapem fokusowym, accessible carousel, custom select).
  3. Animacje i interakcje: accessible motion, prefer-reduced-motion, synchronizacja aria, timing i interruptions.

Południe (13:15–16:30)

  1. Testy automatyczne + ręczne: axe-core, Pa11y, Lighthouse, plus NVDA/VoiceOver.
  2. CI & monitoring: jak integrować testy dostępności w pipeline, proces naprawczy, raportowanie (VPAT, deklaracja dostępności).
  3. Case study i plan implementacji w projektach klienta — przygotowanie roadmapy zgodności (zadania, budżet, KPI).
  4. Sesja Q&A + indywidualne konsultacje (mini-audit fragmentów dostarczonych przez uczestników).

Wybrane ćwiczenia praktyczne

  • Implementacja dostępnego modala: pułpka klawiaturowa, ARIA (w tym aria-hidden), zamykanie klawiaturą, czytniki ekranu.
  • Interaktywna karuzela z pełną klawiaturową nawigacją i poprawnymi rolami.
  • Dostępność SPA: routowanie, zmiana tytułu, live region dla aktualizacji asynchronicznych.
  • Audyt 5-sekundowy i 30-minutowy istniejącej strony: wykrywanie priorytetowych blokad dostępności.
  • Automatyzacja testów dostępności z użyciem axe-core + integracja w GitHub Actions.

Metodologia prowadzenia szkolenia

  • Małe grupy, hands-on labs, programowanie w parach.
  • Uczestnicy otrzymują materiały: checklisty WCAG, fragmenty kodu, prekonfigurowane repo z zadaniami, lista narzędzi.
  • Opcja: przynieś fragment swojej strony — prowadzący zrobi demonstracyjny mini-audit i proponuje poprawki.

Trenerzy 

  • Senior UX Designer — projektowanie inkluzywne, prowadzenie warsztatów UX.
  • Senior Front-end Engineer — ARIA, JS accessibility, integracja z CI/CD.
  • Audytor dostępności — doświadczenie w audytach zgodności i raportach EAA/WAD.

Format, terminy, cena szkolenia

  • Format: stacjonarnie (Kraków) lub online (na żywo, z przerwami, z dostępem do nagrania po szkoleniu).
  • Czas: 2 dni (8:30–16:30).
  • Liczba uczestników: 3-12 osób
  • Catering i obiad: w cenie szkolenia
  • Cena: pakiet podstawowy 2 dni
    • 2400zł netto za osobę
    • 5200 PLN netto za zespół 3 osób;
    • większe zespoły / zamknięte terminy — indywidualna wycena 

FAQ — Najczęściej zadawane pytania

Czy dwudniowe szkolenie wystarczy, żeby „być zgodnym z WCAG”?

Szkolenie daje kompetencje i roadmapę; rzeczywista zgodność wymaga wdrożenia w projektach, testów i ewentualnych poprawek kodu.

Jakie WCAG obowiązują?

Dzisiaj rekomendacją techniczną jest WCAG 2.2 (i wcześniejsze 2.1). Dla zrozumienia zmian i planowania prac szkolenie omawia konkretne SC 2.2. 

Co z regulacjami prawnymi?

Omówimy polską ustawę o dostępności cyfrowej (2019) oraz dyrektywy i akty UE — Web Accessibility Directive i European Accessibility Act — plus praktyczne wskazówki dotyczące rynku USA (ADA / Section 508). 

Przepisy krajowe / regionalne omawiane na szkoleniu

  • Polska — Ustawa o dostępności cyfrowej stron i aplikacji (2019) — obowiązuje publiczne podmioty; standardy techniczne i wykonawcze w dokumentach resortowych. 
  • Unia Europejska — Web Accessibility Directive (public sector) + European Accessibility Act (szerszy zakres, obejmuje też komercyjne produkty i usługi) — terminy i wymagania wdrożeń omówione praktycznie.  
  • Stany Zjednoczone — ADA i Section 508: DOJ i agencje federalne odwołują się do WCAG jako benchmarku; istnieje wzrost wymagań prawnych i egzekucji (najlepiej traktować WCAG jako podstawę). 

Zapisz siebie i swój zespół

Masz zespół, który tworzy nowoczesne, animowane i interaktywne strony? Zadbaj, żeby były dostępne i wolne od ryzyka.
[Zapisz zespół — Termin: najbliższy dostępny] [Poproś o ofertę dla firmy — wycena]

Kontakt: szkolenia@krakweb.pl • +48507595859

Formularz zgłoszeniowy

Oferta szkoleń
Ustawienia dostępności
Wysokość linii
Odległość między literami
Wyłącz animacje
Przewodnik czytania
Czytnik
Wyłącz obrazki
Skup się na zawartości
Większy kursor
Skróty