Dostępność w ecommerce – najczęstsze problemy

O dostępności pisałam już trochę, jednak w tym artykule chcę się skupić głównie na sklepach internetowych i problemach z dostępnością cyfrową w ecommerce, na które najczęściej natrafiam.

Nie różnią się one szczególnie od problemów na innych typach witryn internetowych: brak podpisów pod obrazkami (alty), brak wsparcia dla nawigacji klawiaturą lub mały kontrast między treścią a tłem to taki standard wszędzie.

Jednak jaki mają one wpływ na ścieżkę zakupową klienta i dlaczego może on przez nie porzucić stronę sklepu?

1. Brak podpisów pod obrazkami

To chyba najczęstszy błąd, choć statystyk z tym związanych nie prowadzę 😉
O co chodzi? Chodzi o to, że w kodzie strony nie ma tzw. znacznika alt, w ramach którego opisywane jest to, co przedstawia obrazek. Co ważne, to nie są podpisy umieszczane poniżej obrazka, to te tzw. teksty alternatywne, które być może znasz z SEO. Zarówno w SEO, jak i dla osób, które korzystają z czytników ekranu (bo mają problemy ze wzrokiem), alternatywy tekstowe pozwalają na uzyskanie informacji, co taki obrazek przedstawia.

Brak opisania grafik to jedno, inną kwestią jest, że często są albo niejasne, albo tworzone stricte pod SEO, albo są niepotrzebnie bardzo długie.

Jak zatem tworzyć teksty alternatywne?

• dodawaj je tylko pod tymi grafikami, które przedstawiają jakieś istotne informacje dla odbiorcy,
  pod grafikami pełniącymi funkcje tylko dekoracyjne dodawaj alt zerowy, czyli alt=””,
• w opisie nie uwzględniaj treści typu: grafika przedstawia, na obrazku widać… – użytkownik dowie się od czytnika ekranu, że to grafika,
• formułuj zwięzłe i konkretne opisy, tak aby osoba korzystająca z czytnika ekranu chciała je wysłuchać i żeby zrozumiała, co przedstawiają,
• nie powielaj informacji, które są obok grafiki w formie tekstowej, w przypadku sklepu internetowego nie powielaj w treści alt tego, co jest już w opisie produktu.

 

Przykład?

Zdj. Zalando.pl

W tym przypadku alt “OCHNIK – Kurtka zimowa, Powiększ” to powielanie treści z tytułu i nazwy produktu. Lepiej byłoby napisać np. “Czarna, błyszcząca kurtka pikowana, z kieszeniami po bokach i długim kołnierzem rozłożonym na ramionach” lub ewentualnie, aby też zadbać o SEO, można dodać ten element “OCHNIK – Kurtka zimowa” np. “OCHNIK Kurtka zimowa, czarna, błyszcząca i pikowana, z kieszeniami po bokach i długim kołnierzem rozłożonym na ramionach”.

A tu znajdziesz więcej przykładów i wskazówek, jak tworzyć teksty alternatywne pod dostępność.

 

2. Puste lub nieaktywne linki i przyciski

Tzw. „puste linki” to hiperłącza, które nie prowadzą do konkretnej zawartości lub są nieaktywne. Nie mają przypisanej docelowej strony, dokumentu, ani żadnej innej treści. Kiedy użytkownik kliknie taki pusty link lub przycisk, nie zostanie przeniesiony do żadnej nowej lokalizacji ani nie uzyska żadnej informacji.

Przyczyną pustych linków czy przycisków na stronie mogą być:

• błędy w kodzie strony internetowej,
• niekompletne adresy URL,
• brak dostępu do określonej treści,
• usunięcie strony docelowej.

Dla użytkowników są one frustrujące, ponieważ nie spełniają swojej podstawowej funkcji i wprowadzają w błąd. Użytkownik, który kliknie pusty link, może zostać przekierowany do innej strony, niż się spodziewał, lub może zostać wyświetlony mu komunikat o błędzie.

