Dostępność strony Aliexpress – Damian Przybyła - Fundacja Polskich Niewidomych i Słabowidzących "Trakt"

O tym, że niepełnosprawność w znacznym stopniu determinuje nasz sposób istnienia w świecie, przekona się każdy, kto spróbuje na przykład napisać ładny tekst z użyciem dyktowania głosowego, albo używać komputera, posługując się wyłącznie klawiaturą. Dysfunkcja wzroku sprawia, że pewne miejsca omijamy jako niewygodne, wybieramy telefon, komputer, czytnik ekranu lub narzędzie powiększające, poszukując tego, co zapewni największą efektywność, najpełniejszy komfort użytkowania. Czas wzrostu znaczenia świata cyfrowego, to z jednej strony czas otwierających się przed nami ogromnych możliwości, ale z drugiej, czas niekiedy nieprzyjemnego poznawania naszych ograniczeń. Do tej ostatniej kategorii doświadczeń zaliczam moją próbę skorzystania z serwisu Aliexpress.com.

Czy jednak doświadczenie to jest jednoznacznie nieprzyjemne? Czy negatywna ocena serwisu wynika z tego, że twórcy sklepu nie liczą się z potrzebami użytkowników z dysfunkcją wzroku lub zwyczajnie o takich potrzebach nie wiedzą?

A może jest ona wynikiem niezależnego od niepełnosprawności preferowanego przez autora sposobu robienia zakupów?

Mam nadzieję, że po lekturze poniższego tekstu będziecie w stanie sami odpowiedzieć sobie na te pytania. A zatem zapraszam na bazar.

Pierwsze wrażenia

Otwierając stronę Aliexpress.com, trudno nie oprzeć się wrażeniu, że oto wchodzimy na bazar.

Do zakupów zachęca nas rozkrzyczany tłum przedmiotów. Nie mam tu na myśli nie dających się przeczytać za pomocą czytnika ekranu zmieniających się jak szkiełka w kalejdoskopie komunikatów. Twórcom omawianego serwisu trzeba przyznać, że jest on wolny od tej, praktycznie wykluczającej użytkowników zależnych od czytników ekranu, wady. Chodzi raczej o to, że niewidomemu użytkownikowi strona dana jest nie jako okno, przestrzeń, w której można dowolnie przenosić uwagę pomiędzy znajdującymi się w niej obiektami, lecz jako strumień treści. Jeśli kiedykolwiek korzystaliście z ekranu dotykowego, to łatwo zrozumiecie, o czym mówię. Patrzycie oto na wasz ekran i dotykacie palcem wybranego elementu. Osoba, która nie widzi zawartości ekranu, musi najpierw elementu dotknąć, następnie zdecydować, że ten element ma być przedmiotem jej działania, a dopiero potem zamierzone działanie wykonać.

Sposób działania zależy od właściwości interfejsu. Wzrok ujmuje duże całości, a dotyk niewielkie elementy, zaś mowa w pewnym uproszczeniu może być rozumiana jako strumień danych, w którym transmisja odbywa się szeregowo. Brak elementów porządkujących zawartość strumienia, takich jak na przykład nagłówki różnych poziomów stwarzające hierarchię (kategoria, podkategoria, przedmiot), sprawia, że niewidomy klient sklepu zamiast zachęty do zrobienia zakupów otrzymuje informację, iż trafił na śmietnisko, w którym może sobie czegoś poszukać. Brak czytelnej struktury informacji powoduje, że na tym samym poziomie widzi on bieliznę damską, suszarkę do włosów, motocykle itd. Sztuka reklamy, to sztuka pozyskiwania uwagi klienta. O ile w przypadku osób widzących przyciągnięcie uwagi może być trudne, o tyle w przypadku niewidomych jest to jeszcze trudniejsze. Niewidomy jest jak powolny modem. Trzeba mu podać dane, które są absolutnie konieczne do podjęcia interakcji. Dlatego taki drobiazg jak to, że strona Aliexpress.com nie otwiera się w taki sposób, że punkt uwagi znajduje się w polu służącym do wpisywania poszukiwanego przedmiotu lub w miejscu, gdzie znajduje się odnośnik do logowania czy rejestracji na stronie (jak ma to miejsce na przykład w przypadku serwisu Allegro.pl, lub wielu innych sklepach czy księgarniach internetowych) – jest z naszego punktu widzenia dużą uciążliwością. Na odnalezienie tych tak nam potrzebnych elementów musimy tracić czas.

