Posted onAug 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ą dodatekWave orazARC Toolkit dla przeglądarki Chrome.

Dodatkowe informacje:

STRUKTURA

składnia

strona jest zgodna z deklaracją DTD (DOCTYPE)
przechodziwalidację 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. nafocus czyhover)
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ą atrybutlang
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łówkih 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ść przyhover albofocus można zamknąć/trwa tak długo jakhover albofocus/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ą opissr-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 przyline-height x1,5; odstępami między<p> do x2;letter-spacing do x0,12;word-spacing do x0,16

widoczność

w css nie maoutline 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ą atrybuttitle określający treść
nie macontent 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=""
atrybutalt ma mniej niż 80 znaków
w powtarzających się elementach atrybutyalt ititle są spójne
wszystkie grafiki mają poprawny opisalt a istotne posiadają tekstową alternatywę
nie ma powtórzeń opisówalt ititle, 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 wem,rem lubex
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> lubaria
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