Dostępność WCAG strony: dlaczego to się opłaca

WCAG ma trzy poziomy: A (minimum), AA (standard), AAA (najwyższy)
Od 28 czerwca 2025 dostępność jest obowiązkowa dla sklepów w Polsce
Cztery filary: kontrast, opisy alt, obsługa klawiaturą, widoczny focus
Dostępna strona lepiej rankuje w Google i ma niższy odrzut
Większość poprawek w WordPress robisz bez przebudowy serwisu
[/dwb_keytakeaways]

Czym jest WCAG i po co Ci to

WCAG (Web Content Accessibility Guidelines) to międzynarodowy zestaw wytycznych, które mówią, jak zbudować stronę, żeby skorzystał z niej każdy. Każdy, czyli też osoba niedowidząca czytająca przez syntezator mowy, osoba z drżeniem rąk klikająca samą klawiaturą, ktoś z daltonizmem albo po prostu klient w jaskrawym słońcu na przystanku, który nie widzi szarego tekstu na białym tle.

Brzmi jak temat dla wąskiej grupy, ale to złudzenie. Z barier na stronie obrywa znacznie więcej osób, niż myślisz, bo ograniczenia bywają czasowe i sytuacyjne. Złamana ręka, głośne otoczenie, słaby telefon, zmęczone oczy wieczorem. Dostępność to nie jest funkcja dla mniejszości, tylko jakość, którą odczuwa cała Twoja publiczność.

Dla Ciebie jako właściciela strony WCAG ma trzy konkretne twarze: to obowiązek prawny, to czynnik SEO i to realny wpływ na konwersję. W tym tekście pokażę wszystkie trzy, a potem konkretnie, jak to wdrożyć w WordPress bez przebudowy serwisu od zera.

Poziomy A, AA i AAA: który Cię obowiązuje

WCAG dzieli wymagania na trzy poziomy zgodności. To nie są oddzielne standardy, tylko schodki: AA zawiera w sobie całe A, a AAA całe AA.

• Poziom A: absolutne minimum. Bez niego część osób w ogóle nie skorzysta ze strony. Tu mieści się na przykład wymóg opisów alt dla obrazów i obsługa podstawowych funkcji klawiaturą.
• Poziom AA: standard rynkowy i ten poziom wskazują przepisy. Dochodzi tu kontrast tekstu 4,5:1, czytelne komunikaty błędów w formularzach i spójna nawigacja. To jest cel, do którego dążysz.
• Poziom AAA: najwyższy, bardzo wymagający. W praktyce rzadko da się go spełnić na całej stronie, więc traktuje się go jako ambicję dla wybranych elementów, nie jako wymóg dla całego serwisu.

W praktyce, gdy ktoś mówi o dostępnej stronie, ma na myśli WCAG na poziomie AA. To rozsądny kompromis między realnym dostępem dla użytkowników a możliwą do osiągnięcia pracą wdrożeniową. Celuj w AA i tego się trzymaj.

Kto zyskuje na dostępnej stronie

Najłatwiej myśleć o dostępności przez pryzmat konkretnych osób, którym ułatwiasz życie. Lista jest dłuższa, niż się wydaje.

• Osoby niewidome i niedowidzące: korzystają z czytników ekranu, które odczytują kod strony na głos. Bez opisów alt i poprawnej struktury słyszą bełkot zamiast treści.
• Osoby z ograniczeniami ruchowymi: nawigują samą klawiaturą albo specjalnym sprzętem. Jeśli czegoś nie da się dosięgnąć tabulatorem, dla nich tego po prostu nie ma.
• Osoby z daltonizmem: nie odróżnią informacji podanej samym kolorem, na przykład czerwonego pola błędu bez tekstu.
• Seniorzy: rosnąca i zamożna grupa kupujących, której służy większy tekst, wyraźny kontrast i prosta nawigacja.
• Każdy w trudnych warunkach: słońce na ekranie, hałas zamiast dźwięku w wideo, jedna wolna ręka. Dostępność ratuje też w pełni sprawnych w niesprzyjającym momencie.

