Audyt WCAG: audyt dostępności i poprawki w Twoim kodzie

Projektanci, programiści frontendu i testerzy QA, którzy audytują Twój produkt, potem sami zmieniają jego komponenty w React, React Native lub Django. Robiliśmy to w Centrum Komunikacji i w Generatorze ETR dla PSONI, w aplikacjach webowych i natywnych aplikacjach mobilnych.

Na iOS i Androidzie czytnik ekranu komunikuje się z widokami natywnymi, więc zmiana często trafia do komponentu React Native. W słowniku wyjaśniamy, co zawiera raport z audytu dostępności. Hasło o WCAG 2.2 opisuje sam standard.

Daria Gusieva, Head of Design w Order Group od marca 2026, prowadzi UX, UI i dostępność według WCAG w projektach klientów. Recenzuje nasze hasła słownika o WCAG 2.2, audycie dostępności, testach z czytnikiem ekranu i zarządzaniu fokusem.

Cztery regulacje tłumaczą, dlaczego zespoły zamawiają audyt zgodności z WCAG:

• Europejski akt o dostępności (EAA), dyrektywa (UE) 2019/882, od 28 czerwca 2025 r. obejmuje wybrane produkty i usługi cyfrowe, w tym bankowość, e-commerce i e-booki.
• W Polsce dyrektywę wdraża ustawa z 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze (Dz.U. 2024 poz. 731).
• Polskie podmioty publiczne podlegają ustawie z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych (tekst jednolity Dz.U. 2023 poz. 1440), która wymaga dostępnych stron i aplikacji oraz opublikowanej deklaracji dostępności.
• Art. 100 Prawa zamówień publicznych wymaga, by opis przedmiotu zamówienia uwzględniał wymagania dostępności dla osób z niepełnosprawnościami, gdy z systemu będą korzystać ludzie. Tak WCAG trafia do specyfikacji przetargowych i umów.

To kontekst, a nie porada prawna. To, czy EAA obejmuje Twoją usługę, ocenia prawnik.

Podmioty publiczne zwykle zamawiają WCAG 2.1 AA, a specyfikacja PSONI wymaga WCAG 2.2 na poziomie AAA. Wersję i poziom wskazuje umowa albo prawo, a audyt się do nich stosuje.

Platforma zmienia audyt tak samo mocno jak wersja standardu. Stronę testujemy czytnikiem ekranu w przeglądarce, klawiaturą i powiększeniem. Aplikacja natywna dostaje rundy z VoiceOver na iOS i TalkBack na Androidzie, bo ten sam ekran zachowuje się na każdym inaczej. Zakres audytu mobilnego to więc liczba platform, a nie tylko liczba ekranów.

Poprawki dostępności polegają na zmianie komponentów, etykiet, komunikatów i stylów, dopóki każde kryterium nie przejdzie testu. Przykłady z projektów klientów:

• W aplikacji Centrum Komunikacji okna dialogowe otwierają się w stylu prezentacji fullScreen z React Native. VoiceOver zostaje w oknie i czyta jego 4 kontrolki, a nie 25 za nim. Na tym polega zarządzanie fokusem.
• Dla PSONI prowadzimy arkusz wszystkich etykiet ARIA, czyli nazw, które czytnik ekranu odczytuje na głos, w aplikacji webowej i mobilnej. Ten sam arkusz służy jako katalog komunikatów o błędach i statusach.
• Aplikacja PSONI ma 3 rozmiary czcionki: 100%, 150% i 200%, co spełnia wymóg powiększenia do 200% z kryterium 1.4.4. Użytkownik wybiera też głos męski lub żeński i prędkość czytania w syntezie mowy.
• W PSONI komunikat walidacji mówi użytkownikowi, co zrobić po przekroczeniu limitu znaków, a opis przycisku wyjaśnia, co on robi. Ponowny test we wrześniu 2026 to potwierdził.

Specyfikacja PSONI wymaga widocznej etykiety tekstowej przy każdej ikonie, zgodnie z WCAG 1.1.1 i wytycznymi W3C dla osób z trudnościami poznawczymi. Takie wymaganie spełnia się w projekcie interfejsu, zanim powstanie kod. Tym zajmuje się nasz zespół projektowania UX.

Centrum Komunikacji: WCAG 2.1 AA, czytniki ekranu i monitory brajlowskie