Miłośnicy bezpieczeństwa i przewidywalności z pewnością nie poczują się na stronie Aliexpress.com dobrze. Wszystko niby wygląda jak należy, wszystko niby działa, ale… Ustawienie języka serwisu na ten, którego lubimy używać, nie gwarantuje nam wyświetlania strony w wybranym przez nas języku. Pole „Wyszukaj” – przeznaczone jak łatwo się domyślić do wpisania tam nazwy interesującego nas produktu – ma, na przykład, na polskojęzycznej stronie etykietę portugalską albo angielską. Przechodzenie na podstrony serwisu często skutkuje trudnymi do przewidzenia zmianami języka. Gdyby te podstrony zostały zwyczajnie napisane w tamtym języku, mógłbym powiedzieć, że serwis jest międzynarodowy i utrzymanie spójności językowej jest po prostu trudne. Rzecz jednak w tym, że często język na podstronach daje się przełączać i działa zgodnie z naszymi preferencjami. Normalną praktyką jest, że aby korzystać z serwisu internetowego, musimy zaakceptować tak zwane Ciasteczka w przeglądarce. Ale żeby trzeba było to robić aż tyle razy? W omawianym serwisie podstrony domagają się kolejny i kolejny raz zgody na „ciasteczka”.

Wyszukiwarka i kategorie

Tego systemu z pewnością nie układał Linneusz. Testowo wpisałem słowo „skaner”. Urządzenia o takiej nazwie mają bardzo rozległe zastosowania obejmujące dziedziny tak odległe jak radiokomunikacja, fotografia czy diagnostyka samochodowa. Dziwi zatem brak jakichkolwiek filtrów przedmiotowych. Filtry wyszukiwarki? Są, a jakże, tyle tylko, że obejmują jedynie kryteria ściśle sprzedażowe, takie jak: cena, czas i rodzaj dostawy, rodzaj płatności czy opłata za dostawę. Aliexpress.com lojalnie uprzedza nas, że wyszukiwanie jest zależne od reklamodawców. Mamy gwarancję bezpieczeństwa zakupów, możliwość zwrotu towaru. Ale ten „bazar” to zdecydowanie miejsce sprzedawcy. Dobra wiadomość jest taka, że jeśli dokładnie wiemy, czego nam trzeba i wpiszemy nazwę poszukiwanego przedmiotu, to otrzymamy listę propozycji bardziej zgodną z zadanym wyszukiwaniem i – jakkolwiek kolejność produktów na liście wyników może być denerwująca – interesujący nas przedmiot prawdopodobnie znajdziemy.

Dlaczego filtrowanie jest dla nas tak ważne? Pamiętajcie, że dla nas strona jest jak stara taśma magnetofonowa. Jeśli brak w niej dowolnie zrealizowanych znaczników pozwalających na szybkie przewijanie treści do istotnych elementów, jesteśmy skazani na zwijanie całej nitki na szpulkę w poszukiwaniu naszego brylancika. Dobrze działające filtry zawężające listę wyników niekiedy decydują o tym, czy w ogóle dokonamy jakiegokolwiek zakupu. Sklep, który osobie korzystającej z czytnika ekranu za wszelką cenę będzie chciał sprzedać garnek, gdy ta osoba szuka ekspresu do kawy, z pewnością niczego jej nie sprzeda.

Czy zatem możliwa jest skuteczna reklama kierowana do osób z dysfunkcją wzroku? Sądzę, że tak, ale musi ona uwzględniać odmienność sposobu pozyskiwania i przetwarzania informacji.

Dostępność? Używalność?

