Dostępność strony delikatesów K&M – Paweł Miąsik

Artykuł dotyczy strony internetowej https://www.kmdelikatesy.pl/

Jest to firma działająca na lokalnym stołecznym rynku posiadająca kilka sklepów w Warszawie. W jej ofercie znajdują się przede wszystkim artykuły spożywcze zarówno podstawowe i lokalne, jak i zagraniczne, często trudno gdzie indziej dostępne. Oprócz tego w asortymencie znajdują się artykuły drogeryjne i chemii gospodarczej, jak i drobne AGD. Sklep oferuje możliwość robienia zakupów za pośrednictwem strony internetowej z możliwością odbioru zamówionych towarów w wybranym sklepie lub z dostawą do domu transportem firmy.

Z punktu niewidomego klienta strona tego sklepu posiada poważne wady, wynikające z błędów dostępności, uniemożliwiające lub poważnie utrudniające przejście całego procesu zrobienia zakupów. Jednym z najbardziej poważnych problemów jest niewłaściwe pod względem zasad dostępności wykonanie części strony z wyborem daty i godziny dostawy. Sprawia ono, że poprawny wybór z terminarza daty dostawy praktycznie nie jest możliwy 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 robienie zakupów, błędów związanych z dostępnością.

Na przykład, po dodaniu wybranego produktu do koszyka użytkownik czytnika ekranu w żaden sposób nie jest o tym informowany. Żeby stwierdzić, czy dany produkt w nim się znajduje, trzeba najpierw dostać się do koszyka i zapoznać się z jego zawartością.

Problem z opcjami wyboru terminu dostawy powinien być rozwiązany, najogólniej mówiąc, w ten sposób, że odpowiednia informacja o dacie i godzinie dostawy 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, empirycznie przez nas przetestowanym, jest dopisanie w HTML znacznika „label” i ukrycie tekstu przy pomocy CSS poleceniem „opacity” ustawionym na 0.

Odpowiedni fragment kodu wygląda następująco:

<div class=”radio” id=”uniform-edit-hours-25″><span class=”checked”>

  <label for=”edit-hours-25″ style=”opacity:0″>Dostawa 2021-10-15 09:00-11:00</label><input type=”radio” id=”edit-hours-25″ name=”hours” value=”2021-10-15#09:00-11:00″ class=”form-radio enabled-delivery uniform-processed”></span></div>

Podobny efekt mógłby być zapewne uzyskany także przy zastosowaniu do tego celu znaczników ARIA. Dzięki zastosowaniu ARIA można również uzyskać generowanie komunikatów informujących o dodaniu produktu do koszyka.

Przykładowy fragment kodu wygląda następująco:

<div role-„alert” aria-live=”assertive” class=”alert-box”>Dodano produkt do koszyka</div>

Podsumowując, strona tego sklepu posiada istotne błędy dostępności, uniemożliwiające albo utrudniające i czyniące mniej użytecznymi różne etapy procesu składania zamówienia. 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.

Błąd: Nie znaleziono pliku licznika!Szukano w Link do folderu liczników

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:53:09