WCAG (Web Content Accessibility Guidelines) to zestaw wytycznych definiujących dostępność stron internetowych, opracowany przez konsorcjum W3C (World Wide Web Consortium). Jeśli chcesz wiedzieć, co w ogóle oznacza dostępność cyfrowa, zacznij od artykułu o dostępności (accessibility) w WordPress – WCAG to standard, który ją precyzyjnie definiuje.
WCAG nie jest dokumentem skierowanym wyłącznie do deweloperów – dotyczy każdego, kto tworzy treści w internecie. Właściciel strony WordPress, który dodaje obrazy bez opisów alternatywnych, niechcący tworzy bariery dla użytkowników korzystających z czytników ekranu.
Wersje WCAG
Aktualne standardy z serii WCAG 2.x to WCAG 2.0, 2.1 i 2.2. Najnowszą wersją jest WCAG 2.2, która rozszerza WCAG 2.1 o dodatkowe kryteria sukcesu, m.in. dotyczące fokusu, rozmiaru celów kliknięcia, przeciągania elementów i dostępnego uwierzytelniania. W praktyce warto projektować pod WCAG 2.2, nawet jeśli konkretne regulacje prawne lub zamówienia nadal odwołują się do WCAG 2.1.
W3C pracuje nad WCAG 3.0, które ma wprowadzić inny model oceny, ale nie jest jeszcze gotowe do stosowania jako docelowy standard zgodności.
Cztery zasady WCAG
Całe WCAG opiera się na czterech zasadach (skrót POUR):
- Perceivable (Postrzegalny) – treści muszą być dostępne dla zmysłów użytkownika. Treść, której nie można zobaczyć, usłyszeć ani dotknąć, jest niedostępna.
- Operable (Funkcjonalny) – interfejs musi działać z klawiatury i innych urządzeń wejściowych, nie tylko myszy.
- Understandable (Zrozumiały) – treść i sposób działania strony muszą być zrozumiałe. Formularze powinny jasno wskazywać błędy.
- Robust (Solidny) – strona powinna działać poprawnie z różnymi technologiami wspomagającymi (czytniki ekranu, narzędzia powiększające, klawiatury alternatywne).
Poziomy zgodności
WCAG definiuje trzy poziomy:
- Poziom A – minimalne wymagania. Niespełnienie kryteriów poziomu A powoduje poważne bariery dla niektórych grup użytkowników.
- Poziom AA – najczęściej przyjmowany praktyczny standard dostępności dla stron i aplikacji. Wiele regulacji oraz wymagań przetargowych odwołuje się do poziomu AA, choć dokładny zakres obowiązków zależy od typu podmiotu, kraju i rodzaju usługi. Europejski Akt o Dostępności zaczął obowiązywać od 28 czerwca 2025 roku dla określonych produktów i usług, m.in. e-commerce, ale nie oznacza automatycznie, że każda komercyjna strona internetowa w UE podlega tym samym wymaganiom.
- Poziom AAA – najwyższy poziom. Bardzo trudny do osiągnięcia dla całej strony; W3C nie zaleca ustawiania AAA jako ogólnego celu dla całej witryny.
Kluczowe kryteria WCAG istotne dla stron WordPress
Teksty alternatywne dla obrazów (1.1.1, poziom A)
Każdy obraz niosący informację musi mieć atrybut alt z opisem treści. Obrazy dekoracyjne powinny mieć alt="" (pusty, nie brak atrybutu). WordPress udostępnia pole “Tekst alternatywny” w bibliotece mediów i w ustawieniach bloku obrazu, ale sama obecność tego pola nie gwarantuje poprawnego opisu. Media dodawane przez użytkownika powinny mieć świadomie uzupełniony alt tekst albo pusty alt, jeśli obraz jest wyłącznie dekoracyjny.
Kontrast kolorów (1.4.3, poziom AA)
Tekst musi mieć odpowiedni kontrast w stosunku do tła:
– Zwykły tekst: stosunek kontrastu co najmniej 4,5:1.
– Duży tekst (18pt lub 14pt pogrubiony): co najmniej 3:1.
Jasny szary tekst na białym tle, popularne w “nowoczesnym” designie, często nie spełnia tego kryterium. Kontrast sprawdzisz narzędziami takimi jak WebAIM Contrast Checker lub wtyczką Accessibility Checker.
Nawigacja klawiaturą (2.1.1, poziom A)
Wszystkie funkcje strony muszą być dostępne z klawiatury (Tab, Enter, spacja, strzałki). Dotyczy to menu nawigacji, formularzy, popupów, sliderów, galerii. Motyw lub wtyczka budująca interfejs musi obsługiwać fokus klawiatury. Sprawdzasz to, odkładając mysz i nawigując po stronie wyłącznie za pomocą klawiatury.
Widoczność fokusu (2.4.7, poziom AA)
Element aktualnie skupiony przez klawiaturę musi być wyraźnie widoczny. Wiele motywów CSS usuwa domyślny outline przeglądarki (outline: none) bez zastępowania go alternatywnym wskaźnikiem fokusu – to błąd dostępności.
WCAG 2.2 dodało też powiązane kryteria dotyczące tego, żeby fokus nie był zasłonięty przez elementy strony, np. sticky header, popup albo pasek cookies. W praktyce samo „widać obramowanie” nie wystarczy, jeśli obramowany element chowa się pod inną warstwą interfejsu.
Etykiety formularzy (1.3.1, 3.3.2)
Każde pole formularza musi mieć powiązaną etykietę (<label>). Placeholder jako jedyna etykieta nie wystarczy – znika po wpisaniu tekstu, co jest problemem dla użytkowników czytników ekranu i osób z problemami pamięci krótkotrwałej.
Nagłówki i struktura (1.3.1)
Strona powinna mieć logiczną hierarchię nagłówków (H1, H2, H3). W praktyce najczęściej stosuje się jeden główny H1 dla tytułu strony, nagłówki H2 dla głównych sekcji i H3 dla podsekcji. Najważniejsza jest jednak logiczna struktura dokumentu, a nie używanie nagłówków wyłącznie do powiększania tekstu. Nagłówki Gutenberga generują prawidłowe znaczniki HTML – problem pojawia się wtedy, gdy autorzy treści używają ich do formatowania wizualnego zamiast struktury logicznej.
Narzędzia do audytu WCAG w WordPress
- WAVE Accessibility Evaluator – rozszerzenie przeglądarki pokazujące błędy dostępności bezpośrednio na stronie.
- Accessibility Checker by Equalize Digital – wtyczka WordPress skanująca treści w edytorze i raportująca błędy WCAG.
- axe DevTools – rozszerzenie do Chrome/Firefox dla deweloperów.
- Lighthouse (wbudowany w Chrome DevTools) – zakładka Accessibility w raporcie Lighthouse.
Żaden automatyczny audyt nie wykryje wszystkich problemów. Testy z prawdziwymi użytkownikami korzystającymi z technologii wspomagających (czytnik ekranu VoiceOver, NVDA) są niezastąpione przy poważnym podejściu do dostępności.
WCAG a Gutenberg
Edytor Gutenberg od wersji 5.x jest rozwijany z uwzględnieniem dostępności. Korzysta z ARIA (Accessible Rich Internet Applications), obsługuje nawigację klawiaturą i ma wbudowane kontrole dostępności. Jednak to nie gwarantuje automatycznie, że treść tworzona w Gutenbergu jest dostępna – za alt teksty, strukturę nagłówków i kontrast kolorów odpowiada autor treści.
Podsumowanie
WCAG to czterozasadowy standard dostępności (POUR) opracowany przez W3C, z trzema poziomami zgodności (A, AA, AAA). Poziom AA jest wymagany przez europejskie regulacje prawne i stanowi rozsądny cel dla większości stron WordPress. Kluczowe kryteria to alt teksty, kontrast kolorów, nawigacja klawiaturą i widoczność fokusu. Automatyczne narzędzia pomagają wykryć część błędów, ale pełny audyt wymaga testów manualnych.