WCAG 2.2

E-commerce, który nie uwzględnia różnorodnych potrzeb swoich klientów, traci szansę na realne relacje, lojalność i konwersję. Nowe standardy nie ograniczają – one otwierają: na więcej użytkowników, na większy rynek, na lepsze doświadczenia. Z artykułu dowiesz się, na czym polega WCAG, a także na co, posiadając sklep na platformie AtomStore zwrócić uwagę podczas tworzenia dostępnego cyfrowo miejsca dla Twoich klientów.

---

Czym jest WCAG?

WCAG, czyli Web Content Accessibility Guidelines to standard określający, w jaki sposób tworzyć strony internetowe oraz aplikacje mobilne tak, aby mogły z nich korzystać osoby dotknięte niepełnosprawnościami. Ich autorem jest World Wide Web Consortium (W3C) czyli, organizacja, która tworzy otwarte standardy dla sieci zapewniające jej dostępność dla wszystkich. 

---

Na co należy zwrócić uwagę z perspektywy sklepu internetowego?

1. W kontekście wytycznych WCAG w standardzie 2.2 warto sprawdzić szereg elementów, które wpływają na dostępność serwisu dla osób z różnymi ograniczeniami – np. osoby niedowidzące, niewidome, z trudnościami w obsłudze myszy czy korzystające z czytników ekranu. Poniżej prezentujemy listę elementów, które warto skrupulatnie przeanalizować i poprawić w swoim sklepie internetowym. W większości przypadków zmiana tych elementów jest możliwa z poziomu panelu. 

• Obrazy i grafiki;
• Treści i ich struktura;
• Pliki do pobrania;
• Kolory i kontrast;
• Linki i przyciski;
• Multimedia;
• Tekst na obrazkach. 

Poniżej znajdziesz szczegółowy opis każdego z elementów.

---

Obrazy i grafiki

1. Obrazy i grafiki odgrywają jedną z kluczowych ról w prezentacji treści w sklepie internetowym. Patrząc przez pryzmat dostępności, ważne jest, aby były one właściwie opisane i interpretowalne także dla osób korzystających z technologii asystujących. 

2. Zatem ocena dostępności elementów stricte wizualnych powinna uwzględniać ich funkcję, a także sposób osadzenia w treści. W tym miejscu warto zastanowić się, czy obrazek, baner lub ikona jest elementem ozdobnym, czyli takim obrazkiem, który nie przekazuje istotnych informacji i nie jest ważny dla zrozumienia treści. Jego zadaniem jest jednak sprawienie, aby strona wyglądała estetyczniej – np. są to linie oddzielające sekcje, tła, ramki, ikony bez znaczenia czy wzory dekoracyjne. Jeżeli tak – czy posiada pusty alt? Jeżeli nie – czy jego treść przekazuje wystarczającą ilość informacji, np. cel bądź tematykę obrazka? 

3. Przykładowy tekst alternatywny możesz wprowadzić w CMS Banery

4. Pamiętaj, że dotyczy to wielu miejsc w sklepie takich jak strona główna sklepu czy opisy produktów, które oferujesz. 

Treści i ich struktura

1. Oceń swoje treści pod kątem łatwości ich przyswojenia. W tym celu możesz skorzystać z narzędzi takich jak: Jasnopis bądź Logios.

2. Istotne jest również, aby treści posiadały odpowiednią strukturę, czyli nagłówki, które ułożone są w logicznej kolejności H1-H6 bez pominięcia żadnego z poziomów, czyli bez przechodzenia z np. H2 do H4 bezpośrednio. Więcej informacji znajdziesz w artykule Kinaole oraz objaśnieniu kryteriów WCAG.

3. Uwzględnienie tych elementów ułatwi odbiór treści zarówno dla osób z niepełnosprawnościami, jak i korzystających z czytników ekranu.

Pliki do pobrania

1. Pliki do pobrania, które umieścisz w swoim sklepie internetowym takie jak: regulaminy, formularze bądź instrukcje powinny być przygotowane we właściwy sposób.

2. Dostosowując wszelkiego rodzaju dokumenty, które będą dalej pobierane przez użytkowników, zadbaj o to, aby pliki były czytelne, miały właściwy format i rozmiar, a także były dostępne w formacie, który umożliwia ich uruchomienie i odczytanie przez technologie asystujące, takie jak czytniki ekranu. Najbardziej uniwersalnym formatem będzie format PDF. Więcej informacji na temat tworzenia dostępnych plików PDF znajdziesz w tekście Adobe.

Kolory i kontrast

1. Z perspektywy osób z zaburzeniami widzenia ten punkt może być niezwykle istotny dla podjęcia zakupów w Twoim sklepie internetowym. Istotna będzie analiza kontrastu między tekstem a tłem, a także tego, by informacje nie były przekazywane wyłącznie za pomocą koloru – co umożliwia zrozumienie tych treści również osobom z zaburzeniami widzenia barw.

