Treść strony
Dostępność strony Frisco.pl - Piotr Malicki
Sklep internetowy Frisco.pl jest jednym z największych i najdłużej funkcjonujących supermarketów w formule online w Polsce, który jest dobrym miejscem na zrobienie spożywczych zakupów do naszego domu lub biura.
W poniższym artykule sprawdzimy stronę internetową tego sklepu https://www.frisco.pl/ pod względem jej dostępności dla osób niewidomych, które do obsługi komputera wykorzystują program udźwiękawiający.
W dzisiejszych czasach internetowe zakupy różnych kategorii produktów stały się dla większości z nas codziennością, bez której trudno byłoby się nam obyć. Jest to bardzo duże ułatwienie dla osób zapracowanych, a także dla ludzi z różnymi niepełnosprawnościami. Tak jest w teorii. W praktyce widzące osoby zapracowane mogą korzystać z dobrodziejstw współczesnych rozwiązań, a osoby z niepełnosprawnościami wzroku, w szczególności niewidome, muszą albo próbować działać we własnym zakresie i przeżywać niekończące się pasma frustracji wynikające z braku wyobraźni (lub wiedzy) osób tworzących strony internenowe, albo – niestety – muszą poprosić o pomoc osobę widzącą, co na dobrą sprawę nie ma sensu, ponieważ po pierwsze nie dajemy osobom niewidomym szansy na usamodzielninie się, a po drugie w takiej sytuacji dwie osoby „tracą” czas na zrozumienie budowy stron. Otóż widząca osoba musi zrozumieć, jak budowana jest strona „po niewidomemu”, tak żeby pomóc przeskoczyć różne bariery nie do pokonania dla osoby niewidomej. Osoba niewidoma musi też zrozumieć, jak budowany jest wizualny interfejs i kończy się to wszystko przysłowiową rozmową ze ślepym o kolorach. Niestety już na wstępie muszę zasygnalizować, że z punktu osoby niewidomej strona tego sklepu jest niemal zaminowana pułapkami.
Frisco.pl realizuje zakupy na terenie całego naszego kraju, gdzie dowozi towary spożywcze oraz z chemii gospodarczej, a na terenie Warszawy także produkty świeże. Dodatkowo w ofercie tego sklepu można znaleźć również artykuły specjalistyczne BIO oraz lokalne.
Załóżmy – w ramach tych testów – że po wejściu na powyższy adres internetowy, chcę zalogować się na swoje konto, następnie wykonać zakupy spożywcze, dodając do koszyka trzy wybrane przeze mnie produkty, a potem zamówić ich dostawę do mojego mieszkania.
Osoby niewidome czy słabowidzące 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. I tak litera „H” 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 całą stronę internetową po wejściu na adres tego sklepu spożywczego online. Poruszając się za pomocą klawiszy nawigacyjnych mojego programu udźwiękawiającego, zauważyłem, że występuje tam nieprawidłowa hierarchia nagłówków, ponieważ mamy najpierw nagłówek stopnia pierwszego, a potem od razu występują nagłówki poziomu czwartego i na samym końcu strony występuje stopień drugi nagłówka. Dlatego należałoby na tej witrynie internetowej poprawić kolejność nagłówków od „
” do „
”, ponieważ ułatwi to poruszanie się po zawartości witryny osobom niewidomym.
Następne błędy dostępności, które odnalazłem na stronie internetowej https://www.frisco.pl/, związane były 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ół, utrudni to 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: Kategorie sklepu, Kupony rabatowe, Promocje, Nowości, KDR, Lokalni dostawcy, Dla Biznesu.
Ten błąd dostępności można na tej witrynie internetowej naprawić na dwa różne sposoby. Po pierwsze poprzez wstawienie znacznika HTML „
” 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 „
” 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.
Ostatnią nieprawidłowością, jaką odnalazłem na głównej stronie sklepu internetowego Frisco, były dwa niezaetykietowane linki, które znajdowały się przed tekstem „Jak działamy?”. Ten błąd dostępności sprawia, że osoby niewidome, które przeglądają stronę za pomocą programu udźwiękawiającego, nie wiedzą, gdzie przeniesie ich kliknięcie enterem na takim niezaetykietowanym hiperłączu.
Prawidłowa formuła tradycyjnego linka w kodzie HTML powinna wyglądać następująco „Kontakt”. 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 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 podstawowym przejrzeniu głównej strony sklepu online, przeszedłem do logowania, klikając enterem na przycisku „Zaloguj”. Następnie klawiszem nawigacyjnym „F” szybko przeszedłem do pierwszego pola formularza „Adres e-mail”, które było prawidłowo opisane i zaetykietowane, i po wpisaniu odpowiednich danych bez problemu zalogowałem się do sklepu internetowego Frisco. Następnie znowu literą „F” przeszedłem do pierwszego pola edycyjnego na tej stronie, którym była wyszukiwarka produktów. Niestety, pod tym polem nigdzie nie znalazłem zaetykietowanego przycisku o nazwie, na przykład „Szukaj”, którego wciśnięcie spowodowałoby wyszukanie wpisanej nazwy artykułu. Oczywiście można rozpocząć wyszukiwanie produktów za pomocą wciśnięcia klawisza Enter po wpisaniu danej frazy, ale nie wszystkie osoby niewidome mogą o tym wiedzieć i lepszym pomysłem byłoby tutaj użycie powyżej opisanego przycisku. Niestety – po wyszukaniu konkretnej nazwy artykułu na stronie – nigdzie nie mogłem znaleźć wyników wyszukiwania za pomocą klawisza nawigacyjnego „H”, który służy do poruszania się po nagłówkach. Dodatkowo znowu nagłówki na stronie były 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 „
Wyniki wyszukiwania
Następne błędy dostępności, które odnalazłem na stronie internetowej https://www.frisco.pl/, związane były 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ół, utrudni to 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: Kategorie sklepu, Kupony rabatowe, Promocje, Nowości, KDR, Lokalni dostawcy, Dla Biznesu.
Ten błąd dostępności można na tej witrynie internetowej naprawić na dwa różne sposoby. Po pierwsze poprzez wstawienie znacznika HTML „
” 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 „
” 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.
Ostatnią nieprawidłowością, jaką odnalazłem na głównej stronie sklepu internetowego Frisco, były dwa niezaetykietowane linki, które znajdowały się przed tekstem „Jak działamy?”. Ten błąd dostępności sprawia, że osoby niewidome, które przeglądają stronę za pomocą programu udźwiękawiającego, nie wiedzą, gdzie przeniesie ich kliknięcie enterem na takim niezaetykietowanym hiperłączu.
Prawidłowa formuła tradycyjnego linka w kodzie HTML powinna wyglądać następująco „Kontakt”. 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 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 podstawowym przejrzeniu głównej strony sklepu online, przeszedłem do logowania, klikając enterem na przycisku „Zaloguj”. Następnie klawiszem nawigacyjnym „F” szybko przeszedłem do pierwszego pola formularza „Adres e-mail”, które było prawidłowo opisane i zaetykietowane, i po wpisaniu odpowiednich danych bez problemu zalogowałem się do sklepu internetowego Frisco. Następnie znowu literą „F” przeszedłem do pierwszego pola edycyjnego na tej stronie, którym była wyszukiwarka produktów. Niestety, pod tym polem nigdzie nie znalazłem zaetykietowanego przycisku o nazwie, na przykład „Szukaj”, którego wciśnięcie spowodowałoby wyszukanie wpisanej nazwy artykułu. Oczywiście można rozpocząć wyszukiwanie produktów za pomocą wciśnięcia klawisza Enter po wpisaniu danej frazy, ale nie wszystkie osoby niewidome mogą o tym wiedzieć i lepszym pomysłem byłoby tutaj użycie powyżej opisanego przycisku. Niestety – po wyszukaniu konkretnej nazwy artykułu na stronie – nigdzie nie mogłem znaleźć wyników wyszukiwania za pomocą klawisza nawigacyjnego „H”, który służy do poruszania się po nagłówkach. Dodatkowo znowu nagłówki na stronie były 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 „
Wyniki wyszukiwania
”. Po dłuższej chwili przeglądania zawartości strony strzałką w dół, odnalazłem wyniki wyszukiwania, gdzie doszedłem do linku „Filtruj wyniki” oraz obok umieszczonego tekstu „Sortuj”. Po wciśnięciu klawisza Enter na tekście „Sortuj”, pojawiły mi się pod spodem dodatkowe elementy, które również były 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. Udało mi się posortować produkty od najtańszego, jednak, niestety, przeglądanie wyszukanych artykułów było dość problemowe na tej witrynie internetowej. Po pierwsze każdy znaleziony i wyświetlony produkt, powinien znajdować się w nagłówku, na przykład „
”, co ułatwiłoby przeglądanie bazy produktów osobom niewidomym. Po drugie za nim doszedłem strzałką w dół do odnalezionych artykułów, to musiałem przejść przez dwa polecane produkty, co jeszcze bardziej wydłużyło mi przeglądanie zawartości na stronie internetowej https://www.frisco.pl/. Kiedy odnalazłem produkt, który chciałem zakupić, to pod nim znajdował się zwykły tekst „Do koszyka”, który po kliknięciu na niego klawiszem Enter pokazał mi pole edycji rozwijane, gdzie była wybrana cyfra 1. Po pierwsze tekst „Do koszyka” powinien być elementem klikalnym, czyli na przykład hiperłączem lub przyciskiem, a po drugie nie było nigdzie powiedziane, że pole edycji rozwijane służy do zmiany ilości sztuk wybranego artykułu, ponieważ było ono niezaetykietowane.
Po dodaniu już wszystkich interesujących mnie produktów zacząłem od początku strony szukać koszyka. Po chwili znalazłem element tekstowy „Mój koszyk”, który znowu powinien być elementem klikalnym, czyli najlepiej linkiem lub przyciskiem, aby osoba niewidoma wiedziała, że po jego aktywowaniu otworzy się koszyk. Po naciśnięciu klawisza Enter na powyższym tekście rozwinęła mi się pod spodem cała zawartość koszyka. Niestety, nigdzie nie było nagłówka z nazwą, na przykład „Koszyk”, który informowałby, że pod spodem znajdują się dodane wcześniej artykuły. Dodatkowo element służący do usuwania konkretnego produktu z koszyka był znowu umieszczony jako zwykły tekst, a nie jako hiperłącze lub przycisk. Po przejrzeniu produktów, które dodałem w swoich zakupach online, musiałem przejść jeszcze duży fragment strony przez polecane produkty, aby dokopać się do linku służącego do zamówienia dostawy zakupów. Na wyświetlonej stronie szybko odnalazłem dalszy ciąg zamawiania, ponieważ po skoczeniu raz przyciskiem szybkiej nawigacji „H” do nagłówka odnalazłem nazwę „Twoje zamówienie”, pod którą znajdowały się pozostałe informacje o zakupach online. Niestety – i w tym przypadku na witrynie występowała zła hierarchia nagłówków. Miałem też mały problem, aby przejść do następnego kroku, ponieważ po pierwszym aktywowaniu linku „Dalej” nic się nie wydarzyło, a gdy drugi raz nacisnąłem na nim klawisz Enter, to wtedy nad tym hiperłączem pojawiły się dodatkowe elementy zamawiania zakupów. 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. Niestety, z tego miejsca już w ogóle nie udało mi się przejść dalej, co ostatecznie pozbawiło mnie możliwości zamówienia zakupów online ze sklepu internetowego https://www.frisco.pl/.
Wystąpiło kilka błędnych elementów, które nie pozwoliły mi dokończyć zamawiania z programem udźwiękawiającym. Po pierwsze nie udało mi się wybrać daty dostawy, ponieważ zarówno dni miesiąca, jak i godziny były odczytywane przez mój czytnik ekranu jako zwykły tekst i aktywowanie ich klawiszem Enter nie dawało żadnych rezultatów. Po drugie znalazłem niedostępny przycisk „Zapisz rezerwację”, który nie wiem, dlaczego miał status niedostępny. Następnie musiałem wybrać sposób pakowania, gdzie znowu elementy, takie jak „Torby papierowe – 2,95 zł” i „Torby foliowe, do recyklingu – 4,50 zł”, były odczytywane jako zwykły tekst i klikanie na nich klawiszem Enter nie dawało żadnych rezultatów. W związku z powyższym wchodzenie w hiperłącze „Dalej” nie pozwalało mi przejść do następnego kroku i całkowicie uniemożliwiło mi zamówienie tych zakupów.
Podsumowując powyższy tekst i podstawową analizę dostępności sklepu internetowego Frisco, muszę powiedzieć, że bardzo ważna jest całkowita dostępność witryny internetowej dla osób niewidomych, które obsługują komputer za pomocą programu udźwiękawiającego. Bez tego ważnego elementu takie osoby nie są w stanie zamówić do końca zwykłych zakupów spożywczo-chemicznych, które są przecież konieczne do codziennego życia.
Oczywiście, ten artykuł nie pokazał wszystkich błędów dostępności, jakie występują w witrynie internetowej https://www.frisco.pl/, ponieważ jedynie profesjonalny audyt cyfrowy może wykazać pełną listę nieprawidłowości. Jednak mam nadzieję, że powyższy tekst dotrze do właścicieli sklepu internetowego Frisco i skłoni ich do podjęcia działań, które wyeliminują wszystkie błędy dostępności, co będzie korzystne zarówno dla sklepu, jak i dla osób z różnymi niepełnosprawnościami.
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 14:55:27
