Strona internetowa delikatesy.pl jest sklepem internetowym Delikatesów Centrum, sieci detalicznych sklepów spożywczych działających na zasadzie franczyzy. Jej właścicielem jest grupa EuroCash, do której należą takie sklepy, jak abc, 1Minute, Groszek, Lewiatan czy Mila. Za pośrednictwem strony delikatesy.pl można zapoznać się z bieżącymi promocjami, jak również zalogować się na konto programu lojalnościowego Delikarta.
Po wejściu na stronę główną Delikatesów Centrum wystarczy wykonać kilka naciśnięć strzałką w dół na klawiaturze, aby natrafić na pierwszy element mający problemy z dostępnością. Jest nim logo tej sieci sklepów, które zostało wykonane w formacie svg i służy jako link prowadzący na stronę główną (jeśli akurat jesteśmy na jakiejś podstronie). Problem w tym, że użytkownik czytnika ekranu słyszy w tym miejscu „klikalne”, co oznacza, że ten element nie jest linkiem ani przyciskiem. Oznacza to, że nie da się w to miejsce przejść ani za pomocą tabulatora ani za pomocą wbudowanych w czytnik ekranu skrótów klawiszowych służących do przeskakiwania po linkach (klawisz „K”) lub po przyciskach (klawisz „B”). Ponadto, ponieważ to logo nie otrzymało żadnej etykiety, osoba niewidoma nie wie co się w tym miejscu znajduje ani co się stanie po kliknięciu w ten element.
Na stronie smashingmagazine Carie Fisher przedstawiła kilka sposobów na dodanie opisu do grafiki w formacie svg. Najlepszym rozwiązaniem wydaje się dodanie atrybutu role=”img” oraz znacznika <title> (rozwiązanie numer 5). Rzecz w tym, że rozwiązuje to tylko jeden problem, a mianowicie opis grafiki. Nadal otwartą kwestią pozostaje przekazanie użytkownikowi, że kliknięcie tego elementu spowoduje powrót na stronę główną. Być może najlepszym rozwiązaniem będzie w tym przypadku nadanie tej grafice opisu „Logo Delikatesów Centrum – Powrót na stronę główną’, ale i tak nadrzędny div powinien otrzymać atrybut role=”link”. Ten sam problem dotyczy drugiego loga tuż za napisem „Łapp kupony”. Z niewiadomego powodu twórcy strony postanowili umieścić na stronie dwa loga delikatesów prowadzące do strony głównej.
W dalszej kolejności znajduje się szereg bannerów reklamowych, przez które osoba niewidoma musi się przebić, aby dotrzeć do treści głównej strony. Wszystkie te grafiki posiadają w atrybucie „alt” napis „slajd”, co nie jest dobrą praktyką, ponieważ nie wyjaśnia to w żaden sposób osobie niewidomej, co znajduje się na grafice. Poza tym przydałaby się tutaj informacja mówiąca o tym, jak pominąć bannery i przejść do treści głównej. Popularną praktyką w takim przypadku jest stosowanie ukrytego nagłówka lub innego wiersza tekstu. Zwykle ustawia się wtedy atrybut class o wartości „sr-only” i stosuje się następującą regułę css:
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;}
Po przejściu przez bannery reklamowe natrafiamy na sześć promocji tematycznych, którym został przypisany nagłówek poziomu trzeciego, co warto pochwalić, ponieważ dzięki nagłówkom łatwiej jest trafić na tą treść.
Z punktu niewidomego klienta strona Delikatesów Centrum posiada poważne wady, wynikające z błędów dostępności, uniemożliwiające lub poważnie utrudniające zapoznanie się z ofertą promocji. Jednym z najbardziej poważnych problemów jest niewłaściwe pod względem zasad dostępności wykonanie części strony ze spisem produktów. Sprawia ono, że poprawne zapoznanie się z rodzajem produktu na promocji praktycznie nie jest możliwe przez osobę niewidomą, ponieważ znajdujące się tam przyciski wyboru (opcji) nie są zaetykietowane i zupełnie tekstowo niepowiązane z pozostałymi informacjami na stronie.
Ponadto w serwisie znajduje się również wiele innych, może nie tak kluczowych, ale utrudniających wygodne i sprawne przeglądanie oferty, błędów związanych z dostępnością.
Na przykład, po kliknięciu w produkt na promocji użytkownik czytnika ekranu w żaden sposób nie jest o tym informowany. Żeby stwierdzić, czy wyświetla się strona danego produktu, trzeba najpierw od początku przeczytać całą stronę i zapoznać się z jej zawartością.
Problem z opcjami wyboru powinien być rozwiązany, najogólniej mówiąc, w ten sposób, że odpowiednia informacja powinna być wypowiadana przez program odczytu ekranu przy przemieszczaniu focusa po elementach sterujących (w tym wypadku przyciskach wyboru). Technicznie można to zrealizować zapewne na kilka sposobów; jednym z nich jest dopisanie w HTML znacznika „label” i ukrycie tekstu przy pomocy CSS poleceniem „opacity” ustawionym na 0. Podobny efekt mógłby być zapewne uzyskany także przy zastosowaniu do tego celu znaczników ARIA.
Następne błędy dostępności, które można odnaleźć na stronie internetowej delikatesów, związane są z umieszczeniem przycisków oraz linków w jednej linii, co osobom niewidomym, które przeglądają witrynę internetową za pomocą strzałek góra/dół, utrudnia dotarcie do konkretnej funkcji zawartej pod danym przyciskiem lub hiperłączem. Sytuacja taka wystąpiła między innymi na początku strony przy przyciskach „Zaloguj się” i „Załóż konto” oraz zaraz pod tym w następujących linkach: Nasze gazetki. Nasze sklepy, Nasze Marki, Współpraca, Praca. Ten błąd dostępności można naprawić na dwa różne sposoby. Po pierwsze poprzez wstawienie znacznika HTML „<br />” w kodzie strony pomiędzy przyciskami lub hiperłączami, co pozwoli przenieść te elementy do nowych linii. Niestety, ten sposób ma jedną wadę, ponieważ po zastosowaniu znacznika „<br />” zawartość wizualna strony może źle wyglądać dla osób widzących. Dlatego lepszym pomysłem jest drugi sposób, czyli użycie znacznika „inline-grid” w stylach CSS w odniesieniu do powyżej opisanych hiperłączy oraz przycisków.
Po pewnym czasie możemy ustalić, że sposobem na wyświetlenie przycisków jest przełączenie okna przeglądarki na widok zmaksymalizowany, dzięki czemu po chwili na samej górze strony pojawiły się wspomniane przyciski. Natomiast w wersji okna zminimalizowanego należało otworzyć główne menu strony, które jest źle zaetykietowane, ale 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.
Kolejnym niedostępnym elementem, na który natrafimy podczas przeglądania strony jest tekst „Menu”. Po klikaniu na nim klawiszem Enter nie jest wykonywana żadna akcja, która pokazałaby dodatkowe opcje na stronie. Po chwilowym przejrzeniu strony możemy 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”. 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ą, którą możemy chcieć zrobić na stronie, jest znalezienie w wyszukiwarce konkretnego produktu, którego chcemy sprawdzić cenę. W tym celu klawiszem szybkiej nawigacji, czyli literą „E”, przechodzimy do pola edycji z wyszukiwarką produktów, które jest poprawnie zaetykietowane. Niestety, pod tym polem wyszukiwania, nigdzie nie odnajdziemy przycisku „Szukaj”, który mówiłby nam, że po jego wciśnięciu rozpocznie się wyszukiwanie wpisanej frazy. Mimo to uda nam się odnaleźć produkt „schab” gdy wpiszemy go w polu wyszukiwania, a następnie naciśniemy klawisz 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. Kiedy już zdecydujemy się na konkretny produkt i klikniemy Enter wtedy wyświetla się okno, gdzie musimy wybrać sklep z listy. Aby ułatwić znalezienie sklepu, strona prosi o podanie kodu pocztowego. W tym oknie znajdziemy 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, pojawia się przycisk z tym kodem, na którym możemy nacisnąć klawisz Enter. Po tej czynności kursor wraca znowu na przycisk „Wyszukaj produkt”, który trzeba aktywować. Po jego kliknięciu pojawiają się trzy niezaetykietowane przyciski. 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 nie natrafimy ponownie na okienko wyboru sklepu.
To oczywiście nie oznacza, że nie napotkamy tutaj problemów z dostępnością. Podstawową bolączką jest to że nagłówki na stronie są ułożone niehierarchicznie. Osoby niewidome, które przeglądają różne strony internetowe za pomocą programu udźwiękawiającego, najczęściej szukają konkretnego elementu, w który na przykład weszły za pomocą nagłówków, dlatego bardzo jest ważne, aby w tym przypadku był umieszczony na stronie nagłówek o nazwie na przykład „<h2>Wyniki wyszukiwania</h2>”. Po dłuższej chwili przeglądania zawartości strony strzałką w dół, odnajdziemy wyniki wyszukiwania i dojdziemy do linku „Filtruj wyniki” oraz obok umieszczonego tekstu „Sortuj”. Po wciśnięciu klawisza Enter na tekście „Sortuj”, pojawiają się pod spodem dodatkowe elementy, które są odczytywane przez czytnik ekranu jako zwykły tekst. Wszystkie elementy, które można aktywować za pomocą klawisza Enter powinny być przyciskami lub hiperłączami, tak aby osoba niewidoma wiedziała, że może je uruchomić za pomocą klawisza Enter. Przy odrobinie wysiłku uda nam się posortować produkty od najtańszego, jednak, niestety, przeglądanie wyszukanych artykułów jest dość problemowe. Zanim dojdziemy strzałką w dół do odnalezionych artykułów musimy przejść przez kilka polecanych produkty, co jeszcze bardziej wydłuża przeglądanie zawartości na tej stronie internetowej. Kiedy już odnajdziemy produkt, z którym chcemy się zapoznać, pod nim znajdziemy zwykły tekst, który po kliknięciu na niego klawiszem Enter pokazuje pole edycji rozwijane, gdzie jest wybrana cyfra 1. Ten tekst powinien być elementem klikalnym, czyli na przykład hiperłączem lub przyciskiem, Prawidłowa formuła tradycyjnego linka w kodzie HTML powinna wyglądać następująco „<a href=”inna_strona.html”>link do innej strony</a>”. Jeśli jednak nie można wykorzystać tej podstawowej formy, to innym dobrym sposobem jest zastosowanie w tym przypadku atrybutu „aria-label”. Zgodnie z opisem podanym na Mozilla Developer Network, 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.
A wracając do wspomnianego pola edycji rozwijanego, ciężko jest się domyślić do czego ono służy, ponieważ jest niezaetykietowane.
Będziemy też mieli pewien problem, aby przejść do następnego kroku, ponieważ po pierwszym aktywowaniu linku „Dalej” nic się nie wydarza, a gdy drugi raz naciśniemy na nim klawisz Enter, to wtedy nad tym hiperłączem pojawiają się dodatkowe elementy. Powinien w tym momencie kursor sam przeskoczyć na początek nowej wyświetlonej treści, tak aby osoba niewidoma wiedziała, że coś dodatkowego się wyświetliło.
Dodatkowo sama nazwa produktu umieszczona jest w nagłówku stopnia 3, 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 nagłówkach stopnia 6, ponieważ dezorganizuje to wykonywanie zakupów osobom niewidomym.
Reasumując, strona internetowa Delikatesów Centrum pozostawia wiele do życzenia i wymaga poprawek w kodzie strony, aby można było z niej komfortowo korzystać będąc osobą niewidomą. Wprowadzenie poprawek nie powinno w tym przypadku raczej wiązać się z gruntowną czy kompleksową przebudową całego serwisu, a ograniczyć się do stosunkowo niewielkich zmian, poprawiających dostępność, w odpowiednich fragmentach kodu, co przyniesie korzyści zarówno grupie EuroCach, jak i osobom z niepełnosprawnościami.