Księgarnia internetowa Virtualo jest jedną z pierwwszych księgarnii z ebookami, które pojawiły się w naszym kraju. Ma w swojej ofercie książki, audiobooki oraz prasę. Kilka lat temu przejęli Bibliotekę Akustyczną, jednego z czołowych wydawców audiobooków w Polsce. Virtualo należy do grupy Empik, który odpowiada za ponad połowę ich zysków.
Poruszanie się po stronie internetowej tej księgarnii jest w miarę intuicyjne, jednak pojawiają się na niej pewne elementy, które nie zostały dostosowane do czytnika ekranu. Menu nawigacyjne strony zostało zbudowane w postaci zakładek. Pierwsza z tych zakładek jest podlinkowana, a więc można do niej dotrzeć, nawigując po linkach (klawisz „K”). Można też za pomocą klawisza „E” przemieścić punkt przeglądu do pierwszego pola edycyjnego wyszukiwarki.
Zawartość pozostałych zakładek jest domyślnie ukryta. Dotarcie do znajdujących się tam informacji wymaga ustawienia na nich punktu przeglądu, a następnie przełączenia czytnika ekranu w tryb edycji za pomocą skrótu klawiszowego Insert + Spacja i naciśnięcia którejś ze strzałek, po czym wyjścia z trybu edycji. Jest to rzecz, której należy się domyślić i mniej doświadczeni użytkownicy mogą sobie z tym nie poradzić. Zawartość zakładki powinna wyświetlać się po naciśnięciu na niej klawisza Enter. Na stronie simplyaccessible znajduje się dobry przykład dostępnego interfejsu zakładek.
Ostatnie pole edycji w tym formularzu dotyczy wyboru kategorii i tutaj również pojawia się problem z focusem. Nie ma tutaj co prawda przycisku do otwarcia okienka wyboru kategorii, ale po wejściu w samo pole edycji i tak okienko pojawia się na końcu strony. Nie jest to duży problem, ponieważ kategorię można wpisać ręcznie, ale warto zwrócić uwagę na fakt, że okienko wyboru kategorii posiada kilka błędów dostępności. W okienku znajdują się dwie tabelki: jedna zawiera kategorie, a druga rodzaje wydawnictwa (ebook, audiobook, książka papierowa). Pierwszy problem polega na tym, że tabelki nie zawierają wiersza nagłówkowego (znacznik thead). Jego użycie spowodowałoby, że czytnik ekranu wymawiałby na przykład „kryminał, ebook”. Drugi problem polega na tym, że poszczególne kategorie oraz formaty nie są linkami jak w okienku wyboru kategorii, przez co nie da się po nich poruszać za pomocą skrótu klawiszowego „K” ani za pomocą Tabulatora.
Po wypełnieniu wszystkich pól formularza należy kliknąć przycisk „Szukaj”. Przycisk ten można aktywować klawiszem Enter lub Spacją.
Znalezione tytuły znajdują się za nagłówkiem drugiego poziomu i są dostępne w formie listy. Najłatwiej więc do niej dotrzeć, posługując się skrótem nagłówka (klawisz „H”), a następnie użyć skrótu listy elementów (klawisz „L”). Na stronie wyświetlanych jest kilka następujących po sobie tytułów, ale za pomocą czytnika ekranu NVDA można zapoznać się tylko z pierwszym z nich. Jest to spowodowane użyciem atrybutu WAI-ARIA role o wartości „listbox”, która przekazuje do czytnika ekranu informację, że mamy tu do czynienia z listą rozwijaną, co oczywiście nie jest prawdą. Na końcu każdej pozycji znajdują się dwa linki. Pierwszy z nich nie jest w żaden sposób opisany.
Przed listą znalezionych tytułów znajdują się pola edycyjne pozwalające na zmianę kategorii i formatu. Czytnik ekranu informuje, że są one w trybie „tylko do odczytu”, ale da się zmienić ich wartość. W tym celu należy ustawić punkt przeglądu na danym polu, przejść w tryb edycji czytnika ekranu, wybrać przy użyciu strzałek kategorię lub format, a następnie zatwierdzić wybór klawiszem Enter. Jest to rzecz, której mniej zaawansowane osoby mogą się nie domyślić. Warto również wspomnieć o tym, że tabelka wyboru kategorii nie jest poprawnie czytana przez czytnik ekranu. Poruszając się strzałkami w górę i w dół, kategorie są wymawiane, ale już przy ruchach w lewo i prawo NVDA wymawia „pusta”.
O ile wyniki naszego przeszukiwania oferty znajdziemy szybko przechodząc do nagłówka pierwszego poziomu o nazwie „Znalezione tytuły”, to potem znalezienie podkategorii „ebooki” wymaga kilkunastu ruchów Tabulatorem lub literą „K” (pracując z NVDA), aby znaleźć to łącze. Po drodze mijamy łącza powtarzające górne menu strony, od którego to menu zaczęliśmy, wybierając „ebooki”. Nie ma niestety sposobu na wybranie za pomocą klawiatury pozycji „ebooki”. O ile uda się rozwinąć to menu, potem nie można bez użycia myszy wybrać „Zobacz więcej”. Nie pomoże tu nawet za bardzo symulacja myszy, bo kursor przywołamy co najwyżej do łącza „ebooki”.
Spróbujemy jednak użyć głównego menu strony, mimo że się ono nie rozwija bez myszy. Zasymulujemy mysz w NVDA i tak odnajdziemy poszukiwaną treść. Wracamy na początek strony skrótem Ctrl + Home i Tabulatorem lub literą „K”, albo też elementem listy, czyli literą „I” odszukujemy pozycję menu o nazwie „ebooki”. Skrótem Insert + numeryczny Slash przywołujemy kursor myszy do aktualnego obiektu nawigatora. Menu automatycznie rozwinie się. Teraz Tabulatorem odszukujemy „ebooki” i ponownie do tej pozycji skrótem Insert + numeryczny Slash przywołujemy kursor myszy. Znów ta pozycja automatycznie rozwinie się. Tabulatorem odszukujemy „kryminały” i naciskamy Spację lub Enter. Pod nagłówkiem pierwszego poziomu „Kryminały” wyświetlone zostaną propozycje z tej kategorii. Postarajmy się teraz przefiltrować tę kategorię. Za pomocą tabulatora spróbujmy odnaleźć potrzebne nam filtry. Po chwili możemy znaleźć taki nagłówek pierwszego poziomu. Niestety sekcja filtrowania nie jest oznaczona nagłówkiem, więc cierpliwie strzałką w dół odnajdujemy kolejne filtry. Przy tym nie zalecam użycia Tabulatora, bo pominiemy etykietę pola danego filtru i zupełnie nie zorientujemy się, co mamy wpisać. Pierwsze pole edycyjne to „Cena od”. Ale po kilkukrotnym naciśnięciu klawisza Tabulator, usłyszymy tylko „od”. I nie wiadomo, czy chodzi o określenie ceny czy o coś zupełnie innego.
Cierpliwie naciskając strzałką w dół możemy odczytać kolejne kryteria filtrowania. Cenę pozostawiamy pustą. W końcu szukamy czegokolwiek, co nam się spodoba. Nie słyszymy niestety informacji, że pierwsza pozycja już jest zaznaczona. Zresztą są to pola wyboru, a my słyszymy, że to klikalne elementy listy. Jeśli naciśniemy Spację na „Najczęściej kupowane”, to odznaczymy tę pozycję i wrócimy się do początku wyszukiwania. A to, że to ma być Kryminał, już wybraliśmy. Niestety, z powodu braku informacji zwrotnej od NVDA, filtrowanie musimy robić niejako po omacku, pamiętając, co już wcześniej wybraliśmy.
Ponieważ na wstępie wybraliśmy Kryminały, nie powinniśmy ruszać listy „Kategoria”, tylko pójść dalej. Po chwili natrafimy na znajomy element i możemy zaznaczyć to pole Spacją. Choć znów brak informacji, że jest to pole wyboru i że jest niezaznaczone. Po zaznaczeniu tego pola strona odświeża się automatycznie, a my wracamy na jej początek i znów nawigujemy do nagłówka poziomu pierwszego. Musimy pamiętać o tym, że poruszając się strzałką w dół, kiedy trafimy na pole edycyjne, aby rozpocząć pisanie, trzeba ręcznie przełączyć się na tryb formularza. Ewentualnie po odnalezieniu nazwy kryterium musimy użyć Tabulatora, który wprowadzi nas w pole „od”, a tryb formularza włączy się automatycznie. Jeśli po naciśnięciu cyfry 1 nie znajdujemy nagłówka pierwszego poziomu, to poszukujemy go wstecz skrótem Shift + 1. Jak już zaznaczymy, że interesuje nas ebook, otrzymamy wreszcie wyniki naszego filtrowania.
Generalnie brakuje tu nagłówka tytułującego obszar filtrowania, ale i każde kolejne kryterium powinno być nazwane nagłówkiem o poziom niższym. To znacznie ułatwiłoby wybieranie kryteriów filtrowania. Inna sprawa, że wszystkie pola opcji, które zaznaczamy spacją, powinny być polami opcji, a nie linkami. Wówczas program odczytu ekranu informowałby nas o tym, czy takie pole jest już zaznaczone czy też nie. A tak pozostaje nam śledzenie i zapamiętywanie tego, co już wybraliśmy, kiedy strzałką w dół poszukujemy kolejnego kryterium filtrowania, a po drodze odczytywane są już wybrane kryteria. Przy tym każde z tych kryteriów z osobna możemy usuwać. Ale to chyba jedyny plus mechanizmu filtrowania. Niemniej jednak po ciężkich bojach możemy przejść do przeglądania oferty ebooków sklepu Virtualo.pl z kategorii Kryminał. Łatwiej niestety nie będzie. Kolejne nazwy produktów są napisane w formie linków otwierających ich pełne opisy. Aby więc odnaleźć pierwszy proponowany produkt, musimy niemal kilkadziesiąt razy nacisnąć Tabulator lub literę „K”, która przeniesie nas do kolejnego linku. Nie ma żadnego nagłówka typu wyniki wyszukiwania, który przybliżyłby nas do celu.
Gdybyśmy jeszcze chcieli posortować wyniki od najtańszego produktu. to znów czeka nas gimnastyka. Kiedy znajdziemy link w postaci cyfry 1, która obrazuje pierwszą stronę wyników wyszukiwania, musimy strzałką w górę odnaleźć etykietę „Sortuj”, a potem strzałką w dół pójść dalej do rozwijanego pola listy z wartością „Domyślnie”. Jest to pole klikalne, więc naciskamy spację i strzałką w dół wybieramy „Po cenie rosnąco”. Po naciśnięciu klawisza Enter strona znów się odświeży, a wyniki wyszukiwania zostaną posortowane.
Załóżmy, że chcemy kupić pierwszą część cyklu z Martinem Servazem. Możemy otworzyć link o nazwie tej postaci lub przejść do dowolnej książki z serii i kliknąć „Zobacz więcej”. Otworzy się pełny opis książki. Tu o dziwo nazwa książki napisana jest w formie nagłówka pierwszego poziomu, więc szybko odnajdujemy ją literą „H” lub cyfrą 1. Możemy poczytać więcej o tej książce, otwierając link „Zobacz pełen opis”, choć jeśli chodzi o kolejność książki w cyklu, to wszystkie potrzebne informacje znajdują się na początku opisu.
Po znalezieniu pierwszej książki z cyklu zapewne zechcemy dokonać zakupu. Dlatego literą „B” odszukujemy przycisk „Do koszyka” i naciskamy Spację. Otworzy się wtedy okno dialogowe, o którym osoba niewidoma nie ma zielonego pojęcia. Jeśli będziemy nawigować w tradycyjny sposób Tabulatorem, literą „K” po linkach lub strzałką w dół, to dalej będziemy czytać stronę produktu. Ale jeśli przejdziemy na początek strony Ctrl + Home i potem zaczniemy naciskać strzałkę w dół, to trafimy na okno dialogowe z promocjami. Na końcu znajdziemy przycisk, którym podziękujemy za ofertę dodatkową i otworzy się koszyk. Ale tu znów musimy przejść na początek strony skrótem Ctrl + Home. To okienko też odczytujemy cierpliwie strzałką w dół, aż trafimy na link „Idź do koszyka”. Będziemy na pierwszym etapie składania zamówienia.
Teraz ekran przesłania dodatkowe okno dialogowe, które tym razem znajduje się na końcu w hierarchii nawigacji. To propozycja zakupu kilku książek w pakiecie. o której w zasadzie niewidomy nie dowie się, ponieważ, czytając stronę od początku, najpierw trafi na link „Przejdź dalej”, który przenosi do kolejnego kroku składania zamówienia. A w zasadzie pierwsze użycie tego linku wyłącza tylko okno dialogowe z ofertą zakupu pakietu, a dopiero kolejne naciśnięcie „Przejdź dalej” otwiera kolejny etap. Kolejne okno dialogowe przysłaniające stronę prosi o zalogowanie się, ale też daje możliwość zakupu bez logowania. I znów okno to jest na początku, w hierarchii nawigacji. Przechodzimy na początek Ctrl + Home i strzałką w dół czytamy po kolei. Załóżmy, że nie logujemy się. Naciskamy Spację na linku „Kup bez logowania”. Otworzy się kolejna strona z wyborem sposobu realizacji. Ten etap jest dość czytelny, choć nie wiedzieć czemu, pierwszy na tej stronie nagłówek „Wybierz sposób realizacji” jest napisany nagłówkiem czwartego poziomu.
Mimo że jest to zakup cyfrowy i nic nie nie będzie wysyłane pocztą lub kurierem i tak musimy podać nasze dane adresowe. Tabulatorem przechodzimy do formularza adresowego. Mamy tu na początku dwa przyciski: osoba prywatna i firma. Dalej idąc Tabulatorem, odwiedzamy kolejne pola formularza. Po wpisaniu prawidłowego kodu pocztowego, miejscowość zostanie wpisana automatycznie. Domyślnie zaznaczone jest pole, że zgadzamy się na fakturę elektroniczną. Wcześniej trzeba wpisać adres e-mail. Dane do faktury można jednym kliknięciem skopiować z uprzednio wypełnionych danych adresowych. Na tej samej podstronie, po danych teleadresowych i danych do faktury, znajdziemy dobrze odczytywane różne sposoby płatności do wyboru. Wśród nich będą: Przelewy24.pl (płatność elektroniczna), BLIK, ApplePay, GooglePay, faktura pro-forma itp. Jak już wybierzemy sposób płatności, zaznaczając go Spacją, przechodzimy dalej do pola edycyjnego, gdzie możemy wpisać uwagi do zamówienia. Z pola edycyjnego „Uwagi” wychodzimy dalej Tabulatorem. Trafimy na klikalne pole wyboru, ale nie wiemy, co to jest. Strzałką w górę odczytamy nagłówek czwartego poziomu „Zaakceptuj warunki zamówienia”. To pole wyboru musimy zaznaczyć, poświadczając tym samym, że zapoznaliśmy się i akceptujemy regulamin sklepu. Stosowną treść znajdziemy strzałką w dół pod tym polem wyboru. Jeśli zaakceptujemy regulamin, to możemy przejść do przycisku „Zamawiam” z obowiązkiem zapłaty. Naciskając Spację lub Enter, możemy wreszcie kupić nasz upragniony produkt.
Jak widać po powyższym opisie, strona księgarni internetowej Virtualo.pl pozostawia sporo do życzenia jeśli chodzi o dostępność dla osób niepełnosprawnych. Używanie filtrów to droga przez mękę, nie brakuje tu pól wyboru, które nie są oznakowane jako pola wyboru i trzeba się domyślać, czy dane pole jest zaznaczone czy też odznaczone. Hierarchia nagłówków nie została w żaden sposób zachowana, a w dodatku pojawiają się okienka dialogowe, o których osoba niewidoma nie ma zielonego pojęcia. Ponadto strona posiada setki błędów w kodzie HTML i CSS, co widać po przepuszczeniu jej przez walidator W3C. Serwis powinien przejść solidny audyt dostępności a następnie zostać przebudowany zgodnie z zaleceniami, dlatego że w obecnej formie spełnia zaledwie garstkę kryteriów WCAG 2.1. I mimo że wymóg bycia zgodnym z WCAG nie dotyczy jeszcze podmiotów prywatnych, to sklep robi sobie ogromną szkodę zamykając się na miliony niepełnosprawnych klientów. Wbrew powszechnej opinii zapewnienie dostępności nie jest skomplikowane. Na stronie w wielu miejscach powtarzają się te same błędy/ To oznacza, że raz opracowaną poprawkę można nanieść w wielu miejscach, co znacznie skraca czas wdrożenia/ Na stronach W3C oraz Mozilla Developer Network nieodpłatnie dostępna jest cała dokumentacja dla technik i atrybutów, których używa się w celu poprawy dostępności. Można też zatrudnić osobę niewidomą na umowę zlecenie na kilka godzin i przyjrzeć się, jak korzysta ze strony. To pozwoli zorientować się, które problemy powinny być rozwiązane z pierwszej kolejności.