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:
- Wytyczne dla dostępności internetowej (WCAG) 2.1
- Jak spełnić WCAG (krótki przewodnik)
- Badanie zgodności z WCAG - lista kontrolna
- Ustawa z dnia 4 kwietnia 2019 o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych
- WCAG 2.1 – wymagania listy kontrolnej (PDF, 64KB)
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
focusczyhover) - 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ą
titlewedł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
hsą 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=presentationi 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
hoveralbofocusmożna zamknąć/trwa tak długo jakhoveralbofocus/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-heightx1,5; odstępami między<p>do x2;letter-spacingdo x0,12;word-spacingdo x0,16
widoczność
- w css nie ma
outlinelikwidują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ą atrybuttitleokreślający treść - nie ma
contentz 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
altma mniej niż 80 znaków - w powtarzających się elementach atrybuty
altititlesą spójne - wszystkie grafiki mają poprawny opis
alta istotne posiadają tekstową alternatywę - nie ma powtórzeń opisów
altititle, 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,remlubex - 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
Opracował: Adam Mateusz Brożyński, ordigital.pl
Top comments (1)
WAVE i ARC Toolkit stanowią solidną bazę startową, jednak zautomatyzowane narzędzia wyłapują zazwyczaj tylko ułamek rzeczywistych błędów dostępności. Ręczna weryfikacja nawigacji z poziomu klawiatury oraz testy z użyciem czytników ekranu pozostają kluczowe dla spełnienia wymogów tej ustawy. Przy niedawnym audycie dużego systemu publicznego najwięcej czasu zajęło nam właśnie prostowanie pułapek klawiaturowych omijanych przez automaty.
Some comments have been hidden by the post's author - find out more