Dostępność strony internetowej i WCAG - co warto wiedzieć jako właściciel firmy

Klient dzwoni z pretensją: “Na waszej stronie nie da się zamówić wyceny - przycisk znika, jak powiększę tekst w telefonie”. To nie fanatyk technologii. To człowiek z gorszym wzrokiem, który po prostu chciał złożyć zapytanie. Strona wygląda ładnie na Twoim monitorze, ale dla części użytkowników jest nie do ogarnięcia.

Taki problem często wychodzi dopiero po skardze albo po audycie przed zamówieniem publicznym. Tymczasem większość błędów da się wychwycić wcześniej - jeśli wiesz, czym jest WCAG i na co patrzeć.

WCAG w dwóch zdaniach

WCAG (Web Content Accessibility Guidelines) to zbiór wytycznych W3C opisujących, jak zrobić stronę internetową użyteczną dla jak najszerszej grupy ludzi - także dla osób z niepełnosprawnościami wzroku, słuchu, ruchu albo trudnościami poznawczymi.

To nie jest checklista “dodaj ikonkę niepełnosprawnych w stopce”. Chodzi o to, żeby treść dało się odczytać, zrozumieć, obsłużyć klawiaturą i nie gubić się w formularzach. Standard ma wersje - aktualnie mówi się o WCAG 2.1 i 2.2, a w praktyce najczęściej celuje się w poziom AA.

Poziomy A, AA i AAA - który ma sens

Wytyczne są podzielone na trzy poziomy zgodności:

Dla typowej strony firmowej, sklepu albo landing page sensowny cel to AA. Poziom A to za mało, jeśli chcesz spokojnie przejść audyt albo uniknąć problemów przy zamówieniach od instytucji. AAA bywa nierealny dla całej witryny - np. wymaga ekstremalnie wysokiego kontrastu wszędzie, co rozwala wiele współczesnych layoutów.

W przetargach i RFP często widzisz sformułowanie w stylu “zgodność z WCAG 2.1 na poziomie AA”. Warto to traktować serio od początku projektu, a nie dokładać na koniec.

Po co firmie dostępność poza “bo wymagają”

Najprostszy argument: więcej osób może złożyć zapytanie, kupić albo przeczytać ofertę. Oko 15-20% populacji ma jakąś niepełnosprawność - część trwała, część tymczasowa (złamana ręka, jasne słońce na ekranie, praca w głośnym open space bez słuchawek).

Dostępna strona zwykle jest też wygodniejsza dla wszystkich:

• większy kontrast pomaga czytać na telefonie w południe,
• sensowna struktura nagłówków ułatwia skanowanie oferty,
• formularz z jasnymi etykietami i komunikatami błędów mniej frustruje klientów,
• obsługa klawiaturą ratuje, gdy trackpad padnie albo używasz czytnika ekranu.

W Polsce i UE rośnie też presja prawna. Europejski Akt o Dostępności (EAA) obejmuje m.in. usługi cyfrowe firm - w tym strony i sklepy internetowe - z obowiązkami wdrożeniowymi od czerwca 2025. Nie każda mała firma dostaje od razu kontrolę, ale duzi klienci, partnerzy B2B i sektor publiczny coraz częściej pytają o dostępność przed podpisaniem umowy.

Najczęstsze błędy na stronach firmowych

W audytach i przy poprawkach powtarzają się te same rzeczy. Dobrze je znać, bo wiele da się naprawić bez przepisywania całej witryny.

Kontrast i czytelny tekst

Jasnoszary napis na białym tle wygląda “minimalistycznie”, ale dla wielu osób jest nieczytelny. WCAG AA wymaga co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla większych nagłówków. Czerwony przycisk CTA na ciemnym tle brzmi prosto - dopóki marketing nie wymusi koloru marki, który nie przechodzi progu.

Brak sensownych opisów obrazów

Dekoracyjna grafika w tle może mieć pusty alt. Zdjęcie produktu, schemat procesu albo infografika z cenami - nie. Czytnik ekranu czyta alt na głos. “IMG_4521.jpg” albo brak atrybutu to zamknięta informacja dla użytkownika, który nie widzi ekranu.

Formularze bez etykiet

Placeholder w polu “Imię i nazwisko” nie zastępuje labelki. Po wpisaniu tekstu znika, a czytnik ekranu często nie ma co odczytać. Komunikat błędu tylko na czerwono, bez tekstu “To pole jest wymagane”, zostawia użytkownika z pytaniem, co poszło nie tak.

Nawigacja tylko myszką

Rozwijane menu bez obsługi klawiatury, modal bez pułapki fokusu, karuzela bez pauzy - to codzienność na stronach, które “na oko” działają. Tabulator powinien przechodzić przez interaktywne elementy w logicznej kolejności, a Enter lub Spacja aktywować przycisk. Jeśli musisz łapać myszkę już przy pierwszym kliknięciu w menu - jest problem.

