Szkolenie Dostępność WWW

Od 2025-06-28 European Accessibility Act obowiązuje w całej Unii, także w Polsce. Sklepy internetowe, bankowość, bilety czy e-booki muszą być dostępne dla osób z niepełnosprawnościami. To już nie jest „miło mieć”, tylko wymóg z karą pieniężną: do dziesięciokrotności przeciętnego miesięcznego wynagrodzenia z poprzedniego roku, ale nie więcej niż 10% obrotu z poprzedniego roku obrotowego. Karę nakłada Prezes Zarządu PFRON albo właściwy organ nadzoru rynku.

Na szkoleniu uczysz się dostępności od strony programisty: jak pisać komponenty, które działają z klawiatury i czytnikiem ekranu, jak testować je automatycznie i jak czytać raport z audytu WCAG bez tłumacza. Pracujesz na fragmencie swojej aplikacji i wychodzisz z listą poprawek uporządkowaną według wagi. Przy okazji zyskujesz więcej niż zgodność z prawem: czytelna struktura i dobre etykiety pomagają też w SEO i w wypełnianiu formularzy.

Program

2 dni

• Dlaczego dostępność
  • Kogo dotyczy: wzrok, słuch, motoryka, poznanie, sytuacje chwilowe
  • European Accessibility Act i polska ustawa wdrażająca: kogo obejmuje, zwolnienie mikroprzedsiębiorców świadczących usługi, nadzór i kary
  • WCAG 2.2: zasady POUR i poziomy A, AA, AAA
  • Nowe kryteria WCAG 2.2: fokus niezasłonięty, rozmiar celu 24 px, przeciąganie, dostępne logowanie, spójna pomoc, bez ponownego wpisywania danych
  • Norma EN 301 549: dziś wersja z WCAG 2.1, nowa wersja z WCAG 2.2 czeka na publikację w Dzienniku Urzędowym UE
  • WCAG 3: wciąż szkic roboczy, obowiązuje WCAG 2.2
• Semantyczny HTML
  • Nagłówki, punkty orientacyjne (main, nav, header)
  • Przyciski a linki: kiedy które
  • Formularze: etykiety, autocomplete, grupy pól, komunikaty błędów
  • Tabele z nagłówkami i podpisem
• Klawiatura i fokus
  • Kolejność fokusu i tabindex
  • Widoczny fokus (:focus-visible)
  • Link „Przejdź do treści”
  • Zarządzanie fokusem w aplikacjach SPA po zmianie widoku
• ARIA z umiarem
  • Pierwsza zasada ARIA: nie używaj, jeśli wystarczy HTML
  • Nazwa dostępna elementu (accessible name)
  • Role, stany i właściwości
  • Regiony na żywo (aria-live) dla komunikatów
• Wzorce komponentów
  • Menu, zakładki i akordeon: wspólne ćwiczenie z obsługą strzałkami
  • Combobox: dlaczego to najtrudniejszy wzorzec (pokaz)
  • Okna dialogowe: <dialog> + showModal(), atrybut inert, powrót fokusu
  • Własne kontrolki formularzy
• Treść i wygląd
  • Kontrast kolorów i informacja przekazywana nie tylko kolorem
  • Tekst alternatywny obrazków i ikon
  • Powiększenie do 200% i przepływ treści (reflow)
  • prefers-reduced-motion i animacje
• Testowanie
  • Czytniki ekranu: NVDA, VoiceOver (macOS i iOS) i TalkBack w ćwiczeniach, JAWS (płatny, Windows) w pokazie
  • Automatyczne testy z axe w Playwright i w pipeline CI
  • Lighthouse i DevTools: drzewo dostępności
  • Czego automaty nie wykryją: ręczna lista kontrolna
• Dostępność w procesie
  • Wymagania w zadaniach i Definition of Done
  • Czytanie raportu z audytu WCAG
  • Informacja o sposobie spełniania wymagań dostępności przez usługę (EAA) i deklaracja dostępności w sektorze publicznym
  • Nakładki i widgety dostępności: dlaczego nie zastąpią poprawek w kodzie

Testy end-to-end z Playwright rozwija szkolenie Testy end-to-end.

Dla kogo?

• Dla zespołów frontendowych w firmach objętych European Accessibility Act.
• Dla programistów, którzy dostali raport z audytu WCAG do poprawienia.
• Dla osób budujących biblioteki komponentów i design systemy.
• Dla testerów, którzy chcą sprawdzać dostępność przed audytem.

Co musisz umieć?

• Tworzyć aplikacje webowe w HTML, CSS i JavaScript w wybranym frameworku (React, Angular lub inny). Jako tester wystarczy, że czytasz ich kod i piszesz testy automatyczne.
• Mieć komputer z Windows (NVDA) lub macOS (VoiceOver) oraz iPhone’a albo telefon z Androidem, żeby przetestować aplikację czytnikiem ekranu.

Czego się nauczysz?

• Wskażesz, które wymagania WCAG 2.2 i EAA dotyczą Twojej aplikacji.
• Napiszesz komponenty obsługiwane z klawiatury i czytnika ekranu.
• Dobierzesz semantyczny HTML zamiast div-ów z ARIA.
• Poprawisz kontrast, teksty alternatywne i zachowanie przy powiększeniu.
• Dodasz automatyczne testy dostępności do CI.
• Przetestujesz aplikację czytnikiem ekranu na komputerze i telefonie.
• Zrozumiesz raport z audytu WCAG i zaplanujesz poprawki.
• Przygotujesz informację o dostępności usługi wymaganą przez EAA.

Trener

Piotr Kowalski

W branży IT od 2008 roku. Od 2014 jest mentorem dla wielu developerów. Jako trener spędził na sali szkoleniowej kilka tysięcy godzin, a na LinkedIn ma 52 rekomendacje. Każde jego szkolenie to dawka solidnej wiedzy oraz humoru.

Więcej na stronie "O mnie"