WCAG i Europejski Akt o Dostępności – kompletny przewodnik dla przedsiębiorców

Dostępność stron internetowych to nie tylko fakt, że są one online i można zapoznać się z ich zawartością. To także dbałość o to, aby z Twojej witryny mogli swobodnie korzystać wszyscy – w tym osoby z niepełnosprawnościami ruchowymi czy poznawczymi.

Właśnie tego dotyczą wytyczne WCAG, które do tej pory miały charakter zaleceń. Zmienia to Europejski Akt o Dostępności (EAA), który zacznie obowiązywać w Polsce od 28 czerwca 2025 roku.

Nakłada on prawny obowiązek dostosowania się do WCAG 2.2 m.in. przez sklepy internetowe, platformy cyfrowe, banki, firmy transportowe i wielu innych przedsiębiorców.

Z czym się to wiąże? Jakich w praktyce obowiązków musisz dopełnić? Wszystkiego dowiesz się z poniższego artykułu.

Czym jest WCAG?

WCAG to skrót od Web Content Accessibility Guidelines. Jest to zestaw międzynarodowych wytycznych, które pomagają projektować strony internetowe tak, aby były dostępne dla wszystkich. Mowa tu nie tylko o osobach niewidomych, ale też o użytkownikach z niepełnosprawnościami ruchowymi, słuchowymi, poznawczymi czy z ograniczeniami technologicznymi (np. starszy sprzęt, brak myszy, wolne łącze).

Stosowanie się do tych zaleceń ma sprawić, że treści w Internecie będą widoczne, możliwe do obsłużenia za pomocą różnych urządzeń, łatwe do zrozumienia i kompatybilne z technologiami wspomagającymi, jak czytniki ekranu.

Wytyczne WCAG to dziś najważniejszy globalny punkt odniesienia, jeśli chodzi o dostępność stron i aplikacji. Są podstawą przepisów w wielu krajach – i właśnie do nich odwołuje się Europejski Akt o Dostępności (EAA), który w 2025 r. uczyni WCAG obowiązkowym także dla wielu polskich firm.

WCAG 2.0, 2.1, 2.2 – czym się różnią?

Standard WCAG rozwija się wraz z technologią i potrzebami użytkowników. Każda wersja dodaje nowe wymagania – nie po to, by utrudnić życie właścicielom stron, ale by nadążyć za zmianami.

Oto ich krótka historia:

WCAG 2.0 (2008)

To pierwsza wersja standardu, która ugruntowała podstawowe zasady dostępności stron internetowych. Skupiała się głównie na tekstach alternatywnych, strukturze nagłówków, możliwościach nawigacji i logicznej organizacji treści.

WCAG 2.0 stała się fundamentem dla wielu regulacji na całym świecie – w tym dla polskiej ustawy o dostępności stron instytucji publicznych.

WCAG 2.1 (2018)

To z kolei odpowiedź na rosnące znaczenie urządzeń mobilnych i potrzeb osób z niepełnosprawnościami poznawczymi. Dodano 17 nowych kryteriów, które dotyczą m.in.:

• działania interfejsów dotykowych (np. przyciski muszą być odpowiednio duże),
• zapobiegania zanikowi treści podczas obrotu ekranu,
• pomocy osobom z trudnościami w koncentracji i zapamiętywaniu informacji.

WCAG 2.2 (2023)

Najnowsza wersja wprowadza 9 dodatkowych kryteriów. Są to m.in.:

• Focus Appearance – gdy użytkownik porusza się po stronie za pomocą klawiatury (np. używając klawisza Tab), powinno być dobrze widać, który element jest aktualnie zaznaczony – np. przycisk, link czy pole formularza. To zaznaczenie (czyli tzw. „focus”) musi mieć odpowiedni kolor, obramowanie lub podświetlenie, żeby nie dało się go przeoczyć.
• Accessible Authentication – użytkownik powinien móc się zalogować bez konieczności rozwiązywania zagadek, zapamiętywania haseł czy przepisywania kodów SMS.
• Dragging Movements – strona nie powinna wymagać przeciągania elementów (drag and drop), jeśli nie jest to absolutnie konieczne.