Cztery filary, które robią największą różnicę

Pełne WCAG to dziesiątki kryteriów, ale w codziennej pracy cztery rzeczy odpowiadają za większość realnej dostępności. Od nich zaczynaj.

1. Kontrast tekstu: zwykły tekst potrzebuje kontrastu co najmniej 4,5:1 wobec tła, duży tekst 3:1. Jasnoszary napis na białym tle to klasyczny błąd, który wygląda elegancko w projekcie, a w praktyce jest nieczytelny.
2. Opisy alternatywne (alt): każdy obraz niosący treść potrzebuje krótkiego opisu, który czytnik odczyta na głos. Obrazy czysto dekoracyjne zostawiasz z pustym alt, żeby czytnik je pominął.
3. Obsługa klawiaturą: całą stronę da się obsłużyć bez myszy. Menu, rozwijane listy, suwaki, koszyk, formularze. Wszystko osiągalne tabulatorem w logicznej kolejności.
4. Widoczny focus: gdy przechodzisz tabulatorem, aktualny element musi być wyraźnie obrysowany. Usuwanie tej obwódki w CSS, bo wydaje się brzydka, to jeden z najczęstszych grzechów, który odcina obsługę klawiaturą.

Do tego dochodzi ARIA, czyli zestaw atrybutów, które dopowiadają czytnikowi ekranu rolę i stan elementu, na przykład że przycisk hamburger otwiera menu i czy jest właśnie otwarte. ARIA to przydatne narzędzie, ale z zasadą: lepszy poprawny element HTML niż łatany dziwny element z doklejoną rolą. Pierwsza reguła ARIA brzmi wprost, żeby nie używać ARIA, jeśli da się użyć natywnego znacznika.

Korzyść SEO i konwersja: tu robi się ciekawie

To jest część, którą najczęściej pomijają poradniki, a dla Ciebie biznesowo najważniejsza. Dostępność i SEO to w dużej mierze ta sama robota. Google jest jak wymagający, niewidomy użytkownik: nie widzi ładnej grafiki, czyta kod, strukturę i tekst.

• Opisy alt pomagają czytnikom ekranu i jednocześnie Grafice Google zrozumieć, co jest na zdjęciu.
• Poprawna struktura nagłówków H1, H2, H3 prowadzi czytnik po treści i tak samo pomaga robotom Google zrozumieć hierarchię strony.
• Czytelne linki z sensownym tekstem zamiast pustego kliknij tutaj są zrozumiałe dla wszystkich i niosą wartość dla SEO.
• Semantyczny, lekki kod ładuje się szybciej i stabilniej, co poprawia Core Web Vitals, a te są czynnikiem rankingowym.

Po stronie konwersji efekt jest równie konkretny. Lepszy kontrast i większy tekst to mniej zmęczenia i więcej osób, które dochodzą do kasy. Czytelne błędy w formularzu (na czym dokładnie polega problem, a nie samo czerwone pole) to mniej porzuconych zamówień. Pełna obsługa klawiaturą to klienci, którzy w ogóle są w stanie kupić. Dostępność nie jest kosztem dla garstki, jest usprawnieniem dla wszystkich, które widać w liczbach.

Aspekt prawny: co zmieniło się od czerwca 2025

Tu zaczyna się temat, którego nie da się dłużej odkładać. European Accessibility Act (EAA) to dyrektywa unijna, którą Polska wdrożyła ustawą z 26 kwietnia 2024 o zapewnianiu spełniania wymagań dostępności przez niektóre produkty i usługi. Obowiązki ruszyły 28 czerwca 2025.

W praktyce oznacza to, że sklepy internetowe sprzedające konsumentom muszą spełniać WCAG 2.1 na poziomie AA i udostępniać deklarację dostępności. Przewidziano okres przejściowy do 28 czerwca 2030 dla części usług działających przed wejściem przepisów, więc istniejący sklep ma czas na dostosowanie. Za brak dostępności grożą kary finansowe, w polskich przepisach do 10 000 zł, a za brak wymaganej deklaracji dostępności do 5000 zł.

