WCAG 2.1 na poziomie AA to 50 kryteriów sukcesu. Cały standard ma ich 78: trzydzieści na poziomie A, dwadzieścia na AA i dwadzieścia osiem na AAA. Poziomy się kumulują, więc zgodność na AA oznacza spełnienie wszystkich wymagań A i wszystkich AA.
Wymagania są ułożone wokół czterech zasad. Każde kryterium należy do jednej z nich i każde odpowiada na to samo pytanie zadane inaczej: czy odwiedzający, który widzi mniej, słyszy mniej albo nie może użyć myszy, dotrze do tej samej treści co wszyscy?
Poniżej wszystkie dwadzieścia kryteriów poziomu AA, po jednym zdaniu o tym, co znaczą w praktyce, i o tym, co się psuje najczęściej.
Nie wprost. Ustawa wdrażająca Europejski Akt o Dostępności nie używa nazwy WCAG ani razu. Mówi o czterech zasadach dostępności i odsyła do norm zharmonizowanych. WCAG 2.1 AA jest praktycznym miernikiem przyjętym przez rynek i przez narzędzia audytowe, a nie literalnym wymogiem ustawowym.
Osobno działa ustawa z 4 kwietnia 2019 roku o dostępności cyfrowej stron podmiotów publicznych, gdzie wymagania są opisane wprost. Ta strona ma charakter informacyjny i nie jest poradą prawną. Zakres własnych obowiązków najlepiej potwierdzić u prawnika, a my odpowiadamy za warstwę techniczną.
Trzy poziomy: A, AA, AAA
Nie są to trzy warianty tego samego. To trzy różne progi, z których w praktyce liczy się środkowy.
| Poziom | Ile kryteriów | Co znaczy | Dla kogo cel |
|---|---|---|---|
| A | 30 | Minimum, bez którego część odwiedzających w ogóle nie skorzysta ze strony: obsługa z klawiatury, teksty alternatywne, brak treści wywołujących napady padaczki. | Za mało jako cel. Strona spełniająca tylko A wciąż wyklucza wiele osób. |
| AA | 50 (A + AA) | Usuwa bariery, na które natrafia bardzo wielu odwiedzających: kontrast, widoczny fokus, poprawne nagłówki, działanie przy powiększeniu do 400%. | Przyjęty punkt odniesienia. Do tego poziomu projektujemy każdą stronę. |
| AAA | 78 (A + AA + AAA) | Wymagania najostrzejsze: kontrast 7:1, tłumaczenie na język migowy dla nagrań, ograniczenia w języku tekstu. | Sam W3C nie zaleca stawiania go jako wymagania dla całej witryny, bo nie da się go spełnić dla każdego rodzaju treści. |
Zasada 1: postrzegalność
Informacja musi być przedstawiona tak, żeby odwiedzający był w stanie ją odebrać. To najliczniejsza grupa: jedenaście z dwudziestu kryteriów poziomu AA należy tutaj.
| Kryterium | Co znaczy w praktyce | Co się psuje najczęściej |
|---|---|---|
| 1.2.4 Napisy na żywo | Transmisja na żywo z dźwiękiem ma napisy. | Dotyczy nielicznych stron. Jeśli nie transmitujesz, kryterium Cię nie obejmuje. |
| 1.2.5 Audiodeskrypcja | Nagranie wideo ma ścieżkę opisującą to, co widać, a czego nie słychać. | Filmy produktowe, w których cała treść jest pokazana, a nie powiedziana. |
| 1.3.4 Orientacja | Strona działa i w pionie, i w poziomie. Nie wolno wymuszać obrotu telefonu. | Blokada orientacji w kodzie albo układ, który w poziomie się rozjeżdża. |
| 1.3.5 Cel pola formularza | Pola na dane osobowe są opisane tak, żeby przeglądarka mogła je uzupełnić automatycznie. | Brak atrybutu autocomplete przy imieniu, adresie e-mail i telefonie. |
| 1.4.3 Kontrast minimalny | Zwykły tekst co najmniej 4,5:1 wobec tła, tekst duży co najmniej 3:1. | Jasnoszary tekst na białym tle. Najczęściej łamane kryterium w całym standardzie. |
| 1.4.4 Zmiana rozmiaru tekstu | Powiększenie tekstu do 200% nie powoduje utraty treści ani funkcji. | Napisy przycięte w przyciskach i kartach o sztywnej wysokości. |
| 1.4.5 Obrazy tekstu | Tekst jest tekstem, a nie obrazkiem z napisem. Wyjątkiem jest logo. | Cennik albo hasło reklamowe zapisane jako grafika, nieczytelne dla czytnika ekranu. |
| 1.4.10 Dopasowanie (reflow) | Przy szerokości odpowiadającej powiększeniu 400% treść układa się w jednej kolumnie, bez przewijania w bok. | Szerokie tabele i sztywne siatki wypychające stronę poza ekran. |
| 1.4.11 Kontrast elementów | Obramowania pól, ikony niosące znaczenie i wskaźnik fokusu mają kontrast co najmniej 3:1. | Delikatna, jasna ramka pola formularza, ledwie widoczna na tle strony. |
| 1.4.12 Odstępy w tekście | Zwiększenie odstępów między wierszami, słowami i literami nie psuje układu. | Tekst wypadający poza kontener o zadanej na sztywno wysokości. |
| 1.4.13 Treść po najechaniu | Podpowiedź pokazana po najechaniu kursorem daje się zamknąć, wskazać kursorem i nie znika sama. | Dymki znikające, gdy tylko użytkownik spróbuje przesunąć na nie kursor. |
Zwykły tekst: co najmniej 4,5 do 1 wobec tła. Tekst duży, czyli od 18 punktów albo od 14 punktów pogrubiony, wystarczy z kontrastem 3 do 1. Elementy inne niż tekst, czyli obramowania pól, ikony ze znaczeniem i wskaźnik fokusu, wymagają co najmniej 3 do 1.
Z wymagań wyłączone są logo oraz tekst będący częścią nieaktywnego elementu interfejsu. To kryterium łamie się najczęściej, bo jasnoszary tekst na białym tle wygląda w projekcie elegancko, a progu nie spełnia.
Zasada 2: funkcjonalność
Interfejs musi dać się obsłużyć. Na poziomie AA dochodzą tu tylko trzy kryteria, ale najważniejsze wymagania tej zasady siedzą na poziomie A i to one przesądzają o wyniku audytu.
| Kryterium | Co znaczy w praktyce | Co się psuje najczęściej |
|---|---|---|
| 2.4.5 Wiele dróg | Do podstrony można dotrzeć na więcej niż jeden sposób: menu, wyszukiwarka, mapa strony, odnośniki w treści. | Podstrona istniejąca wyłącznie w menu rozwijanym, bez żadnego innego wejścia. |
| 2.4.6 Nagłówki i etykiety | Nagłówki opisują treść sekcji, a etykiety opisują pole formularza. | Nagłówki użyte jako ozdoba typograficzna i pola opisane tylko szarym tekstem w środku. |
| 2.4.7 Widoczny fokus | Element wskazany klawiszem tabulatora jest wyraźnie oznaczony. | Domyślna obwódka przeglądarki usunięta w kodzie i niczym niezastąpiona. Częsty efekt uboczny „wyczyszczenia” wyglądu. |
Poziom A, którego nie wolno pominąć
- 2.1.1 Klawiatura. Każdą funkcję da się wykonać samą klawiaturą, bez myszy.
- 2.1.2 Brak pułapki. Z każdego elementu da się wyjść tabulatorem. Klasyczna pułapka to okno modalne bez obsługi klawisza Escape.
- 2.4.1 Pominięcie bloków. Odnośnik pozwalający przeskoczyć nawigację i wejść wprost w treść.
- 2.4.3 Kolejność fokusu. Wędrówka tabulatorem idzie w sensownej kolejności, zgodnej z tym, co widać.
- 2.3.1 Trzy błyski. Nic nie miga częściej niż trzy razy na sekundę.
Jak to sprawdzić w pięć minut
- Odłóż mysz. Przejdź całą stronę klawiszem tabulatora, od góry do dołu.
- Patrz, gdzie jesteś. Jeśli w którymś momencie nie wiesz, który element jest aktywny, kryterium 2.4.7 jest złamane.
- Wejdź w formularz. Wypełnij go i wyślij bez użycia myszy.
- Otwórz okno modalne i spróbuj je zamknąć klawiszem Escape.
- Powiększ stronę do 400% i zobacz, czy trzeba przewijać w bok.
Zasada 3: zrozumiałość
Treść i sposób działania interfejsu mają być zrozumiałe. Tu mieszczą się wymagania wobec formularzy, które w firmowej stronie decydują o tym, czy zapytanie w ogóle do Ciebie dotrze.
| Kryterium | Co znaczy w praktyce | Co się psuje najczęściej |
|---|---|---|
| 3.1.2 Język części | Fragment w innym języku jest oznaczony w kodzie, żeby czytnik ekranu przeczytał go właściwą wymową. | Angielskie nazwy usług i cytaty czytane polską wymową, często niezrozumiale. |
| 3.2.3 Spójna nawigacja | Menu ma na każdej podstronie ten sam układ i tę samą kolejność. | Inne menu na stronie głównej, a inne w środku serwisu. |
| 3.2.4 Spójna identyfikacja | Ten sam element robiący to samo nazywa się wszędzie tak samo. | Raz „Wyślij”, raz „Zatwierdź”, raz „Dalej” dla tego samego przycisku. |
| 3.3.3 Sugestia poprawy | Komunikat o błędzie mówi, co zrobić, a nie tylko, że jest źle. | Czerwona ramka bez słowa wyjaśnienia. Bardzo częste w formularzach kontaktowych. |
| 3.3.4 Zapobieganie błędom | Przy zobowiązaniu prawnym, płatności albo usunięciu danych da się cofnąć, sprawdzić lub potwierdzić decyzję. | Nieodwracalne usunięcie konta bez pytania o potwierdzenie. |
Zasada 4: solidność
Kod ma być na tyle poprawny, żeby zinterpretowała go nie tylko przeglądarka, lecz także czytnik ekranu. Na poziomie AA jest tu jedno kryterium, a i tak wywraca połowę nowoczesnych interfejsów.
| Kryterium | Poziom | Co znaczy w praktyce |
|---|---|---|
| 4.1.2 Nazwa, rola, wartość | A | Każdy element interfejsu ma nazwę, którą da się odczytać, rolę mówiącą, czym jest, i stan mówiący, co się z nim dzieje. Klasyczne naruszenie to przycisk zbudowany z pustego znacznika div. |
| 4.1.3 Komunikaty o stanie | AA | Zmiana, która nie przenosi skupienia, ma zostać ogłoszona czytnikowi ekranu. Dotyczy komunikatów typu „wysłano formularz”, „dodano do koszyka”, „znaleziono 12 wyników”. |
Nie i to jest najważniejsze zastrzeżenie przy każdym audycie. Narzędzia automatyczne wykrywają wyłącznie naruszenia stwierdzalne maszynowo: brak tekstu alternatywnego, zbyt niski kontrast, brak etykiety pola, złamaną hierarchię nagłówków.
Nie ocenią, czy tekst alternatywny opisuje właściwą treść, czy wędrówka tabulatorem ma sens ani czy komunikat błędu naprawdę pomaga. Dlatego nasz audyt łączy pomiar automatyczny silnikiem axe z przejściem strony samą klawiaturą i sprawdzeniem czytnikiem ekranu.
A co z WCAG 2.2
Nowsza wersja standardu już istnieje. Warto wiedzieć, co dodaje i z czym się wiąże.
Co zmienia wersja 2.2
- Dziewięć nowych kryteriów. Głównie wygląd i widoczność wskaźnika fokusu, obsługa dotykiem oraz mniejsze obciążenie pamięci przy logowaniu.
- Jedno kryterium wycofane. Wymóg poprawnej składni kodu uznano za nieaktualny wobec sposobu, w jaki dzisiejsze przeglądarki radzą sobie z błędami.
- Zgodność jest kumulatywna. Strona spełniająca WCAG 2.2 AA spełnia jednocześnie WCAG 2.1 AA.
- Rekomendacja W3C od 5 października 2023.
Jak do tego podchodzimy
- Projektujemy pod nowszą wersję. Nie kosztuje to więcej, a przedłuża życie strony o kilka lat.
- Raportujemy wobec 2.1 AA, bo to jest poziom, do którego odnosi się rynek i większość narzędzi.
- Nie sprzedajemy „zgodności” jako certyfikatu. Zgodność to stan strony w danym dniu, a nie papier, który da się powiesić na ścianie.
- Mówimy, czego nie da się osiągnąć. Jeśli materiał wideo klienta nie ma napisów, to nie jest kwestia kodu i nie udajemy, że jest.
Najczęstsze pytania
Ile kryteriów ma WCAG 2.1 na poziomie AA?
Pięćdziesiąt. WCAG 2.1 zawiera łącznie 78 kryteriów sukcesu: 30 na poziomie A, 20 na poziomie AA i 28 na poziomie AAA. Poziomy się kumulują, więc zgodność na poziomie AA oznacza spełnienie wszystkich kryteriów A oraz wszystkich kryteriów AA, czyli 50 wymagań.
Poziom AAA nie jest w praktyce celem dla zwykłej strony firmowej: sam W3C zaznacza, że nie da się go spełnić dla każdego rodzaju treści, i nie zaleca stawiania go jako wymagania dla całej witryny.
Czym różnią się poziomy A, AA i AAA?
Poziomem trudności i skalą skutków. Poziom A to minimum, bez którego część odwiedzających w ogóle nie skorzysta ze strony: obsługa z klawiatury, teksty alternatywne, brak treści wywołujących napady padaczki.
Poziom AA usuwa bariery, na które natrafia bardzo wiele osób, i to on jest przyjętym punktem odniesienia: kontrast tekstu co najmniej 4,5 do 1, widoczny wskaźnik fokusu, poprawne nagłówki i etykiety, działanie strony przy powiększeniu do 400 procent. Poziom AAA to wymagania najostrzejsze, na przykład kontrast 7 do 1 czy tłumaczenie na język migowy dla nagrań wideo.
Jaki kontrast wymaga WCAG 2.1 AA?
Zwykły tekst musi mieć kontrast co najmniej 4,5 do 1 wobec tła. Tekst duży, czyli od 18 punktów albo od 14 punktów pogrubiony, wystarczy z kontrastem 3 do 1. Osobne kryterium wymaga kontrastu co najmniej 3 do 1 dla elementów innych niż tekst, czyli obramowań pól formularza, ikon niosących znaczenie i wskaźnika fokusu.
Z wymagań są wyłączone logo oraz tekst będący częścią nieaktywnego elementu interfejsu. To jedno z najczęściej łamanych kryteriów, bo jasnoszary tekst na białym tle wygląda w projekcie elegancko, a nie spełnia progu.
Czy WCAG jest w Polsce obowiązkowe dla firmy prywatnej?
Nie wprost. Ustawa wdrażająca Europejski Akt o Dostępności nie używa nazwy WCAG ani razu: mówi o czterech zasadach dostępności i odsyła do norm zharmonizowanych. WCAG 2.1 na poziomie AA jest praktycznym miernikiem przyjętym przez rynek i przez narzędzia audytowe, a nie literalnym wymogiem ustawowym.
Osobno działa ustawa z 4 kwietnia 2019 roku o dostępności cyfrowej stron podmiotów publicznych, która dotyczy sektora publicznego i tam wymagania są opisane wprost. Ta strona ma charakter informacyjny i nie jest poradą prawną.
Czym różni się WCAG 2.1 od WCAG 2.2?
WCAG 2.2 to nowsza rekomendacja W3C, opublikowana 5 października 2023 roku. Dodaje dziewięć kryteriów sukcesu, w większości dotyczących wskaźnika fokusu, obsługi dotykiem oraz zmniejszenia obciążenia pamięci przy logowaniu i wypełnianiu formularzy.
Wycofuje też jedno kryterium z wersji 2.1, dotyczące poprawności składni kodu, jako nieaktualne wobec sposobu działania dzisiejszych przeglądarek. Zgodność jest kumulatywna: strona spełniająca WCAG 2.2 na poziomie AA spełnia jednocześnie WCAG 2.1 AA. My projektujemy pod nowszą wersję, bo nie kosztuje to więcej, a przedłuża życie strony.
Czy narzędzie automatyczne wykryje wszystkie błędy WCAG?
Nie i to jest najważniejsze zastrzeżenie przy każdym audycie. Narzędzia automatyczne, w tym silnik axe używany przez nas w Pa11y, wykrywają wyłącznie te naruszenia, które da się stwierdzić maszynowo: brak atrybutu alt, zbyt niski kontrast, brak etykiety pola, złamaną hierarchię nagłówków.
Nie ocenią, czy tekst alternatywny opisuje właściwą treść, czy kolejność wędrówki klawiszem tabulatora ma sens ani czy komunikat błędu naprawdę pomaga. Dlatego nasz audyt łączy pomiar automatyczny z przejściem strony samą klawiaturą i sprawdzeniem czytnikiem ekranu.
Czytaj dalej
Audyt WCAG
Co dokładnie sprawdzamy, jak wygląda raport i dlaczego sam audyt jest u nas bezpłatny.
Zobacz zakres audytuEuropejski Akt o Dostępności
Kogo obowiązuje, kto jest wyłączony i jakie sankcje przewiduje polska ustawa wdrażająca.
Sprawdź, czy Cię dotyczyDostępność cyfrowa
Przegląd całego działu: co robimy w zakresie dostępności, dla kogo i na jakich zasadach.
Wróć do działuPięćdziesiąt kryteriów brzmi groźnie. Pomiar trwa minutę.
Wpisz adres, a nasz Doradca AI zmierzy stronę silnikiem axe i pokaże, które kryteria są naruszone, gdzie dokładnie i co z tym zrobić. Bez rejestracji, bez opłaty i bez zobowiązania.
- Audyt bezpłatny
- Silnik axe
- Wynik od razu
- Bez rejestracji