1.1.1
Treść nietekstowa
Każdy obrazek, ikona, wykres czy przycisk graficzny musi mieć tekstowy odpowiednik, który przekazuje tę samą informację. Grafiki czysto dekoracyjne należy ukryć przed czytnikami ekranu.
Słownik WCAG 2.2 po polsku
Wszystkie kryteria sukcesu WCAG wyjaśnione prostym językiem: o co chodzi, komu to pomaga, jak to zrobić dobrze i jak to sprawdzić w kilka minut.
86kryteriów WCAG 2.2
50wymaganych prawem (WCAG 2.1 AA)
9nowych w WCAG 2.2
4checklisty dla ról w zespole
Checklisty dla Twojej roli
Żadne kryterium nie pasuje do filtrów. Spróbuj innego słowa lub wyczyść filtry.
1. Postrzegalność
Informacje i interfejs muszą być przedstawione tak, żeby każdy mógł je dostrzec – wzrokiem, słuchem lub dotykiem.
1.1 Alternatywa tekstowa
1.2 Multimedia
1.2.1
Tylko audio lub tylko wideo (nagranie)
Nagranie samego dźwięku (np. podcast) potrzebuje transkrypcji. Nagranie samego obrazu bez dźwięku (np. animacja instruktażowa) potrzebuje opisu tekstowego lub ścieżki audio.
1.2.2
Napisy rozszerzone (nagranie)
Każde nagrane wideo z dźwiękiem musi mieć napisy – nie tylko dialogi, ale też ważne dźwięki (np. [dzwonek telefonu], [śmiech]) i oznaczenie, kto mówi.
1.2.3
Audiodeskrypcja lub alternatywa tekstowa dla mediów (nagranie)
Jeśli w nagranym filmie ważne informacje są tylko w obrazie (napis na ekranie, pokazywany dokument, gest), trzeba je udostępnić przez audiodeskrypcję albo pełną alternatywę tekstową.
1.2.4
Napisy rozszerzone (na żywo)
Transmisje na żywo (webinary, sesje rady, konferencje) muszą mieć napisy tworzone w czasie rzeczywistym.
1.2.5
Audiodeskrypcja (nagranie)
Nagrane filmy muszą mieć audiodeskrypcję, czyli dodatkową ścieżkę lektorską opisującą ważne elementy obrazu, które nie wynikają z dźwięku.
1.2.6
Język migowy (nagranie)
Nagrane filmy z dźwiękiem mają tłumaczenie na język migowy (w Polsce – PJM).
1.2.7
Rozszerzona audiodeskrypcja (nagranie)
Jeśli w filmie nie ma wystarczająco długich pauz na zwykłą audiodeskrypcję, film jest zatrzymywany, żeby lektor mógł opisać obraz.
1.2.8
Alternatywa tekstowa dla mediów (nagranie)
Do nagranych filmów dostępny jest pełny tekst – scenariusz z dialogami i opisem wszystkiego, co dzieje się na ekranie.
1.2.9
Tylko audio (na żywo)
Transmisje samego dźwięku na żywo (np. radio internetowe, audycja) mają tekstową alternatywę tworzoną na bieżąco.
1.3 Możliwość adaptacji
1.3.1
Informacje i relacje
Struktura, którą widać na ekranie (nagłówki, listy, tabele, pola formularza z etykietami, grupy), musi być też zapisana w kodzie – tak, żeby czytnik ekranu mógł ją odczytać.
1.3.2
Zrozumiała kolejność
Jeśli kolejność czytania ma znaczenie, kolejność elementów w kodzie musi być taka sama jak ta widoczna na ekranie.
1.3.3
Charakterystyki zmysłowe
Instrukcje nie mogą opierać się wyłącznie na kształcie, kolorze, rozmiarze, położeniu czy dźwięku („kliknij zielony przycisk po prawej”).
1.3.4
Orientacja
Strona lub aplikacja działa zarówno w pionie, jak i w poziomie – nie blokuje jednej orientacji ekranu, chyba że jest to niezbędne (np. aplikacja do czeków bankowych).
1.3.5
Określenie pożądanej wartości
Pola formularza z danymi osobowymi (imię, e-mail, telefon, adres) mają w kodzie oznaczony cel przez atrybut autocomplete, dzięki czemu przeglądarka może je wypełnić automatycznie.
1.3.6
Określenie celu
Cel elementów interfejsu, ikon i regionów strony jest zapisany w kodzie (np. przez punkty orientacyjne ARIA), tak aby narzędzia wspomagające mogły je dostosować – np. zamienić ikonę na symbol znany użytkownikowi.
1.4 Rozróżnialność
1.4.1
Użycie koloru
Kolor nie może być jedynym sposobem przekazania informacji – np. zaznaczenia błędu, wyróżnienia linku w tekście czy serii na wykresie.
1.4.2
Kontrola odtwarzania dźwięku
Jeśli dźwięk odtwarza się automatycznie dłużej niż 3 sekundy, musi być sposób, by go zatrzymać lub ściszyć niezależnie od głośności systemu.
1.4.3
Kontrast (minimum)
Tekst musi mieć kontrast z tłem co najmniej 4,5:1. Duży tekst (od 24 px, albo od ok. 18,7 px pogrubiony) – co najmniej 3:1.
1.4.4
Zmiana rozmiaru tekstu
Tekst można powiększyć do 200% (np. zoomem przeglądarki) bez utraty treści i funkcji – nic nie może się uciąć ani nałożyć.
1.4.5
Obrazy tekstu
Tekst ma być tekstem, a nie obrazkiem z tekstem – wyjątkiem są logotypy i sytuacje, gdy konkretny wygląd jest niezbędny.
1.4.6
Kontrast (wzmocniony)
Wyższy próg kontrastu: 7:1 dla zwykłego tekstu i 4,5:1 dla dużego.
1.4.7
Głos niski lub brak dźwięków tła
W nagraniach mowy dźwięki tła są wyłączone, można je wyłączyć albo są co najmniej 20 dB ciszej niż mowa.
1.4.8
Prezentacja wizualna
Bloki tekstu dają się dostosować: użytkownik może wybrać kolory, wiersze mają do 80 znaków, tekst nie jest justowany, interlinia wynosi co najmniej 1,5, a po powiększeniu do 200% nie trzeba przewijać w poziomie.
1.4.9
Obrazy tekstu (bez wyjątków)
Obrazy tekstu są używane wyłącznie dekoracyjnie albo gdy konkretny wygląd jest niezbędny (np. logo).
1.4.10
Dopasowanie do ekranu
Treść musi się dopasować do szerokości 320 px (odpowiednik zoomu 400% na ekranie 1280 px) bez przewijania w dwóch kierunkach – wyjątki to np. mapy, tabele danych i edytory.
1.4.11
Kontrast elementów nietekstowych
Elementy interfejsu (obramowania pól, przyciski, przełączniki, wskaźnik fokusu) i istotne części grafik (linie wykresu, ikony) muszą mieć kontrast co najmniej 3:1 z otoczeniem.
1.4.12
Odstępy w tekście
Strona nie może się psuć, gdy użytkownik zwiększy odstępy: interlinię do 1,5, odstęp po akapicie do 2×, odstępy między literami do 0,12 i między słowami do 0,16 wielkości czcionki.
1.4.13
Treści spod kursora lub fokusu
Treści pojawiające się po najechaniu myszą lub fokusie (dymki, podpowiedzi, podmenu) muszą dać się zamknąć klawiszem Esc, pozwolić najechać na siebie kursorem i nie znikać same, dopóki użytkownik z nich korzysta.
2. Funkcjonalność
Każdy musi móc obsłużyć interfejs i nawigację – także bez myszy, bez pośpiechu i bez ryzyka dla zdrowia.
2.1 Dostępność z klawiatury
2.1.1
Klawiatura
Wszystko, co da się zrobić myszą, musi dać się zrobić samą klawiaturą: menu, przyciski, formularze, suwaki, okna dialogowe, odtwarzacze.
2.1.2
Bez pułapki na klawiaturę
Jeśli fokus klawiatury wejdzie w jakiś element (np. osadzony odtwarzacz, edytor, okno), musi dać się z niego wyjść samą klawiaturą.
2.1.3
Klawiatura (bez wyjątków)
Cała funkcjonalność jest dostępna z klawiatury – bez wyjątku dla czynności zależnych od ścieżki ruchu (np. rysowanie odręczne).
2.1.4
Jednoznakowe skróty klawiaturowe
Jeśli strona ma skróty z jednego znaku (np. „s” = szukaj), użytkownik musi móc je wyłączyć, zmienić albo działają one tylko, gdy fokus jest na danym elemencie.
2.2 Wystarczająca ilość czasu
2.2.1
Dostosowanie czasu
Jeśli strona ma limit czasu (np. wylogowanie, czas na wypełnienie formularza), użytkownik musi móc go wyłączyć, wydłużyć (co najmniej 10-krotnie) albo przedłużyć jednym prostym działaniem po ostrzeżeniu.
2.2.2
Pauza, zatrzymanie, ukrycie
Treści ruchome, migające lub przewijające się automatycznie dłużej niż 5 sekund (karuzele, pasy z wiadomościami, animacje) muszą mieć możliwość pauzy, zatrzymania lub ukrycia. To samo dotyczy treści aktualizujących się automatycznie.
2.2.3
Bez limitu czasowego
Limit czasu nie jest istotną częścią działania – z wyjątkiem multimediów i wydarzeń na żywo.
2.2.4
Przerwy
Użytkownik może odłożyć lub wyłączyć przerwania (powiadomienia, wyskakujące komunikaty), poza nagłymi przypadkami.
2.2.5
Ponowne uwierzytelnienie
Gdy sesja wygaśnie, po ponownym zalogowaniu użytkownik może kontynuować bez utraty danych.
2.2.6
Przekroczenie czasu
Użytkownik jest uprzedzany, po jakim czasie bezczynności straci dane – chyba że dane są przechowywane przez co najmniej 20 godzin.
2.3 Napady padaczki i reakcje fizyczne
2.3.1
Trzy błyski lub wartości poniżej progu
Nic na stronie nie może błyskać częściej niż trzy razy na sekundę (chyba że błyski są poniżej progów jasności i wielkości).
2.3.2
Trzy błyski
Nic nie błyska częściej niż trzy razy na sekundę – bez wyjątków dla małych obszarów.
2.3.3
Animacje z interakcji
Animacje ruchu wywołane interakcją (paralaksa, przesuwanie przy przewijaniu, powiększanie) można wyłączyć – chyba że są niezbędne.
2.4 Możliwość nawigacji
2.4.1
Możliwość pominięcia bloków
Musi istnieć sposób, by pominąć powtarzające się bloki (menu, nagłówek) i przejść od razu do treści – zwykle link „Przejdź do treści” na początku strony.
2.4.2
Tytuł strony
Każda strona ma tytuł (<title>) opisujący jej temat lub cel.
2.4.3
Kolejność fokusu
Kolejność, w jakiej klawisz Tab przechodzi przez elementy, jest logiczna i zgodna z sensem strony.
2.4.4
Cel łącza (w kontekście)
Z treści linku (albo z linku i jego najbliższego kontekstu, np. zdania lub akapitu) musi wynikać, dokąd prowadzi.
2.4.5
Wiele dróg
Do każdej podstrony da się dotrzeć więcej niż jedną drogą, np. przez menu i wyszukiwarkę, albo menu i mapę strony.
2.4.6
Nagłówki i etykiety
Nagłówki i etykiety pól opisują temat lub cel tego, czego dotyczą.
2.4.7
Widoczny fokus
Element, na którym jest fokus klawiatury, musi być wyraźnie widoczny (obramowanie, podświetlenie).
2.4.8
Położenie
Użytkownik wie, gdzie jest w strukturze serwisu – np. dzięki ścieżce nawigacyjnej (okruszkom) lub oznaczeniu bieżącej pozycji w menu.
2.4.9
Cel łącza (tylko łącze)
Cel każdego linku wynika z samego tekstu linku, bez kontekstu.
2.4.10
Nagłówki sekcji
Treść jest podzielona na sekcje oznaczone nagłówkami.
2.4.11
Fokus nie jest zasłonięty (minimum)
Element z fokusem nie może być całkowicie zasłonięty przez treści stworzone przez autora strony – np. przyklejony nagłówek, stopkę czy baner cookies.
2.4.12
Fokus nie jest zasłonięty (rozszerzony)
Element z fokusem nie jest zasłonięty nawet częściowo.
2.4.13
Wygląd fokusu
Wskaźnik fokusu jest duży i kontrastowy: co najmniej tak duży jak obramowanie o grubości 2 px wokół elementu i z kontrastem 3:1 między stanem z fokusem i bez.
2.5 Metody obsługi
2.5.1
Gesty dotykowe
Funkcje obsługiwane gestami wielopunktowymi (szczypanie, dwa palce) lub wymagającymi określonej ścieżki (przeciągnięcie po łuku) mają alternatywę w postaci pojedynczego kliknięcia/dotknięcia.
2.5.2
Rezygnacja ze wskazania
Akcja wykonuje się przy puszczeniu przycisku myszy / oderwaniu palca (a nie przy samym naciśnięciu) albo da się ją przerwać, przesuwając kursor poza element.
2.5.3
Etykieta w nazwie
Dostępna nazwa elementu (odczytywana przez czytnik, używana przy sterowaniu głosem) zawiera tekst, który widać na etykiecie – najlepiej na początku.
2.5.4
Aktywowanie ruchem
Funkcje uruchamiane ruchem urządzenia (potrząśnięcie, przechylenie) mają alternatywę w interfejsie i można wyłączyć reagowanie na ruch.
2.5.5
Rozmiar celu (rozszerzony)
Elementy klikalne mają co najmniej 44 × 44 piksele CSS (z wyjątkami m.in. dla linków w tekście).
2.5.6
Równoległe mechanizmy wprowadzania
Strona nie ogranicza metod wprowadzania – użytkownik może przełączać się między dotykiem, myszą i klawiaturą.
2.5.7
Ruchy przeciągania
Każda funkcja wymagająca przeciągania (drag and drop, suwaki, sortowanie) ma alternatywę w postaci pojedynczych kliknięć.
2.5.8
Rozmiar celu (minimum)
Elementy klikalne mają co najmniej 24 × 24 piksele CSS albo są tak rozmieszczone, że wokół każdego mieści się okrąg o średnicy 24 px, nienachodzący na sąsiednie cele. Wyjątki: linki w tekście, elementy natywne przeglądarki.
3. Zrozumiałość
Treść i działanie strony muszą być zrozumiałe i przewidywalne, a formularze – pomagać unikać błędów.
3.1 Możliwość odczytania
3.1.1
Język strony
Domyślny język strony jest określony w kodzie (atrybut lang w elemencie <html>).
3.1.2
Język części
Fragmenty w innym języku niż reszta strony (cytat po angielsku, wersja w języku ukraińskim) mają oznaczony język.
3.1.3
Nietypowe słowa
Dostępne są wyjaśnienia żargonu, idiomów i terminów specjalistycznych.
3.1.4
Skróty
Skróty i skrótowce są rozwinięte przy pierwszym użyciu albo w słowniczku.
3.1.5
Poziom umiejętności czytania
Jeśli tekst wymaga umiejętności czytania powyżej poziomu szkoły podstawowej (niższy poziom średni), dostępna jest wersja uproszczona lub materiały pomocnicze.
3.1.6
Wymowa
Gdy znaczenie słowa zależy od wymowy (np. akcentu), dostępna jest informacja o wymowie.
3.2 Przewidywalność
3.2.1
Po otrzymaniu fokusu
Samo przejście fokusem na element nie może powodować zmiany kontekstu – otwarcia nowego okna, wysłania formularza czy przeniesienia na inną stronę.
3.2.2
Podczas wprowadzania danych
Zmiana wartości pola (wybór z listy, zaznaczenie opcji) nie powoduje automatycznie zmiany kontekstu, chyba że użytkownik został o tym uprzedzony.
3.2.3
Spójna nawigacja
Powtarzające się elementy nawigacji (menu, stopka, wyszukiwarka) występują na każdej podstronie w tej samej kolejności.
3.2.4
Spójna identyfikacja
Elementy o tej samej funkcji są nazywane i oznaczane tak samo w całym serwisie.
3.2.5
Zmiana na żądanie
Zmiany kontekstu następują tylko na żądanie użytkownika albo można je wyłączyć.
3.2.6
Spójna pomoc
Jeśli na wielu podstronach jest dostępna pomoc (dane kontaktowe, czat, formularz, FAQ), znajduje się ona zawsze w tym samym miejscu względem innych treści.
3.3 Pomoc przy wprowadzaniu informacji
3.3.1
Identyfikacja błędu
Jeśli formularz wykryje błąd, wskazuje, które pole jest błędne, i opisuje problem tekstem.
3.3.2
Etykiety lub instrukcje
Pola formularza mają widoczne etykiety, a tam, gdzie trzeba – instrukcje (format daty, pola wymagane).
3.3.3
Sugestie korekty błędów
Jeśli wiadomo, jak poprawić błąd, komunikat podpowiada rozwiązanie (np. „Data musi mieć format DD.MM.RRRR”).
3.3.4
Zapobieganie błędom (prawnym, finansowym, w danych)
Przy formularzach o skutkach prawnych lub finansowych (wnioski, płatności, zmiana danych) użytkownik może sprawdzić dane przed wysłaniem, poprawić je lub cofnąć operację.
3.3.5
Pomoc
Dostępna jest pomoc kontekstowa do wypełniania formularzy (podpowiedzi, przykłady, instrukcje).
3.3.6
Zapobieganie błędom (wszystkim)
Każdy formularz wysyłający dane można sprawdzić, poprawić lub cofnąć.
3.3.7
Zbędne wprowadzanie danych
W jednym procesie użytkownik nie musi ponownie wpisywać danych, które już podał – system uzupełnia je sam albo pozwala je wybrać (np. „adres do korespondencji taki sam jak zamieszkania”).
3.3.8
Dostępne uwierzytelnianie (minimum)
Logowanie nie może wymagać testu poznawczego (zapamiętania hasła, przepisania kodu, rozwiązania zagadki), chyba że jest alternatywa albo pomoc – np. możliwość wklejenia hasła, menedżer haseł, logowanie linkiem e-mail.
3.3.9
Dostępne uwierzytelnianie (rozszerzone)
Logowanie nie wymaga żadnego testu poznawczego – także rozpoznawania obiektów czy własnych zdjęć.
4. Solidność
Kod musi być na tyle poprawny, żeby odczytały go różne przeglądarki i technologie wspomagające.
4.1 Kompatybilność
4.1.1
Parsowanie
Kryterium wymagało poprawnego składniowo HTML (domknięte znaczniki, unikalne id). W WCAG 2.2 zostało usunięte jako przestarzałe – współczesne przeglądarki i czytniki radzą sobie z błędami składni, a realne problemy wyłapują kryteria 1.3.1 i 4.1.2.
4.1.2
Nazwa, rola, wartość
Każdy element interfejsu (przycisk, pole, przełącznik, zakładka, menu) ma w kodzie nazwę, rolę i aktualny stan, które mogą odczytać technologie wspomagające.
4.1.3
Komunikaty o stanie
Komunikaty o stanie (np. „Dodano do koszyka”, „Znaleziono 12 wyników”, „Formularz wysłany”), które pojawiają się bez przenoszenia fokusu, są ogłaszane przez czytnik ekranu.
Najczęstsze pytania o WCAG
Czym jest WCAG?
WCAG (Web Content Accessibility Guidelines) to międzynarodowy standard dostępności treści internetowych opracowany przez W3C. Opisuje, jak tworzyć strony, aplikacje i dokumenty, z których mogą korzystać osoby z niepełnosprawnościami – niewidome, głuche, z niepełnosprawnością ruchową czy poznawczą. Składa się z 4 zasad, 13 wytycznych i kryteriów sukcesu na trzech poziomach: A, AA i AAA.
Która wersja WCAG obowiązuje w Polsce?
Ustawa o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych odsyła do normy EN 301 549, która dla stron internetowych wymaga spełnienia WCAG 2.1 na poziomie AA (50 kryteriów). Te same wymagania techniczne dotyczą firm objętych European Accessibility Act. Najnowsza wersja standardu to WCAG 2.2 – warto ją stosować już teraz.
Czym różnią się poziomy A, AA i AAA?
Poziom A to absolutne minimum – bez niego część osób w ogóle nie skorzysta ze strony. Poziom AA usuwa najczęstsze bariery i jest wymagany prawem. Poziom AAA to najwyższy standard; nie jest wymagany dla całych serwisów, bo nie wszystkie treści da się do niego dostosować.
Co nowego w WCAG 2.2?
WCAG 2.2 dodało 9 kryteriów, m.in. widoczność fokusu niezasłoniętego przez przyklejone elementy (2.4.11), alternatywę dla przeciągania (2.5.7), minimalny rozmiar przycisków 24×24 px (2.5.8), spójne umiejscowienie pomocy (3.2.6), brak konieczności ponownego wpisywania danych (3.3.7) oraz dostępne logowanie bez testów pamięciowych (3.3.8). Usunięto przestarzałe kryterium 4.1.1 Parsowanie.
Czy automatyczny test wystarczy, żeby spełnić WCAG?
Nie. Narzędzia automatyczne wykrywają tylko część problemów – szacuje się, że około 30–40%. Przy każdym kryterium w tym słowniku zaznaczamy, czy da się je sprawdzić automatycznie, czy wymaga testu ręcznego. Pełną ocenę zgodności daje dopiero audyt ekspercki.