Dostępność strony mediaexpert.pl - Piotr Komoda

Media Expert to sieć Polskich supermarketów z elektroniką użytkową. W maju 2021 roku otworzony został pięćsetny sklep funkcjonujący pod tą marką. Oprócz sprzedaży w sklepach stacjonarnych oferują oni również sprzedaż internetową za pośrednictwem sklepu mediaexpert.pl;

W dniu dzisiejszym przyjrzymy się działaniu tej strony internetowej pod względem jej intuicyjności oraz dostępności dla osób niewidomych.

Na początek sprawdźmy, jak prezentuje się strona główna sklepu i na jakie problemy związane z dostępnością można tutaj natrafić. Pierwsze problemy da się zauważyć przy wyszukiwarce produktów. Przycisk wyszukiwania znajdujący się tuż za polem edycyjnym nie został zaetykietowany, przez co niewidomy użytkownik musi się domyślać, że jest to przycisk „Szukaj”.

Problematyczny jest też przycisk Zaloguj/Zarejestruj. Dla czytnika ekranu jest on widoczny jako zwykły tekst i nie da się w niego kliknąć. Przycisk działa jedynie z myszką, a po najechaniu na niego wyświetla się menu, które daje dostęp między innymi do historii zamówień, reklamacji i zwrotów. Są tam też linki „Zaloguj się” i „Załóż konto”. Jest to poważny problem dla osób niewidomych, które w celu obsługi komputera wykorzystują jedynie klawiaturę.

Strona wyświetla swoją treść w miarę przewijania, przez co początkowo można odnieść wrażenie, że nie ma na niej żadnych nagłówków. Jednak w miarę przeglądania strony zaczyna wyjawiać się cała struktura nagłówków. Zawarte na stronie informacje zaczynają się od nagłówka trzeciego poziomu „Okazje dnia”. To już jest błąd, bo brakuje nagłówków pierwszego i drugiego poziomu. Mamy tu zresztą kilka nagłówków trzeciego poziomu, a po nich nagle kilka nagłówków piątego poziomu. Zresztą poziomy tych nagłówków nie odzwierciedlają w żaden sposób struktury informacji zawartej na stronie. Pozostaje powiedzieć sobie „no cóż” i walczyć z serwisem dalej.

Teoretycznie można by użyć dostępnej na początku strony wyszukiwarki, ale wpisanie nazwy szukanego produktu zwraca całą masę niepotrzebnych wyników. A nam chodzi o odnalezienie konkretnego produktu. Spróbujmy więc przefiltrować ofertę sklepu MediaExpert. Na stronie nie ma niestety żadnego nagłówka, który poinformowałby o możliwości wyszukiwania zaawansowanego. Trzeba skorzystać z menu sklepu i za jego pomocą przejrzeć dostępne kategorie produktów.

Spróbujmy jużyć głównego menu strony, mimo że się ono nie rozwija bez myszy. Zasymulujmy więc mysz w NVDA i tak spróbujmy odnaleźć poszukiwany przez nas produkt.

Wróćmy więc na początek strony skrótem Ctrl + Home i Tabulatorem lub literą „K”, albo też elementem listy, czyli literą „I”, odszukajmy stosowną pozycję w menu. Skrótem Insert + numeryczny Slash przywołajmy kursor myszy do aktualnego obiektu nawigatora. Menu automatycznie rozwinie się i ponownie użyjemy na tej pozycji skrótu Insert + numeryczny Slash. Znów ta pozycja automatycznie rozwinie się.

