Od 28 czerwca 2025 r. standard WCAG 2.1 na poziomie AA stanie się obowiązującym prawem w Unii Europejskiej. W artykule przedstawiamy najważniejsze zmiany oraz konkretne działania, które należy wdrożyć na stronie internetowej, by spełniać nowe wymagania dostępności – zarówno od strony kodu, jak i projektowania doświadczenia użytkownika.
Czym jest WCAG 2.1?
WCAG (Web Content Accessibility Guidelines) to zbiór wytycznych opracowanych przez World Wide Web Consortium (W3C), których celem jest zapewnienie dostępności treści cyfrowych osobom z różnymi rodzajami niepełnosprawności – wzrokowymi, słuchowymi, ruchowymi, poznawczymi i neurologicznymi. WCAG bazuje na czterech głównych zasadach: postrzegalność, operowalność, zrozumiałość i solidność (ang. POUR).
- Wersja 2.1 rozszerza WCAG 2.0 o 17 nowych kryteriów sukcesu, uwzględniających rozwój technologii i zmieniające się potrzeby użytkowników.
- Skupia się szczególnie na dostępności treści mobilnych, wsparciu dla użytkowników z zaburzeniami poznawczymi oraz lepszej czytelności i kontrastach wizualnych.
- Jest w pełni wstecznie zgodna – zgodność z WCAG 2.1 automatycznie oznacza zgodność z WCAG 2.0.
Kogo dotyczy obowiązek?
Od 28 czerwca 2025 r. obowiązuje w krajach UE Europejski Akt o Dostępności (European Accessibility Act, EAA). Akt ten nakłada obowiązek dostępności usług cyfrowych dla szerokiej grupy firm i instytucji – zarówno publicznych, jak i prywatnych. Regulacje te mają na celu ujednolicenie wymagań w całej Unii Europejskiej oraz zwiększenie udziału osób z niepełnosprawnościami w życiu społecznym i cyfrowym.
- Sklepy internetowe i platformy e-commerce (np. systemy zakupowe, kasy online, płatności),
- Banki i instytucje finansowe (np. bankowość internetowa, aplikacje mobilne),
- Przewoźnicy i linie lotnicze (np. systemy rezerwacji biletów, check-in online),
- Media cyfrowe i kioski samoobsługowe (np. biletomaty, infomaty, terminale usługowe).
Innymi słowy – jeśli oferujesz usługi cyfrowe na rynku UE, musisz zapewnić ich dostępność zgodnie z WCAG 2.1 poziomu AA, który staje się minimalnym standardem prawnym – także w Polsce.
Najważniejsze zmiany w WCAG 2.1 (poziom AA)
Poniżej zestawiamy wybrane nowe kryteria sukcesu wprowadzone w WCAG 2.1 na poziomie AA wraz z przykładami wdrożeń technicznych:
| Kryterium | Opis | Wdrożenie techniczne |
|---|---|---|
| 1.3.4 Orientation | Strona musi działać poprawnie zarówno w trybie pionowym, jak i poziomym – bez zmuszania użytkownika do jednej orientacji. | Używaj układów opartych na flex lub grid. Nie blokuj orientacji w CSS/JS. |
| 1.4.10 Reflow | Treść strony powinna być czytelna bez przewijania w poziomie przy powiększeniu 400%. | Unikaj sztywnych szerokości, testuj układ na urządzeniach mobilnych. Używaj jednostek względnych (em, %, vw/vh). |
| 1.4.11 Non-text Contrast | Elementy interaktywne muszą mieć kontrast min. 3:1 względem tła – np. przyciski, ikony, focus-ring. | Testuj kontrasty kolorystyczne przy użyciu narzędzi (np. contrast-ratio.com). |
| 1.4.12 Text Spacing | Tekst musi pozostać czytelny po zmianie odstępów między znakami i wierszami. | Unikaj nadpisywania line-height, letter-spacing. Stosuj wartości względne (np. 1.5em). |
| 1.4.13 Hover / Focus | Elementy aktywowane myszką lub klawiaturą muszą pozostać widoczne i możliwe do zamknięcia. | Dodaj mechanizm zamykania (np. ESC), utrzymuj treści widoczne przy :focus i :hover. |
| 2.1.4 Character Key Shortcuts | Skróty klawiszowe muszą być wyłączalne, jeśli aktywują się przez pojedyncze naciśnięcia klawiszy. | Dodaj przełącznik wyłączający skróty. Obsłuż preferencje użytkownika w ustawieniach UI. |
| 2.5.3 Label in Name | Widoczna etykieta (np. na przycisku) powinna być zgodna z jego nazwą w kodzie. | Użyj aria-label lub aria-labelledby, zgodnych z treścią wizualną. |
| 4.1.3 Status Messages | Komunikaty (np. „dodano do koszyka”) muszą być odczytywane przez czytniki ekranu automatycznie. | Dodaj atrybut aria-live="polite" lub role="status". |
💡 To tylko część z 17 nowych kryteriów – pełną listę znajdziesz w oficjalnym tłumaczeniu WCAG 2.1.
Jak wdrożyć WCAG 2.1 krok po kroku?
- Przeprowadź audyt dostępności strony – wykorzystaj narzędzia takie jak axe DevTools, Lighthouse, WAVE oraz audyty manualne (np. obsługa klawiaturą).
- Zadbaj o kontrasty i responsywność – projektuj mobilnie i testuj z użyciem różnych technologii wspomagających.
- Obsłuż klawiaturę i czytniki ekranu – dodaj
aria-label,tabindex,aria-live, zapewnij logiczną kolejność fokusu. - Dostosuj obsługę dotyku i gestów – nie opieraj kluczowych funkcji wyłącznie na gestach jak przesunięcie czy potrząsanie.
- Zoptymalizuj treść – stosuj poprawną strukturę nagłówków H1–H3, opisuj linki kontekstowo, dodawaj opisy alternatywne do zdjęć i ikon.
- Dokumentuj działania – prowadź dokumentację decyzji projektowych i zmian pod kątem dostępności (przydatna przy audytach zewnętrznych).
Konsekwencje prawne i SEO
Niespełnienie wymagań WCAG 2.1 AA może skutkować:
- Karami finansowymi – zgodnie z EAA kraje członkowskie mogą nakładać grzywny na firmy niespełniające wymagań,
- Procesami sądowymi – rośnie liczba pozwów zbiorowych przeciw firmom za niedostępność usług cyfrowych,
- Utratą użytkowników i reputacji – niedostępność to wykluczenie nawet 20% populacji,
- Negatywnym wpływem na SEO – algorytmy Google promują strony czytelne, semantyczne i dostępne (np. struktura Hx, alt-teksty, dostępność na urządzeniach mobilnych).
Podsumowanie
Zgodność z WCAG 2.1 to dziś nie tylko standard techniczny, ale również obowiązek prawny, element etyczny i biznesowa konieczność. Strony dostępne są bardziej użyteczne, lepiej oceniane przez wyszukiwarki, a przede wszystkim – dostępne dla każdego, niezależnie od ograniczeń.
Potrzebujesz wsparcia w audycie lub wdrożeniu dostępności? Skontaktuj się z nami!
drogiestrony.pl – dostępne technologie dla każdego.
📧 kontakt@drogiestrony.pl
Przeprowadzimy pełną analizę Twojej strony i pomożemy w zgodnym z prawem wdrożeniu wszystkich wymagań WCAG 2.1 – szybko, kompleksowo i z myślą o użytkowniku.