Zwykle robiąc zakupy w sklepie internetowym, zakładamy konto użytkownika. W omawianym serwisie proces rejestracji jest łatwy i dobrze dostępny. Gdy już uda nam się znaleźć odnośnik prowadzący do formularza rejestracyjnego, a uwierzcie mi drodzy czytelnicy, nasz sklep nie zrobił nic, żeby niewidomemu było łatwo po nim nawigować, wypełniamy prosty formularz, w którym zależnie od wybranego sposobu weryfikacji podajemy numer telefonu lub adres mailowy do otrzymania kodu weryfikacyjnego na telefon lub mailem. Rejestracja w serwisie może być dokonana także za pomocą portali społecznościowych. Samo założenie konta nie jest trudne. Wystarczy czytać odnośnik po odnośniku, otworzyć łącze opisane jako „konto”, ale… uwaga! odnośnik, o którym mowa otworzy się użytkownikom NVDA tylko wtedy, gdy użyją nawigacji obiektowej; naciskanie klawisza Enter nie powoduje, a w każdym razie zazwyczaj nie powoduje, otwarcia strony logowania i rejestracji w serwisie. Teraz już tylko wypełnienie zwykłych pól edycyjnych i logowanie lub rejestracja.

Tu małe wyjaśnienie

Użytkownik czytnika ekranu obsługuje zarówno komputer, jak i sam czytnik za pomocą klawiatury. Wspomniana powyżej nawigacja obiektowa to w pewnym uproszczeniu jedna z metod klawiaturowej wirtualizacji myszki. Elementy widoczne na ekranie monitora to obiekty (okna, elementy sterujące itd.). Czytnik ekranu traktuje te obiekty jak hierarchię – podobnie do drzewa folderów. Mamy więc okno, w którym znajdują się elementy, takie jak menu programu, pasek narzędzi, pasek kart, pasek zakładek oraz zawartość strony internetowej. Każda z tych rzeczy to gałąź drzewa, do której można przejść, by zapoznać się z zawartością danej części okna. Nierzadko taka gałąź ma podgałęzie, a dopiero na niej znajdują się liście, czyli na przykład ikony na pasku narzędzi. Tak samo sytuacja wygląda w przypadku zawartości strony internetowej: gałęzią może być menu strony a podgałęzią – elementy tego menu, klikalny obiekt powodujący uruchomienie skryptu na stronie, pole edycyjne, menu, lista itd. O ile dla użytkownika zorientowanego w zagadnieniach technologicznych dotarcie do takiego obiektu i skorzystanie z niego nie stanowi problemu, o tyle przeciętny Kowalski może już mieć z tym problem. Osoba widząca nie musi mieć pojęcia o istnieniu wspomnianej hierarchii. Klika widziany element i wykonuje kolejne kroki w procesie. Deklarowanie klikalnego skryptu jako odnośnika na stronie może być zwyczajnie mylące. Obiekt taki może być łatwo dostępny, gdy zastosujemy kodowanie zgodne z wymogami dostępności.

Kod fragmentu strony realizującego logowanie do serwisu został napisany w taki sposób, że użytkownikowi strony po kliknięciu na napis „Konto” pojawia się menu rozwijane z dodatkowymi opcjami, takimi jak „Przyłącz się” czy „Zaloguj się”. Za rozwinięcie (pojawienie się) menu odpowiada kod JavaScript, który reaguje jedynie na najechanie w tym miejscu kursorem myszki. Zamiast metod „onmouseover” oraz „onmouseout” w kodzie JavaScript powinno się wykorzystać metodę onclick, która reaguje na kliknięcie myszką lub klawiszami Enter czy Spacja na klawiaturze. Do czytnika ekranu ponadto powinna być przekazywana informacja o tym, że jest to menu rozwijane. Najlepiej w tym celu dodać atrybut aria-haspopup=”true” oraz aria-expanded=”true” w sytuacji, gdy menu jest rozwinięte, lub aria-expanded=”false” w sytuacji, gdy jest zwinięte.

Aby całość działała poprawnie, trzeba również usunąć następujący link:

<i class=”ng-account-icon ng-icon-size” ami-survive=”1″></i><span class=”text”>Konto</span>

</a>

Nie robi on nic, ponieważ po słowie „javascript”, pomiędzy dwukropkiem i średnikiem nie znajduje się żaden kod JavaScript do wykonania. W rezultacie ten fragment kodu jedynie wprowadza czytnik ekranu w błąd i sprawia, że skupia się on na linku, zamiast na znaczniku div otwierającym menu.

Wróćmy do naszego serwisu

