Lista kontrolna ADA dla stron internetowych

Nie istnieje oficjalna lista kontrolna ADA dla stron internetowych. Wytyczne Departamentu Sprawiedliwości dotyczące dostępności stron wskazują istniejące standardy techniczne – WCAG i Section 508 Standards – i wymieniają typowe bariery: słaby kontrast kolorów, obrazy bez tekstu alternatywnego, filmy bez napisów, niedostępne formularze i nawigację wyłącznie myszą. Ta lista przekłada WCAG 2.2 na poziomie AA na praktyczne kontrole, pogrupowane według obszarów, dla strony firmowej lub sklepu internetowego. To ogólne informacje, a nie porada prawna, a przejście listy niczego nie poświadcza.

Listę można pobrać poniżej jako PDF.

Jak korzystać z tej listy

1. Wybrać ważne strony: strona główna, strona kategorii lub kolekcji, strona produktu lub usługi, koszyk, zamówienie, konto, formularz kontaktowy i jedna długa strona z treścią.
2. Najpierw uruchomić skan automatyczny. Nasz darmowy ADA compliance checker w około minutę znajduje wiele problemów na poziomie kodu; punkty oznaczone poniżej (auto) są przez niego częściowo objęte.
3. Przejść punkty ręczne z klawiaturą, czytnikiem ekranu i powiększeniem przeglądarki.
4. Zapisać, co znaleziono i naprawiono, z datami. Taki zapis przydaje się niezależnie od okoliczności.

Numery kryteriów w nawiasach odnoszą się do WCAG 2.2.

Obrazy i grafika

• [ ] Każdy obraz niosący informację ma tekst alternatywny (auto: obecność), który opisuje jego treść lub cel (1.1.1).
• [ ] Obrazy dekoracyjne mają pusty atrybut alt, więc czytniki ekranu je pomijają (1.1.1).
• [ ] Linki graficzne i przyciski z ikoną mówią, dokąd prowadzą lub co robią – „Koszyk”, a nie „ikona” (1.1.1, 2.4.4) (auto).
• [ ] Tekst nie jest pokazywany jako obraz, poza logo (1.4.5).
• [ ] Wykresy i infografiki mają obok streszczenie tekstowe (1.1.1).

Kolor i kontrast

• [ ] Tekst główny ma kontrast co najmniej 4,5:1, duży tekst 3:1 (1.4.3) (auto). Pary kolorów można sprawdzić w narzędziu do sprawdzania kontrastu.
• [ ] Ikony, obramowania pól i wskaźniki fokusu mają co najmniej 3:1 względem tła (1.4.11).
• [ ] Kolor nigdy nie jest jedynym sposobem przekazania informacji, np. o polach wymaganych, błędach lub cenach promocyjnych (1.4.1).

Klawiatura i fokus

• [ ] Każdy link, przycisk, menu, suwak i pole formularza działa z klawiszami Tab, Shift+Tab, Enter, Spacja i strzałkami (2.1.1).
• [ ] Nigdy nie można utknąć w wyskakującym oknie, widżecie czatu ani odtwarzaczu wideo (2.1.2).
• [ ] Fokus jest zawsze widoczny (2.4.7) i nie chowa się za przyklejonym nagłówkiem ani banerem cookies (2.4.11).
• [ ] Kolejność fokusu odpowiada kolejności wizualnej (2.4.3).
• [ ] Link „Przejdź do treści” lub punkty orientacyjne (landmarks) pozwalają pominąć nawigację (2.4.1).

Formularze i zamówienie

• [ ] Każde pole ma widoczną etykietę powiązaną z nim w kodzie (1.3.1, 3.3.2, 4.1.2) (auto: powiązanie).
• [ ] Pola adresu, e-maila i płatności używają atrybutów autocomplete (1.3.5) (auto: poprawne wartości).
• [ ] Błędy są opisane tekstem, obok pola, ze wskazówką, jak je poprawić (3.3.1, 3.3.3).
• [ ] Zamówienia i płatności można przejrzeć i poprawić, zanim staną się ostateczne (3.3.4).
• [ ] Logowanie nie wymaga rozwiązywania łamigłówki ani zapamiętywania kodu bez alternatywy, takiej jak wklejanie lub menedżer haseł (3.3.8).
• [ ] Raz wprowadzone dane nie są wymagane ponownie w tym samym procesie (3.3.7).

Struktura i nawigacja

• [ ] Każda strona ma unikalny, opisowy tytuł (2.4.2) (auto: obecność).
• [ ] Nagłówki tworzą logiczny konspekt, a listy i tabele używają prawdziwych znaczników (1.3.1, 2.4.6).
• [ ] Język strony jest określony (3.1.1) (auto).
• [ ] Nawigacja i linki do pomocy są na każdej stronie w tym samym miejscu (3.2.3, 3.2.6).
• [ ] Do strony prowadzi więcej niż jedna droga, np. menu, wyszukiwarka lub mapa strony (2.4.5).
• [ ] Tekst linku jest zrozumiały w kontekście – bez samego „kliknij tutaj” (2.4.4).

Układ, powiększenie i urządzenia mobilne