Osoby korzystające z czytników ekranu nie będą mogły uzyskać informacji o tym, dokąd prowadzi link, co może utrudnić im nawigację po stronie.

Ponadto puste linki mogą sprawiać wrażenie, że strona jest nieaktualna i zaniedbana. To z kolei może wpływać negatywnie na postrzeganie marki, a w przypadku ecommerce prowadzić do porzucenia strony z obawy przed ewentualnymi problemami z realizacją zamówienia.

Stąd też ważne jest, aby regularnie sprawdzać strony pod kątem pustych linków i usuwać lub modyfikować je, jeśli są nieprawidłowe.

Jak uniknąć pustych linków:

• zawsze sprawdzaj poprawność linków przed opublikowaniem,
• regularnie sprawdzaj, czy strony docelowe linków wciąż istnieją,
• pamiętaj, aby atrybut „href” w znaczniku linku zawierał prawidłowy i kompletny adres URL. Pusty atrybut „href” powoduje, że link jest nieaktywny.

Darmowe narzędzia do sprawdzania linków na stronie:

• WAVE (Web Accessibility Evaluation Tool) – narzędzie do analizy dostępności internetowej, które pozwala także na sprawdzanie linków.
• Screaming Frog SEO Spider – wersja darmowa dla mniejszych witryn.
• Online Broken Link Checker.

A w bonusie jak już jesteśmy przy linkach to jeszcze jedna ważna wskazówka! Jasno opisuj dokąd prowadzi dany link i unikaj ogólnych sformułowań jak “kliknij tutaj”.

 

3. Brak wsparcia dla klawiatury

Wiele osób korzysta z klawiatury zamiast myszki do nawigacji po stronach. Jedni: bo tak lubią, inni: bo inaczej nie mogą. Zmuszeni do tego mogą być osoby np. z drżeniem lub niedowładami rąk, z dysfunkcją wzroku czy osoby starsze.

Brak wsparcia dla klawiatury na stronie internetowej oznacza, że użytkownicy, którzy nie mogą korzystać z myszy, mają ograniczone możliwości poruszania się po stronie, wybierania elementów, wprowadzania tekstu i ogólnie korzystania z jej funkcji.

Nie zrobią tym bardziej zakupów w sklepie internetowym, a przynajmniej będzie to dla nich mocno utrudnione.

Chcesz sprawdzić, czy na danej stronie można nawigować klawiaturą?

Spróbuj dotrzeć do pierwszego formularza i wypełnić go za pomocą klawiszy. Wystarczy do tego sam klawisz Tab, no i potem odpowiednie klawisze alfanumeryczne w celu wpisania tekstu w pola.

Krytyczne może być też zablokowanie klawiatury na wyskakujących okienkach z zapisem do formularza lub akceptacją plików cookies. Co oznacza zablokowanie? Brak możliwości zamknięcia okienka, bo fokus klawiatury go nie widzi lub brak możliwości opuszczenia danego elementu – np. samoistnie rozwijającej się wyszukiwarce.

 

4. Treści o słabym kontraście w stosunku do tła

Prawidłowe kontrasty na stronie internetowej to różnica w jasności między dwoma kolorami. Jest to ważne, gdyż nam wszystkim ułatwia odróżnienie tekstu od tła, a zwłaszcza osobom starszym i z dysfunkcjami wzroku.

Jaki powinien być ten kontrast? Zasada jest prosta: tekst powinien być czytelny na tle, na którym jest umieszczony. Poniżej z kolei mamy konkretne wytyczne z WCAG i tu też jest świetnie wytłumaczona kwestia odpowiedniego kontrastu.

Źródło: Pimpmyfont

Współczynnika kontrastu nie musimy na szczęście obliczać sami. Są do tego narzędzia, zarówno do wykorzystania na stronie internetowej (np. WebAIM Color Contrast Checker), jak i już podczas projektowania layoutu np. w narzędziu Figma.