Ale żeby nie było tak łatwo. O ile wyniki przeszukiwania oferty znajdziemy szybko nagłówkiem pierwszego poziomu, to potem znalezienie stosownej podkategorii wymaga kilkunastu ruchów Tabulatorem lub literą „K” (pracując z NVDA), aby znaleźć to łącze. Po drodze mijamy łącza powtarzające górne menu strony, od którego to menu zaczęliśmy. Nie ma niestety sposobu na wybranie za pomocą klawiatury pozycji odzwierciedlającej poszukiwaną kategorię produktów. O ile uda się rozwinąć to menu, potem nie można bez użycia myszy wybrać „Zobacz więcej” i następnie naszej kategorii. Nie pomoże tu nawet za bardzo symulacja myszy, bo kursor przywołamy co najwyżej do łącza nadrzędnego. Pomińmy tu kombinowanie z pomocą dodatku Golden Cursor. Poszukajmy więc innego sposobu.

Niestety menu na stronie MediaExpert nie rozwija się za pomocą klawiatury. Kiedy już odnajdziemy pierwszą pozycję, która jest elementem specyficznej listy ułożonej poziomo w postaci menu, przechodząc między kolejnymi elementami, słyszymy po nazwie danej pozycji „menu rozwijane”, ale ani naciśnięcie klawisza spacji, ani też Enter czy też strzałka w dół nie rozwijają tego menu. Menu to rozwija się po długim naciśnięciu spacji, ale skorzystanie z niego bez myszy jest niemożliwe. Zostawmy więc ten sposób, ponieważ po naciśnięciu Spacją lub Enterem, na stronie wyświetlają się kategorie przypisane do tego elementu.

Jednak po przejściu przez menu nawigacyjne strony, a następnie przez kilka bannerów reklamowych i linków z promowanymi kategoriami produktów, uzyskujemy dostęp do nagłówka poziomu drugiego „Rekomendowane dla Ciebie”. Wyświetlane poniżej produkty mają przypisany nagłówek poziomu czwartego. Niestety następny napis sugerujący grupę produktów zatytułowany „Wybrane dla Ciebie” również ma nagłówek poziomu czwartego, co jest bardzo mylące i utrudnia nawigację. Ponadto pomiędzy wspomnianymi nagłówkami znajduje się napis „Promocje wybrane dla Ciebie”, który nie posiada żadnego nagłówka.

Po przejrzeniu strony głównej spróbujmy wyszukać jakiś produkt, aby sprawdzić jego cenę oraz opis i dodać go do naszego zakupowego koszyka. W tym celu ponownie literą „F” szybko przeskakujemy do pierwszego pola edycyjnego o nazwie „Wyszukaj w sklepie”. Jak już zostało wspomniane, przycisk „Wyszukaj” jest niezaetykietowany, jednak po napisaniu „Roomba” i naciśnięciu klawisza Enter, strona na szczęście się przeładowuje i po jednokrotnym naciśnięciu litery „H”, możemy szybko przeskoczyć do pierwszego nagłówka, gdzie mamy już wyświetloną liczbę znalezionych produktów.

Pod tym elementem znajdują się opcje filtrowania, które można bez problemu użyć za pomocą programu udźwiękawiającego i dzięki temu możemy zmienić zakres cen wyświetlanych produktów. Podstawowe opisy każdego artykułu są podane w czytelny i dostępny sposób, a po wejściu już w konkretną rzecz, możemy szybko za pomocą nagłówków przeskoczyć do szerszego opisu wybranego artykułu. Po zapoznaniu się z opisem kilku wybranych odkurzaczy, możemy zdecydować się na konkretny i kliknąć klawiszem Enter na przycisku „Do koszyka”. Następnie, przeglądając stronę internetową od samej góry, szybko możemy odnaleźć link „Koszyk”, pod którym znajdują się wszystkie dodane produkty oraz ich łączna cena. Po kliknięciu klawiszem Enter na hiperłączu „Do kasy”, strona się przeładowuje i znajdujemy się w oknie, gdzie wybieramy szczegóły dostawy.

W tym miejscu, niestety, znikają wszystkie nagłówki i znalezienie informacji o dostawie i płatności zajmuje chwilę. Wszystkie opcje, które były wyświetlone na stronie, związane między innymi z dodatkową ochroną czy wyborem sposobu dostawy lub metodą płatności, były poprawnie zaetykietowane i całkowicie dostępne dla programu udźwiękawiającego. Niestety, brakuje w tym miejscu nagłówków, umieszczonych przed każdym nowym wyborem, co przyśpieszyłoby zakupy w tym sklepie internetowym.