To właśnie WCAG 2.2 na poziomie AA stanie się podstawą prawną dla przedsiębiorców działających online  zgodnie z Europejskim Aktem o Dostępności.

Zasady POUR w praktyce

Wytyczne WCAG opierają się na czterech kluczowych zasadach, określanych skrótem POUR. Oto one:

1. Postrzegalność (Perceivable). Użytkownicy muszą korzystać ze stron internetowych za pomocą dostępnych dla nich zmysłów – czyli słuchu lub wzroku. Przykłady spełniania zaleceń WCAG w tym zakresie to obrazy z opisem alternatywnym (ALT) czy napisy do materiałów wideo.
2. Funkcjonalność (Operable). Strony www powinny umożliwiać obsługę na różne sposoby – nie tylko za pomocą myszki, ale też przy użyciu klawiatury czy głosu.
3. Zrozumiałość (Understandable). Treść i sposób działania strony muszą być intuicyjne, przewidywalne i spójne. Chodzi tu m.in. o prosty język, zrozumiałe podpowiedzi czy dostępne i zrozumiałe komunikaty błędów w formularzach i podpowiedzi jak je poprawić.
4. Solidność (Robust). Strona powinna być sprawna technicznie i kompatybilna z różnymi urządzeniami oraz technologiami wspomagającymi, np. czytnikami ekranu. Przykład zastosowania to uporządkowany kod HTML z użyciem semantycznych znaczników i atrybutów ARIA.

WCAG 2.2 – najważniejsze zmiany w stosunku do WCAG 2.1

Wersja 2.2 rozszerza wcześniejsze wytyczne o dodatkowe wymagania – głównie po to, żeby poprawić dostępność interfejsów mobilnych oraz ułatwić korzystanie ze stron osobom z ograniczeniami poznawczymi.

Oto najważniejsze z nich:

• Focus musi być widoczny i nie może być zasłonięty – aktywne elementy (np. przyciski) muszą być dobrze oznaczone i nie mogą być przykryte nagłówkami czy pop-upami.
• Klikalne elementy muszą być odpowiednio duże – minimum 24×24 px, żeby dało się je łatwo kliknąć palcem.
• Nie można wymagać tylko przeciągania (drag & drop) – musi być jakaś alternatywa dla takiego systemu, np. przyciski.
• Logowanie nie może być przesadnie trudne – np. bez skomplikowanych CAPTCHA czy konieczności zapamiętywania długich haseł.
• Pomoc (kontakt, czat) powinna być dostępna w tym samym miejscu z poziomu każdej podstrony.
• Nie każ użytkownikowi wpisywać dwa razy tych samych danych, jeśli już raz je podał – chodzi np. o adres e-mail w procesie zakupu.

Kogo obowiązuje WCAG 2.2?

W Polsce obowiązek spełniania wytycznych WCAG dotyczy przede wszystkim:

• instytucji publicznych (urzędy, szkoły, szpitale),
• podmiotów realizujących zadania publiczne,
• części organizacji pozarządowych (jeśli otrzymują środki publiczne i świadczą usługi online).

Dla nich nadal formalnie obowiązuje WCAG 2.1 na poziomie AA, choć zaleca się już dostosowanie do WCAG 2.2.

Firmy prywatne (np. sklepy internetowe, serwisy komercyjne) nie są dziś objęte WCAG wprost – ale od 28 czerwca 2025 roku wchodzi w życie Europejski Akt o Dostępności (EAA), który wymaga zgodności z WCAG co najmniej 2.1 AA (a najlepiej 2.2).

Twórcy i dostawcy oprogramowania (np. platformy e-commerce, systemy płatności) również będą musieli spełniać wymagania EAA, czyli projektować narzędzia zgodne z zasadami dostępności.

Europejski Akt o Dostępności (EAA) – co zmienia dla firm?

Od 28 czerwca 2025 roku w Polsce zacznie obowiązywać nowa ustawa wdrażająca Europejski Akt o Dostępności (EAA). 

W praktyce oznacza to, że jeśli sprzedajesz produkty lub świadczysz usługi przez stronę internetową lub aplikację, Twoja firma będzie musiała spełniać wymagania dotyczące dostępności cyfrowej.

