W naszym kraju obecnie funkcjonuje kilka dużych firm, które zajmują się sprzedażą urządzeń elektronicznych z kategorii AGD, RTV oraz komputerów. Jednak dla mnie zawsze głównym sklepem takiego typu będzie znany na pewno wszystkim MediaMarkt. Już jako małe dziecko pamiętam, jak jeździło się do tego supermarketu, aby obejrzeć różne sprzęty czy to do użytku domowego czy mobilnego. W tamtych czasach dużą zaletą właśnie tego giganta elektroniki domowej było to, że można było większość urządzeń wziąć do ręki i samodzielnie przetestować i zobaczyć, czy dana funkcjonalność będzie dla nas wystarczająca i odpowiednia.
Osoby widzące nie mające doświadczenia z osobami niewidomymi, w tym pracownicy sklepów stacjonarnych oraz osoby programujące witryny internetowe – przynajmniej tak wynika z moich doświadczeń – bardzo często, a nawet z reguły, chcą pomóc, ale często nie wiedzą, co konkretnie mają zrobić. Właśnie z moich wizyt w salonach MediaMarkt pamiętam, że w wielu przypadkach bez pomocy osób obsługujących klientów nie byłbym w stanie zrozumieć niektórych rozwiązań, ewentualnie mogę sobie wyobrazić długie godziny, kiedy metodą prób i błędów dochodzę do właściwych wniosków. Myślę, że przeszkody w dostępności dla osób niewidomych trzeba tłumaczyć zarówno widzącym programistom, jak i osobom projektującym internetowe wystawy (strony) sklepów poprzez analogię do sklepów stacjonarnych. Niezależnie od błędów programistycznych, które z punktu widzenia osoby niewidomej muszą być usunięte, warto jeszcze zasugerować dodanie jednego pola metadanych, na przykład „produkt przyjazny dla osób niewidomych”. Wydaje się, że akurat MediaMarkt mogłoby się pokusić o taką innowację.
Jak możemy przeczytać na stronie tego sklepu: „MediaMarkt jest liderem dystrybucji elektroniki użytkowej w Europie, obecnym w 14 krajach Starego Kontynentu. Mamy ponad 35-letnie doświadczenie w branży, które pozwoliło nam zbudować gęstą sieć sprzedaży i zaistnieć we wszystkich dostępnych kanałach dystrybucji. Na rynku polskim działamy już od dwóch dekad. Jesteśmy odważni i wyraziści – wytrwale szukamy innowacyjnych rozwiązań, wyprzedzając oczekiwania naszych Klientów, a w kreowaniu wizerunku naszej marki staramy się budzić emocje, które pozytywnie zapadają w pamięć”. Obecnie MediaMarkt to ponad 60 sklepów stacjonarnych w całym naszym kraju oraz dodatkowo istnieje możliwość zamówienia zakupów internetowo, korzystając ze strony https://mediamarkt.pl/.
W poniższym artykule sprawdzę stronę internetową tego sklepu pod względem jej dostępności dla osób niewidomych, które do obsługi komputera wykorzystują program udźwiękawiający.
W ramach tych testów, założyłem, że po wejściu na powyższy adres internetowy, na początek zaloguję się na swoje konto, następnie dodam do koszyka jeden wybrany przeze mnie produkt, a potem zamówię jego dostawę do mojego mieszkania. Zdecydowałem się na zakup produktu „iPhone 13” z tego powodu, że w mojej ocenie jest to właśnie „produkt przyjazny dla osób niewidomych”.
Jak możemy przeczytać na stronie tego sklepu: „MediaMarkt jest liderem dystrybucji elektroniki użytkowej w Europie, obecnym w 14 krajach Starego Kontynentu. Mamy ponad 35-letnie doświadczenie w branży, które pozwoliło nam zbudować gęstą sieć sprzedaży i zaistnieć we wszystkich dostępnych kanałach dystrybucji. Na rynku polskim działamy już od dwóch dekad. Jesteśmy odważni i wyraziści – wytrwale szukamy innowacyjnych rozwiązań, wyprzedzając oczekiwania naszych Klientów, a w kreowaniu wizerunku naszej marki staramy się budzić emocje, które pozytywnie zapadają w pamięć”. Obecnie MediaMarkt to ponad 60 sklepów stacjonarnych w całym naszym kraju oraz dodatkowo istnieje możliwość zamówienia zakupów internetowo, korzystając ze strony https://mediamarkt.pl/.
Osoby korzystające z programu udźwiękawiającego, przeglądają strony internetowe za pomocą odpowiednich klawiszy nawigacyjnych, których obsługa dodana jest przez czytnik ekranu. Są to, między innymi: litera „H”, która pozwala poruszać się pomiędzy nagłówkami, „cyfry od 1 do 6”, które pozwalają przemieszczać się pomiędzy konkretnymi stopniami nagłówków, litera „K” skacze nam po hiperłączach, litera „V” przeskakuje na odwiedzony link, a literą „F” oraz „B” przemieszczamy się pomiędzy polami formularzy i przyciskami na danej witrynie internetowej. Powyższe klawisze mogą się nieco różnić, zależnie od używanego programu udźwiękawiającego, ale są to zawsze litery lub cyfry na klawiaturze alfanumerycznej komputera. Dodatkowo klawisz Enter pozwala na otworzenie danego linku czy przycisku, a strzałkami góra/dół czytamy poprzednie/następne kilkadziesiąt znaków na stronie internetowej. Dlatego niezwykle ważne jest dla takich osób, aby wszystkie elementy strony, takie jak nagłówki, linki, przyciski, pola wyboru, pola edycji, listy rozwijane i inne elementy, były odpowiednio zaprogramowane w kodzie strony.
Na początku przejrzałem za pomocą programu udźwiękawiającego całą stronę główną tego sklepu, aby sprawdzić, jakie błędy dostępności są od razu widoczne po wejściu na tę witrynę. Na samej górze znajduje się niezaetykietowane hiperłącze, co powoduje, że osoby niewidome nie będą wiedziały, gdzie ich przekieruje kliknięcie enterem na tym linku. Prawidłowy kod HTML dostępnego hiperłącza powinien wyglądać, na przykład, w następujący sposób: „<a href=”Index.html”>Strona główna</a>”. Natomiast jeśli nie możemy z jakiegoś powodu użyć powyższej zaproponowanej formuły, to innym dobrym sposobem opisania takich elementów jest użycie atrybutu „aria-label”. Zgodnie z opisem podanym na stronie https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label, atrybutu aria-label można używać do znaczników interaktywnych, czyli: a href, button, input oraz textarea, a także punktów orientacyjnych (landmark) oraz znaczników, które posiadają rolę widżetu.
Jeśli chodzi o nagłówki, które występują na stronie głównej https://mediamarkt.pl/, to trzeba pochwalić ten element, ponieważ są one ułożone hierarchicznie „<h1> – <h6>”.
Niestety, w nagłówku stopnia pierwszego „<h1></h1>” znajduje się znowu niezaetykietowane hiperłącze, które należałoby poprawić, według wyżej podanych wskazówek, aby stał się on dostępnym elementem dla osób przeglądających stronę internetową za pomocą programu udźwiękawiającego. Wszystkie grafiki widoczne na testowanej witrynie są dobrze opisane za pomocą tekstów alternatywnych.
Bez problemu udało mi się odnaleźć na stronie hiperłącze „Zaloguj” i wejść w nie, naciskając klawisz Enter. Następnie za pomocą klawisza nawigacyjnego „F” przeszedłem do pól formularzy, które były poprawnie zaetykietowane i czytelne dla osób niewidomych, gdzie mogłem bez żadnych problemów wpisać swoje dane logowania. Po aktywowaniu elementu „Zaloguj” strona mi się przeładowała i przeglądając wyświetloną zawartość, mogłem szybko stwierdzić, że jestem już na moim koncie w serwisie MediaMarkt. Wszystkie błędy dostępności, które opisywałem powyżej, występowały również po zalogowaniu się do konta użytkownika. Dodatkowo podczas przeszukiwania całej zawartości strony, zauważyłem, że kategorie różnych produktów nie są umieszczone pod nagłówkami, na przykład „<h3>Smartfony</h3>”, co ułatwiłoby bardzo poruszanie się po witrynie osobom korzystającym z programów udźwiękawiających. Ponadto, przed nagłówkiem „<h2> Szczególnie polecamy</h2>” znajdowało się znowu jedenaście niezaetykietowanych hiperłączy, co należałoby poprawić, aby osoby mające problemy z widzeniem, wiedziały, gdzie się przeniosą po aktywowaniu danego linku. Dodatkowo przed tymi niedostępnymi elementami, były też dwa niezaetykietowane przyciski, które – nie wiedząc dlaczego – czasami znikały i program udźwiękawiający ich w ogóle nie czytał, więc to też trzeba byłoby poprawić.
Następnie chciałem wyszukać dany produkt, aby sprawdzić jego cenę oraz opis i dodać go do mojego zakupowego koszyka. W tym celu ponownie literą „F” szybko przeskoczyłem do pierwszego pola edycyjnego o nazwie „Czego szukasz”, które było poprawnie zaetykietowane. Niestety, pod spodem nie znalazłem żadnego przycisku o nazwie, na przykład, „Wyszukaj”, które po jego aktywowaniu pozwoliłoby na znalezienie wpisanej w powyższym polu danej frazy. Jednak po napisaniu „iPhone 13” i naciśnięciu klawisza Enter, strona na szczęście mi się przeładowała i po jednokrotnym naciśnięciu litery „H”, szybko przeskoczyłem do pierwszego nagłówka, gdzie miałem już wyświetloną liczbę znalezionych produktów.
Pod tym elementem znajdowały się opcje filtrowania, które mogłem bez problemu użyć za pomocą programu udźwiękawiającego i dzięki temu udało mi się zmienić zakres cen wyświetlanych produktów. Podstawowe opisy każdego artykułu były podane w czytelny i dostępny sposób, a po wejściu już w konkretną rzecz, mogłem szybko za pomocą nagłówków przeskoczyć do szerszego opisu wybranego artykułu. Po zapoznaniu się z opisem kilku wybranych smartfonów, zdecydowałem się na konkretny i kliknąłem klawisz Enter na przycisku „Do koszyka”. Następnie, przeglądając stronę internetową od samej góry, szybko odnalazłem link „1Koszyk”, pod którym znajdowały się wszystkie dodane produkty oraz ich łączna cena. Po kliknięciu klawiszem Enter na hiperłączu „Do kasy”, strona mi się przeładowała i znalazłem się w oknie, gdzie wybierało się już szczegóły dostawy.
W tym miejscu, niestety, zniknęły mi wszystkie nagłówki i znalezienie informacji o dostawie i płatności zajęło mi chwile, ponieważ musiałem przeglądać stronę strzałką w dół. Wszystkie opcje, które miałem wyświetlone na stronie, związane między innymi z dodatkową ochroną, z dodatkowym zabezpieczeniem ekranu, wyborem sposobu dostawy czy metodą płatności, były poprawnie zaetykietowane i całkowicie dostępne dla programu udźwiękawiającego. Niestety, brakowało mi w tym miejscu nagłówków, umieszczonych przed każdym nowym wyborem, co przyśpieszyłoby moje zakupy w tym sklepie internetowym. Po wybraniu metody płatności „Szybka płatność online (karta/eprzelew)”, pojawił mi się pod spodem link „Kliknij tutaj, aby wybrać swój bank”. Po jego aktywowaniu klawiszem Enter, wyświetliły mi 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 kiedy aktywowałem mój bank, to lista mi zniknęła, a koło wybranej przeze mnie metody płatności pojawił się mój bank, więc udało mi się go zaznaczyć z programem udźwiękawiającym. Przeszedłem do następnego kroku, aktywując link „Dalej”. Na wyświetlonej kolejnej podstronie znowu nigdzie nie było nagłówków, a bardzo ułatwiłyby one składanie zamówienia z syntezatorem mowy. Udało mi się bez problemu sprawdzić wszystkie dane do faktury i dostawy, ponieważ pola edycyjne były poprawnie zaetykietowane dla osób niewidomych. Niestety – w miejscu, gdzie trzeba było zaznaczyć akceptację regulaminu oraz zgody na przetwarzanie danych oraz wyrazić chęć na otrzymywanie spersonalizowanych reklam – program udźwiękawiający nie czytał mi nigdzie pól wyboru, które umożliwiłyby mi zaznaczyć poszczególne zgody. Udało mi się jedynie znaleźć jedno pole wyboru, które pozwalało zaznaczyć wszystkie powyższe opcje, co wcale mi nie odpowiadało. Dodatkowo na samym końcu tej podstrony znajdował się zwykły tekst „Uwagi do zamówienia”, który dopiero po naciśnięciu na nim klawisza Enter pokazał 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 mi się ponownie przeładowała i miałem dostępne już podsumowanie mojego zamówienia, które przejrzałem, poruszając się strzałką w dół. W tym miejscu również brakowało mi 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 pozwolił mi do końca złożyć moje zamówienie.
Podsumowując powyższe testy strony internetowej https://mediamarkt.pl/, muszę powiedzieć, że pomimo wymienionych powyżej błędów dostępności, zakupy online robiło mi się nawet przyjemnie w porównaniu do innych serwisów, oferujących sprzęty elektroniki domowej, komputery, smartfony itp. Jednak pomimo tego, twórcy strony https://mediamarkt.pl/ powinni popracować nad dopracowaniem jej dostępności, ponieważ wykryte błędy utrudniają wykonywanie na niej zakupów online osobom z różnymi niepełnosprawnościami. Na pewno nie udało mi się znaleźć wszystkich nieprawidłowości, ponieważ testowałem opisywaną w tym artykule witrynę wyłącznie pod względem obsługi jej przez osoby niewidome, a po drugie jedynie audyt cyfrowy może wykazać pełną listę błędów dostępności. Jednak mam nadzieję, że powyższy tekst dotrze do właścicieli sklepu internetowego MediaMarkt i skłoni ich do podjęcia działań, które wyeliminują wszystkie błędy dostępności, co przyniesie korzyści zarówno sklepowi, jak i osobom z niepełnosprawnościami