INFOLINIA +48 698 694 905

Logo Audyt WCAG 2.1
Dostępność cyfrowa

(nie)Dostępny e-commerce? SPRAWDZAMY: #1 eobuwie.pl, Bershka

W dostępnościowym kalendarzu lipiec jest „Miesiącem Dumy z Niepełnosprawności”. Z tej okazji rozpoczynamy cykl testów stron popularnych sklepów internetowych, które już od przyszłego roku będą zobligowane wdrożyć dostępność cyfrową dla swoich Klientów.
Czy polskie e-commerce’y są na to gotowe?

Razem z naszą audytorką i testerką z niepełnosprawnością wzroku postanowiłyśmy to sprawdzić. Na pierwszy ogień wzięłyśmy dosyć oczywisty test, jakim jest weryfikacja tekstów alternatywnych pod zdjęciami produktów. To szczególnie ważne dla sklepów, które oferują odzież i obuwie, dlatego też spośród najpopularniejszych, wylosowałyśmy do testu 2 sklepy z tej branży: eobuwie.pl i bershka.com.pl

Testujemy eobuwie.pl

Kryterium 1.1.1.: Treść nietekstowa.
Nie szukamy daleko: na stronie mamy dwa zdjęcia reklamowe.

ready for festival season; button [sprawdź]; po prawej stronie zdjęcie kobieta z mężczyzną spacerują ubrani w kowbojskim stylu; na drugim zdjęciu obok zbliżenie na ich buty - eleganckie brązowe glany krótkie u mężczyzny a u kobiety - kalosze w kowbojskim stylu
źródło: eobuwie.pl
źródło: eobuwie.pl

<(..) alt=”/c/eobuwie/akcja:festival_lp?itm_source=home&amp;itm_medium=h2&amp;itm_campaign=27052024_festival” (…)>

Czytnik ekranu odczytuje treść jako:

/c/eobuwie/akcja:festival_lp?itm_source=home&amp;itm_medium=h2&amp;itm_campaign=27052024_festival”.

Atrybut <alt> powinien mieć wartość: „Mężczyzna i kobieta spacerują po kamiennym podłożu. Mężczyzna ma na sobie niskie czarne glany, a kobieta wysokie czarne kalosze w kowbojskim stylu. Nad nimi umieszczone są loga 3 firm: Hunter, Converse, Dr. Martens”.

Kolejne zdjęcie:

źródło: eobuwie.pl

<(..) alt=”READY FOR FESTIVAL SEASON” (…)>

Pod nim atrybut <alt> ma taką samą wartość jak treść poprzedzająca zdjęcie. Efekt? Użytkownik usłyszy dwa razy tą samą treść. Z uwagi na fakt, że jest to zbliżenie poprzedniego zdjęcia, można uznać je za dekoracyjne i zostawić pusty atrybut <alt>.

Przykładowy produkt - klapki

klapki birkenstock czarne z czarnym paskiem eleganckie, materiał skóropodobny; cena 149,99 zł; najniższa cena: 159,99 zł, cena regularna: 199,99 zł
źródło: eobuwie.pl

<(…) alt=”Klapki Birkenstock Madrit 0128163 Czarny” (…)>

<strong data-v-a91a8df6=”” class=”brand-name”>Birkenstock</strong><h2 data-v-a91a8df6=”” class=”product-name”>Klapki Madrit 0128163 Czarny</h2>

Atrybut <alt> nie może być taki sam jak nazwa produktu. Użytkownik otrzymuje dwukrotnie taką samą treść a nadal nie wie jak wygląda produkt.

Aby klient który nie widzi, wyobraził sobie wygląd klapek i był skłonny do zakupu, mógłby to być <alt> o treści: „Płaskie klapki w kolorze czarnym. Górna część klapek posiada klamrę z 3 otworami pozwalającymi regulować szerokość. Podeszwa jest płaska i wyprofilowana”.

podgląd produktu z kilkoma widokami obok zdjęcia głównego; klapki birkenstock czarne z czarnym paskiem eleganckie, materiał skóropodobny; cena 149,99 zł; najniższa cena: 159,99 zł, cena regularna: 199,99 zł
źródło: eobuwie.pl

Jak wygląda opis pozostałych zdjęć na slajderze w karcie produktu? Niestety, każde zdjęcie ma w atrybucie <alt> taką samą wartość. Dlaczego jest to niepoprawne? Jeżeli do produktu dodamy przykładowo 10 zdjęć, które na stronie występują w formie slajdera, mającego nawigację też w formie miniaturek zdjęć z atrybutami <alt> o takiej samej wartości, to ten sam tekst pojawia się 20 razy.

Osoba korzystająca z czytnika usłyszy 20x to samo i dalej nie dowie się, jak wyglądają te klapki. To zniechęca do zakupu!

