WCAG 2.1. AA

Kilka lat temu o dostępności cyfrowej mówiło się głównie w kontekście instytucji publicznych, gdy 4 kwietnia 2019 (następstwo dyrektywy unijnej 2016/2102) roku Sejm RP uchwalił ustawę o dostępności cyfrowej stron internetowych i aplikacji mobilnych. Natomiast od 28 czerwca 2025 roku wymogi dostępności cyfrowej dotyczą także firm prywatnych w Polsce. Co oznacza, że Twój sklep internetowy, musi spełniać określone wymogi dotyczące dostępności cyfrowej.

Z tego artykułu dowiesz się:

czym jest WCAG 2.1 AA i dlaczego dotyczy także sklepów internetowych,
jak dostępność wpływa na SEO, UX i konwersję,
dla kogo tworzy się dostępne strony i jakie bariery usuwa WCAG,
jakie są cztery zasady WCAG i ich praktyczne zastosowanie w e-commerce,
jak samodzielnie sprawdzić dostępność swojej strony,
jakie elementy powinien sprawdzać audyt dostępności,

Dostępność cyfrowa a SEO, UX i konwersja

Dostępność cyfrowa i SEO mają ze sobą więcej wspólnego, niż mogłoby się wydawać. Google analizuje zachowanie użytkowników na Twojej stronie, dlatego im wyższy CTR i średni czas na stronie, tym większe przełożenie może to mieć na pozycje w wynikach wyszukiwania.

Elementy dostępności jak poprawne nagłówki, teksty alternatywne, linki opisowe czy kod - bezpośrednio wpływają na widoczność strony. Roboty Google’a odczytują je podobnie jak czytniki ekranu, dlatego błędy w strukturze mogą obniżać ocenę jakości strony.

Dostępna strona to strona intuicyjna. Użytkownicy łatwiej znajdują produkty, szybciej przechodzą proces zakupowy i rzadziej porzucają koszyk. Drobne zmiany, jak większe przyciski, lepszy kontrast czy jaśniejsze komunikaty błędów potrafią zwiększyć konwersję nawet o kilkanaście procent.

Dostępność to także element budowania pozytywnego wizerunku marki. Firmy, które dbają o wszystkich użytkowników, są postrzegane jako bardziej odpowiedzialne i nowoczesne. W czasach, gdy coraz więcej klientów wybiera marki z wartościami, aspekt inkluzywności może wpływać na decyzje zakupowe.

Chcesz porozmawiać o SEO, UX i WCAG? Napisz do mnie

Czym i dla kogo jest WCAG?

WCAG to międzynarodowy standard mający na celu eliminację barier cyfrowych, które utrudniają osobom z niepełnosprawnościami swobodne korzystanie z treści online. W praktyce WCAG, czyli Web Content Accessibility Guidelines, to zestaw zasad, które mają zapewnić dostępność treści internetowych dla osób z różnymi ograniczeniami - wzroku, słuchu, motoryki czy poznawczymi. Określa on, jak tworzyć strony, aplikacje i sklepy internetowe w sposób czytelny, zrozumiały i funkcjonalny dla każdego użytkownika.

W skrócie można powiedzieć, że rozwiązania są użyteczne dla wszystkich. Zwykło się utożsamiać dostępność cyfrową z osobami niepełnosprawnymi, jednak z rozwiązań tego typu korzysta zdecydowanie większa grupa ludzi obejmująca również osoby starsze, obcokrajowcy (np. Polacy na zagranicznych wakacjach), czy w wielu przypadkach użytkownicy korzystający ze smartfonów i tabletów.

Według danych światowej organizacji zdrowia oraz innych światowych organizacji, na świecie żyje ponad miliard osób z niepełnosprawnościami, z czego znaczna część posiada prawne potwierdzenie niepełnosprawności. Jednak szczególną uwagę przykładamy dla określonych grup niepełnosprawności:

osoby niewidome, niedowidzące i słabowidzące,
osoby z niepełnosprawnością ruchową,
osoby z niepełnosprawnością intelektualną,
osoby z neuroróżnorodnością (np. ADHD czy dysleksja).

Tworząc strony internetowe i aplikacje musimy mieć na uwadze te grupy i zapewnić im swobodny dostęp do naszej strony/aplikacji. Standardy WCAG mają na celu poprawę doświadczenia użytkowników korzystających w każdej formie, w tym za pomocą narzędzi asystujących i urządzeń mobilnych. Dostępność strony internetowej wpływa na komfort użytkowników korzystających z różnych urządzeń i technologii. Problemy takie jak niska czytelność, zbyt małe kontrasty, brak alternatywnych opisów zdjęć czy nieintuicyjna nawigacja - to błędy, które można i trzeba naprawić.

