W tym artykule omówię najczęstsze błędy związane z dostępnością stron internetowych według wytycznych WCAG 2.2 i pokażę, jak je naprawić. Znajdziesz tutaj konkretne wskazówki, narzędzia do samodzielnego audytu oraz informacje o tym, które błędy możesz poprawić sama, a które wymagają pomocy specjalistki.
WCAG (Web Content Accessibility Guidelines) to międzynarodowe wytyczne dotyczące dostępności treści internetowych, opracowane przez organizację W3C. W skrócie: to zestaw zasad, które sprawiają, że strony internetowe są użyteczne dla wszystkich, także dla osób z niepełnosprawnościami wzroku, słuchu, ruchu czy funkcji poznawczych.
Aktualna wersja to WCAG 2.2, obowiązująca od października 2023 roku. Zawiera cztery główne zasady, które musi spełniać dostępna strona:
WCAG definiuje trzy poziomy zgodności: A (podstawowy), AA (zalecany standard) i AAA (zaawansowany). Większość wymagań prawnych odnosi się do poziomu AA.
W Polsce od 2019 roku obowiązuje Ustawa o dostępności cyfrowej podmiotów publicznych. Od 28 czerwca 2025 roku wchodzi w życie Europejski Akt o Dostępności (EAA), który rozszerza obowiązki także na wiele firm prywatnych, szczególnie tych prowadzących sprzedaż online. Jeśli prowadzisz sklep internetowy lub platformę kursową, ta regulacja może Cię dotyczyć bezpośrednio.
Dostępna strona to nie tylko kwestia etyki, to także lepsza pozycja w Google. Algorytmy wyszukiwarek premiują strony, które:
Innymi słowy: wiele wymagań WCAG pokrywa się z dobrymi praktykami SEO. Naprawiając dostępność, poprawiasz jednocześnie widoczność swojej strony w wyszukiwarce.
Zanim zaczniesz naprawiać, warto wiedzieć, co dokładnie wymaga poprawy. Oto cztery narzędzia, z których korzystam przy audytach:
Bezpłatne narzędzie online. Wklejasz adres swojej strony i dostajesz wizualny raport błędów. Pokazuje problemy z kontrastem, brakujące opisy alt i błędy struktury. Dobre na początek, bo pokazuje dokładnie gdzie na stronie występuje problem.
Wbudowany w przeglądarkę Chrome audytor. Kliknij prawym przyciskiem myszy na stronie, wybierz „Zbadaj”, potem zakładkę „Lighthouse” i uruchom audyt dostępności. Daje ocenę punktową i listę konkretnych zaleceń.
Służy wyłącznie do sprawdzania kontrastu kolorów. Wpisujesz kolor tekstu i tła, a narzędzie mówi Ci czy spełniasz wymogi WCAG AA.
Jeśli masz stronę na WordPressie, wtyczka WP Accessibility lub Accessibility Checker (Equalize Digital) pozwala sprawdzać dostępność bezpośrednio z poziomu panelu admina, przy każdym poście lub stronie.
Przy każdym błędzie znajdziesz etykietę poziomu trudności naprawy:
Problem: Obrazki bez atrybutu alt są niewidoczne dla czytników ekranu i nieindeksowane przez Google.
Jak sprawdzić: Uruchom WAVE, czerwone ikony przy obrazkach oznaczają brakujące opisy.
Jak naprawić w WordPress: Wejdź do Biblioteki Mediów, kliknij obrazek i uzupełnij pole „Tekst alternatywny”. Przykład: „Natalia Andrzejczuk przy laptopie, konsultacja online”. Jeśli obrazek jest wyłącznie dekoracyjny (np. separator graficzny), zostaw pole puste, to też jest poprawne według WCAG.
🟢 Możesz naprawić sama
Problem: Jasny tekst na jasnym tle jest nieczytelny dla osób z dysfunkcjami wzroku oraz w warunkach słabego oświetlenia.
Wymaganie WCAG: Współczynnik kontrastu co najmniej 4,5:1 dla tekstu zwykłego i 3:1 dla dużego tekstu (powyżej 18pt lub 14pt pogrubionego).
Jak naprawić: Sprawdź kontrast na contrastchecker.com. Szary tekst (#999999) na białym tle (#FFFFFF) ma kontrast 2,85:1, za mało. Ciemnoszary (#595959) na białym tle daje 7:1, w porządku.
🟡 Wymaga edycji kolorów w motywie WordPress lub Elementorze
Problem: Osoby niekorzystające z myszy (np. z niepełnosprawnością ruchową) muszą móc poruszać się po stronie wyłącznie klawiaturą.
Jak sprawdzić: Otwórz swoją stronę i naciśnij Tab. Powinna podświetlać kolejne elementy (linki, przyciski, pola formularza). Jeśli nic się nie podświetla albo kolejność jest chaotyczna, masz problem.
Jak naprawić w WordPress: Sprawdź czy motyw ma wbudowany styl fokusu. Jeśli nie, dodaj w CSS: a:focus, button:focus { outline: 2px solid #E8593C; outline-offset: 2px; }
🔴 Zalecana pomoc specjalistki
Problem: Nawet jeśli obsługa klawiaturą działa technicznie, często projektanci usuwają widoczny fokus, bo „wygląda brzydko”. To poważny błąd dostępności. W CSS pojawia się jako outline: none.
Jak naprawić: Zamiast usuwać fokus, zaprojektuj go estetycznie. Możesz użyć koloru marki, np. outline: 2px solid #E8593C. Fokus nie musi być brzydki, musi być widoczny.
🟡 Edycja CSS motywu
Problem: Wiele stron WordPress używa nagłówków (H1, H2, H3) jako elementów stylizacyjnych, a nie strukturalnych. Na stronie są dwa H1 albo H3 pojawia się przed H2. To dezorientuje czytniki ekranu i szkodzi SEO.
Zasada: Jedna strona = jeden H1 (tytuł strony lub artykułu). Podsekcje to H2. Podsekcje podsekcji to H3. Nie pomijaj poziomów.
Jak sprawdzić: W WAVE kliknij zakładkę Structure, zobaczysz drzewo nagłówków swojej strony.
🟢 Możesz naprawić sama w edytorze WordPress lub Elementorze
Problem: Formularz nie działa, ale jedyna informacja to czerwona ramka lub komunikat „Błąd”. Użytkownik nie wie, które pole poprawić i dlaczego.
Jak powinno być: Każdy błąd powinien mówić dokładnie, co jest nie tak: „Pole e-mail jest wymagane”, „Format adresu e-mail jest nieprawidłowy”, „Numer telefonu powinien zawierać 9 cyfr”.
W WordPress / Contact Form 7 / Elementor Forms: Sprawdź ustawienia walidacji formularza i dostosuj treści komunikatów błędów.
🟢 Możesz naprawić sama w ustawieniach wtyczki formularza
Problem: Na telefonie trudno trafić w małe przyciski lub linki ustawione blisko siebie. WCAG 2.2 wprowadziło nowe kryterium (2.5.8) dotyczące minimalnego rozmiaru obszaru dotyku.
Wymaganie: Minimalny rozmiar obszaru klikalnego to 24×24 px. Zalecany to 44×44 px (standard Apple i Google). Odstęp między elementami klikalnymi co najmniej 24 px.
Jak naprawić: W Elementorze lub CSS zwiększ padding przycisków i upewnij się, że linki w menu nie są zbyt gęsto upakowane na widoku mobilnym.
🟡 Edycja stylów mobilnych w Elementorze
Problem: Pola formularza mają tylko placeholder (szary tekst wewnątrz pola, który znika po kliknięciu). Bez widocznej etykiety czytnik ekranu nie wie, czego dotyczy pole.
Jak powinno być: Każde pole powinno mieć widoczną etykietę (label) nad lub obok pola, powiązaną z nim kodem HTML. Placeholder może być dodatkiem, ale nie zastąpieniem etykiety.
🔴 Zależy od wtyczki formularza, czasem prosto, czasem wymaga edycji kodu
Problem: Jeśli na Twojej stronie są filmy z mową, osoby niesłyszące nie mogą skorzystać z tej treści.
Wymaganie WCAG: Nagrania wideo z mową muszą mieć napisy (poziom A) lub transkrypcję tekstową (poziom AA).
Jak naprawić: YouTube automatycznie generuje napisy, możesz je edytować i poprawić w panelu YouTube Studio. W przypadku wideo osadzonego na stronie dodaj transkrypcję tekstową poniżej filmu.
🟢 Możesz zrobić sama na YouTube Studio
Problem: Linki z tekstem „kliknij tutaj”, „więcej” lub „tutaj” są bezużyteczne dla osób korzystających z czytników ekranu, nie wiadomo dokąd prowadzą.
Jak powinno być: Tekst linku powinien opisywać jego cel: „Pobierz cennik usług”, „Przejdź do portfolio”, „Umów bezpłatną konsultację”.
🟢 Możesz naprawić sama edytując treści strony
Dostępność to nie tylko wymóg prawny. To wyraz troski o użytkownika i jednocześnie inwestycja w SEO i wizerunek marki. Większość błędów opisanych w tym artykule możesz naprawiać stopniowo, zaczynając od tych najprostszych.
Dobra kolejność działania:
Chcesz, żebym spojrzała na Twoją stronę WordPress pod kątem WCAG? Napisz do mnie i razem to ogarniemy.
Przeczytaj także: Jak przeprowadzić audyt WCAG krok po kroku