Oprócz kontrastu pomiędzy tekstem, a tłem, ważne jest też zapewnienie odpowiedniego kontrastu elementom interaktywnym, takim jak przyciski, linki czy menu.

Uważaj też ze stosowaniem grafik z wielokolorowym tłem i tekstem na nich – bardzo często trudno jest taki tekst rozczytać.

5. Utrudnione wypełnianie formularzy

Formularze podczas realizacji zamówienia (a czasem też formularz kontaktowy) są krytyczne dla konwersji w sklepie internetowym. Dlatego warto się im przyjrzeć pod kątem dostępności.<

Najczęstsze problemy z formularzami to:

• brak odpowiednich etykiet lub opisów dla pól formularza, które wyjaśniają, co należy wpisać w odpowiednie pole. I nawet jeśli są one widoczne dla osób widzących, to sprawdź, czy również osoby korzystające z czytników ekranu, również wiedzą, jakie treści są przypisane do poszczególnych pól.
• brak wsparcia dla klawiatury – odnosi się to do punktu 3. Użytkownicy klawiatury powinni móc poruszać się po formularzu, wybierać pola formularza i wprowadzać dane za pomocą klawiatury.
• niejasne komunikaty błędów – mało precyzyjne informacje o tym, jak poprawić błędnie wypełnione pole, mogą być przyczyną porzucenia strony.
• wymaganie konkretnych formatów wpisywanych danych, np. kodu pocztowego lub numeru telefonu, bez informowania jaki format jest wymagany.
• nieaktywne przyciski i brak informacji dlaczego, co użytkownik wypełnił błędnie i co powinien poprawić, aby móc wysłać formularz do bazy.
• uciążliwe captcha dostępne tylko w formie wizualnej ze znakami, które mają imitować litery, a wielu z nas niejednokrotnie pewnie się z nimi męczyło.

 

Problemy z dostępnością w ecommerce, nad którymi warto się pochylić, bo mogą być uciążliwe:

• brak linka skip to content – funkcjonalność przydatna dla użytkowników klawiatury, dzięki której możemy pominąć przechodzenie przez wszystkie elementy nagłówka (logo, ikony logowania, koszyka, linki menu itd.) za każdym odświeżeniem strony. Zwykle dwa kliknięcia pozwalają przeskoczyć do zawartości strony.
• brak łączenia linków w grupy – wyobraź sobie, że jesteś użytkownikiem klawiatury lub czytnika ekranu i jesteś na stronie z listingiem produktów. W ramach jednego “kafelka” produktowego zwykle mamy zdjęcie, nazwę produktu, cenę i przycisk dodania do koszyka. Jeśli teraz 3 z nich stanowią link z (oby nie) długim altem będący nazwą produktu, to użytkownik czytnika ekranu nie tylko musi przeklikać się przez 3 elementy interaktywne, ale w dodatku 3 razy usłyszeć nazwę produktu. Może to być irytujące. Dlatego warto te 3 elementy interaktywne objąć w jedną grupę linków, nie pozbawiając ich “indywidualnej” interaktywności.
• brak fokusu dla elementów interaktywnych – fokus to stan elementu interaktywnego, na którym jest obecnie użytkownik. Zwykle widoczny jest w formie obramowania wokół danego elementu. Jego brak oznacza, że np. przycisk, link, pole formularza itp., nie jest aktualnie wyróżniony ani zaznaczony jako aktywny, a użytkownicy klawiatury lub innych urządzeń wejściowych nie wiedzą, na którym elemencie się znajdują.

 

W answear.com mamy widoczny fokus, niestety klawiaturą nie da się opuścić samoistnie rozwijającego się okienka wyszukiwarki.

Planowałam, że ten artykuł będzie krótki. Wybacz, nie umiem w krótkie artykuły 😉 Mam jednak nadzieję, że moje wskazówki pomogą Ci stworzyć przyjazny i dostępny sklep dla wszystkich użytkowników!

 

Grafika tytułowa: Sigmund on Unsplash