Wytyczne WCAG to zestaw instrukcji, które mają na celu zapewnienie dostępności treści internetowych. Proces tworzenia stron internetowych powinien uwzględniać wytyczne WCAG, aby zapewnić dostępność dla wszystkich.

Dla właścicieli sklepów internetowych i marketerów WCAG to nie tylko kwestia techniczna. To sposób myślenia o użytkowniku, który łączy użyteczność (UX) z konwersją. Strona dostępna to strona, która ładuje się szybciej, jest czytelniejsza, lepiej zrozumiała dla robotów wyszukiwarek i - co za tym idzie - może lepiej pozycjonować się w Google.

Warto też pamiętać, że zgodność z wytycznymi WCAG to nie tylko dobry standard biznesowy, ale i wymóg prawny (od tego roku).

Wymagania te mają na celu zapewnienie, żeby strony internetowe były przystosowane dla osób z różnymi rodzajami niepełnosprawności. Można o tym przeczytać więcej m.in. na stronie: Co to jest dostępność cyfrowa (gov.pl).

Warto dodać, że wymagania WCAG 2.1 AA zostały opracowane na podstawie doświadczeń z poprzedniej wersji standardu, co pozwala na zachowanie kompatybilności wstecznej. WCAG 2.1 jest rozwinięciem poprzedniej wersji, wprowadzając nowe wytyczne i ulepszenia w zakresie dostępności dla różnych grup użytkowników.

Przepisy w sprawie dostępności stron internetowych i aplikacji mobilnych są wynikiem międzynarodowych standardów, takich jak WCAG 2.0 oraz inicjatyw takich jak Web Accessibility Initiative. Podmioty publiczne są zobowiązane do publikowania deklaracji dostępności w postaci elektronicznej, potwierdzającej zgodność stron internetowych i aplikacji mobilnych z wytycznymi WCAG. O ile wymóg deklaracji nie dotyczy sklepów, tak jest szereg elementów, o które należy zadbać.

Zasady WCAG - cztery filary dostępności cyfrowej stron internetowych

Wytyczne WCAG opierają się na czterech głównych zasadach, określanych jako główne zasady skrótem POUR: Perceivable, Operable, Understandable, Robust. Celem tych zasad jest, aby użytkownicy mogli korzystać i znajdować treści oraz funkcje strony niezależnie od sposobu nawigacji.

WCAG 2.1 opiera się na 4 głównych zasadach:

postrzegalność - treści muszą być przedstawione w sposób, który użytkownicy mogą odebrać za pomocą swoich zmysłów. Obejmuje to m.in.: zastosowanie alt’ów dla grafik, audiodeskrypcji i napisów do filmów, a także zapewnienie alternatyw dla treści nietekstowych, takich jak obrazy czy wykresy. Pomoc dostępnych rozwiązań, takich jak audiodeskrypcja, jest kluczowa.
funkcjonalność - obsługa jest możliwa różnymi sposobami, np. klawiaturą bez użycia myszy. Umożliwienie nawigacji za pomocą klawiatury jest kluczowe dla dostępności. Nawigacja powinna być możliwa także przy pomocy samej klawiatury. Obejmuje to m.in.: elementy nawigacji, brak elementów mogących wywoływać ataki padaczkowe, korzystanie z opisów do linków i przycisków (opisowe CTA), dostępność wyszukiwarki treści.
zrozumiałość - język, formularze i interakcje są proste i intuicyjne. Obejmuje to m.in.: prosty język, ostrzeżenia i komunikaty o błędach, dookreślenia w kodzie strony np. odnośnie języka strony.
solidność (kompatybilność) - strona i/lub aplikacja działa na każdym urządzeniu (w tym na czytnikach ekranu i lupach). Kompatybilność powinna obejmować współpracę z technologiami wspomagającymi, takimi jak czytniki ekranu. Ważne jest, aby wszystkie funkcje działały poprawnie na różnych urządzeniach i w różnych programach.

Jak sprawdzić, czy Twoja strona jest dostępna?

Audyt dostępności nie musi być skomplikowany. Część błędów da się wychwycić prostymi metodami, bez specjalistycznego sprzętu. Testy powinny również uwzględniać korzystanie z technologii asystujących, takich jak czytniki ekranu, tryby wysokiego kontrastu czy technologia Text-to-Speech, aby mieć pewność, że wszystkie funkcje działają poprawnie dla każdego użytkownika.