O ile sam proces rejestracji jest łatwy, o tyle uzupełnienie danych w profilu użytkownika jest zdecydowanie mniej przyjemne. Formularz profilu napisano w taki sposób, że czytnik ekranu nie czyta automatycznie etykiet formularza. Samo jego wypełnienie także nie jest intuicyjne. Pole „Imię” to dwa pola edycyjne, w których należy wpisać imię i nazwisko. Dane dotyczące numeru telefonu wpisujemy do formularza zaprojektowanego dla numerów stacjonarnych. Jeśli nie podamy numeru telefonu, to profil użytkownika nie zostanie zarejestrowany. Dobra wiadomość jest taka, że pole dla krajowego numeru kierunkowego można pozostawić niewypełnione, a w polu numeru telefonu wpisać numer komórkowy i formularz zostanie zaakceptowany. Gwoli sprawiedliwości należy powiedzieć, że jeśli w tym formularzu, jakieś pole wypełnimy w sposób niewłaściwy, to po naciśnięciu przycisku „Submit”, obok pola – wypełnionego błędnie – pojawi się informacja o tym, jak nasz błąd należy poprawić.

Idziemy na zakupy

Na początek zdziwienie. Pole służące do wyszukiwania naszego przedmiotu zakupu bywa opisane różnie. Czasem w językach obcych, ale gdy już etykieta jest polska, to okazuje się, że ze względu na nieszczęśliwie źle zrobione tłumaczenie odruchowo wpisujemy w tym miejscu kwotę, którą chcielibyśmy w sklepie wydać. Angielskie „shopping for” przetłumaczono bowiem na polskie „Kupuję za”. Tym czasem filtr cenowy jest nieco poniżej i działa podobnie jak na przykład na platformie Allegro. Takie błędy etykietowania w sposób istotny obniżają poziom satysfakcji związanej z korzystaniem z serwisów internetowych przez osoby zależne od czytników ekranu.

Problemem jest również to, że niektóre pola wyboru w sekcji filtrowania, zamiast tekstowego opisu, posiadają grafikę, tym samym są nieczytelne dla osób niewidomych.

A oto przykład:

Ponadto opcje sortowania „Najlepsze dopasowanie”, „Zamówienia”, „Najnowszy” oraz „Cena” zostały zakodowane w taki sposób, że nie da się do nich przejść ani za pomocą skrótów klawiszowych wbudowanych w czytnik ekranu, ani za pomocą klawisza Tabulatora. Osoby niewidome nie wiedzą też, która opcja sortowania została wybrana. Dla osób widzących jest to inny kolor czcionki, natomiast osoby niewidome powinny otrzymać tę informację w sposób tekstowy.

Twórcy strony Aliexpress postanowili zakodować opcje sortowania jako znaczniki span. Lepszym wyborem byłoby użycie znacznika input type=”radio”, ponieważ dałoby się wtedy przejść do każdej opcji za pomocą klawiatury. Alternatywą jest dodanie do każdego z tych znaczników span atrybutów role=”radio” oraz tabindex=”0”. Aby dać niewidomemu użytkownikowi znać, który przycisk jest zaznaczony, należałoby do zaznaczonego przycisku dodać atrybut aria-checked=”true”, a do odznaczonego aria-checked=”false”. Ponadto, w przypadku sortowania po cenie należałoby dodać informację o tym, czy jest to sortowanie od najniższej czy od najwyższej ceny. Można do tego użyć atrybutu aria-label=”Cena: Od najniższej”.

Wiemy już co, wiemy za ile. Przejrzyjmy listę proponowanych przedmiotów. Da się zrobić. Przedmioty mają sensowne nazwy, ceny, opinie kupujących, przewidywany czas dostawy, ale… otwarcie odnośnika ze stroną wybranego przedmiotu bynajmniej nie powoduje przejścia do miejsca, gdzie znajdziecie szczegółowy opis i wszystkie potrzebne informacje. To wszystko tam jest, tyle że bezwzrokowe odnalezienie klikalnych obiektów, takich jak na przykład specyfikacja techniczna – tej ostatniej szukałem dla produkowanej przez jedną z chińskich firm radiostacji amatorskich – wymaga wielkiego uporu. Komendy czytnika ekranu służące do przeszukiwania zawartości strony niewiele pomagają, ponieważ została ona napisana tak, że fragmenty strony stanowią pewne zamknięte całości, a co za tym idzie komenda przeszukiwania zapętla się w obrębie takich fragmentów. Gdy już to odkryjemy, możemy opuścić „pułapkę” za pomocą strzałek. Najgorsze jednak dopiero przed nami. Dla dobra czytelników i zaspokojenia własnego głodu wiedzy postanowiłem kupić w sklepie Aliexpress.com suszarkę do włosów. Znalazłem taką, która nie rujnuje domowego budżetu, wybrałem kolor i europejską wtyczkę. Tu przyznać trzeba, że opcje działały poprawnie (dało się je zaznaczyć z klawiatury), a po ich wybraniu w czymś w rodzaju podsumowania zakupu znalazłem informację o tym, jaką wersję suszarki wybrałem.