Podstawą techniczną tych wymagań jest WCAG – dokładnie wersja 2.1 lub nowsza, na poziomie AA.

Brzmi jak wytyczne dla deweloperów? Tak, ale to Ty – jako właściciel firmy – ponosisz za to odpowiedzialność. W grę wchodzą nie tylko kwestie wizerunkowe czy SEO, ale również realne konsekwencje prawne. Ustawa przewiduje kontrole i sankcje.

Kogo obejmuje EAA?

Europejski Akt o Dostępności dotyczy firm, które oferują konkretne produkty i usługi – nie wszystkich bez wyjątku. Jeśli działasz w jednej z poniższych branż, obowiązki prawdopodobnie będą dotyczyć także Ciebie:

• e-commerce – sklepy internetowe, platformy sprzedażowe, aplikacje zakupowe,
• bankowość i finanse – bankowość internetowa i mobilna, terminale płatnicze,
• transport – systemy rezerwacji i sprzedaży biletów (lotniczych, kolejowych, autobusowych),
• usługi cyfrowe – e-booki, aplikacje mobilne, platformy streamingowe, komunikatory, chatboty.

Jakie elementy muszą być zgodne z EAA?

Oto lista elementów, które muszą spełniać wymagania dostępności cyfrowej:

• nagłówki i struktura treści – logiczna hierarchia, ułatwiająca nawigację,
• linki i przyciski – jednoznaczne opisy, możliwość obsługi klawiaturą,
• formularze – poprawnie oznaczone pola, komunikaty o błędach, obsługa bez myszy,
• teksty alternatywne (alt) – dla zdjęć, ikon, grafik i banerów,
• kontrast kolorów – wystarczający kontrast tekstu względem tła,
• treści wideo i audio – napisy, audiodeskrypcje lub alternatywne formy treści,
• nawigacja – przewidywalna, powtarzalna, możliwa do obsługi klawiaturą,
• komunikaty i powiadomienia – czytelne, dostępne także dla czytników ekranu,
• interaktywne elementy – np. suwaki, menu rozwijane, widgety – dostępne i zrozumiałe,
• dokumenty do pobrania (np. PDF) – odpowiednio oznaczone, możliwe do odczytania przez programy wspomagające.

Jak wdrożyć WCAG 2.2 krok po kroku?

Oto, jak dostosować swoją stronę do obowiązujących przepisów i poprawić doświadczenia użytkowników:

Przeprowadź audyt dostępności

Oto narzędzia, które Ci w tym pomogą:

