WCAG w sklepie internetowym. Wymagania 2.1 i 2.2 AA w praktyce

Czym jest WCAG

WCAG (Web Content Accessibility Guidelines) to wytyczne W3C, organizacji, która tworzy standardy internetu. Kryteria mają trzy poziomy: A (podstawowy), AA (standard wymagany przepisami) i AAA (najwyższy, rzadko wymagany). Wersja 2.1 ma 50 kryteriów na poziomach A i AA. Wersja 2.2 z 2023 r. dodaje kolejne i usuwa przestarzałe kryterium 4.1.1.

Europejska norma EN 301 549, na której opiera się ocena zgodności z EAA, w części o stronach internetowych odsyła do WCAG 2.1 AA. Kto spełnia WCAG 2.2 AA, spełnia też 2.1 AA, dlatego warto od razu celować w nowszą wersję.

Cztery zasady WCAG

Zasada	Co znaczy	Przykład w sklepie
Postrzegalność	Każdą informację da się odebrać więcej niż jednym zmysłem	Zdjęcie produktu ma opis, cena nie jest tylko na obrazku
Funkcjonalność	Wszystko da się obsłużyć różnymi sposobami, w tym klawiaturą	Wybór rozmiaru i „Do koszyka” działają bez myszki
Zrozumiałość	Treść i działanie są przewidywalne i jasne	Błąd w formularzu mówi, co poprawić
Solidność	Kod działa z technologiami asystującymi	Czytnik ekranu ogłasza, że produkt dodano do koszyka

Kryteria, które najczęściej decydują w sklepie

Strona główna i kategorie

• 1.1.1 Treść nietekstowa: banery, zdjęcia produktów i ikony mają teksty alternatywne. Ikona koszyka bez opisu to dla niewidomego pusty przycisk.
• 1.4.3 Kontrast (minimum): tekst ma kontrast co najmniej 4,5:1, a duży tekst 3:1. Jasnoszare ceny i dopiski na banerach to najczęstszy błąd w ogóle.
• 2.4.4 Cel linku: link mówi, dokąd prowadzi. Dziesięć linków „Zobacz” obok siebie nic nie mówi.
• 2.4.7 Widoczny fokus: użytkownik klawiatury widzi, gdzie jest.

Filtry i wyszukiwarka

• 4.1.2 Nazwa, rola, wartość: filtry ceny, rozmiaru i koloru informują o swoim stanie (zaznaczony lub nie).
• 4.1.3 Komunikaty o stanie: po zmianie filtra czytnik ogłasza liczbę wyników.

Karta produktu

• 1.4.1 Użycie koloru: wybór koloru wariantu nie opiera się tylko na kolorowym kółku, ma też nazwę.
• 2.1.1 Klawiatura: galeria zdjęć, wybór wariantu i przycisk „Do koszyka” działają z klawiatury.
• 1.4.10 Dopasowanie do ekranu: strona działa przy powiększeniu 400% bez przewijania w poziomie.

Koszyk, logowanie i płatność

• 1.3.1 i 3.3.2 Etykiety: każde pole ma widoczną etykietę powiązaną z polem (placeholder to nie etykieta).
• 3.3.1 i 3.3.3 Błędy: komunikat mówi, które pole jest błędne i jak je poprawić.
• 1.3.5 Cel pola: pola adresu i e-maila mają atrybut autocomplete, żeby przeglądarka mogła je uzupełnić.
• 2.2.1 Limit czasu: sesja koszyka nie wygasa bez ostrzeżenia i możliwości przedłużenia.

Co nowego w WCAG 2.2

Kryterium	Poziom	Znaczenie dla sklepu
2.4.11 Fokus nie zasłonięty	AA	Przyklejony nagłówek albo baner cookies nie może zasłaniać elementu z fokusem
2.5.7 Ruchy przeciągania	AA	Suwak ceny ma alternatywę, np. pola „od” i „do”
2.5.8 Rozmiar celu (minimum)	AA	Przyciski i linki mają co najmniej 24×24 px albo odpowiedni odstęp
3.2.6 Spójna pomoc	A	Kontakt i czat są w tym samym miejscu na każdej stronie
3.3.7 Zbędne wpisywanie	A	Adres dostawy nie musi być wpisywany drugi raz jako adres faktury
3.3.8 Dostępne uwierzytelnianie	AA	Logowanie bez testów pamięci i przepisywania znaków, wklejanie hasła działa

Jak sprawdzić sklep

1. Skan automatyczny wyłapie m.in. brak tekstów alternatywnych, kontrast, puste przyciski i linki oraz brakujące etykiety. Darmowy skan Dostępomatu robi to w ok. 2 minuty.
2. Test klawiaturą: przejdź całą ścieżkę zakupu klawiszem Tab, Enter i spacją. Czy widzisz fokus? Czy da się dojść do płatności?
3. Test czytnikiem ekranu: NVDA (Windows, bezpłatny) lub VoiceOver (macOS, iOS). Czy przyciski mają sensowne nazwy?
4. Powiększenie: ustaw 200% i 400% w przeglądarce. Czy nic nie znika i nie nachodzi na siebie?

Szczegóły planu audytu opisujemy w artykule Jak przeprowadzić audyt dostępności sklepu.