Po dodaniu produktu do koszyka pojawiają się dwa problemy. pierwszy związany jest ze wskaźnikiem postępu procesu zamówienia. W ostatnich latach tego typu wskaźniki stały się bardzo popularne. Można je zaobserwować zarówno na stronach sklepów internetowych, gdzie wskazują postęp składania zamówienia, jak i na stronach banków, gdzie wskazują postęp aktualizacji danych, np. dowodu osobistego. Strona mediaexpert.pl jest przykładem tego pierwszego rodzaju strony. Wskaźnik postępu został tu podzielony na cztery kroki: pierwszy to „Zawartość koszyka”, drugi to „Logowanie i rejestracja”, trzeci to „Dane zamawiającego”, a ostatni, czwarty, to „Sposób płatności”. Bieżący krok został oznaczony za pomocą klasy active. Cała reguła w kodzie CSS wygląda w sposób następujący:

.order-shop.basket.active {

width: 30px;

height: 30px;

line-height: 30px;

top: -30px;

}

Jak można się domyślić, bieżący krok ma wizualnie inną wielkość niż pozostałe kroki. Niestety, osoby niewidome nie otrzymują podobnej informacji. Jak więc można to naprawić? Wśród atrybutów WAI-ARIA znajduje się coś odpowiedniego na tę okazję. Tym czymś jest atrybut aria-curent. Jak można przeczytać ze specyfikacji WAI-ARIA, atrybut aria-current może przyjąć jedną z pięciu właściwości: page (strona), step (krok), location (lokalizacja), date (data) oraz time (czas). Specyfikacja dopuszcza również użycie właściwości ”true” w sytuacji, gdy żadne z wymienionych wcześniej oznaczeń nie wydaje się być odpowiednie. Czytnik ekranu wymówi wtedy „bieżący”. Odpowiednią właściwością w tym konkretnym przypadku będzie oczywiście step, czyli krok. Czytnik ekranu wymówi w takiej sytuacji „bieżący krok”. Można to oznaczyć w kodzie HTML w przykładowy sposób:

<div class=”order-shop.basket.active” aria-current=”step”>

1

<div class=”text”>Zawartość koszyka</div>

 

Ostatni problem można podzielić na dwa podpunkty. Obydwa są związane z tym, jak dany produkt jest wyświetlany na liście produktów w koszyku. Jeśli dany produkt ma obniżoną cenę, stara cena jest przekreślona.

Jest jeden znacznik w kodzie HTML, który odpowiada za przekreślenie, a właściwie za usunięcie. Jest nim znacznik „del”. A więc należałoby zamienić znacznik div na znacznik del, tak aby kod HTML wyglądał w następujący sposób:

<del class=”oldpriceme tcenter selenium-product-old-price”>

1 799 zł

</del>

Czy da się w tej sytuacji pójść na skróty? Niestety, nie. Nie ma wśród atrybutów WAI-ARIA takiego, który pełniłby funkcję odpowiadającą znacznikowi „del”. Wydawać by się mogło, że sprawdzi się tutaj dość uniwersalny atrybut „aria-label”, jednak nasze testy pokazują, że w tym konkretnym przypadku on po prostu nie działa. Zgodnie z opisem podanym na Mozilla Developer Network, atrybutu aria-label można używać jedynie w przypadku znaczników interaktywnych (takich jak button, input, textarea, select oraz a href), punktów orientacyjnych (landmark) oraz znaczników, które posiadają rolę widżetu. Specyfikacja WAI-ARIA określa, co jest widżetem. W tym konkretnym przypadku znacznik div nie posiada roli widżetu, a więc nie można tutaj zastosować atrybutu aria-label.

