Niewiele jest obecnie firm i instytucji, które nie korzystają z usług kurierskich. Także większość osób fizycznych w jakiś sposób zetknęła się z przesyłką kurierską. W świecie e-commerce, chcąc nie chcąc, staliśmy się zarówno odbiorcami, jak i zleceniodawcami przesyłek. Szczególnie dla osób niewidomych i niedowidzących jest to bardzo wygodna forma wysyłania i odbioru towaru, zwłaszcza gdy istnieje możliwość nadania przesyłki we własnym lokum. Dla sprawnej organizacji takich usług niezbędny jest oczywiście serwis internetowy. Dużą popularnością cieszą się zwłaszcza te, które skupiają w jednej witrynie ofertę wielu przewoźników. Takim właśnie serwisem, któremu teraz się przyjrzymy, jest portal Apaczka.pl.
Portal przeznaczony jest zarówno dla podmiotów gospodarczych, jak i osób fizycznych.
Budowę witryny oparto na popularnym Frameworku Bootstrap, dzięki czemu nie powinno być problemu z wyświetlaniem jej na różnych urządzeniach. Uwzględniono klientów korzystających z przeglądarek na dużych wyświetlaczach jak i smartfonach.
Na stronie początkowej serwisu spotykamy trzy punkty orientacyjne, do których przechodzimy literą D (NVDA). Standardowo, pierwszym z nich jest strefa nawigacji ze skąpą ilością odnośników: do zmiany języka, rejestracji i logowania. Może nas nieco zaskoczyć drugi z tych obszarów, w którym umieszczono pokaz slajdów z ofertą brookera. Faktem jest natomiast, że ów pokaz jest w łatwy sposób dostępny do nawigowania za pomocą przycisków „Next” i „Previous” oraz przycisków z numerami kolejnych slajdów. Jedyną sugestią w tym miejscu jest wprowadzenie polskich etykiet dla nich, czyli „Następny” i „Poprzedni”. Trzecim obszarem jest obszar zawierający regulaminową informację o cooki. Moim zdaniem bardziej logicznym zastosowaniem byłoby rozmieszczenie w opisanych punktach orientacyjnych bardziej newralgicznych treści, jak np. formularz nadania przesyłki, który rzeczywiście znajduje się na stronie początkowej, ale dostępny jest za pomocą innych skrótów klawiaturowych.
Niemiłą niespodzianką dla osób słabowidzących jest ponadto brak możliwości zmiany kolorystyki witryny i wielkości czcionki. Osoby te będą musiały posłużyć się funkcjami dostępnymi w ich własnym oprogramowaniu.
Do istotnych miejsc na stronie szybciej będzie można trafić poruszając się po nagłówkach. Twórcy usilnie sugerują klientowi, że pokaz slajdów jest najbardziej istotnym obiektem na stronie i być może dlatego został on umieszczony pod nagłówkiem pierwszego poziomu. Według mnie, burzy to nieco semantykę witryny. Większość pozostałych, istotnych treści odnajdziemy pod nagłówkami stopnia drugiego i kolejnych.
Jak we wszystkich tego rodzaju serwisach, aby móc zlecać usługi nadawania przesyłek, musimy najpierw dokonać rejestracji klienta. Proces ten, trzeba przyznać, przebiega łatwo i sprawnie. Sprowadza się do wybrania rodzaju konta: dla osoby fizycznej lub firmy, podania adresu e-mail i aktywowaniu profilu klienta nadesłanym w wiadomości łączem. Teraz musimy jeszcze podać niezbędne dane: imię i nazwisko oraz adres, zapisywany od razu w książce adresowej, jako domyślny dla nadawcy, a także ustanowić obowiązkowe hasło. W całym tym procesie nie spotkamy żadnych niespodzianek, z którymi nie poradziłby sobie czytnik ekranu.
Na profilu klienta, który ukaże się nam po zalogowaniu, znajdziemy elementy, które, niestety, utrudniają nam złożenie zlecenia. W formularzu, dostępnym już na stronie głównej, można dostać się do kolejnych etapów składania zlecenia, wykorzystując skróty nawigacji po nagłówkach. W tym przypadku są to nagłówki drugiego poziomu.
Pierwszy problem pojawia się przy wyborze kraju nadania przesyłki. Mamy tu do czynienia z trudną do przeglądania listą wyboru dostępnych krajów źródłowych. Znacznie łatwiejszym rozwiązaniem byłoby zastosowanie zwykłej listy rozwijanej (pola kombi). Problem ten dotyczy zarówno adresu nadania, jak i odbioru.
Kolejnym nieczytelnym elementem strony jest brak zaetykietowania przycisków dla zwiększania i zmniejszania liczby nadawanych paczek. W źródle strony element ten jest zakodowany w następujący sposób:
<div class=”formHeaderButton fal fa-plus-circle” id=”formItemShipmentPlus”></div>
Wstawienie w ten sposób elementu klikanego sprawia, że osoba niewidoma nie otrzymuje jasnej informacji od programu udźwiękawiającego o jego zastosowaniu. Dla poprawy czytelności należałoby wprowadzić do powyższego kodu atrybuty WAI-ARIA:
<div class=”formHeaderButton fal fa-plus-circle” id=”formItemShipmentPlus” aria-label=”Dodaj” role=”button”></div>
Nieczytelność elementów klikanych pojawia się jeszcze na kilku etapach zlecenia, między innymi w momencie wskazania miejsca i godziny nadania przesyłki. Ponadto, przy wyborze konkretnej firmy przewozowej wprawdzie zastosowano przyciski radiowe wskazujące wybór, lecz, niestety, zostały one ukryte pod grafiką. W efekcie czytnik ekranu nie jest w stanie poinformować osobę niewidomą, który przewoźnik został wskazany. Odpowiedzialnym za taki stan rzeczy jest deklaracja appearance w regule CSS:
.apaczkaForm input, .apaczkaForm button, .apaczkaForm select {
font-family: Lato, Verdana, Tahoma, arial, sans-serif;
font-size: 14px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Aby rozwiązać ten problem i uczynić przyciski opcji oraz pola wyboru widocznymi dla czytnika ekranu, należałoby usunąć z kodu następujące deklaracje:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
W dalszej części formularza, na etapie wprowadzania danych adresowych nadawcy i odbiorcy zastosowano w polach edycyjnych czytelne ich opisy, wykorzystując atrybut placeholder. Niestety, z jakiegoś powodu w innych polach formularza zrezygnowano z takiego opisu. Brakuje ich między innymi w polach określających gabaryty paczki, jej zawartość, wartość przesyłki czy kwotę pobrania.
Przykładowo:
<label class=”labelTop”>Zawartość przesyłki</label>
<input name=”content” type=”text” value=”” maxlength=”255″>
Czytelność tych elementów można w łatwy sposób poprawić, dodając dla pól edycyjnych atrybut placeholder, który identyfikuje pole podczas nawigacji tabulatorem. Mógłby on zatem wyglądać w ten sposób:
<label class=”labelTop”>Zawartość przesyłki</label>
<input name=”content” type=”text” value=”” maxlength=”255″ placeholder=”Zawartość”>
W polach o ograniczonej ilości znaków, między innymi określających wymiary paczki, czyli tam, gdzie etykieta nie zmieści się wewnątrz pola, można powiązać znaczniki „label” ze znacznikami „input” za pomocą atrybutu „for” jak niżej:
<div class=”formItem”>
<label class=”labelTop” for=”formItemShipment0Dimension1″>Długość</label>
<div class=”formItemAddons”>
<input name=”shipment.0.dimension1″ type=”text” id=”formItemShipment0Dimension1″ class=”formItemNarrowInput”>
<label>Cm</label>
</div>
Pozytywnym akcentem podczas wypełniania formularza nadania przesyłki jest natomiast zasygnalizowanie błędnie wypełnionych pól. Przy próbie zatwierdzenia zamówienia pojawia się okno dialogowe z informacją o konieczności uzupełnienia danych, a kursor zostanie ustawiony we właściwym miejscu, dzięki czemu nie musimy własnoręcznie poszukiwać wymaganego pola.
Podsumowując, poprawienie dostępności strony dla osób niewidomych wymagałoby przede wszystkim zwiększenia czytelności elementów klikanych w formularzach oraz zaimplementowania rozwiązań dla osób niedowidzących, umożliwiającego manipulowanie kolorystyką strony i wielkością czcionki. Czytelność i nawigację z pomocą czytnika ekranu można w prosty sposób poprawić, stosując dla elementów atrybuty WAI-ARIA. Oczywiście, strona internetowa w pierwszej kolejności przyciąga uwagę szatą graficzną, czemu nie można się dziwić, skoro funkcjonujemy w kulturze silnie uzależnionej od obrazów. Jednak atrybuty WAI-ARIA nie burzą układu graficznego i kolorystycznego witryny, a skutecznie ułatwiają korzystanie z niej osobom z różnymi schorzeniami wzrokowymi.