Dostępność w ecommerce – od czego zacząć?

Zakupy internetowe dla osób z różnego rodzaju niepełnosprawnościami czy osób neuroatypowych często okazują się bardzo trudne lub nawet niemożliwe. Dlatego tak ważne jest, aby sklepy internetowe były dostępne dla każdego użytkownika, niezależnie od jego indywidualnych potrzeb i umiejętności.

Wdrażanie dostępności w sklepach internetowych nie tylko przyczynia się do zwiększenia liczby potencjalnych klientów, ale również będzie budować pozytywny wizerunek brandu. Ponadto od 2025 r. (a przynajmniej tak mówi UE) wytyczne dotyczące dostępności będą obejmować również e-commerce, więc warto się już tym zainteresować.

Poniżej opisałam kilka podstawowych wytycznych dotyczących dostępności sklepów internetowych i innych produktów cyfrowych. Są to praktyczne wskazówki, od których możesz zacząć transformację Twojego sklepu w inkluzywny sklep, czyli sklep dostępny dla wszystkich.

Wytyczne te będę rozwijać w kolejnych artykułach i zachęcam Cię do śledzenia mojego bloga, np. poprzez zapis do newslettera (przy okazji otrzymasz checklistę na start, która ułatwi wdrażanie dostępności).

 

Od czego zacząć wdrażanie dostępności w sklepie internetowym?

1. Sprawdź, w jakim stopniu Twój sklep jest dostępny

Przede wszystkim zainteresuj się tematem dostępności i sprawdź, na jakie przeszkody lub trudności mogą natrafić osoby neuroatypowe i z różnymi typami niepełnosprawności.

Możesz zacząć od:

• przeczytania poniższych punktów,
• dowiedz się, jak różne osoby korzystają z Internetu – polecam artykuł Stories of Web Users,
• jeśli masz w swoim otoczeniu osoby z różnymi niepełnosprawnościami (nawet tymczasowymi, jak złamana ręka) czy neuroróżnorodne, poproś, aby spróbowały zrobić zakupy w Twoim sklepie przy Tobie i zobacz, jak im to wychodzi,
• spróbuj sam/sama zrobić zakupy w swoim sklepie korzystając z czytnika ekranu (możesz skorzystać z któregoś z tych darmowych czytników), a także poruszać się po sklepie tylko za pomocą klawiatury,
• jeśli nie masz czasu, to jest też opcja zlecenia audytu dostępności na zewnątrz – odezwij się do mnie, to coś Ci doradzę.

2. Przeanalizuj treści na stronie

Jeśli chodzi o teksty na stronie to:

• powinny być napisane prostym i jasnym językiem, bez zbędnych metafor i specjalistycznego słownictwa – przykładowo osoby ze spektrum autyzmu mogą nie zrozumieć metafor,
• unikaj dużych bloków tekstów, zwłaszcza pisanych kursywą – są nieczytelne dla wiele osób,
• pisz krótkie zdania,
• skróty i akronimy rozwiń/wytłumacz przy pierwszym ich użyciu,
• powinny mieć rozmiar minimum 16px lub więcej – oczywiście są od tego wyjątki, co zależy od kontekstu – aby osoby starsze i ze słabszym wzrokiem mogły je bez problemu przeczytać,
• powinny mieć odpowiedni kontrast do tła, na którym się znajdują – tym narzędziem możesz sprawdzić kontrast i spełnienie tego zalecenia
• pozwól na powiększanie tekstu, tak aby wciąż był możliwy do przeczytania,
• bardziej specjalistyczne lub trudne w odbiorze treści możesz wesprzeć grafiką.

3. Zapewnij dostępne grafiki i materiały audio/wideo

Jakie to są dostępne grafiki i treści multimedialne? To w sumie zagadnienie na osobny artykuł (i pewnie taki się pojawi), ale ponieważ piszę tu o podstawach dostępności i chcę Cię zachęcić, a nie zniechęcić do zainteresowania się tematem, to skupię się na najważniejszych kwestiach.

Alt – alternatywa tekstowa

Alternatywy tekstowe (teksty alternatywne, alt-y) znajdują się w kodzie “pod obrazkiem” i:

