WCAG (Web Content Accessibility Guidelines) to standard opublikowany przez W3C definiujący, jak uczynić stronę internetową dostępną dla osób z niepełnosprawnościami — wzrokową (słabowzroczność, daltonizm), ruchową (nawigacja wyłącznie z klawiatury), poznawczą, słuchową. Trzy poziomy zgodności: A (minimum), AA (docelowy standard), AAA (bardzo restrykcyjny, rzadko osiągalny w całości). Aktualna wersja to WCAG 2.2 (2023), wersja 3.0 jest w konsultacji. W Polsce ustawa o dostępności cyfrowej i WCAG 2.1 na poziomie AA są standardem dla sektora publicznego, na bazie dyrektywy unijnej.
Prawnie sprawa zrobiła się poważna. Dyrektywa unijna EN 301 549 i European Accessibility Act (EAA, obowiązujący od czerwca 2025) nakładają dostępność na strony publiczne, sektory regulowane (bankowość, transport, telekomunikacja, ochrona zdrowia) i każdy e-commerce przekraczający 10 mln € obrotu lub 10 pracowników na rynku europejskim. Kary mogą sięgać kilkudziesięciu tysięcy euro za naruszenie. Dla sektora prywatnego niereglamentowanego nie jest to obowiązkowe — ale pozostaje dobrą praktyką: strona WCAG AA jest też lepiej pozycjonowana (Google nagradza semantykę HTML), bardziej użyteczna i trafia do 15-20 % więcej odwiedzających.
W praktyce celowanie w AA wymaga rygoru na 4 osiach: postrzegalność (kontrast tekst/tło ≥ 4,5:1, atrybuty alt na obrazach, napisy do wideo), funkcjonalność (pełna nawigacja klawiaturą, brak pułapek focusu, rozmiar dotyku ≥ 24x24 px w 2.2), zrozumiałość (zadeklarowany język, czytelne etykiety formularzy, użyteczne komunikaty błędów), kompatybilność (semantyczny HTML, poprawnie używany ARIA). Z Tailwind CSS + Next.js i komponentami shadcn/ui jesteśmy AA domyślnie w 80 % przypadków. Domykamy to w bezpłatnym audycie lub w dedykowanym wdrożeniu na stronie na zamówienie.
Najważniejsze elementy WCAG AA do spełnienia
- Kontrasty: ≥ 4,5:1 dla tekstu normalnego, ≥ 3:1 dla tekstu dużego i elementów UI/ikon informacyjnych.
- Nawigacja klawiaturą: wszystko dostępne pod Tab, focus zawsze widoczny (`focus-visible`), brak pułapek.
- Semantyka HTML: `<button>` na przyciski (nie `<div onClick>`), `<nav>`, `<main>`, poprawna hierarchia nagłówków.
- Formularze: `<label>` powiązany z każdym inputem, komunikaty błędów łączone przez `aria-describedby`, oznaczenie pól wymaganych.