1. Test kontrastu i czytelności

Skorzystaj z darmowych narzędzi, które zweryfikują kontrast pomiędzy elementami. Wystarczy wpisać kolory tekstu i tła, by sprawdzić, czy spełniają minimalne normy kontrastu.

2. Test obsługi klawiaturą

Spróbuj przejść przez stronę tylko przy pomocy klawisza Tab. Jeśli nie możesz dotrzeć do niektórych elementów lub nie wiesz, gdzie aktualnie znajduje się fokus - to znak, że strona wymaga poprawek.

3. Narzędzia automatyczne

Do szybkiej diagnozy polecam: Axe DevTools i Accessibility Checker - wtyczki do Google Chrome. Pokazują błędy w strukturze HTML, brak alternatywnych tekstów i problemy z nawigacją.

4. Test mobilny

Sprawdź, jak strona działa na telefonie - czy da się powiększyć tekst, przewinąć ekran, kliknąć każdy przycisk. Dla wielu użytkowników mobile to dziś jedyny sposób korzystania z internetu.

5. Testy na użytkownikach

Najlepszym testem dostępności jest rozmowa z realnymi użytkownikami. Często wychwytują problemy, których nie pokaże żadne narzędzie.

Jakie strony muszą zostać sprawdzone?

W przypadku sklepów internetowych ważne jest, aby nie pominąć żadnej podstrony, ani żadnego etapu ścieżki zakupowej. Audyt powinien obejmować również działania strony na różnych urządzeniach i w różnych przeglądarkach, aby zapewnić pełną funkcjonalność i zgodność z wytycznymi WCAG. Dla właścicieli sklepów oznacza to konieczność przemyślenia drogi zakupowej pod kątem dostępności: od dodania produktu do koszyka po finalizację płatności.

Do stron, które szczególnie należy przeanalizować należą:

strona główna,
strony kategorii,
karty produktowe,
koszyk,
checkout,
wszystkie formularze.

Wytyczne do audytu na podstawie WCAG 2.1. AA

Poniżej przedstawiam uproszczoną listę wytycznych, która może posłużyć jako lista kontrolna do przeprowadzenia audytu dostępności. Wytyczne zostały podzielone na kluczowe obszary, aby ułatwić ich zrozumienie i zastosowanie.

Pełna lista zasad dostępna jest na stronie: https://www.w3.org/Translations/WCAG21-pl/ Należy pamiętać, że kolejne aktualizacje wytycznych WCAG mogą wprowadzać dodatkowe kryteria, które należy uwzględnić podczas audytu.

1. Grafiki i multimedia

Atrybuty ALT: Wszystkie grafiki muszą mieć opis alternatywnego tekstu w języku polskim (nie dłuższy niż 125 znaków), który umożliwia dostępność treści dla użytkowników korzystających z czytników ekranowych. Elementy dekoracyjne powinny mieć pusty ALT (alt=” “) lub być deklarowane za pomocą stylów CSS.
Opis dla złożonych grafik: Infografiki czy wykresy wymagają dodatkowego opisu tekstowego.
Brak tekstu na grafikach: Tekst nie powinien znajdować się na grafikach, chyba, że dotyczy to logotypu.
Precyzyjne CTA: jeżeli grafika lub ikona służy jako button lub link, opis powinien zawierać cel, który ma realizować.
Materiały audio: powinny mieć deskrypcję, zawierającą dialogi i słyszalne dźwięki, a także zapewniać dostępność nagrań audio poprzez napisy lub szczegółową deskrypcję.
Materiały video (bez dźwięku): powinny mieć deskrypcję opisującą sytuację.
Materiały audio video (najczęściej wykorzystane): powinny mieć transkrypcję lub audiodeskrypcję.

2. Struktura treści

Wykorzystanie znaczników semantycznych: tytuły, nagłówki, listy, numeracje, wyróżnienia tekstu itd. Pamiętaj, aby stosować te elementy zgodnie z przeznaczeniem.
Semantyczne znaczniki HTML: Używaj nagłówków (< h1>, < h2>) dla logicznego podziału treści.
Kolejność treści: Po wyłączeniu stylów CSS treść powinna być logicznie uporządkowana.
Cel linku (anchor text): miejsce docelowe linku powinno być zgodne z tekstem znajdującym się na nim.
Nie używaj białych znaków: zbędnych spacji, białych liter, czy fontów o niewidocznym rozmiarze.
Unikaj emulacji elementów: Zamiast div czy span, stosuj właściwe znaczniki (< a>, < button>).
Unikaj justowania: unikaj wyrównania treści do lewej i prawej krawędzi.

