Centrum handlowe Auchan jest jednym z bardziej znanych supermarketów w naszym kraju. Pierwszy punkt tego sklepu powstał w Piasecznie pod Warszawą w maju 1996 roku. Pamiętam jak jeszcze kilkanaście lat temu jeździło się tam na większe zakupy, aby móc kupić dużą ilość produktów w niskich cenach. Od tego czasu sieć sklepów Auchan rozwija się w naszym kraju coraz szybciej. W roku 2014 m.in. marka Auchan sfinalizowała transakcję przejęcia hipermarketów Real. Poza Polską sieć tych sklepów można spotkać m.in. we Francji, Hiszpanii, Włoszech czy na Węgrzech i w Rosji.
W poniższym artykule przejrzę pod względem dostępności dla osób niewidomych stronę internetową https://zakupy.auchan.pl/, gdzie można zrobić internetowe zakupy w supermarkecie Auchan.
Załóżmy, że chcę po wejściu na stronę zalogować się na swoje konto, a następnie dodać do koszyka trzy produkty spożywcze i zamówić ich dostawę do mojego mieszkania. Osoby niewidome 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 przemieszczać się pomiędzy nagłówkami, „cyfry od 1 do 6”, które pozwalają poruszać 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 stronie 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 osób niewidomych, aby wszystkie elementy strony, takie jak nagłówki, linki, przyciski, pola wyboru, pola edycji i inne elementy, były odpowiednio zaprogramowane w kodzie strony.
Po przejrzeniu całej zawartości strony, w pierwszej chwili nigdzie nie udało mi się znaleźć elementu, który pozwoliłby mi przejść do zalogowania się na swoje konto w tym sklepie. Jednak po pewnym czasie ustaliłem, że sposobem na wyświetlenie przycisków „Rejestracja” i „Logowanie” jest przełączenie okna przeglądarki na widok zmaksymalizowany, dzięki czemu po chwili na samej górze strony pojawiły się oba przyciski. Natomiast w wersji okna zminimalizowanego należało otworzyć główne menu strony, które jest źle zaetykietowane, ale napiszę o tym później, i przejść na sam koniec menu, gdzie znajdowały się elementy, pozwalające na przejście do logowania lub rejestrowania się klienta. Zamieszczanie tak ważnych elementów na końcu menu, to dość duże utrudnienie dla osób niewidomych, dlatego warto byłoby je poprawić i umieścić na początku wyświetlanego menu. Po kliknięciu przycisku „Logowanie”, strona mi się przeładowała i szybko, dzięki klawiszowi nawigacyjnemu „F”, skoczyłem do pól formularzy, gdzie mogłem wpisać moje dane logowania.
Po zalogowaniu się na stronę sklepu Auchan na początek znalazłem jedną nieprawidłowość, która utrudnia przeglądanie zawartości witryny internetowej osobom niewidomym. Chodzi o nieprawidłową hierarchię nagłówków, ponieważ na sprawdzanej witrynie internetowej brakowało tego ze stopniem 1 „<h1></h1>”. Po wciśnięciu klawisza Enter na przycisku „Witaj imię użytkownika”, poniżej pojawiają się linki, które odczytywane są przez program udźwiękawiający w jednej linii, kiedy osoba niewidoma porusza się po stronie za pomocą strzałek góra/dół. Są to hiperłącza odczytywane przez syntezę mowy jako: „Konto”, „Zamówienia”, „Zapisane adresy (1)”, „Adres do faktury (2)”, „Lista zakupowa (1)”, „Edytuj konto”. Pierwszą metodą, która może naprawić ten problem jest wstawienie pomiędzy powyższe linki znacznika HTML „<br />”, aczkolwiek może to popsuć wygląd tej zawartości dla osób widzących, korzystających ze strony internetowej. Dlatego lepszym rozwiązaniem w tym przypadku będzie wstawienie znacznika „inline-grid” w stylach CSS w odniesieniu do powyżej opisanych hiperłączy. Kolejnym niedostępnym elementem, który udało mi się odnaleźć i o czym napomknąłem powyżej, był tekst „Menu”. Po klikaniu na nim klawiszem Enter nie była wykonywana żadna akcja, która pokazałaby dodatkowe opcje na stronie. Po chwilowym przejrzeniu strony udało mi się ustalić, że za otwieranie menu, odpowiada link o nazwie „Void 0”, który jest źle zaetykietowany i osoby niewidome, przeglądające tę witrynę internetową, nie będą wiedziały, że główne menu można otworzyć za pomocą tego hiperłącza. Aby naprawić ten niedostępny element, najlepiej byłoby zastosować w tym przypadku atrybut „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. Inną nieprawidłowością, która występowała po naciśnięciu klawisza Enter na linku otwierającym menu, był brak przeniesienia focusa czytnika ekranu na pierwszy element menu.
Następną czynnością, do której zabrałem się przy robieniu zakupów, było znalezienie w wyszukiwarce konkretnego produktu, który chciałem zamówić. W tym celu klawiszem szybkiej nawigacji, czyli literą „E”, przeszedłem do pola edycji z wyszukiwarką produktów, które było poprawnie zaetykietowane „Znajdź produkt”. Niestety, pod tym polem wyszukiwania, nigdzie nie było przycisku „Szukaj”, który mówiłby nam, że po jego wciśnięciu rozpocznie się wyszukiwanie wpisanej frazy w bazie tego sklepu. Udało mi się jednak wyszukać produkt „Woda” po wpisaniu go, a następnie po naciśnięciu klawisza Enter, będąc cały czas w tym polu. Niestety, po przeładowaniu strony znowu występuje nieprawidłowa hierarchia nagłówków, ponieważ jedyny nagłówek, który jest na stronie, ma stopień 3 „<h3></h3>”. Pod nagłówkiem z nazwą wyszukiwanego produktu mamy dostępne opcje sortowania i filtrowania, które są wykonane w formie dostępnych dla programu udźwiękawiającego przycisków. Niestety, produkty nie są wstawione jako nagłówki, tylko jako linki, co trochę utrudnia ich przeglądanie z programem udźwiękawiającym. Kiedy już zdecydowałem się na konkretny produkt i kliknąłem Enter na przycisku „Dodaj do koszyka”, wtedy wyświetliło mi się okno, gdzie musiałem podać mój kod pocztowy. W tym oknie znajdowały się dwa przyciski w języku angielskim, co może stanowić problem dla osób, które nie są obeznane z tym językiem. Te przyciski to „modal close” oraz „open”. Po wpisaniu kodu pocztowego, pod polem, pojawił się przycisk z tym kodem, na którym nacisnąłem klawisz Enter. Po tej czynności kursor wrócił mi znowu na przycisk „Dodaj do koszyka”, który musiałem aktywować, aby dodać wybrany produkt. Po jego kliknięciu pojawiły mi się trzy niezaetykietowane przyciski. Pierwszym mogłem zmniejszyć liczbę wybranego produktu, drugim mogłem rozwinąć i wybrać strzałką w dół oraz klawiszem Enter ilość tego artykułu, a trzeci przycisk służył do zwiększania liczebności produktu. Wszystkie te powyższe przyciski powinny być odpowiednio zaetykietowane, najlepiej poprzez dodanie atrybutu „aria-label”, tak aby każdy użytkownik wiedział, co się wydarzy po ich wciśnięciu. Po wpisaniu w polu wyszukiwania dwóch kolejnych artykułów spożywczych „Jogurt” oraz „Śmietana” nie napotkałem już innych problemów i dodałem wybrane produkty do koszyka.
Następnie chciałem odnaleźć mój koszyk, aby wybrać dogodny termin dostawy i sfinalizować zamówienie. Niestety, na stronie nigdzie nie było przycisku lub linku z etykietką „Koszyk” i jedynie po wyświetlonej cenie na początku strony domyśliłem się, że niezaetykietowany przycisk z ceną pozwoli rozwinąć mi opcję wybrania terminu dostawy. W tym przypadku również warto byłoby oznaczyć przycisk pozwalający na przejście do zawartości koszyka atrybutem „aria-label”. Koszyk wyświetlił mi się od razu pod wyświetloną łączną ceną zamówienia. W tym przypadku warto byłoby oddzielić trochę samą zawartość koszyka od reszty strony, na przykład elementem „<br />”, co będzie dla osób niewidomych bardziej przejrzyste i zrozumiałe. Dodatkowo sama nazwa „Koszyk” umieszczona jest w nagłówku stopnia 5, więc tutaj też warto byłoby poprawić hierarchię, ponieważ przed tym nagłówkiem nie ma innego elementu tego typu na tej stronie. Tak samo błędem jest umieszczenie cen produktów w koszyku w nagłówkach stopnia 6, ponieważ dezorganizuje to wykonywanie zakupów osobom niewidomym. W tym przypadku najlepiej byłoby, jakby każdy produkt w koszyku miał oddzielny nagłówek stopnia 2 lub 3, zależnie od występującej hierarchii, co ułatwiłoby jego przeglądanie z programem udźwiękawiającym. W koszyku mamy możliwość zmiany ilości dodanych produktów, dzięki tak samo niezaetykietowanym przyciskom jak przy dodawaniu do koszyka, więc i tutaj warto byłoby zastosować atrybut „aria-label”. Na końcu zawartości koszyka, znajdował się przycisk „Do kasy”. Po jego aktywowaniu za pomocą litery „H” przeskoczyłem do pierwszego nagłówka, pod którym znajdowały się już opcje do dokończenia zamówienia. Po aktywowaniu linku „Zarezerwuj termin dostawy”, otworzyło mi się dodatkowe okno, gdzie mogłem wybrać dogodny termin. Za nim jednak do tego doszedłem, natknąłem się na dwa elementy, które dla programu udźwiękawiającego były zwykłym tekstem „Odbiór w sklepie” oraz „Dostawa do domu”. Po naciskaniu na nich klawiszem Enter zmieniała się zawartość umieszczona pod spodem, więc te elementy powinny być zaprogramowane najlepiej jako zaetykietowane przyciski. Po wybraniu opcji „Dostawa do domu” miałem możliwość wybrania terminu za pomocą odpowiednio zaetykietowanych przycisków umieszczonych w tabeli. Po aktywowaniu konkretnej opcji z dniem dostawy – okno zniknęło mi i znowu znalazłem się na poprzedniej stronie. Przeglądając wyświetloną stronę, zobaczyłem kolejny niezaetykietowany przycisk znajdujący się pod polem edycyjnym do wpisania ewentualnego kodu kuponu promocyjnego, więc i tutaj należałoby ten element poprawić, najlepiej poprzez wstawienie atrybutu „aria-label”. Nie znalazłem nigdzie na wyświetlonej stronie możliwości wyboru godziny dostawy, więc po prostu kliknąłem Enter na przycisku „Dalej”. Kursor wskoczył mi znowu na okno, gdzie wybierało się datę, więc musiałem jeszcze raz znaleźć przycisk z interesującym mnie dniem i nacisnąć na nim klawisz Enter. Po tej czynności zostałem przeniesiony na stronę, gdzie były do uzupełnienia wszystkie pozostałe opcje potrzebne przy zamawianiu zakupów internetowych. Cała strona była dobrze pooznaczana nagłówkami, aczkolwiek znowu były one ułożone nie po kolei. Bez problemu wybrałem konkretny przedział godzinowy dostawy oraz wpisałem swoje dane i adres dostawy zakupów. Zauważyłem jeden błąd dostępności dla programu udźwiękawiającego w polach edycyjnych, gdzie wpisywało się adres dostawy. Przed każdym polem prawidłowo znajdował się tekst, oznajmiający, co trzeba wpisać w poniższe pole, natomiast same pola edycyjne już nie zawierały etykietki, w związku z czym osoby niewidome, które przeglądają stronę samymi klawiszami nawigacyjnymi na klawiaturze, nie wiedziałyby, co należy wpisać w dane pole. Pod polem do wpisania uwag znajdował się już przycisk do złożenia zamówienia.
Poza powyżej opisanymi i znalezionymi błędami, na stronie występują też w kilku miejscach jeszcze inne niezaetykietowane przyciski oraz linki, więc te elementy też powinny być poprawione i prawidłowo zaprogramowane w kodzie strony.
Oczywiście, ten artykuł nie pokazał wszystkich błędów dostępności, jakie występują w witrynie internetowej https://zakupy.auchan.pl/, ponieważ jedynie pełny audyt strony oraz testy z niewidomymi użytkownikami mogą wykazać pełną listę nieprawidłowości. Jednak mam nadzieję, że powyższy tekst dotrze do właścicieli sklepu internetowego Auchan i skłoni ich do podjęcia działań, które wyeliminują wszystkie błędy dostępności, co przyniesie korzyści zarówno internetowemu sklepowi Auchan, jak i osobom z niepełnosprawnościami.