Treść strony
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
