(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](https://wcag-audyt.pl/storage/2024/07/Obraz1.png)
<(..) alt=”/c/eobuwie/akcja:festival_lp?itm_source=home&itm_medium=h2&itm_campaign=27052024_festival” (…)>
Czytnik ekranu odczytuje treść jako:
„/c/eobuwie/akcja:festival_lp?itm_source=home&itm_medium=h2&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:
<(..) 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
Przejdźmy do samego produktu. Chcemy kupić klapki. Wybieramy popularny model.
<(…) 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”.
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:
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
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.
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!
Masz pytania?
Skontaktuj się z nami!
