Skip to main content

Lista kontrolna zgodności z WCAG 2.1 AA dla sklepów internetowych w UE

· WCAG · zgodność · EAA · lista kontrolna · tekst alternatywny

WCAG 2.1 Level AA to standard techniczny wymagany przez Europejską Ustawę o Dostępności. Jeśli Twój sklep sprzedaje klientom gdziekolwiek w UE, musisz go spełnić. Ta lista kontrolna obejmuje wszystkie wymagania standardu, zorganizowane według czterech zasad POUR.

Co oznaczają zasady POUR w praktyce

WCAG 2.1 grupuje wszystkie wymagania pod czterema zasadami:

  • Perceivable (postrzegalność) — każda treść musi docierać do użytkowników co najmniej jednym zmysłem, nawet jeśli nie widzą ani nie słyszą
  • Operable (funkcjonalność) — każda interakcja musi działać bez myszy
  • Understandable (zrozumiałość) — treść i zachowanie strony muszą być przewidywalne
  • Robust (solidność) — kod musi działać z dostępnymi dziś i przyszłymi technologiami wspomagającymi

Level AA leży pośrodku trzech poziomów (A, AA, AAA) i jest tym, czego wyraźnie wymaga EAA.

Postrzegalność

Obrazy i media

  • Każdy znaczący obraz ma tekst alternatywny opisujący, co pokazuje i dlaczego jest na stronie.
  • Obrazy dekoracyjne mają pusty atrybut alt="", żeby czytniki ekranu je pomijały. Brak atrybutu alt to błąd WCAG; pusty ciąg znaków to poprawny sygnał.
  • Filmy mają napisy odpowiadające dźwiękom. Automatycznie generowane napisy nie spełniają tego wymogu bez przeglądu i korekty.
  • Treści wyłącznie audio mają transkrypcję tekstową.

Kontrast kolorów

  • Zwykły tekst (poniżej 18pt) musi osiągać stosunek kontrastu 4,5:1 względem tła.
  • Duży tekst (18pt i powyżej) musi osiągać 3:1.
  • Żadna informacja nie jest przekazywana wyłącznie kolorem. Czerwona ramka błędu wymaga również ikony lub etykiety tekstowej.

Układ i powiększenie

  • Strony nie tracą treści przy skalowaniu tekstu do 200%.
  • Przy szerokości przeglądarki 1280px nie jest wymagane poziome przewijanie.

Funkcjonalność

Dostęp klawiaturą

  • Każdy link, przycisk, pole formularza i interaktywny element jest dostępny klawiszem Tab.
  • Nie ma pułapek klawiaturowych: jeśli użytkownik może wejść do komponentu, może też z niego wyjść bez odświeżania strony.
  • Na początku każdej strony pojawia się link "Przejdź do treści głównej".
  • Wskaźnik fokusa klawiatury jest zawsze widoczny. Usunięcie go w CSS to błąd WCAG.

Nawigacja i czas

  • Tytuły stron opisują bieżącą stronę, a nie tylko nazwę witryny.
  • Linki opisują cel nawigacji. "Czytaj więcej" i "kliknij tutaj" nie spełniają tego kryterium bez kontekstu.
  • Limity czasowe można przedłużyć, wstrzymać lub wyłączyć.
  • Karuzele i treści odtwarzane automatycznie mają kontrolki pauzy.

Zrozumiałość

Język i błędy

  • Element <html> zawiera atrybut lang odpowiadający językowi strony (np. lang="pl").
  • Pola formularzy mają etykiety. Atrybut placeholder nie jest etykietą.
  • Komunikaty o błędach informują, co poszło nie tak i jak to naprawić.

Przewidywalne zachowanie

  • Strony nie zmieniają kontekstu automatycznie, gdy użytkownik wybiera opcję z listy lub zaznacza pole wyboru.
  • Nawigacja pozostaje w tym samym miejscu na wszystkich stronach.

Solidność

Jakość kodu

  • Elementy HTML mają poprawne znaczniki otwierające i zamykające.
  • Żadna strona nie zawiera zduplikowanych wartości id.
  • Niestandardowe komponenty — okna modalne, karty, akordeony, selektory dat — ujawniają swoją rolę, nazwę i stan poprzez atrybuty ARIA.

Gdzie sklepy e-commerce najczęściej zawodzą

Tekst alternatywny obrazów powoduje więcej skarg dotyczących WCAG niż jakiekolwiek inne kryterium. Problemem jest operacyjność: deweloperzy rzadko zapominają o tekście alternatywnym w szablonach, ale obrazy produktów są codziennie dodawane przez osoby niebędące deweloperami. Sklep z 500 produktami może zgromadzić tysiące brakujących opisów w toku normalnej działalności.

Nawigacja klawiaturą to druga najczęstsza luka. Wiele komercyjnych motywów jest zbudowanych i testowanych wyłącznie z myszą.

Jak przeprowadzić audyt swojej witryny

Uruchom bezpłatny skan WCAG swojego sklepu. Skan sprawdza stronę pod kątem reguł WCAG 2.1 AA i zwraca wynik z konkretnymi lokalizacjami problemów.

Skanowanie automatyczne wykrywa od 30 do 40 procent problemów z WCAG. Reszta wymaga testów manualnych. W przypadku oświadczenia o dostępności EAA z Załącznika V musisz udokumentować zarówno to, co spełnia standard, jak i to, co nie spełnia, wraz z harmonogramem usunięcia braków.

Tekst alternatywny na dużą skalę

Pisanie tekstu alternatywnego ręcznie jest realistyczne dla katalogu 50 produktów. Przy 500 lub więcej staje się problemem operacyjnym.

Altvisor generuje tekst alternatywny zgodny z WCAG 2.1 AA we wszystkich 24 oficjalnych językach UE. Przetwarzasz obrazy produktów, przeglądasz wyniki i publikujesz, gdy jesteś zadowolony.

Załóż bezpłatne konto, aby sprawdzić, ile obrazów w Twoim sklepie nie ma zgodnego tekstu alternatywnego, i uruchom skan WCAG, aby zobaczyć pełny obraz sytuacji.