Jak zrobić to poprawnie i prosto? Pełny opis tylko dla pierwszego zdjęcia. Reszta atrybutów <alt> pusta.

A przecież dzisiaj dobry alt może nam pomóc wygenerować AI na bazie dostępnych zdjęć, wystarczy użyć odpowiednich narzędzi, jakich? Możecie dowiedzieć się na naszych szkoleniach z dostępności. Twórzmy cyfrową przestrzeń dostępną dla wszystkich i NIE REZYGNUJMY z potencjalnych klientów!

Nasze nagrody w niewidocznej gablocie

Rekomendacje i polecenia oraz zdobyte nagrody pomagają podjąć decyzję o zakupie – to fakt. Gorąco zachęcamy, aby chwalić się swoimi osiągnięciami i nagrodami, także uwidocznionymi w formie obrazka na stronie sklepu:

nasze nagrody; odznaki i wyróżnienia za działalność; nieczytelne zdjęcia
źródło: eobuwie.pl

Alt obrazka nie mówi, jakie nagrody otrzymał ten sklep: <(…) alt=”Nasze nagrody” (…)>

Tymczasem osoba która na co dzień ma trudności z zakupami stacjonarnymi, o ile chętniej wydałaby u Ciebie swoje pieniądze i poleciła sklep znajomym, gdyby dodatkowo wiedziała, że po drugiej stronie jest zaufany i nagradzany sprzedawca?

Jak to robi Bershka?

Co podoba się niewidomym użytkownikom e-sklepów? Klika prostych i dobryk praktyk znajdziemy na stronie Bershki.

Pomocne teksty alternatywne do zdjęć
Zdjęcia poglądowe wybranych części garderoby mają poprawnie określony alt. Dzięki nim niewidomi konsumenci mają szansę na zakup produktu, który spełni ich oczekiwania. Taki opis musi być na tyle rozbudowany, aby dało się realnie go wyobrazić.

Przykład ze sklepu internetowego Bershka: https://www.bershka.com/pl/sukienka-midi-na-ramiączkach-z-prążkowanego-materiału-c0p158134918.html?colorId=746&stylismId=4

podstrona produktu: sukienka midi na ramiączkach z prążkowanego materiału, kolor beżowy; cena 49,99 zł przecena z 79,99 zł; dostępna kolorystyka: beżowy, czarny, różowy, czerwony; rozmiary XS, S, M, L
źródło: bershka

alt=”Sukienka midi na ramiączkach z prążkowanego materiału-Beżowy-0″
Powyższy tekst alternatywny zawiera informację zarówno o wyglądzie sukienki jak i teksturze czy kolorze. Jest to więc przydatna informacja dla osób niewidomych potencjalnie zainteresowanych zakupem.

Przydatną opcją są również stworzone przez osoby publiczne zestawy stylizacji, które można znaleźć w zakładce „GET THE LOOK #BERSHKASTYLE”.

Cały zestaw zaprezentowany jest na modelce a obok zdjęcia znajdują się odnośniki do produktów. Według osób niewidomych taka opcja bardzo ułatwia im życie i oszczędza czas.

zdjęcie stylizacji osoby publicznej - kobieta w czarnym topie na grubych ramiączkach, w zielonych luźnych spodniach lejąca tekstura satynowy materiał; białe buty oraz czarne prostokątne okulary przeciwsłoneczne po prawej stronie podgląd wszystkich tych produktów
źródło: bershka

Bardzo ważne, aby w opisach alternatywnych był opis faktury tkaniny i jej właściwości – jaka jest w dotyku, czy gryzie, czy jest rozciągliwa…

Tylko w ten sposób osoba, która nie może zobaczyć danego przedmiotu jest w stanie chociaż sobie wyobrazić jakie sprawia uczucie w dotyku. Dodatkowo taka informacja mogłaby przesądzić o tym, czy będzie to nosić czy nie.

Podsumowanie - nie jest dobrze

Sklep internetowy eobuwie nie jest dostępną przestrzenią dla użytkowników. Bershka radzi sobie lepiej, ale wciąż jest sporo kwestii do poprawy. 

Sklepy e-commerce w Polsce powoli przechodzą przez transformację w kierunku wytycznych WCAG. Mamy nadzieję, że nadchodzące w 2025 roku przepisy EAA zmotywują przedsiębiorców do zajęcia się tą kwestią i stworzenia bardziej dostępnego środowiska w sieci bez ograniczeń.

Jak uważasz, jaki e-commerce powinniśmy zbadać jako kolejny? A może jesteś właścicielem e-sklepu i chciałbyś poddać się próbie?
Koniecznie daj nam znać telefonicznie lub przez formularz kontaktowy.

Razem zweryfikujmy poziom dostępności polskich e-commerce’ów!