• WAVE – wystarczy, że wkleisz adres strony, a narzędzie pokaże problemy – bez ingerencji w kod. Zaznaczy błędy bezpośrednio na stronie i poda Ci krótkie wyjaśnienia.
• axe DevTools – to wtyczka do Chrome. Narzędzie pokazuje błędy dostępności wraz z jasnymi wskazówkami, co i jak poprawić.
• Siteimprove Accessibility Checker – wtyczka do Chrome i Firefoxa. Po zainstalowaniu możesz włączyć analizę bezpośrednio na stronie, którą przeglądasz. Narzędzie wykrywa błędy w dostępności i podpowiada, które z nich mają realny wpływ na użytkowników.
• Contrast Checker (WebAIM) – wpisujesz kolor tekstu i tła (np. w formacie #000000 i #FFFFFF), a narzędzie podpowiada, czy kontrast spełnia wymogi WCAG.

Możesz także przeprowadzić testy manualne:

• Przejdź przez zawartość strony za pomocą klawiatury – użyj Tab, Shift+Tab, Enter i sprawdź, czy da się łatwo dotrzeć do wszystkich przycisków i formularzy.
• Uruchom czytnik ekranu (np. NVDA) i posłuchaj, jak brzmią treści na stronie – czy wszystkie komunikaty są zrozumiałe i sensowne.
• Oceń kontrast tekstu względem tła – czy możesz wygodnie przeczytać teksty bez wytężania wzroku?

Jakie są najczęstsze błędy w dostępności stron?

Większość błędów to rzeczy, których nie widać od razu, ale które utrudniają korzystanie ze strony. Chodzi np. o:

• zbyt niski kontrast tekstu,
• brak widocznego focusa (nie widać, który element jest aktywny),
• przyciski z samą ikoną bez opisu,
• źle opisane formularze lub brak opisów,
• błędna struktura nagłówków (np. brak H1, nieuzasadnione skoki od H2 do H4),
• zbędne lub błędne atrybuty ARIA – to specjalne oznaczenia w kodzie, które pomagają czytnikom ekranu zrozumieć, jaką rolę pełnią poszczególne elementy na stronie (np. przyciski, menu, powiadomienia).

Jak poprawić dostępność strony w praktyce?

Oto drobne poprawki w HTML, CSS i JS, które mogą zrobić różnicę:

Przyciski i linki:

• używaj button, nie div ani span,
• dodaj aria-label do ikon, np. koszyka czy lupki.

Formularze:

• każde pole powinno mieć label – opis widoczny i powiązany z inputem,
• informacje o błędach powinny być jasne i zrozumiałe – i widoczne także dla czytników ekranu.

Nawigacja klawiaturą:

• zapewnij widoczny focus: :focus-visible { outline: 2px solid #000 },
• unikaj elementów bez tabindex – użytkownik nie „złapie” ich klawiaturą.

Kolory i typografia:

• minimalny kontrast tekstu: 4.5:1,
• unikaj bladej szarości na białym tle, czcionka min. 16px.

Dynamiczne treści (JavaScript):

• użyj role=”alert” do komunikatów (np. „Dodano do koszyka”),
• jeśli coś się zmienia na stronie – poinformuj o tym użytkownika (i czytnik ekranu).

Co możesz zrobić samodzielnie, jeżeli korzystasz z gotowej platformy lub nie chcesz ingerować w kod?

• Zmień kolory tekstów i tła, jeśli kontrast jest słaby – jasnoszary tekst na białym tle to jeden z najczęstszych błędów.
• Upewnij się, że przyciski i linki mają jasne opisy – zamiast ogólnych komunikatów typu „Kliknij tutaj” używaj „Zobacz szczegóły produktu” albo „Dodaj do koszyka”.
• Dodaj opisy alternatywne do zdjęć (tzw. alt teksty) – np. „Sukienka midi w kolorze butelkowej zieleni” – nie zostawiaj pustego pola.
• Zadbaj o czytelność tekstu – podziel długie akapity na krótsze, używaj nagłówków i list wypunktowanych.
• Używaj większych czcionek – minimum 16 px, najlepiej unikaj też ozdobnych fontów.
• Sprawdź, czy filmy i nagrania mają napisy – jeśli nie, dodaj je (w wielu edytorach można to zrobić automatycznie).
• Zrezygnuj z tekstów zapisanych jako obrazki – jeśli coś jest ważne (np. regulamin, dane kontaktowe), powinno być tekstem.
• Zadbaj o dostępność kontaktu – oprócz telefonu podaj e-mail lub formularz, z którego może skorzystać osoba niesłysząca.
• Zoptymalizuj kolejność treści na stronie – najważniejsze informacje powinny być na górze, a nawigacja logiczna i prosta.

Korzyści z dostępnej strony internetowej

Dostosowanie strony do wytycznych WCAG to nie tylko obowiązek prawny. To także realne korzyści dla Twojego biznesu:

Wpływ dostępności na pozycjonowanie (SEO)

Wiele aspektów związanych z dostępnością stron wpływa na ranking w Google. To między innymi:

• Struktura nagłówków – poprawna hierarchia H1, H2, H3 pomaga lepiej zrozumieć treści zarówno robotom Google, jak i osobom korzystającym z czytników ekranu.
• Teksty alternatywne (alt) przy obrazach – wspierają indeksowanie i dostępność jednocześnie.
• Szybkość i przejrzystość nawigacji – lepszy UX to niższy współczynnik odrzuceń, dłuższy czas spędzony na stronie i wyższe szanse na konwersję. A nie jest tajemnicą, że tego typu czynniki behawioralne wpływają na pozycje w Google.
• Responsywność – Google w pierwszej kolejności indeksuje wersje mobilne stron. Ignorując ten fakt, nie masz w praktyce szans na wysoką widoczność w wyszukiwarce.

Dostępność a wizerunek marki

Coraz więcej użytkowników zwraca uwagę na to, czy firma działa odpowiedzialnie i inkluzywnie. Strona dostępna dla wszystkich to konkretna deklaracja wartości, którą klienci z różnych środowisk mogą docenić.

Co zyskujesz, dbając o dostępność w tym kontekście?

• Lepszy odbiór marki – jako świadomej, nowoczesnej i otwartej.
• Większe zaufanie klientów – także tych, którzy mogą mieć szczególne potrzeby.
• Przewagę nad konkurencją, która dostępnością jeszcze się nie zajęła.
• Gotowość na zmiany prawne – co daje spokój i przewidywalność biznesową.

WCAG a sklep internetowy – jak zadbać o dostępność w e-commerce?

Oto, co warto sprawdzić i poprawić, jeżeli prowadzisz sklep online:

Koszyk i przyciski akcji:

• Przyciski takie jak „Dodaj do koszyka”, „Zamów teraz”, „Przejdź do płatności” muszą być widoczne. Powinno dać się je kliknąć za pomocą klawiatury. Muszę też zawierać jasny opis – sama ikona nie wystarczy.
• Upewnij się, że komunikaty po dodaniu produktu do koszyka są dostępne także dla czytników ekranu.

Opisy produktów:

• Każdy obrazek powinien mieć tekst alternatywny – np. „sneakersy damskie, białe z czarnym logo”.
• Używaj prostych, zwięzłych opisów – unikaj tekstu zapisanego jako grafika.
• Stosuj nagłówki i wypunktowania.
• Zadbaj o dobrą widoczność informacji o cenie, wariantach (np. rozmiar, kolor) i dostępności.

Formularze zamówienia i kontaktu:

• Każde pole powinno zawierać jasny opis – np. „Imię i nazwisko”, „Adres e-mail”,
• Błędy powinny być dobrze oznaczone i opisane – nie wystarczy czerwone obramowanie, trzeba też napisać precyzyjny komunikat np. „Wprowadź poprawny adres e-mail”.
• Wypełnienie formularza i jego wysłanie powinno być możliwe bez użycia myszy.

Nawigacja i filtrowanie:

• Menu, kategorie i filtry muszą dać się obsługiwać za pomocą klawiatury.
• Elementy rozwijane (np. sortowanie) muszą być czytelnie opisane.
• Unikaj sytuacji, w której użytkownik nie wie, co wybrał albo jak wrócić do poprzedniego widoku.

Treści dynamiczne i komunikaty:

• Jeśli coś zmienia się na stronie (np. filtrujesz produkty), użytkownik powinien dostać jasny sygnał – nie tylko wizualny, ale też tekstowy.
• Informacje o błędach, potwierdzenia zakupu czy alerty muszą być zrozumiałe również bez patrzenia na ekran.

Jakie błędy popełniają właściciele sklepów?

W e-commerce dostępność często kończy się na wyglądzie strony. Ale prawdziwe problemy zaczynają się wtedy, gdy klient nie może kupić. Najczęstsze błędy:

• Brak opisów alternatywnych do zdjęć produktów – osoba niewidoma nie dowie się, co jest na zdjęciu, jeśli nie ma tekstu alt.
• Niedostępne przyciski akcji – np. „Dodaj do koszyka” ukryty dla klawiatury lub nieczytelny dla czytnika ekranu,
• Formy płatności bez obsługi klawiatury – np. okno płatności, którego nie da się przejść bez myszy.
• Brak focusa na aktywnych elementach – klient nie widzi, gdzie aktualnie się znajduje, poruszając się za pomocą klawiatury.
• Problemy z formularzami – brak opisów pól, nieczytelne komunikaty o błędach, obowiązkowe pola bez wyjaśnienia.
• Niewidoczne komunikaty – np. informacja „Produkt dodany do koszyka” nie pojawia się w sposób, który da się odczytać czytnikiem ekranu.
• Filtrowanie i sortowanie bez dostępnych etykiet – co z tego, że filtr działa, skoro nie wiadomo, co wybierasz?

Czy aplikacje mobilne i pliki PDF muszą być dostępne?

Tak. Europejski Akt o Dostępności (EAA) obejmuje nie tylko strony internetowe, ale także aplikacje mobilne i dokumenty cyfrowe – np. pliki PDF.

Jak zapewnić dostępność aplikacji mobilnej?

Aplikacja musi działać poprawnie także dla osób, które nie korzystają z ekranu w klasyczny sposób – np. używają czytnika ekranu lub obsługują telefon jedną ręką.

Zadbaj o to, aby:

• Wszystkie przyciski i ikony miały opisy (np. nazwy funkcji czy etykiety do czytnika).
• Elementy były ułożone logicznie.
• Powiadomienia były czytelne i dostępne dla czytników ekranu (np. VoiceOver, TalkBack),
• Czcionki były wystarczająco duże, a kolory miały dobry kontrast.

Jak przygotować dostępny plik PDF?

Pliki PDF powinny być zgodny ze standardami PDF/UA – czyli możliwe do odczytania przez osoby korzystające z czytników ekranu.

Sprawdź, czy Twój PDF:

• nie jest zeskanowanym obrazkiem – tekst musi być możliwy do zaznaczenia i kopiowania,
• ma uporządkowaną strukturę – z nagłówkami, listami, opisami grafik,
• zawiera teksty alternatywne dla obrazów,
• daje się odczytać się w logicznej kolejności – jak w tradycyjnym dokumencie.

Podsumowanie

Dostępność cyfrowa to nie rozporządzenie do odhaczenia, a nowy standard działania w Internecie. Przez lata związane z tym aspekty były traktowane jako coś dodatkowego – ale teraz stają się wymogiem. I dobrze, bo oznacza to lepszy Internet dla wszystkich, a także większy zasięg i przewagę dla tych, którzy zareagują na czas.

Jeśli chcesz mieć sklep, który działa długofalowo, musi być dostępny:

• dla osób z niepełnosprawnością,
• dla klientów z telefonem w ręce i rozładowaną myszką,
• dla starszych użytkowników,
• dla każdego, kto szuka prostoty i przejrzystości.

To nie jest tylko kwestia przepisów – to sposób na poprawienie konwersji, zmniejszenie liczby porzuconych koszyków i pokazanie, że Twoja marka jest świadoma, otwarta i odpowiedzialna.

FAQ – najczęstsze pytania o WCAG i EAA

Czy mikrofirmy muszą wdrażać WCAG?

Jeśli działasz jako instytucja publiczna – tak, bez wyjątku. W przypadku firm prywatnych obowiązek wejdzie w życie 28 czerwca 2025 r. na mocy Europejskiego Aktu o Dostępności (EAA). Dotyczy to m.in. sklepów internetowych i usług cyfrowych.

Czy dostępność dotyczy tylko stron publicznych?

Nie. Do tej pory głównie tak było, ale EAA rozszerza obowiązki na sektor prywatny – przede wszystkim tam, gdzie oferujesz produkty lub usługi cyfrowe ogólnodostępne online.

Jak sprawdzić, czy moja strona jest zgodna z WCAG?

Użyj darmowych narzędzi takich jak WAVE, axe DevTools (rozszerzenie do przeglądarki) lub Lighthouse (wbudowany w Chrome). Przejdź przez stronę za pomocą klawiatury, sprawdź kontrasty, formularze, opisy obrazków. Jeśli coś nie działa bez myszy albo nie da się tego odczytać – oznacza to, że wymaga poprawy.

Co grozi za brak dostępności po 2025 roku?

Niespełnienie wymogów EAA może skutkować sankcjami – w tym grzywnami. Ale nawet pomijając ewentualne kary, musisz liczyć się z tym, że niedostępna strona to potencjalna strata klientów i ryzyko wizerunkowe.

Czy trzeba wdrożyć wszystko naraz?

Nie. Zacznij od najważniejszych elementów – koszyka, formularzy, treści produktowych, dokumentów PDF. Resztę możesz wdrażać etapami. Ważne, żeby działać.