3. Kolory i kontrast

Kolor jako wskaźnik: Nie polegaj wyłącznie na kolorze, dodawaj tekstowe komunikaty (np. „Błąd” obok czerwonego pola).
Kontrast tekstu: Minimalny kontrast między tekstem a tłem to 4.5:1 (dla pogrubionych fontów 3:1), sprawdzisz to np. rozszerzeniem do Chrome: Accessible Web Helper - Chrome Web Store.
Nietekstowe elementy: Kontrast dla przycisków czy ikon powinien wynosić minimum 3:1.
Oznaczenie linków w treści: należy stosować wyróżnienie kolorystyczne równolegle z podkreśleniem.

4. Nawigacja i dostępność klawiaturą

Dostępność klawiaturą: wszystkie funkcje muszą działać za pomocą klawiatury, a aktywne elementy powinny mieć widoczny focus.
Skróty klawiszowe: Jeśli są używane, użytkownik musi mieć możliwość ich wyłączenia.
Unikaj nieużytecznych tooltipów: wszystkie komunikaty czy informacje powinny być dostępne za pomocą kliknięcia lub klawiatury.
Aktywna obwódka: dla elementów aktywnych za pomocą klawiatury.
Migająca pionowa linia: dla aktywnych inputów, gdy możemy coś wpisać.
Identyfikacja miejsca: zapewnienie łatwości w identyfikacji miejsca, gdzie się znajdujemy za pomocą dwóch niepowiązanych identyfikatorów, np. menu, kategorie, breadcrumbs, pasek postępu itd.

5. Responsywność i skalowanie

Orientacja: Niezależnie od orientacji urządzenia, horyzontalnej czy wertykalnej strona powinna prezentować czytelną i dostosowaną treść. Jeżeli nie jest to możliwe, trzeba to jasno zaznaczyć i ostrzegać podczas zmiany orientacji.
Reflow: Strona powinna działać poprawnie na małych ekranach (320px szerokości) bez poziomego scrollowania.
Focus: kolejność przełączania między elementami musi być logiczna (np. w formularzu).
Anulowanie focusa: aktywacja i anulowanie powinno być dostępne za pomocą klawiatury.
Stałość strony przy focusie: zmieniając miejsce focusa, nie powinny następować zmiany w interfejsie.
Zachowanie kolejności: focus powinien zachować odpowiednią kolejność, nawet po wywołaniu akcji czy otworzeniu menu.
Zmiana rozmiaru tekstu: Powiększenie tekstu nie może powodować utraty treści ani funkcjonalności i musi zachowywać określony kontrast.
Fonty definiowane za pomocą em lub %: unikamy definiowania w pixelach.

6. Formularze

Instrukcje dla pól input: Opis pola powinien znajdować się nad nim, a nie w placeholderze. Wykorzystujemy labele do wyjaśnień.
Walidacja błędów: Błędy muszą być łatwe do zauważenia i poprawienia (np. oznaczone aria-invalid).
Błędy legislacyjne: jeżeli błąd może mieć skutki prawne, należy poinformować o tym użytkownika i poprosić o potwierdzenie zapoznania się z komunikatem.
Autouzupełnianie: Formularze powinny umożliwiać automatyczne wypełnianie danych przez przeglądarkę.

7. Interakcje użytkownika

Unikanie sliderów: występowanie elementów ruchomych musi występować razem z panelem sterowania, umożliwiającym zatrzymanie ich.
Migające elementy: Unikaj migania częściej niż raz na sekundę.
Gesty wielopunktowe: Funkcje wymagające gestów (np. szczypanie, przeciąganie) powinny mieć alternatywę w postaci przycisków.

8. Język i komunikacja

Prosty język: język zrozumiały dla każdej grupy odbiorców, bez zbędnych słów, “wodolejstwa”, branżowego żargonu (np. prawniczego czy medycznego). Obejmuje to również unikanie trudnych wyrażeń
Język strony: Każda podstrona musi mieć określony język (lang=”pl”).
Status wiadomości: Komunikaty o stanie (np. alerty) powinny być oznaczone znacznikami ARIA.

9. Spójność interfejsu

Spójność komponentów: menu, elementy nawigacyjne oraz komponenty o tej samej funkcji muszą wyglądać identycznie na wszystkich podstronach.
Elementy interfejsu powinny działać przewidywalnie: np. kliknięcie pola input nie może automatycznie wysłać danych.

10. Poprawność techniczna