2. Zadaj sobie pytanie, czy materiały graficzne spełniają wymogi dotyczące kontrastu? Rządowa strona wskazuje poziom na osi treść-tło, który powinien wynosić:

• 4,5:1 — dla tekstu;
• 3:1 — dla dużego tekstu;
• 3:1 — dla istotnych treści graficznych (np. ramka pola formularza, wykres, ikona będąca przyciskiem).

W jaki sposób możesz ocenić poziom kontrastu? Służą do tego narzędzia takie jak: WebAIM Color Contrast Checker bądź Color Contrast Analyzer.

3. Dotyczy to również elementów takich jak ikony, grafiki, przyciski oraz linki. Tego typu interaktywne elementy powinny być dobrze widoczne, nie zlewając się z tłem, co znacząco utrudnia poruszanie się użytkownikowi po Twoim sklepie.

Linki i przyciski

1. Linki oraz wszelkiego rodzaju przyciski powinny wyraźnie informować jakie działanie wyzwalają, oraz do jakiej podstrony prowadzą. Przykładowo, chcąc zapewnić jak najlepsze doświadczenie użytkownika, zamiast Kliknij tutaj lepiej w treść przycisku zamieścić np. Przejdź do formularza kontaktowego , ponieważ w ten sposób informujesz wprost o tym, gdzie po jego kliknięciu zostanie przeniesiony użytkownik.

2. Unikaj więc stwierdzeń o klikaniu w danym miejscu, a postaw na precyzyjne określenie docelowego miejsca, które zostanie wyświetlone klientowi. Przydatne informacje znajdziesz w tekście Politechniki Rzeszowskiej dotyczącym hiperłącz.

Multimedia

1. Posiadając w sklepie multimedia odnoszące się do wzroku lub słuchu – mogą to być nagrania video posiadające dźwięk (mowę) lub audio tj. dźwięk bez obrazu – zadbaj o to, aby posiadały one alternatywę tekstową w postaci napisów lub transkrypcji. 

Tekst na obrazkach

1. W przypadku tekstów, które osadzone są bezpośrednio na obrazkach, warto się zastanowić, czy osadzone są one tylko wtedy, gdy jest to niemożliwe do uniknięcia i czy tego typu teksty posiadają alternatywę?

Przykład:

W sklepie internetowym istnieje produkt, który posiada zdjęcie, na którym nałożony jest napis Limitowana edycja . Napis ten jest częścią obrazka, zatem osoby korzystające z czytników ekranu – np. osoby niewidome – nie będą słyszeć tej informacji. Ważne zatem jest, aby ta sama informacja o limitowanej edycji była również zapisana jako zwykły tekst obok zdjęcia lub w opisie produktu. Jest to istotne, ponieważ w ten sposób każdy z klientów, niezależnie od sposobu korzystania ze strony będzie wiedzieć o wyjątkowości produktu.

2. Zadbaj o to, aby w takich sytuacjach jego treść była zapisana również w formacie tekstowym, nie ograniczając się wyłącznie do formy graficznej.

---

Jakie inne elementy są równie istotne z perspektywy dostępności?

1. Fokus to oznaczenie, który element na stronie jest aktywny – a więc taki, do którego w danym momencie trafiają polecenia z klawiatury lub specjalnych narzędzi, które przystosowane są do osób z niepełnosprawnościami. Przykładowo, jeśli naciśnięty zostanie klawisz TAB – fokus przesunie się na kolejny przycisk lub pole tekstowe i to właśnie ten element jest gotowy na Twoje działania (np. wpisanie tekstu / akceptacja przyciskiem ENTER), Fokus musi być wyraźnie widoczny dla użytkownika. Poniższy screen przedstawia widok z Ustawienia Szablony Edycja szablonu Linki .

2. Należy zweryfikować czy każda strona zawiera Title , odnoszący się do celu lub tematu strony. Poniższy screen przedstawia widok w: Ustawienia SEO Metatagi ogólne – PL .

3. W kontekście WCAG prawidłowa walidacja błędnych danych to taka, która jasno i dostępnie informuje użytkownika, co poszło nie tak i jak poprawić błąd. Warto zatem upewnić się, czy komunikat o błędzie zawiera szczegółowe informacje, co poszło nie tak. Dodatkowo, czy taki komunikat o błędzie zawiera wskazówki, w jaki sposób można poprawnie wypełnić dane. Informacje dotyczące walidacji znajdziesz w pomocy AtomStore.

---

Opisy produktowe 

1. Jeżeli sprzedajesz produkt i usługi, a producent danego towaru określa, w jaki sposób są one dostosowane do potrzeb osób z niepełnosprawnością bądź produkt posiada dedykowane funkcje dla osób z niepełnosprawnością – jako sprzedawca takie informacje powinieneś powielić i przedstawić w opisie.

---

Bezpieczeństwo

1. Jeśli jako metodę zabezpieczeń wykorzystujesz Captchę – rekomendujemy przejście na wersję v3, ponieważ w chwili obecnej tylko ona spełnia wymogi WCAG 2.2.