WCAG 2.1 – wymagania listy kontrolnej
Tags: wcag, polish, poland, w3c
Published: 2020-08-12 10:17:54

**Poniżej prezentuję autorskie opracowanie wymagań WCAG 2.1 na podstawie [„Listy kontrolnej do badania zgodności stron internetowych z wymaganiami ustawy z dnia 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych”](https://www.gov.pl/web/dostepnosc-cyfrowa/jak-zbadac-czy-strona-www-jest-dostepna-cyfrowo) (v.1.02) Ministerstwa Cyfryzacji.**

Opracowanie zawiera skróconą i pogrupowaną, a przy tym pełną listę wymagań pochodzących z listy kontrolnej Ministerstwa, która jest adresowana bezpośrednio do webmasterów. Do testowania stron autorzy listy polecają dodatek [Wave](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=pl) oraz [ARC Toolkit](https://chrome.google.com/webstore/detail/arc-toolkit/chdkkkccnlfncngelccgbgfmjebmkmce) dla przeglądarki Chrome.

**Dodatkowe informacje:**
- [Wytyczne dla dostępności internetowej (WCAG) 2.1](http://wcag21.fdc.org.pl)
- [Jak spełnić WCAG (krótki przewodnik)](https://wcag.lepszyweb.pl)
- [Badanie zgodności z WCAG - lista kontrolna](https://www.gov.pl/web/dostepnosc-cyfrowa/jak-zbadac-czy-strona-www-jest-dostepna-cyfrowo)
- [Ustawa z dnia 4 kwietnia 2019 o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych](http://prawo.sejm.gov.pl/isap.nsf/download.xsp/WDU20190000848/O/D20190848.pdf)
- [WCAG 2.1 – wymagania listy kontrolnej (PDF, 64KB)](https://ordigital.pl/dl/wcag21-wymagania-listy-kontrolnej.pdf)

---

## **STRUKTURA** ##

### składnia
- strona jest zgodna z deklaracją DTD (DOCTYPE)
- przechodzi [walidację W3C](https://validator.w3.org/) i nie zawiera przestarzałych znaczników ani atrybutów

### okna i przekierowania
- nie ma automatycznego odświeżania/przekierowania strony lub jest konieczne i można je zatrzymać
- nie ma zmian kontekstu/treści niepotwierdzonych przez użytkownika (np. na `focus` czy `hover`)
- nowe okna przeglądarki nie otwierają się bez potwierdzenia przez użytkownika

### znaczniki i atrybuty ###
- strona zawiera poprawny znacznik `<html lang=…>`
- elementy obcojęzyczne mają atrybut `lang`
- wszystkie strony mają `title` według schematu: «informacja o zawartości – informacja o właścicielu strony»
- znaczniki HTML są używane zgodnie z przeznaczeniem
- każda podstrona ma jeden nagłówek `<h1>` lub więcej gdy zawiera odrębne i niepowiązane logicznie i hierarchicznie bloki
- nagłówki `h` są umieszczone kolejno i w logicznym układzie
- listy są tworzone tylko przez znaczniki list
- w listatch definicji `<dd>` poprzedza `<dt>`
- tabele z danymi mają nagłówki `<th>`
- tabele z danymi są tworzone tylko przez znaczniki tabel
- jeśli tabele są używane do szkieletu strony, mają definicję `role=presentation` i nie mają znaczników `<th>`, `<caption>`, `<thead>`, `<tfoot>`, `<colgroup>`, `<scope>`, `<headers>`, `<axis>`, `<summary>`
- wszystkie cytaty są zawarte w `<q>` lub `<blockquote>`
- klikalne elementy mają tagi `<a>`, `<area>`, `<button>`, `<inpu type="button">`, `<submit>`, `<reset>`, `<file>`, `<image>`, `<password>`, `<radio>`, `<checkbox>`, `<select>`
- zakazane znaczniki: `<blink>`, `<bgsound>`, `<marqee>`, `<basefont>`, `<center>`, `<font>`, `
`, `<strike>`, `<tt>`, `<align>`, `<alink>`, `<background>`, `<bgcolor>`, `<color>`, `<link>`, `<vlink>`
- elementy `<object>`, `<embed>`, `<applet>`, `<canvas>` są dostępne dla czytników ekranu, programów zmieniających kontrast i jeśli trzeba – poprawną transkrypcję tekstową
- dodatkową zawartość przy `hover` albo `focus` można zamknąć/trwa tak długo jak `hover` albo `focus`/trwa tak długo jak to zasadne
- treść generowana przez skrypt pojawia się bezpośrednio po elemencie ją wywołującym
- kod javascript nie usuwa ramki fokusa z elementów aktywnych
- dynamicznie generowana zawartość jest dostępna
- wyświetlana w interfejsie etykieta  jest zgodna z etykietą dostępną dla technologii asystujących
- komunikaty o stanie i błędach są dostępne dla technologii wspomagających bez konieczności przemieszczania fokusa

### linki ###
- nie ma pustych linków ani kotwic
- linki do kotwic są spójne i poprawne
- linki mające podobne funkcje są zgrupowane np. w listach
- linki z tą samą treścią są tak samo opisane, mają tę samą funkcję i prowadzą do tego samego celu
- linki są zrozumiałe same w sobie (nie ma «czytaj więcej» itp. lub mają opis `sr-only`)
- gdy link otwiera nowe okno, informacja o tym znajduje się z nim lub przy nim

### nawigacja ###
- elementy nawigacji mają spójny wygląd i logiczny układ
- strona zawiera aktualną mapę lub wyszukiwarkę treści dostępną na stronie głównej
- zdarzenia myszki mają ekwiwalent dla klawiatury: `onclick`, `onkeypress`, `onmousedown`, `onmouseup`, `onmouseover`, `onmouseout`, `onfocus`, `onblur`, `onkeydown`, `onkeyup`

### wprowadzanie ###
- wszystkie linki są dostępne przy pomocy klawisza TAB i aktywowane ENTERem
- przemieszczanie się kursora przy pomocy TAB przebiega w logicznej kolejności względem zawartości
- po listach można poruszać się strzałkami i dokonać wyboru SPACJĄ
- zaznaczenie jakiegoś elementu nie powoduje zablokowania dalszego przemieszczania kursora
- przed zwolnieniem przycisku można anulować działanie
- można w pełni zarządzać jednoliterowymi skrótami klawiszowymi
- funkcje gestów złożonych (np. ruch dwoma placami) można wywołać gestem prostym (np. pojedynczym dotknięciem)

---

## **WYGLĄD I KOLORYSTYKA** ##

### kontrast ###
- kontrast tekstu do tła wynosi min. 4,5:1 lub istnieje wersja kontrastowa strony, która to zapewnia
- kontrast treści do tła na istotnych grafikach wynosi min. 3:1
- linki są wizualnie wyróżnione w kontraście 3:1 do otaczającego tekstu

### orientacja ###
- treść pozostaje taka sama bez względu na orientację ekranu
- nie ma treści przekazywanych tylko kolorem (np. samo podświetlenie)
- żadna treść nie zmusza do szukania lub wskazania elementów na podstawie kolorów
- informacje przekazywane przez kształt lub pozycję są dostępne inną drogą
- przy szerokości 320px nie trzeba przesuwać strony poziomo
- przy szerokości 256px jest dostęp do treści TABem bez używania suwaka w pionie
- po powiększeniu do 200% strony nie trzeba przewijać w poziomie (poza tabelami i polami scroll) i żadne elementy nie pozostają ukryte, utracone lub wyłączone
- tekst jest czytelny przy `line-height` x1,5; odstępami między `<p>` do x2; `letter-spacing` do x0,12; `word-spacing` do x0,16

### widoczność ###
- w css nie ma `outline` likwidującego widoczność fokusa
- fokus wyróżnia dodatkowo zaznaczony link
- nie ma słów z literami oddzielonymi spacjami
- nie ma ASCII-Art bez dostępnej alternatywy
- znaczniki `<frame>` i `<iframe>` mają atrybut `title` określający treść
- nie ma `content` z css bez dostępnej alternatywy
- gdy skrypt zmienia element nietekstowy lub ramkę, zmienia się także alternatywa tekstowa

### ruch i migotanie ###
- nie ma gwałtownych zmian jasności zajmujących więcej niż 25% strony
- nie ma błysków na czerwono w tempie większym niż 3 na sekundę
- nie ma migających lub poruszających się elementów których nie da się zatrzymać

---

## **MULTIMEDIA** ##

### alt i title ###
- elementy czysto dekoracyjne mają `alt=""`
- atrybut `alt` ma mniej niż 80 znaków
- w powtarzających się elementach atrybuty `alt` i `title` są spójne
- wszystkie grafiki mają poprawny opis `alt` a istotne posiadają tekstową alternatywę
- nie ma powtórzeń opisów `alt` i `title`, czytnik ekranu nie wypowiada wielokrotnie tego samego tekstu

### dźwięk i obraz ###
- nie ma automatycznie uruchamianego dźwięku dłuższego niż 3 sek. którego nie da się zatrzymać
- wszystkie multimedia niosące treść można obsługiwać z klawiatury (głośność, wstrzymanie, następny element itp.) lub mają alternatywę
- dźwięki, filmy i animacje mają tytuł i opis (transkrypcja, audiodeskrypcja itp.) wyjaśniający co przedstawiają lub czego dotyczą
- wszystkie treści wizualne mają audiodeskrypcję oddającą zawartość materiału
- wszystkie filmy z dźwiękiem mają napisy dla niesłyszących (transkrypcję tekstu i informację o istotnych dźwiękach)
- złożone grafiki, obrazy i wykresy mają poszerzony opis np. w znacznikach `<details>` i `<summary>`

### pobieranie ###
- pliki do pobrania mają w tytule informację o formacie i wielkości np. «Dokument (100KB, PDF)»
- dokumenty do pobrania są dostępne lub posiadają dostępną alternatywę

---

## **FORMULARZE** ##
- rozmiar czcionek w formularzach jest podany w `em`, `rem` lub `ex`
- w polach formularza działa autouzupełnianie
- wszystkie pola posiadają przypisany `<label>` który wizualnie do niego się odnosi
- wymagane pola zawierają o tym informację oraz podany format w `<label>` lub `aria`
- pola o podobnej funkcji czy rodzaju danych są grupowane w `<fieldset>` lub `<optgroup>`
- znaczniki `<fieldset>` posiadają `<legend>`, a `<optgroup>` posiadają `<label>`
- informacja o błędzie zawiera jego przyczynę i informację jak wypełnić poprawnie pole
- CAPTCHa ma alternatywę tekstową lub możliwość odsłuchania
- formularz z danymi dot. finansów, danych osobowych lub prawnych, zawiera weryfikację, możliwość poprawienia danych przed wysłaniem i potwierdzenie wysłania

---

_Opracował: Adam Mateusz Brożyński, [ordigital.pl](https://ordigital.pl)_