Nagłówki wylosowane

Trzy razy <h2> potem skok do <h4>, bo tak wyszedł design w Figmie. Dla wizualnie wszystko gra. Dla czytnika ekranu to złamana mapa strony. Jeden <h1> na podstronę, dalsze poziomy po kolei - H2 pod H2, H3 pod H3.

Film i audio bez transkrypcji

Rolka produktowa na stronie głównej bez napisów utrudnia odbiór osobom niedosłyszącym i tym, którzy oglądają bez dźwięku w biurze. Proste napisy albo transkrypcja pod wideo rozwiązuje sprawę taniej niż myślisz.

Jak sprawdzić stronę bez drogiego audytu

Pełny audyt z raportem i testami z użytkownikami ma sens przed dużym wdrożeniem albo przetargiem. Na co dzień wystarczy kilka narzędzi:

1. Lighthouse w Chrome (zakładka Accessibility) - szybki skan, nie wychwytuje wszystkiego, ale pokazuje oczywiste błędy.
2. axe DevTools lub WAVE - dokładniejsze raporty bezpłatne w przeglądarce.
3. Test klawiaturą - odśwież stronę, kliknij Tab i przejdź całą ścieżkę do formularza bez myszki.
4. Powiększenie tekstu do 200% w ustawieniach przeglądarki - czy layout się nie sypie i czy można nadal kliknąć CTA.
5. Wyłączenie kolorów - czy informacja nie opiera się wyłącznie na czerwonym/zielonym statusie.

Automat nie zastąpi człowieka. Potrafi potwierdzić kontrast i brak labelki, ale nie oceni, czy tekst w przycisku “Dowiedz się więcej” jest zrozumiały bez kontekstu. Dlatego sensowny proces to automat plus krótki przegląd ręczny kluczowych ścieżek: kontakt, wycena, koszyk, rejestracja.

Dostępność od początku projektu, nie na koniec

Najdrożej wychodzi doklejanie WCAG do gotowej strony zrobionej “pod design”. Taniej jest:

• ustalić paletę kolorów z progiem kontrastu już na etapie UI,
• projektować formularze z widocznymi labelkami, nie tylko placeholderami,
• pisać treści z logiczną hierarchią nagłówków,
• testować komponenty (menu, modal, slider) pod klawiaturą przy każdym wdrożeniu,
• nie blokować powiększania tekstu przez user-scalable=no w viewport.

Przy stronach statycznych w Astro albo headless sklepach większość komponentów da się zbudować raz dobrze i używać wielokrotnie. Przy page builderze i dziesiątkach wtyczek każda nowa sekcja to ryzyko kolejnego regresu - slider od jednego dostawcy, formularz od drugiego, popup od trzeciego, każdy z innymi błędami.

WCAG a SEO - co się przekłada

Google nie daje bonusu rankingowego w stylu “masz AA, masz top1”. Ale wiele wymagań WCAG pokrywa się z tym, co poprawia UX i indeksowanie: sensowne nagłówki, tekst alternatywny, czytelna struktura HTML, szybkie i przewidywalne interakcje. Strona niedostępna często jest też nieczytelna dla robota, gdy cała treść siedzi w animacji albo canvasie bez opisu.

Kiedy warto zamówić audyt u wykonawcy

Samodzielny skan wystarczy na start i przy małych poprawkach. Audyt zewnętrzny ma sens, gdy:

• startujesz sklep lub portal, na którym będą zamówienia publiczne,
• masz RFP z wymogiem WCAG 2.1 AA,
• po redesignie rosną porzucenia formularza, a nie wiesz dlaczego,
• chcesz dokumentację zgodności dla compliance albo ubezpieczenia OC.

Dobry raport nie kończy się listą 400 czerwonych punktów z narzędzia. Powinien priorytetyzować: co blokuje użytkowników teraz, co naprawić w kodzie, co wynika z treści po stronie klienta.

Na koniec

WCAG to nie abstrakcyjny standard dla urzędów. To konkret: kontrast, etykiety, klawiatura, sensowny HTML i treści, które da się odczytać na więcej niż jeden sposób. Poziom AA to realistyczny cel dla większości stron firmowych i sklepów. Im wcześniej weźmiesz to pod uwagę przy projekcie, tym mniej kosztuje późniejsze poprawianie.

Chcesz sprawdzić, czy Twoja strona ma oczywiste problemy z dostępnością albo planujesz witrynę pod wymagania WCAG? Napisz do nas - przejdziemy kluczowe ścieżki, wskażemy priorytety i powiemy, co naprawić w pierwszej kolejności.