Kolejnym problemem jest to, jak zostało oznaczone usuwanie produktu z koszyka. Nie znajduje się tam żadna etykieta tekstowa, a więc osoba niewidoma nie wie, że ta ikonka odpowiada za usunięcie produktu z koszyka. Znajduje się w tym miejscu literka „x”, a lista produktów w koszyku ma postać tabeli. Są więc kolumny i wiersze, a kolumna, w której znajduje się przycisk „x” została oznaczona jako „usuń”. Czytnik ekranu wymawia w tym przypadku „usuń kolumna cztery link x”. Pozwala to domyślić się, że dany link odpowiada za usunięcie produktu, niemniej jednak nie jest to idealne rozwiązanie.

Po wybraniu metody płatności „Szybka płatność online (karta/eprzelew)”, pojawia się pod spodem link „Kliknij tutaj, aby wybrać swój bank”. Po jego aktywowaniu klawiszem Enter, wyświetlają się różne banki, które były wstawione jako grafiki z wstawionym tekstem alternatywnym. W tym miejscu lepiej byłoby zastosować zwykłe zaetykietowane przyciski lub hiperłącza, tak aby każda osoba niewidoma wiedziała, że może wybrać dany bank, po kliknięciu w niego klawiszem Enter. Jednak po aktywowaniu wybranego banku, lista znika, a koło wybranej metody płatności pojawia się wybrany przez nas bank. Następnie przechodzimy do następnego kroku aktywując link „Dalej”. Na wyświetlonej kolejnej podstronie znowu nigdzie nie ma nagłówków, a bardzo ułatwiłyby one składanie zamówienia z syntezatorem mowy. Nie ma problemów z wprowadzeniem danych do faktury i dostawy, ponieważ pola edycyjne są poprawnie zaetykietowane dla osób niewidomych. Niestety – w miejscu, gdzie trzeba zaznaczyć akceptację regulaminu oraz zgody na przetwarzanie danych oraz wyrazić chęć na otrzymywanie spersonalizowanych reklam – program udźwiękawiający nie czyta nigdzie pól wyboru, które umożliwiłyby zaznaczenie lub odznaczenie poszczególnych zgód. Możemy jedynie znaleźć jedno pole wyboru, które pozwalałoby zaznaczyć wszystkie powyższe opcje, co nie jest satysfakcjonującym rozwiązaniem. Dodatkowo na samym końcu tej podstrony znajduje się zwykły tekst „Uwagi do zamówienia”, który dopiero po naciśnięciu na nim klawisza Enter pokazuje pole edycyjne o nazwie „Dodaj komentarz”. Opcja dodania uwag powinna być od razu polem edycyjnym lub hiperłączem/przyciskiem, tak aby wszyscy ludzie, którzy korzystają z programu udźwiękawiającego, wiedzieli, co się wykona po jego kliknięciu, a tak to nie każdy będzie mógł wpisać swoich uwag, jeśli nie zacznie eksperymentować na stronie. Po naciśnięciu klawisza Enter na hiperłączu „Dalej” strona się ponownie przeładowuje i mamy już dostępne podsumowanie naszego zamówienia, które możemy przejrzeć, poruszając się strzałką w dół. W tym miejscu również brakuje nagłówków, które uprościłyby sprawdzanie wszystkich wprowadzonych danych. Na samym końcu podsumowania znajdował się link „Zamawiam i płacę”, który pozwala do końca złożyć zamówienie.

Reasumując, proces robienia zakupów na stronie mediaexpert.pl pozostawia wiele do życzenia i wymaga poprawek w kodzie strony, aby można było z niej komfortowo korzystać będąc osobą niewidomą.

Błąd: Nie znaleziono pliku licznika!Szukano w Link do folderu liczników

Artykuł publikowany w ramach projektu „INTERNETOWA PLATFORMA NAGŁAŚNIANIA PROBLEMÓW z DOSTĘPNOŚCIĄ CYFROWĄ", dofinansowany ze środków Państwowego Funduszu Rehabilitacji Osób Niepełnosprawnych.

Dodano: 15-03-2022 12:14:34