• odczytywane są przez czytniki ekranów, informując ich użytkownika, co przedstawiają,
• pokazują się one na ekranie, gdy obraz nie zostanie z jakiegoś powodu wyświetlony,
• odczytywane są przez algorytmy indeksujące strony internetowe, np. “roboty” Google i pozwalają na znalezienie obrazka w wyszukiwarce

Wszystkie treści nietekstowe, a mające jakąś wartość informacyjną powinny być opatrzone tymi “alt-ami”. Istotna jest tu ta funkcja informacyjna, gdyż grafiki pełniące rolę dekoracyjną, powinny mieć te alty puste. “Puste alty” czyli jakie?

Wytłumaczę to na przykładzie.

Czy poniższa grafika pełni jakąś funkcję lub przekazuje jakieś informacje? Czy ma na celu wprowadzić w konkretny nastrój lub przekazać jakieś emocje?

Raczej nie (a przynajmniej moim zdaniem ;)) Ważny jest tekst (nie jest on grafiką w tym przypadku) i link. Zatem tu element alt powinien mieć postać: alt=””

W przypadku kolejnej grafiki mogę założyć, że ma ona na celu przywołać w umyśle odbiorcy skojarzenia z latem, relaksem, ale i poczucie kobiecości na plaży.

Zatem tutaj treść tekstu alt mogłaby brzmieć: blondynka siedząca na plaży, opierająca swoje dłonie z tyłu, jedną nogę ma wyprostowaną i spoczywającą na ziemi, drugą trochę zgiętą ze stopą spoczywającą na piasku. Wyraz twarzy kobiety przywodzi na myśl poczucie zmysłowości i kobiecości

Czy ta alternatywa tekstowa nie jest za długa? Nie! Tak naprawdę długość tekstu alt jest ograniczana przez czytniki ekranów, a niektóre pozwalają nawet na ponad tysiąc znaków. Jednak nie przesadzajmy, pamiętajmy o funkcji tego elementu – przekaz informacji, a nie zanudzenie użytkownika. Zasadniczo alt text powinien być tak długi, jak to konieczne, aby skutecznie opisać grafikę z zachowaniem rozsądnej zwięzłości.

Gdy na grafice jest tekst, to ten tekst powinien znaleźć się też w elemencie alt.

I jeszcze jedna wskazówka dotycząca altów: zrezygnuj ze sformułowań typu “grafika przedstawia”, “na zdjęciu pokazane jest” – to jest zbędne, czytnik ekranu poinformuje odbiorcę, że ma do czynienia z obrazkiem.

Do zapamiętania: decydując o treści alternatywy tekstowej, zadaj sobie proste pytania:

Czy ta grafika ma jakąś wartość informacyjną?
jeśli tak, to:
Co osoba czytająca/słyszącą treść alt-u powinna sobie wyobrazić?
Jakie uczucia ma wywołać dana grafika?

A wiesz, że alternatywy tekstowe możesz dodawać też w mediach społecznościowych?
Obiecuję, że napiszę o tym jeszcze więcej, jednak teraz szybka wskazówka – dodawaj ręcznie alty do zdjęć w social media, bo jeśli Ty tego nie zrobić, dodane zostaną automatycznie, a nie mamy wpływu na to jak algorytm opisze daną grafikę.

Napisy na filmach i transkrypcje

Po pierwsze, filmy też powinny być opatrzone tekstami alternatywnymi.
Po drugie, stwórz napisy na filmy.
Po trzecie, przygotuj transkrypcje dla filmów i materiałów audio.
Wszystkie te rzeczy dają dostęp osobom niewidomym do tego rodzaju treści. Jednak nie tylko osobom niewidomym, także wszystkim nam w różnych sytuacjach, gdy po prostu nie możemy włączyć dźwięku.

Napisy na filmach powinny zawierać nie tylko dialogi, wskazują, kto mówi oraz posiadają różne elementy kontekstowe (np. informacje o muzyce), które pozwolą osiągnąć cel, jaki film ma spełnić lub wywołać odpowiednie wrażenia z filmu.

Z kolei Transkrypcje są tekstowymi wersjami materiałów audio i wideo, stąd też powinny zawierać wszystkie wypowiadane słowa. Warto też dodać do nich opisy działań czy ważnych wydarzeń widocznych na filmie.

Aby transkrypcja była bardziej użyteczna to warto:

