Dla większości ludzi na świecie dbanie o własną higienę oraz wygląd jest priorytetową czynnością każdego dnia. Na pewno więcej w tym elemencie mają do powiedzenia Panie, które mają o wiele więcej możliwości do pochwalenia się swoją kosmetyczną stylizacją, między innymi poprzez widoczny makijaż na twarzy czy zrobiony u kosmetyczki manikiur czy pedikiur swoich paznokci. Jednak, aby móc w ogóle dbać o ten ważny element naszego życia, potrzebne są specjalne preparaty, które umożliwiają wykonywanie tych czynności. Jednym z miejsc w naszym kraju, gdzie dostępna jest bardzo duża baza różnego rodzaju kosmetyków, jest drogeria Rossmann. Poza formą stacjonarną, ten sklep umożliwia również zamawianie zakupów online, czy to z odbiorem osobistym czy z wysyłką, produktów upiększających i pielęgnujących naszą skórę, włosy czy paznokcie.
23 maja 1993 roku został otwarty w Polsce pierwszy stacjonarny punkt tej drogerii, który znajdował się przy ul. Piotrkowskiej w Łodzi. Już 10 lat później było ich aż sto w całym naszym kraju. Twórcą tej firmy jest Dirk Rossmann, który gościł w Polsce między innymi na piętnastolecie drogerii Rossmann. W dzisiejszych czasach jest to jedna z najczęściej wybieranych drogerii, gdzie dokonujemy zakupów produktów kosmetyczno-higienicznych.
Tak jak wspomniałem wyżej, zakupy w Rossmannie można również zamówić przez aplikację na urządzeniach mobilnych oraz poprzez stronę internetową pod adresem https://www.rossmann.pl/ i to właśnie na tej stronie skupimy się w tym artykule.
Na potrzeby tekstu przeprowadzę podstawowy test dostępności dla osób niewidomych, które obsługują komputer za pomocą programu udźwiękawiającego, strony internetowej tej drogerii.
Na początek załóżmy, że chciałbym najpierw zalogować się na tej witrynie, a potem dodać do koszyka dwa wybrane przeze mnie artykuły kosmetyczne i zamówić zakupy z dostawą do domu. 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 m.in. 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 z programem udźwiękawiającym całą stronę https://www.rossmann.pl i bardzo szybko odnalazłem kilka błędów dostępności tej witryny. Po pierwsze w wielu miejscach znajdują się niezaetykietowane przyciski oraz hiperłącza, które powinny być odpowiednio opisane, tak aby osoba niewidoma wiedziała, gdzie się przeniesie po naciśnięciu entera na danym elemencie. W przypadku linków, prawidłowy kod zaetykietowanego łącza w języku HTML wygląda następująco „<a href=”index.html”>Strona główna</a>”. Jeśli nie możemy użyć takiej 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. Po drugie na całej stronie nigdzie nie odnalazłem nagłówków, które są kluczowym elementem nawigacyjnym dla osób niewidomych, które przeglądają witryny internetowe za pomocą czytnika ekranu. Każdy portal powinien zawierać hierarchicznie ułożone nagłówki od stopnia 1 do stopnia 6, które w kodzie HTML zapisuje się w następujący sposób „<h1></h1>”, „<h2></h2>”, „<h3></h3>”, „<h4></h4>”, „<h5></h5>”, „<h6></h6>”. Następny problem, na który natrafiłem podczas przeglądania strony internetowej tej drogerii, to wypisane jedna pod drugim marki, które Rossmann sprzedaje w swojej ofercie. Po pierwsze dla osoby niewidomej przejście strzałką w dół po tych wszystkich firmach jest bardzo długotrwałe i przez to, że brakuje na tej witrynie nagłówków, nie można szybko tego przeskoczyć. Po drugie przed listą marek wypisane są linki z literami alfabetu ABCDEFGHIJKLMNOPQRSTUVWXYZ, które – niestety – nie przenoszą kursora po kliknięciu w którąś z liter klawiszem Enter, co jeszcze bardziej wydłuża nawigacje na tej witrynie. Najlepszym sposobem byłoby stworzenie oddzielnego hiperłącza na przykład o nazwie „Sprzedawane marki”, gdzie te wszystkie firmy byłyby wymienione. Następnym problemem, jaki napotkałem podczas robienia zakupów online, był brak gdziekolwiek linku, przycisku czy pól formularzy, pozwalających na zalogowanie się do drogerii na swoje konto klienta. W związku z tym, spróbowałem do tych zakupów podejść trochę w innej kolejności i zacząłem od wyszukania nazwy konkretnego produktu, mając nadzieję, że kiedy dodam dany artykuł do koszyka, to wtedy pojawi mi się funkcja logowania. Niestety, nawet i w tym zadaniu napotkałem kolejny błąd dostępności. Przeszukując stronę za pomocą klawiszy szybkiej nawigacji, nigdzie nie było pola edycyjnego, w które mógłbym wpisać wyszukiwaną frazę. Dopiero po przejrzeniu całej zawartości witryny odnalazłem zwykły tekst „Szukaj produktów”, który po wciśnięciu klawisza Enter otworzył dodatkowe okno, gdzie miałem możliwość wpisać wyszukiwany artykuł kosmetyczny. Aby osoba niewidoma mogła szybko i bez problemów odnaleźć pole wyszukiwania oraz przycisk pozwalający na wyszukanie wpisanej frazy na stronie, można zastosować poniższy kod HTML
„<form method=”get” id=”zox-search-form” action=”Cały adres głównej strony”>
<input type=”text” name=”s” id=”zox-search-input” value=”Szukaj” onfocus=’if (this.value == „Szukaj”) { this.value = „”; }’ onblur=’if (this.value == „Szukaj”) { this.value = „”; }’ />
<br />
<input type=”submit” id=”zox-search-submit” value=”Szukaj” />
</form>”
Oczywiście jest to tylko podstawowy kod HTML, do którego trzeba dodać jeszcze kilka elementów, aby wyszukiwarka prawidłowo działała, ale ten przykład pokazuje, jak można stworzyć pole wyszukiwania oraz przycisk, które będą poprawnie odczytywane i łatwe do znalezienia dla osób korzystających z czytnika ekranu.
Po kliknięciu enterem na znaleziony tekst „Szukaj produktów” otworzyło się dodatkowe okno, gdzie mogłem wpisać poszukiwaną frazę. Niestety, zarówno pole edycji, jak i przycisk były niezaetykietowane, więc osoby niewidome mogą nie wiedzieć, do czego te elementy na stronie służą i powinny być one odpowiednio nazwane. Po wpisaniu w polu edycji słowa „Dezodorant” i naciśnięciu klawisza Enter, strona się przeładowała i szybko za pomocą klawisza szybkiej nawigacji „H” przeskoczyłem do pierwszego i jedynego nagłówka na tej stronie o nazwie „Wyniki wyszukiwania: Dezodorant”. Niestety w tym miejscu brakuje odpowiedniej hierarchii nagłówków. Idąc strzałką w dół, napotkałem dwa przyciski „Sortuj” i „Filtruj”, które po aktywowaniu ich klawiszem Enter wyświetlały dodatkowe okno, gdzie mogłem wybrać konkretne parametry. Niestety w obu przypadkach po pierwsze znajdowały się w tych oknach niezaetykietowane przyciski, a po drugie opcje sortowania i filtrowania były umieszczone w jednej linijce na przykład „DOMYŚLNIENAJNOWSZECENA OD NAJWYŻSZEJ, CENA OD NAJNIŻSZEJ, NAZWA A-Z, NAZWA Z-A”. Aby naprawić ten problem można w tym miejscu zastosować znacznik HTML „<br />”. Jeśli spowoduje on zły wygląd wizualny, to lepszym pomysłem będzie wykorzystanie znacznika „inline-grid” w stylach CSS w odniesieniu do powyżej wskazanych elementów. Po zastosowaniu odpowiedniego sortowania i filtrowania, zacząłem przeglądać wyświetlone produkty. Każdy artykuł był wstawiony jako hiperłącze, a przydałoby się, żeby każdy kosmetyk był również nagłówkiem, co ułatwiłoby osobom niewidomym przeglądanie takiej bazy produktów. Po każdym wyświetlonym kosmetyku znajdował się niezaetykietowany przycisk, który należałoby odpowiednio opisać. Ponieważ nigdzie nie znalazłem opcji dodania konkretnego artykułu do koszyka, więc wszedłem w link z danym produktem, aby tam tego poszukać. Szybko przeskoczyłem za pomocą litery „H” do pierwszego nagłówka, aby znaleźć wyświetlone informacje o wybranym dezodorancie. Na tej podstronie występowała również nieprawidłowa hierarchia nagłówków. Po chwili znalazłem przycisk „Dodaj do koszyka”, który po jego aktywowaniu zmienił się na „Dodano do koszyka”, co pozwoliło mi szybko się zorientować, że udało mi się wrzucić go do mojej wirtualnej torby zakupowej. Po chwili w ten sam sposób, co opisałem powyżej dodałem drugi produkt do mojego koszyka.
Kiedy chciałem dokończyć składanie zamówienia, wyszukałem na stronie wyraz „Koszyk” i kursor przeskoczył mi na hiperłącze o takiej właśnie nazwie. Niestety, kiedy kliknąłem na tym linku klawiszem Enter, to za pierwszym razem strona się przeładowała, ale nigdzie nie mogłem znaleźć dodanych przeze mnie produktów, a za drugim razem wyświetliła mi się zupełnie inna strona, niezwiązana z drogerią Rossmann. Przejrzałem całą stronę, poruszając się strzałką w dół i w końcu odnalazłem zwykły tekst „Twoja dostawa”, pod którą znajdował się link z liczbą dodanych produktów i dopiero po aktywowaniu tego hiperłącza zostałem przeniesiony do mojego koszyka. Tutaj już szybko za pomocą nagłówka znalazłem koszyk, a pod nim wszystkie dodane wcześniej kosmetyki. Na końcu odnalazłem hiperłącze „Zaloguj się”, po którego aktywowaniu pokazało mi się nowe okno z możliwością zalogowania się do mojego konta klienta. Niestety pola edycyjne służące do wpisania adresu e-mail / nazwy użytkownika oraz hasła nie posiadały etykiet, przez co osoby niewidome poruszające się po zawartości strony klawiszami szybkiej nawigacji nie będą wiedziały, co należy w dane pole wpisać. Po zalogowaniu się do drogerii, pod dodanymi produktami do koszyka znajdował się przycisk „Przejdź do kasy”, który nacisnąłem, aby przejść do dalszego kroku zamawiania zakupów online. Za pierwszym razem strona się przeładowała, ale nigdzie nie mogłem znaleźć dalszych kroków zamówienia, natomiast, kiedy drugi raz aktywowałem ten przycisk klawiszem Enter, wtedy strona się ponownie przeładowała i przeglądając wyświetloną witrynę strzałką w dół odnalazłem możliwość wybrania sposobu dostawy zamówienia. Powinien ten element znajdować się pod nagłówkiem o nazwie na przykład „Wybierz sposób dostawy”, aby osoba korzystająca z programu udźwiękawiającego, mogła szybko to odnaleźć na witrynie internetowej. Bez problemu udało mi się wybrać sposób dostawy a następnie uzupełnić adres dostawy w nowym oknie, które się wyświetliło po kliknięciu przycisku „Dodaj adres”. Niestety, w tym oknie znowu pola edycyjne nie były zaetykietowane, więc utrudnia to wypełnianie tych danych osobom, które przeglądają stronę za pomocą klawiszy szybkiej nawigacji. Po zapisaniu adresu przeszedłem dalej, naciskając Enter na przycisku „Następny krok”. Szybko odnalazłem na wyświetlonej podstronie nagłówek o nazwie „Wybierz metodę płatności”, pod którym miałem dostępne przyciski opcji, aby wybrać odpowiednią metodę płatności. Szybko wybrałem konkretną opcję i przeszedłem do podsumowania, naciskając Enter na przycisku „Następny krok”. Znowu szybko udało mi się odnaleźć nagłówek, pod którym znajdowały się wszystkie szczegóły mojego zamówienia. Po sprawdzeniu poprawności podanych przeze mnie danych i wybranych produktów, zaznaczyłem pole wyboru „Zapoznałem/am się z regulaminem Drogerii Internetowej Rossmann i akceptuję jego treść”, a następnie dokończyłem proces zamawiania, klikając Enterem na przycisku „Zamawiam z obowiązkiem zapłaty”.
Strona internetowa drogerii Rossman posiada sporo błędów dostępności, które 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 stronę https://www.rossmann.pl/ 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 drogerii internetowej Rossmann i skłoni ich do podjęcia działań, które wyeliminują wszystkie błędy dostępności, co przyniesie korzyści zarówno dla sklepu, jak i dla osób z niepełnosprawnościami.