Adam Mateusz Brożyński

Posted on Aug 12, 2020

WCAG 2.1 – wymagania listy kontrolnej

#wcag #polish #poland #w3c

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” (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 oraz ARC Toolkit dla przeglądarki Chrome.

Dodatkowe informacje:

STRUKTURA

składnia

strona jest zgodna z deklaracją DTD (DOCTYPE)
przechodzi walidację W3C 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>, <s>, <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

Top comments (0)

Some comments have been hidden by the post's author - find out more

DEV Community