• stosować nagłówki, linki, listy, tam gdzie to sprawi, że transkrypcja będzie bardziej użyteczna,
• dodatkowe informacje możesz umieścić w nawiasach kwadratowych,
• możesz dodać informacje o osobach mówiących w nagraniu.

Animacje

Ogólnie to unikaj animacji, a zwłaszcza takich migających jak szalone. Jak już ich używasz to:

• pozwól je zatrzymać,
• nie mogą migać częściej niż 3 razy na sekundę,

 

Zadbaj o odpowiednie kolory i kontrast

Kontrast kolorów odnosi się do różnicy w świetle między tekstem (lub czymkolwiek na pierwszym planie) a jego tłem. Używając wystarczająco kontrastowych kolorów, widoczność tekstu na stronie jest wystarczająco wyraźna, aby większość ludzi mogła ją odróżnić.

Wytyczne dla dostępności (WCAG) podają właściwe współczynniki kontrastu:

• normalny tekst musi spełniać minimalny współczynnik kontrastu co najmniej 4.5:1,
• duży tekst (18 punktów lub większy, lub 14 punktów lub większy i pogrubiony) musi spełniać minimalny współczynnik kontrastu co najmniej 3:1.

Współczynnik kontrastu możesz sprawdzić narzędziem Contrast Checker.

Co więcej, należy unikać stosowania kolorów, które mogą wprowadzać zamieszanie lub mylić osoby korzystające ze strony internetowej. Na przykład, należy unikać stosowania kolorów czerwonego i zielonego obok siebie, ponieważ osoby z daltonizmem nie są w stanie odróżnić tych kolorów. Podobnie, stosowanie kolorów zbyt bliskich tonem, takich jak niebieski i fioletowy, może sprawić, że tekst będzie trudny do odczytania dla osób z zaburzeniami wzroku.

Nie stosuj też kolorów jako jedynego nośnik informacji. Na przykład, nie stosuj koloru czerwonego wyłącznie dla oznaczenia błędu lub niepowodzenia. Zamiast tego, można stosować ikony, czy etykiety.

Ułatwiaj nawigację

Osoby z niepełnosprawnościami, takie jak osoby z zaburzeniami koordynacji ruchowej, mogą mieć trudności z poruszaniem się po stronie. Dlatego warto zapewnić prosty i intuicyjny interfejs z poprawną strukturą strony, w tym hierarchią nagłówków (H1, H2, H3 itp.) oraz znacznikami semantycznymi (button, strong, itp.).

W przypadku, gdy osoba nie może korzystać z myszy lub ekranu dotykowego, klawiatura może być alternatywnym sposobem na nawigowanie po stronie internetowej.

Aby ułatwić korzystanie z klawiatury, należy zwrócić uwagę na kilka ważnych aspektów:

• upewnij się, że kolejność nawigacji jest logiczna i intuicyjna dla użytkowników,
• sprawdź jak wygląda nawigacja po Twojej stronie za pomocą klawisza Tab,
• pamiętaj, aby podświetlić wybrany element, na którym znajduje się użytkownik za pomocą kolorów lub efektów wizualnych, takich jak np. obramowanie,
• pozwól na pomijanie menu, aby osoba przeglądająca różne produkty nie musiała za każdym razem przechodzić przez menu,
• nawigacja za pomocą klawiatury powinna też obejmować wszelkiego rodzaju pop-upy (i pozwalać na ich zamknięcie).

 

Od tego zacznij, a niebawem napiszę więcej o poszczególnych punktach, pokazując na przykładach, co zrobić w kolejnym etapie robienia sklepu dostępnym dla wszystkich.

Pamiętaj, że wśród Twoich potencjalnych klientów są także osoby z różnymi niepełnosprawnościami i neuroróżnorodnościami, dla których korzystanie ze sklepów internetowych może być znacznie utrudnione.

I co istotne, nie przerażaj się liczbą rzeczy do zrobienia. Jesteśmy w tym razem, ja też jestem w procesie dostosowywania mojej strony i wiem, że nie skończę tego jutro, ani za tydzień. Jednak stopniowo osiągnę swój (a tak naprawdę nie tylko mój) cel.

Zdjęcie wykorzystane do grafiki tytułowej: NordWood Themes on Unsplash