Dla rynku DE realia są podobne, ale jeszcze ostrzejsze finansowo. Tam ten sam akt unijny wdraża Barrierefreiheitsstaerkungsgesetz (BFSG), który również obowiązuje od 28 czerwca 2025, obejmuje sklepy B2C i odwołuje się do normy EN 301 549, czyli faktycznie do WCAG na poziomie AA. Kary w Niemczech sięgają od 10 000 do 100 000 euro. Jeśli sprzedajesz na oba rynki, jeden porządnie zrobiony standard AA załatwia obie jurysdykcje naraz.

Audyt i narzędzia: jak zmierzyć stan strony

Zanim zaczniesz cokolwiek poprawiać, zmierz punkt wyjścia. Część rzeczy wykryją darmowe narzędzia automatyczne, ale uprzedzam od razu: automat łapie najwyżej połowę problemów. Reszty, jak sensowność opisów alt czy logiczna kolejność tabulatora, nie oceni żadna maszyna.

• WAVE (wave.webaim.org): wtyczka i strona, która pokazuje błędy kontrastu i braki alt bezpośrednio na podglądzie strony. Świetna na start.
• axe DevTools: rozszerzenie do przeglądarki, dokładny audyt techniczny dla osób, które chcą wejść głębiej w kod.
• Lighthouse: wbudowany w Chrome, zakładka dostępność daje szybki wynik liczbowy i listę problemów.
• Test ręczny klawiaturą: odłóż mysz i przejdź całą ścieżkę zakupu. Żaden automat tego nie zastąpi.
• Czytnik ekranu: NVDA na Windows jest darmowy. Włącz i posłuchaj, jak strona brzmi naprawdę. To otwiera oczy.

Częste błędy, które widzę najczęściej

Przez lata pracy z WordPress i WooCommerce te same problemy wracają jak bumerang. Jeśli sprawdzisz tylko tę listę, naprawisz większość typowych barier.

• Za niski kontrast tekstu: modne jasnoszare napisy na białym tle. Wygląda nowocześnie, czyta się fatalnie.
• Brak opisów alt albo alt wypełniony nazwą pliku typu IMG_2381 zamiast treścią.
• Usunięty focus w CSS regułą outline: none bez żadnej alternatywy, co praktycznie wyłącza obsługę klawiaturą.
• Informacja podana samym kolorem: czerwone pole błędu bez tekstu, zielona kropka statusu bez opisu.
• Nakładki dostępności: doklejony widżet z suwakami, który udaje zgodność, a często przeszkadza czytnikom ekranu i niczego realnie nie naprawia.
• Karuzele i pop-upy bez możliwości zatrzymania i bez obsługi klawiaturą, w których użytkownik się zakleszcza.

Jak wdrożyć WCAG w WordPress

Dobra wiadomość na koniec: w WordPress większość poprawek robisz bez przebudowy serwisu. Oto kolejność prac, którą stosuję u klientów.

Taki zestaw kroków doprowadza większość stron WordPress do zgodności z WCAG AA bez wymiany całego motywu. Schody zaczynają się przy serwisach na ciężkich kreatorach, które generują zagmatwany kod, albo przy starych motywach bez semantyki. Wtedy potrzebny jest audyt i konkretne poprawki w kodzie, a czasem lekki motyw pisany pod projekt.

Jeśli chcesz mieć to zrobione raz a porządnie, w DawidWeb robię audyty dostępności i wdrożenia WCAG AA dla stron i sklepów: poprawa kontrastu, opisów alt, obsługi klawiaturą i focusu, uporządkowanie struktury oraz przygotowanie deklaracji dostępności. Strony i sklepy buduję od 1800 zł, mam za sobą ponad 120 projektów, a wycenę konkretnego wdrożenia dostajesz w 24 godziny.