loading...
Cover image for WCAG 2.1 – wymagania listy kontrolnej

WCAG 2.1 – wymagania listy kontrolnej

ordigital profile image Adam Mateusz Brożyński ・6 min read

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

Discussion

pic
Editor guide