Wytyczne dla dostępności treści internetowych w wersji 2.0 zostały opracowane w 2008 roku i nie uwzględniają zmian które w ostatnim czasie zaszły w świecie IT (technologie mobilne) oraz nie uwzględniały potrzeb osób słabowidzących oraz osób z niepełnosprawnością intelektualną. 5 czerwca 2018 roku opublikowano wersję 2.1 wytycznych, które są wstecznie kompatybilne z WCAG 2.0.
Oznacza to, że WCAG 2.1 zawiera wszystkie wytyczne i kryteria z WCAG 2.0, a jeśli strona internetowa jest zgodna z WCAG 2.1, to automatycznie jest również zgodna z WCAG 2.0.
Nie zmieniły się stosowane w standardzie poziomy zgodności: A, AA oraz AAA. Jednak aby zachować dotychczasową numerację kryteriów z WCAG 2.0, zdecydowano się dopisać nowe kryteria na koniec już istniejących wytycznych.
Kryteria sukcesu
W wersji WCAG 2.1 pojawiło się 17 nowych kryteriów sukcesu. Poniżej zostały one po krótce omówione. Przy każdym podano jego numer oraz poziom zgodności.
1.3.4 Orientacja (AA)
Zawartość powinna wyświetlać się i działać tak samo w każdej orientacji ekranu (pionowej/poziomej).
1.3.5 Określenie przeznaczenia elementów wejściowych (AA)
Jeśli jest to możliwe, elementy wejściowe (np. elementy formularzy) powinny być oznaczone tak, by ich przeznaczenie było możliwe do określenia dla programu komputerowego (np. czytnika ekranu).
Np. do elementów formularza „input” w języku HTML 5 powinny być przypisane atrybuty „autocomplete” z odpowiednią zawartością.
1.3.6 Określenie przeznaczenia (AAA)
Przeznaczenie komponentów interfejsu użytkownika, ikon i regionów musi być możliwe do określenia przez program komputerowy.
1.4.10 Dopasowanie do szerokości (AA)
Zawartość na ekranie powinna być wyświetlana tak, by nie było konieczne przewijanie ekranu w poziomie.
1.4.11 Kontrast elementów nietekstowych (AA)
Komponenty interfejsu użytkownika oraz ważne grafiki powinny mieć kontrast przynajmniej 3:1 względem sąsiadujących kolorów.
1.4.12 Odstępy w tekście (AA)
Osoby słabowidzące powinny mieć możliwość zmiany odstępu między wierszami, akapitami, słowami i literami.
1.4.13 Zawartość wyświetlana pod wskaźnikiem lub po oznaczeniu fokusem (AA)
Jeśli na ekranie pojawia się nowa zawartość po najechaniu na jakiś element wskaźnikiem (np. myszą czy palcem) lub fokusem klawiatury, użytkownik powinien mieć możliwość szybkiego usunięcia tej zawartości z ekranu. Jednak zawartość ta nie powinna samoistnie znikać, gdy przesuwany jest po niej wskaźnik.
2.1.4 Znakowe skróty klawiszowe (A)
Jeśli jakiś element jest aktywowany jednoznakowym skrótem klawiszowym, to musi istnieć mechanizm, który pozwala na wyłączenie tego skrótu lub jego zmianę na bardziej złożony (kilkuklawiszowy). Dzięki temu osoby korzystające z technologii rozpoznawania mowy nie doprowadzą do przypadkowego uruchomienia np. łącza lub przycisku.
2.2.6 Limity czasowe (AAA)
Jeśli brak aktywności może spowodować utratę danych, to należy poinformować o tym użytkownika. Przykładem może tu być zamknięcie częściowo wypełnionego formularza przelewu na stronie banku po kilku minutach bezczynności.
2.3.3 Animacja po interakcji (AAA)
Jeśli po interakcji ze stroną (np. kliknięciu łącza, rozwinięciu menu czy przewinięciu strony) pojawia się animacja, która nie jest konieczna do obsługi strony lub zrozumienia informacji, to użytkownik musi mieć możliwość jej wyłączenia. U niektórych użytkowników elementy animowane mogą wywołać mdłości lub bóle głowy.
2.5.1 Gesty wskaźnikowe (A)
Strona nie powinna wymagać do obsłużenia gestów wykorzystujących więcej niż 1 palec oraz takich, które wymagają narysowania na ekranie określonej ścieżki.
2.5.2 Anulowanie zdarzeń wskaźnika (A)
Jeśli użytkownik przypadkiem dotknie jakiegoś elementu, to musi mieć możliwość anulowania związanej z nim czynności np. poprzez przesunięcie palca na inny element przed jego podniesieniem.
2.5.3 Etykieta w nazwie (A)
Zapisana programistycznie nazwa elementu interfejsu użytkownika powinna zawierać także etykietę tego elementu, która wyświetlana jest na ekranie. Ułatwi to obsługę strony osobom korzystającym z rozpoznawania mowy.
2.5.4 Wzbudzanie ruchem (A)
Jeśli jakaś funkcjonalność wymaga ruchu (np. potrząśnięcia lub przechylenia urządzenia), to musi być ona dostępna także poprzez interfejs użytkownika.
2.5.5 Rozmiar celu (AAA)
Jeśli jakiś element może być obsługiwany poprzez jego dotknięcie, to musi on mieć odpowiedni rozmiar (min. 44×44 piksele CSS).
2.5.6 Współwystępujące mechanizmy wejścia (AAA)
Strona nie może ograniczać korzystania z dostępnych mechanizmów wejścia i użytkownik musi mieć możliwość przechodzenia między mechanizmami w dowolnej chwili. Mechanizmy wejścia to np. klawiatura, mysz czy ekran dotykowy.
4.1.3 Komunikaty o stanie (AA)
Komunikaty o stanie (np. o błędzie lub o powodzeniu jakiejś czynności) powinny być odpowiednio oznaczone programistycznie.
Web Content Accessibility Guidelines (WCAG) 2.1 (język polski)
Web Content Accessibility Guidelines (WCAG) 2.1 (język angielski)