Centrum Komunikacji to aplikacja mobilna i webowa dla osób głuchych, słabosłyszących, niewidomych i głuchoniewidomych, działająca produkcyjnie od 20 kwietnia 2026. Wymaganiem było WCAG 2.1 AA oraz zgodność z czytnikami ekranu i monitorami brajlowskimi. Aplikację testowano z czytnikami ekranu przez cały projekt, a nasz zespół przygotował raport WCAG na odbiór drugiego etapu (27 kwietnia 2026).

Rundy odbyły się na iOS i Androidzie, każda z ponownym testem. Po pierwszej rundzie VoiceOver wybiera każdy kafelek i każdą ikonę menu dolnego jako osobny element, a klawiaturą brajlowską można wpisywać wartości w polach na iOS, co sprawdziliśmy na środowisku testowym. TalkBack i VoiceOver odczytują przyciski na liście spotkań właściwymi nazwami. Kolejna runda objęła etykietę przycisku zamykającego komunikat, odczyt komunikatów o błędach i listę dokumentów, w której każda pozycja ma własny opis. Po ponownych testach przeprowadziliśmy jeszcze jedną rundę z samym VoiceOver.

Niewidomy ekspert dostępności, który współpracuje z klientem, przetestował aplikację produkcyjną na iOS i Androidzie. Po jego uwagach każdy kafelek usługi ma własną etykietę czytaną przez czytnik ekranu, a fokus po wejściu na ekran zamówienia trafia we właściwe miejsce. Ponowny test objął obie platformy.

PSONI: Generator ETR i specyfikacja WCAG 2.2 AAA

Dla PSONI (Polskiego Stowarzyszenia na rzecz Osób z Niepełnosprawnością Intelektualną) budujemy Generator ETR, aplikację webową i mobilną, która zamienia dokumenty w tekst łatwy do czytania.

Runda z czytnikiem ekranu w przeglądarce zakończyła się 6 października 2026. Tester czytał tekst zdaniami i słowami oraz przechodził po elementach klawiszem Tab, a raport zamieniliśmy w osobne zadanie z poprawkami. W październiku 2026 odbyła się runda mobilna z TalkBack i VoiceOver, a oba systemy różnią się w szczegółach:

• Na Androidzie można wybrać pojedyncze słowo tekstu wprost. Na iOS czytnik wybiera blok i przesuwa się po słowach gestem, a podwójne dotknięcie otwiera objaśnienie słowa.
• Pasek postępu nagrania na Androidzie obsługuje się przesunięciem dwoma palcami, a na iOS dwukrotnym dotknięciem i przesuwaniem jednym palcem.
• Czytnik w telefonie odczytuje licznik ponownego wysłania kodu mniej więcej co 5 sekund. Ten rytm ustala sam czytnik.

Sprawdzamy też eksportowany dokument DOCX: język pl-PL, tytuł w metadanych, jeden nagłówek H1 i właściwe style nagłówków, Arial 14 pt, interlinię 1,5, czarny tekst na białym tle i format A4.

10 października 2026 zbadaliśmy ordergroup.co według WCAG 2.2 AA: 48 adresów po angielsku i po polsku, 55 kryteriów, axe-core i testy ręczne. Zmiany w kodzie z tego audytu trafiły do repozytorium tego samego dnia, a deklarację dostępności opublikowaliśmy 12 października. ordergroup.co spełnia WCAG 2.2 AA w zakresie tej deklaracji, czyli samooceny według WCAG-EM, metodyki oceny W3C.

Poza zakresem deklaracji są trzy elementy:

• Nagrania wideo w sekcji Wideo, do których napisy i transkrypcje są w przygotowaniu.
• E-booki PDF, które nie są w pełni otagowane. Na prośbę przesyłamy ich treść w dostępnej formie.
• Treści dostawców zewnętrznych: baner Cookiebot i odtwarzacz YouTube.

W nagłówku strony jest panel dostępności: większy tekst, wysoki kontrast, zatrzymanie animacji i wideo, podkreślenie linków i większe odstępy tekstu. Strona w pełni działa z klawiatury, ma link „Przejdź do treści” i widoczny fokus oraz respektuje systemowe ograniczenie ruchu. Układ działa na ekranie szerokim na 320 px i przy powiększeniu 200% bez przewijania w poziomie. Bariery można zgłaszać pod adresem z deklaracji, a odpowiadamy w ciągu 5 dni roboczych.

Trzy sprawdzenia, na których opiera się audyt, i ich wyniki po zmianach w kodzie: