Otrzymujemy coraz więcej zapytań dotyczących stron WordPress lub sklepów WooCommerce jakie mają być zgodne ze standardem WCAG 2.1. Poniżej prezentujemy tabelę z kryteriami sukcesu WCAG 2.1 jaka przedstawia jakie listę kryteriów jakie muszą być spełnione w zależności od oczekiwanego poziomu wdrożenia.
Tabela zawiera 78 punktów (kryteriów sukcesu) WCAG 2.1.
- Poziom A – 30 kryteriów
- Poziom AA – 20 dodatkowych kryteriów (łącznie 50 z A)
- Poziom AAA – 28 dodatkowych kryteriów (łącznie 78)
Tabela kryteriów sukcesów WCAG 2.1 w formacie PDF.
| Funkcjonalność / Kryterium sukcesu | Poziom A | Poziom AA | Poziom AAA |
|---|---|---|---|
| 1.1.1 Treści nietekstowe | ✔️ Tekst alternatywny dla obrazów, ikon, wykresów itp. | ||
| 1.2.1 Tylko audio lub tylko wideo (nagrania) | ✔️ Alternatywa tekstowa dla nagrań audio/wideo | ||
| 1.2.2 Napisy (nagrania) | ✔️ Napisy do nagrań wideo z dźwiękiem | ||
| 1.2.3 Audiodeskrypcja lub alternatywa medialna (nagrania) | ✔️ Audiodeskrypcja lub alternatywa tekstowa dla nagrań wideo | ||
| 1.2.4 Napisy (na żywo) | ✔️ Napisy do transmisji na żywo | ||
| 1.2.5 Audiodeskrypcja (nagrania) | ✔️ Audiodeskrypcja dla nagrań wideo | ||
| 1.2.6 Język migowy (nagrania) | ✔️ Tłumaczenie na język migowy | ||
| 1.2.7 Rozszerzona audiodeskrypcja (nagrania) | ✔️ Rozszerzona audiodeskrypcja | ||
| 1.2.8 Alternatywa tekstowa dla mediów (nagrania) | ✔️ Pełna alternatywa tekstowa dla nagrań wideo | ||
| 1.2.9 Tylko audio (na żywo) | ✔️ Alternatywa tekstowa dla transmisji audio na żywo | ||
| 1.3.1 Informacje i relacje | ✔️ Struktura semantyczna (nagłówki, listy, tabele, formularze) | ||
| 1.3.2 Sekwencja sensowna | ✔️ Treść w logicznej kolejności | ||
| 1.3.3 Charakterystyki sensoryczne | ✔️ Instrukcje nie tylko wizualne (np. “czerwony przycisk”) | ||
| 1.3.4 Orientacja | ✔️ Strona działa w pionie i poziomie | ||
| 1.3.5 Identyfikacja celu pola | ✔️ Pola formularzy mają odpowiednie autocomplete | ||
| 1.3.6 Identyfikacja celu | ✔️ Identyfikacja celu wszystkich elementów (np. menu, ikon) | ||
| 1.4.1 Użycie koloru | ✔️ Informacji nie przekazujemy tylko kolorem | ||
| 1.4.2 Kontrola dźwięku | ✔️ Możliwość zatrzymania/wyciszenia dźwięku automatycznego | ||
| 1.4.3 Kontrast (minimum) | ✔️ Min. 4,5:1 dla tekstu | ||
| 1.4.4 Zmiana rozmiaru tekstu | ✔️ Możliwość powiększenia tekstu do 200% | ||
| 1.4.5 Obrazy zawierające tekst | ✔️ Nie używamy obrazów z tekstem (poza logotypami) | ||
| 1.4.6 Kontrast (zaawansowany) | ✔️ Min. 7:1 dla tekstu | ||
| 1.4.7 Niski/brak dźwięku tła | ✔️ Dźwięk tła nie przeszkadza w odbiorze | ||
| 1.4.8 Prezentacja wizualna | ✔️ Użytkownik może zmieniać odstępy, szerokość wierszy itp. | ||
| 1.4.9 Obrazy tekstu (bez wyjątków) | ✔️ Nie używamy obrazów z tekstem w ogóle | ||
| 1.4.10 Reflow (responsywność) | ✔️ Strona działa bez poziomego przewijania | ||
| 1.4.11 Kontrast elementów nietekstowych | ✔️ Min. 3:1 dla graficznych elementów interfejsu | ||
| 1.4.12 Odstępy tekstu | ✔️ Możliwość zwiększenia odstępów | ||
| 1.4.13 Treści na hover/focus | ✔️ Treści pojawiające się po najechaniu/fokusie są dostępne | ||
| 2.1.1 Klawiatura | ✔️ Wszystko dostępne z klawiatury | ||
| 2.1.2 Brak pułapek klawiaturowych | ✔️ Można opuścić każdy element klawiaturą | ||
| 2.1.3 Klawiatura (bez wyjątków) | ✔️ Wszystko dostępne z klawiatury, bez wyjątków | ||
| 2.1.4 Skróty klawiszowe | ✔️ Możliwość wyłączenia/zmiany skrótów jednoklawiszowych | ||
| 2.2.1 Regulacja czasu | ✔️ Możliwość wydłużenia, zatrzymania limitu czasu | ||
| 2.2.2 Pauza, stop, ukryj | ✔️ Możliwość zatrzymania animacji, karuzeli itp. | ||
| 2.2.3 Brak limitu czasu | ✔️ Brak limitów czasu | ||
| 2.2.4 Brak przerw | ✔️ Brak nieoczekiwanych przerw w działaniu strony | ||
| 2.2.5 Ponowne uwierzytelnianie | ✔️ Dane użytkownika nie są tracone przy ponownym logowaniu | ||
| 2.2.6 Timeouty | ✔️ Użytkownik jest ostrzegany o timeoutach i ich długości | ||
| 2.3.1 Trzy błyski lub mniej | ✔️ Brak treści migających więcej niż 3 razy/s | ||
| 2.3.2 Brak błysków | ✔️ Brak migotania w ogóle | ||
| 2.3.3 Animacje po interakcji | ✔️ Użytkownik może wyłączyć animacje po interakcji | ||
| 2.4.1 Pomijanie bloków | ✔️ Link “Przejdź do treści” | ||
| 2.4.2 Tytuł strony | ✔️ Każda strona ma unikalny tytuł | ||
| 2.4.3 Kolejność fokusu | ✔️ Logiczna kolejność nawigacji | ||
| 2.4.4 Cel linku (w kontekście) | ✔️ Cel każdego linku jest jasny z kontekstu | ||
| 2.4.5 Wiele sposobów | ✔️ Więcej niż jeden sposób na znalezienie strony | ||
| 2.4.6 Nagłówki i etykiety | ✔️ Jasne nagłówki i etykiety | ||
| 2.4.7 Widoczny fokus | ✔️ Fokus klawiatury jest widoczny | ||
| 2.4.8 Lokalizacja | ✔️ Użytkownik wie, gdzie się znajduje (np. “jesteś tutaj”) | ||
| 2.4.9 Cel linku (tylko tekst) | ✔️ Cel każdego linku jest jasny z samego tekstu | ||
| 2.4.10 Nagłówki sekcji | ✔️ Sekcje są wyraźnie oznaczone nagłówkami | ||
| 2.5.1 Gesty wskaźnikowe | ✔️ Nie wymagaj złożonych gestów | ||
| 2.5.2 Anulowanie wskaźnika | ✔️ Możliwość anulowania akcji wskaźnikiem | ||
| 2.5.3 Etykieta w nazwie | ✔️ Nazwa programistyczna = widoczna etykieta | ||
| 2.5.4 Sterowanie ruchem | ✔️ Funkcje aktywowane ruchem mają alternatywy | ||
| 2.5.5 Rozmiar celu | ✔️ Min. 44×44 px dla elementów interaktywnych | ||
| 2.5.6 Równoczesne mechanizmy wejścia | ✔️ Nie ograniczaj sposobów wprowadzania danych | ||
| 3.1.1 Język strony | ✔️ Strona ma ustawiony język | ||
| 3.1.2 Język fragmentów | ✔️ Zmiany języka są oznaczone | ||
| 3.1.3 Nietypowe słowa | ✔️ Wyjaśnij trudne słowa | ||
| 3.1.4 Skróty | ✔️ Wyjaśnij skróty | ||
| 3.1.5 Poziom czytania | ✔️ Tekst zrozumiały dla osoby po 9 klasie | ||
| 3.1.6 Wymowa | ✔️ Wyjaśnij trudne do wymówienia słowa | ||
| 3.2.1 Po fokusie | ✔️ Element nie zmienia się po otrzymaniu fokusu | ||
| 3.2.2 Po wprowadzeniu danych | ✔️ Element nie zmienia się po wprowadzeniu danych | ||
| 3.2.3 Spójna nawigacja | ✔️ Spójność menu na wszystkich stronach | ||
| 3.2.4 Spójna identyfikacja | ✔️ Spójność ikon, przycisków itp. | ||
| 3.2.5 Zmiana na żądanie | ✔️ Zmiany tylko na żądanie użytkownika | ||
| 3.3.1 Identyfikacja błędu | ✔️ Jasne wskazanie błędu w formularzu | ||
| 3.3.2 Etykiety lub instrukcje | ✔️ Instrukcje i etykiety przy polach formularzy | ||
| 3.3.3 Sugestia naprawy błędu | ✔️ Sugeruj poprawki przy błędach | ||
| 3.3.4 Zapobieganie błędom (wrażliwe dane) | ✔️ Zapobieganie błędom przy danych finansowych/prawnych | ||
| 3.3.5 Pomoc | ✔️ Pomoc i instrukcje dla użytkownika | ||
| 3.3.6 Zapobieganie błędom (wszystko) | ✔️ Zapobieganie błędom we wszystkich formularzach | ||
| 4.1.1 Poprawność kodu | ✔️ Kod zgodny ze specyfikacją | ||
| 4.1.2 Nazwa, rola, wartość | ✔️ Elementy interfejsu mają nazwę, rolę, wartość | ||
| 4.1.3 Komunikaty o statusie | ✔️ Komunikaty o stanie są dostępne dla czytników ekranu |
Legenda:
✔️ – Kryterium wymagane na danym poziomie
Puste pole – Kryterium nie jest wymagane na tym poziomie ale wymagania z poprzedniego poziomu są również wymagane
Przydatne linki:
Oficjalne wymagania WCAG 2.1 w Polsce znajdziesz w kilku źródłach — w zależności od kontekstu, w jakim chcesz je stosować (np. projektowanie stron internetowych, dostępność usług publicznych itp.).
Oficjalna specyfikacja WCAG 2.1 (język angielski)
To podstawowy dokument: 🔗 https://www.w3.org/TR/WCAG21/
To wersja źródłowa, najbardziej aktualna i oficjalna. Zawiera pełne wytyczne, kryteria sukcesu i poziomy zgodności (A, AA, AAA).
Polskie tłumaczenie WCAG 2.1
Jest nieoficjalne tłumaczenie przygotowane przez Fundację Widzialni: 🔗 https://www.widzialni.org/dokumenty/wcag21/
Uwaga: To tłumaczenie nie ma mocy prawnej, ale jest przydatne jako pomoc w zrozumieniu zasad po polsku.
Ustawa o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych (Dz.U. 2019 poz. 848)
🔗 https://isap.sejm.gov.pl/isap.nsf/DocDetails.xsp?id=WDU20190000848
To kluczowy dokument prawny w Polsce, który zobowiązuje podmioty publiczne do zgodności z WCAG na poziomie co najmniej AA.
Ministerstwo Cyfryzacji / GOV.PL
Na stronie gov.pl można znaleźć dodatkowe przewodniki i informacje: 🔗 https://www.gov.pl/web/dostepnosc-cyfrowa