Czy można lepiej?

Otóż można. Omawiany fragment napisano tu w taki sposób, że widzący użytkownik strony po kliknięciu na wybraną opcję, na przykład kolor suszarki, zobaczy obramowanie wokół wybranego elementu.

Drobna modyfikacja kodu strony może w tym miejscu spowodować, że czytnik ekranu poinformuje użytkownika o fakcie dokonania wyboru:

</div>

</li>

</div>

</li>

</ul>

Aby powyższy kod stał się dostępny dla czytników ekranu, należy do znaczników „li” dopisać kod WAI-ARIA dodający informację, że mamy tu do czynienia z przyciskami opcji (radiowymi), na przykład:

Identyczny kod należałoby wstawić do znaczników „li” odpowiedzialnych za kraj wysyłki i rodzaj wtyczki.

Tuż za wspomnianymi przyciskami wyboru parametrów produktu znajduje się pole edycji do wpisania ilości zamawianych sztuk produktu. Przed polem edycji znajduje się przycisk zmniejszania ilości sztuk, a za polem edycji znajduje się przycisk zwiększania ilości sztuk. Obydwa przyciski nie zostały opisane w sposób tekstowy, co można naprawić za pomocą atrybutu „aria-label”:

Swoją drogą nieco zabawne jest, że twórcy strony dodali do znacznika button atrybut role=”button”. Nie trzeba tego robić, ponieważ przeglądarki internetowe automatycznie przypisują znacznikowi button rolę button. Co innego, gdyby twórcy strony zapragnęli zmienić domyślną semantykę i nadać temu znacznikowi inną rolę.

Zamawiamy?

Nacisnąłem przycisk „Kup teraz”. W tym miejscu źle dostępny, zrobiony bez zwracania uwagi na potrzeby użytkownika z dysfunkcją wzroku serwis internetowy odmawia współpracy. Jeśli myślicie drodzy czytelnicy, że wypełnienie danych adresowych w profilu użytkownika załatwia cokolwiek, to jeszcze się tak nie pomyliliście. Nie zobaczycie na stronie zakupu proponowanego adresu wysyłki. Jedyna dostępna opcja to „Nowy adres”. Jeśli okno w ogóle się otworzy, a nie dzieje się tak zawsze, to pojawi się jakaś tabelka. Przypuszczam, że zawiera ona nasze wprowadzone wcześniej dane, ponieważ okno wita nas komunikatem „Potwierdź adres”. Próba wyboru metody płatności okazała się w stu procentach nieskuteczna. Klikanie tego obiektu myszką na ślepo uznałem bowiem za zbyt ryzykowne. Wydając pieniądze, mamy przecież prawo wiedzieć: gdzie, ile, za co i w jaki sposób. Omawiany serwis nie zapewnia użytkownikom ekranu godnego zaufania (reliable) dostępu do tych danych. W tej sytuacji zrezygnowałem ze złożenia zamówienia.

Na koniec troszkę o technologii

Dostępność serwisu Aliexpress.com testowałem, używając przeglądarki Chrome, FireFox oraz Microsoft Edge. Wszystkie w najnowszych wersjach. Testy wykonywałem w systemie Windows 11 w wersji beta oraz w wersji deweloperskiej. Próbowałem używać tak NVDA, jak i Narratora ze wszystkimi wymienionymi wyżej przeglądarkami. Wyniki za każdym razem były stanowczo niezadowalające.

Podsumowując, wypada zatem powiedzieć, że sklep Aliexpress.com, to miejsce, którego nie polecałbym użytkownikom czytników ekranu. Jeśli koniecznie chcą oni z tego serwisu skorzystać, to powinni pomyśleć o zapewnieniu sobie pomocy kogoś, kto czytnika ekranu używać nie musi.