Zweryfikuj poprawność kodu HTML: błędy mogą zakłócić działanie czytników ekranowych.
Niestandardowe elementy: unikaj tworzenia niestandardowych elementów, gdy istnieją gotowe komponenty HTML (np. < button> zamiast zagnieżdżania funkcji w < div>).

Każda implementacja nowych funkcji na stronie powinna być sprawdzana pod kątem zgodności z wytycznymi WCAG, aby zapewnić ciągłe spełnianie wymagań dostępności.

Lista stanowi podstawę do przeprowadzenia audytu zgodnego z WCAG 2.1 na poziomie AA, zapewniając dostępność sklepu dla wszystkich użytkowników, w tym osób z niepełnosprawnościami.

Lista kontrolna audytu dostępności w pliku PDF

Poniższe informacje przygotowałem jako infografikę w formacie pdf, do pobrania z Google Drive: https://drive.google.com/file/d/1OsLxjBfQLwJVGGMAA0sLvfATI7hn3aRA/view?usp=sharing

Jak wdrożyć WCAG w praktyce - plan krok po kroku

Przeprowadź audyt strony
Zidentyfikuj błędy związane z kontrastem, strukturą, opisami alternatywnymi i obsługą formularzy.
Ustal priorytety
Zacznij od elementów krytycznych - nagłówków, przycisków, tekstów alternatywnych, nawigacji.
Wprowadź poprawki w kodzie i treściach
Zadbaj o semantykę HTML, poprawne atrybuty ARIA, odpowiedni kontrast i logiczną hierarchię treści.
Przeszkól zespół
Warto, by osoby odpowiedzialne za marketing i content wiedziały, jak tworzyć dostępne materiały (np. opisy produktów, grafiki, wpisy blogowe).
Monitoruj i testuj
Dostępność to proces - każda zmiana na stronie może wprowadzać nowe błędy. Regularnie testuj witrynę narzędziami automatycznymi i ręcznie.

WCAG 2.2 - co się zmieni?

Najnowsza wersja wytycznych, WCAG 2.2, wprowadza kilka ważnych zmian, które mają znaczenie zwłaszcza dla sklepów internetowych. Dodano nowe kryteria sukcesu, które koncentrują się na użyteczności elementów interaktywnych i nawigacji mobilnej.

Warto podkreślić, że WCAG 2.2 wprowadza dziewięć nowych kryteriów, które zwiększają poziom dostępności treści internetowych. Celem tych zmian jest lepsze dostosowanie treści cyfrowych do potrzeb użytkowników z różnymi niepełnosprawnościami, zwłaszcza w zakresie obsługi dotykowej i dostępności mobilnej. WCAG 2.2 wprowadza także nowe kryteria skupiające się na użytkownikach z niepełnosprawnościami poznawczymi oraz tych korzystających z urządzeń mobilnych. Wersja 2.2 WCAG osiągnęła status rekomendacji 5 października 2023 roku.

Co się zmienia w wersji 2.2:

Większe obszary klikalne - przyciski i linki muszą mieć odpowiednią wielkość (min. 24 × 24 px), żeby były łatwe do obsługi na urządzeniach mobilnych.
Łatwiejsza nawigacja dla użytkowników klawiatury - każda część strony musi być dostępna bez użycia myszy.
Lepsze wsparcie dla uwierzytelniania - logowanie nie powinno wymagać rozwiązywania trudnych CAPTCHA.
Jasne wyróżnianie elementów aktywnych - użytkownik musi widzieć, gdzie aktualnie się znajduje.

Wiele popularnych platform e-commerce (np. Shopify, WooCommerce, PrestaShop) oferuje dziś motywy i wtyczki zgodne z WCAG, ale ostateczna odpowiedzialność zawsze leży po stronie właściciela serwisu.

Podsumowanie

Dostępność cyfrowa to nie moda ani wymóg dla instytucji publicznych. To standard, który staje się fundamentem nowoczesnego marketingu. WCAG 2.1 AA to nie zestaw technicznych nakazów - to mapa drogowa, jak budować strony, które są naprawdę przyjazne użytkownikom.

Z mojego punktu widzenia wdrożenie zasad dostępności to jeden z najlepszych momentów na pochylenie się nad kwestiami związanymi z UX, SEO i konwersją. Wdrożenie standardów dostępności poprawia doświadczenia użytkowników, co jest korzystne zarówno dla osób z niepełnosprawnościami, jak i dla wszystkich innych użytkowników. I właśnie w tym tkwi sedno WCAG - w empatii, prostocie i świadomym projektowaniu.

WCAG 2.1. AA – praktyczny przewodnik po dostępności cyfrowej dla e-commerce