• [ ] Przy powiększeniu 200% żaden tekst nie jest ucięty (1.4.4); przy 400% lub szerokości 320 pikseli nic nie wymaga przewijania w poziomie (1.4.10).
• [ ] Strona działa w orientacji pionowej i poziomej (1.3.4).
• [ ] Przyciski i linki mają co najmniej 24 na 24 piksele CSS lub odpowiednie odstępy (2.5.8) (auto).
• [ ] Wszystko, co wykonuje się przeciąganiem, np. suwak ceny, działa też prostym dotknięciem lub kliknięciem (2.5.7).
• [ ] Treść pojawiająca się po najechaniu lub fokusie można zamknąć i nie znika, gdy kursor jest nad nią (1.4.13).

Wideo, audio i ruch

• [ ] Nagrane filmy mają dokładne napisy (1.2.2) oraz audiodeskrypcję lub transkrypcję (1.2.3, 1.2.5).
• [ ] Nic nie odtwarza dźwięku automatycznie dłużej niż trzy sekundy bez możliwości zatrzymania (1.4.2).
• [ ] Karuzele i animacje można wstrzymać (2.2.2), a nic nie miga częściej niż trzy razy na sekundę (2.3.1).
• [ ] Wygasanie sesji jest zapowiadane i można je wydłużyć (2.2.1).

Test z czytnikiem ekranu

• [ ] Z VoiceOver, NVDA lub TalkBack da się wykonać główne zadania – znaleźć produkt, dodać do koszyka, złożyć zamówienie, skontaktować się z Państwem.
• [ ] Komunikaty o stanie, np. „Dodano do koszyka” lub „3 wyniki”, są odczytywane (4.1.3).
• [ ] Niestandardowe kontrolki ogłaszają nazwę, rolę i stan, np. „rozwinięte” (4.1.2) (auto: częściowo).

Dokumenty i treści zewnętrzne

• [ ] Podlinkowane pliki PDF, menu, cenniki i formularze są dostępne lub dostępne w dostępnym formacie – zob. jak sprawdzić dostępność PDF.
• [ ] Osadzone widżety – czat, opinie, rezerwacje, mapy – przechodzą te same testy klawiaturą i czytnikiem ekranu.
• [ ] Nie polegają Państwo na nakładce (overlay), która ma „naprawić” stronę; zob. dlaczego nakładki nie są rozwiązaniem.

Publikacja i utrzymanie

• [ ] Strona o dostępności wyjaśnia, co Państwo zrobili i jak zgłosić barierę.
• [ ] Kontrolę powtarza się po aktualizacjach motywu, wtyczek i aplikacji, a nie tylko raz.

Od listy kontrolnej do audytu zgodności z ADA

Ta lista to samokontrola. Lista używana przez eksperta podczas audytu zgodności z ADA obejmuje każde kryterium WCAG A i AA na określonej próbce stron, z pisemnym raportem – zob. audyt dostępności. Kupujący federalni mogą też poprosić o przegląd według Section 508 lub o ACR oparty na VPAT. Pełną listę kryterium po kryterium zawiera lista kontrolna WCAG 2.2; tło prawne opisuje strona ADA a strony internetowe.

Kontrole oznaczone (auto) można bez wysiłku powtarzać co tydzień: w ramach planu Pandus skanuje każdą stronę Państwa serwisu i informuje o nowych problemach. To automatyczna kontrola, a nie pełny audyt.

Źródła

• ADA.gov, Guidance on Web Accessibility and the ADA: https://www.ada.gov/resources/web-guidance/
• ADA.gov, Fact sheet on the Title II web and mobile app rule: https://www.ada.gov/resources/2024-03-08-web-rule/
• W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/

Najczęstsze pytania

Czy istnieje oficjalna lista kontrolna ADA dla stron?

Nie. ADA nie zawiera technicznej listy kontrolnej stron dla firm prywatnych. Departament Sprawiedliwości wskazuje WCAG i Section 508 Standards; ta lista opiera się na WCAG 2.2 na poziomie AA.

Czy przejście tej listy oznacza, że strona spełnia ADA?

Żadna lista kontrolna nie może tego obiecać. Pomaga znaleźć i usunąć najczęstsze bariery oraz udokumentować pracę. Swoją sytuację prawną warto omówić z prawnikiem.

Jakiego poziomu WCAG powinna używać lista kontrolna ADA?

Poziomu AA. Reguła DOJ Title II dla władz stanowych i lokalnych przyjmuje WCAG 2.1 AA, a dla stron firm zwykłym punktem odniesienia jest WCAG 2.1 lub 2.2 AA. WCAG 2.2 AA obejmuje niemal całe 2.1 AA; zob. WCAG 2.1 a 2.2.

Czy listę można pobrać jako PDF?

Tak. Wersja PDF tej listy jest podlinkowana na tej stronie, więc można ją wydrukować lub przekazać deweloperowi albo agencji.

Czym audyt zgodności z ADA różni się od tej listy?

Audyt to uporządkowana ocena każdego kryterium WCAG przez eksperta, zakończona raportem. Ta lista to praktyczna samokontrola; obejmuje najważniejsze bariery, ale nie każde kryterium w pełnej głębi.