Dostępność strony woblink.com – Piotr Komoda

Dostępność strony woblink.com – Piotr Komoda

Księgarnia internetowa Woblink powstała jako inicjatywa Roberta Chojnackiego, redaktora naczelnego Wydawnictwa Otwarte. W swojej ofercie posiada zarówno ebooki jak i audiobooki. Księgarnię tą wyróżnia spośród innych to, że posiada na wyłączność książki wydawnictw Znak oraz Otwarte. W dniu dzisiejszym przyjrzymy się działaniu ich strony internetowej aby ocenić jej dostępność dla osób niewidomych i słabowidzących

Na początek załóżmy, że chcielibyśmy najpierw zalogować się na tej witrynie, a potem dodać do koszyka dwie wybrane przez nas książki i pobrać je następnie na dysk naszego komputera. Osoby 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. Są to m.in. litera „H”, która 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ątek przejrzyjmy z programem udźwiękawiającym stronę główną woblink.com i spróbujmy sprawdzić, jakie błędy dostępności uda nam się tam odnaleźć. Po pierwsze w wielu miejscach znajdują się niezaetykietowane przyciski oraz hiperłącza, które powinny być odpowiednio opisane, tak aby osoba niewidoma wiedziała, gdzie się przeniesie po naciśnięciu entera na danym elemencie. W przypadku linków, prawidłowy kod zaetykietowanego łącza w języku HTML wygląda następująco „<a href=”index.html”>Strona główna</a>”. Jeśli nie możemy użyć takiej formuły, to innym dobrym sposobem opisania takich elementów jest użycie atrybutu „aria-label”. Po drugie na całej stronie nigdzie nie odnajdziemy nagłówków, które są kluczowym elementem nawigacyjnym dla osób niewidomych, które przeglądają witryny internetowe za pomocą czytnika ekranu. Każdy portal powinien zawierać hierarchicznie ułożone nagłówki od stopnia 1 do stopnia 6, które w kodzie HTML zapisuje się w następujący sposób „<h1></h1>”, „<h2></h2>”, „<h3></h3>”, „<h4></h4>”, „<h5></h5>”, „<h6></h6>”. Następny problem, na który możemy natrafić podczas przeglądania strony internetowej tej księgarni, to wypisane jedna pod drugim kategorie książek które posiada ona w swojej ofercie. Po pierwsze dla osoby niewidomej przejście strzałką w dół po tych wszystkich kategoriach jest bardzo długotrwałe i przez to, że brakuje na tej witrynie nagłówków, nie można szybko tego przeskoczyć. Po drugie przed listą kategorii wypisane są linki z literami alfabetu ABCDEFGHIJKLMNOPQRSTUVWXYZ, które – niestety – nie przenoszą kursora po kliknięciu w którąś z liter klawiszem Enter, co jeszcze bardziej wydłuża nawigacje na tej witrynie. Najlepszym sposobem byłoby stworzenie oddzielnego hiperłącza na przykład o nazwie „Kategorie książek”, gdzie te wszystkie kategorie byłyby wymienione. Następnym problemem, jaki możemy napotkać podczas robienia zakupów online, jest brak gdziekolwiek linku, przycisku czy pól formularzy, pozwalających na zalogowanie się do księgarni na swoje konto klienta. W związku z tym, spróbujmy do tych zakupów podejść trochę w innej kolejności i zacznijmy od wyszukania nazwy konkretnej książki, mając nadzieję, że kiedy dodamy dany artykuł do koszyka, to wtedy pojawi nam się funkcja logowania. Niestety, nawet i w tym zadaniu napotkamy kolejny błąd dostępności. Przeszukując stronę za pomocą klawiszy szybkiej nawigacji, nigdzie nie znajdziemy pola edycyjnego, w które moglibyśmy wpisać wyszukiwaną frazę. Dopiero po przejrzeniu całej zawartości witryny odnajdziemy zwykły tekst „Szukaj tytułów”, który po wciśnięciu klawisza Enter otwiera dodatkowe okno, gdzie mamy możliwość wpisać wyszukiwaną książkę.

Na szczęście występujące na stronie głównej problemy nie znajdują odzwierciedlenia na podstronach dotyczących poszczególnych kategorii książek. Aby się do nich dostać, należy przejść do menu bocznego. Dla osób niewidomych, korzystających z czytnika ekranu, jest ono dostępne jako uzupełniający punkt orientacyjny i można do niego się przedostać za pomocą skrótu klawiszowego „D”. Ponieważ jest to lista elementów, można się do niej dostać również za pomocą klawisza „L”. Znajduje się w tym miejscu spis kategorii książek. Są tam na przykład „Kryminał i sensacja”, „Reportaż” czy „Poradniki”. Wszystkich kategorii jest łącznie jedenaście.

W menu księgarni znajdują się też inne listy elementów. Możemy tam znaleźć między innymi książki zwyciężające w różnego rodzaju plebiscytach oraz te, które wygrywają literackie nagrody. Znajdziemy tam również top 100 ebooków z ubiegłego roku oraz ebooki, które księgarnia woblink posiada na wyłączność.

Jeśli znamy tytuł książki, którą chcemy zakupić albo mamy ulubionego autora i chcemy zapoznać się z listą jego/jej książek, możemy skorzystać z wyszukiwarki. Niestety nie jest ona za bardzo dostępna. Została wyposażona w mechanizm podpowiedzi, ale po wpisaniu jakiejś frazy, na przykład Chmielarz, i naciśnięciu strzałki w dół, ciągle słyszymy „Chmielarz”, zamiast poszczególnych tytułów tego autora. Jest to akurat często spotykany błąd, występujący na stronach różnych księgarni, co nie zmienia faktu, że powoduje to utrudnienia dla osób niepełnosprawnych korzystających z programów wspomagających obsługę komputera i zdecydowanie należałoby to poprawić.

Drugim sposobem na znalezienie interesującej nas książki jest skorzystanie z listy kategorii. Sprawdzi się to szczególnie jeśli nie mamy ulubionego autora, ale mamy ulubiony gatunek, albo na przykład szukamy poradnika. Po wybraniu którejś z kategorii, na przykład „Kryminał i sensacja”, na stronie wyświetla się lista książek danego rodzaju. W dalszym ciągu mamy dostęp do menu bocznego, poprzez które dostaniemy się do podkategorii.

Poniżej listy podkategorii znajduje się spis aktualnych promocji. Za listą promocji znajduje się spis dostępnych formatów (możemy na przykład wybrać czy interesują nas tytuły w formacie epub/mobi, czy może wolimy audiobooka w formacie mp3), następnie możemy wybrać wydawcę, język publikacji i zakres cenowy. Przycisk filtrowania znajduje się za polami edycyjnymi wyboru widełek cenowych. Na szczęście można szybciej dostać się do tego przycisku za pomocą skrótu klawiszowego „B”.

Po przefiltrowaniu tytułów możemy przejść do przeglądania listy dostępnych książek. Strona woblink nie posiada głównego punktu orientacyjnego, a więc nie da się dostać do głównej zawartości strony za pomocą skrótu klawiszowego „D”. Na szczęście każdy tytuł ma przypisany nagłówek, a więc można łatwo do niego przeskoczyć naciskając literę „H” na klawiaturze. Klikając w cenę możemy od razu zakupić wybraną książkę, a po kliknięciu w nagłówek z tytułem zostajemy przeniesieni do strony ze szczegółowymi informacjami na jej temat. Najczęściej znajdują się tam takie informacje jak opis, szczegóły książki (np. numer ISBN, data wydania, rozmiar pliku itp.). Najczęściej można też pobrać darmowy fragment. Tytuł książki dostępny jest pod nagłówkiem poziomu pierwszego, a więc można łatwo pominąć nawigację strony i przejść do informacji o książce za pomocą klawisza „1” na klawiaturze. Opis dostępny jest pod nagłówkiem poziomu drugiego (klawisz „2”). Możemy dodać książkę do koszyka lub wpisać kod rabatowy i uzyskać zniżkę przed zakupem. Jeśli dany tytuł jest dostępny zarówno w postaci ebooka jak i audiobooka, to zostaniemy o tym poinformowani w sekcji „Dostępne formaty”.

Przed dodaniem książki do koszyka warto jest się zalogować, a jeśli nie mamy założonego konta – zarejestrować się. Po zalogowaniu się i dodaniu wybranego tytułu do koszyka, przycisk „do koszyka zmienia swoją nazwę i od teraz nazywa się „W koszyku”. Jeśli dodaliśmy więcej niż jedną książkę, w koszyku będziemy mogli zobaczyć je wszystkie.

Po przejrzeniu dodanych do koszyka produktów oraz ewentualnym wpisaniu kodu rabatowego należy nacisnąć przycisk „Dostawa i Płatność”, po czym zostajemy przeniesieni do drugiego etapu składania zamówienia, czyli do miejsca, w którym podajemy dane adresowe i wybieramy sposób płatności. Mimo że jest to zakup cyfrowy i nic 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. Pierwszą z opcji płatności jest szybki przelew. Dostępne są tu szybkie płatności z chyba każdego działającego w Polsce banku. Istnieje również możliwość płatności za pomocą karty płatniczej lub kredytowej, jak również możliwość płatności za pomocą Blika.

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 i płacę”, który stanie się wtedy aktywny Następnie zostaniemy przeniesieni na stronę banku lub operatora płatności.

Po opłaceniu zamówienia zostajemy ponownie przeniesieni na stronę księgarni. Na tej samej stronie ponownie widnieje spis zakupionych tytułów wraz z ich poszczególnymi cenami oraz łączną kwotą zamówienia. Po przejrzeniu podsumowania możemy przejść do biblioteki, z poziomu której możliwe jest pobranie zakupionej książki. Możemy pominąć menu nawigacyjne i przejść od razu do głównej treści za pomocą klawisza „1”. Przejdziemy wtedy do nagłówka poziomu pierwszego „Witaj imię i nazwisko”. Zaraz za tym napisem otrzymujemy dostęp do kolejnego menu nawigacyjnego, który tym razem pozwala na ograniczenie tytułów wyświetlanych na wirtualnej półce np. tylko do ebooków lub tylko do audiobooków. Sama wirtualna półka dostępna jest pod nagłówkiem poziomu drugiego, a poszczególne tytuły pod nagłówkami poziomu trzeciego. Na stronie jest też dostępna wyszukiwarka, która pozwala na znalezienie konkretnego tytułu na naszej półce. Można też zmienić ilość tytułów wyświetlanych jednocześnie na stronie. Domyślnie jest to dziesięć, ale tę ilość można zwiększyć do kilkudziesięciu tytułów. Zawartość wirtualnej półki wyświetlana jest 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 zakładce „ebooki” znajdują się pola edycyjne, przy użyciu których możliwe jest wybranie formatu docelowego książki, jak również wyszukanie interesującej nas pozycji po tytule lub nazwisku autora. Po wpisaniu kilku pierwszych liter pod spodem pojawia się lista pasujących wyników wyszukiwania, do której można przejść za pomocą strzałki w dół. Po wpisaniu każdej litery jesteśmy informowani o liczbie znalezionych wyników oraz o tym, że po liście można poruszać się za pomocą strzałek. Występuje tutaj pewien problem z dostępnością, ponieważ niewidomy użytkownik nie jest informowany, że jest to pole edycyjne z autouzupełnianiem. Warto byłoby uzupełnić te pole tekstowe o atrybut „aria-autocomplete” o wartości „list”. Dzięki temu jeszcze przed rozpoczęciem wpisywania użytkownicy otrzymaliby informację, że to pole podpowiada wyniki. Po wynikach wyszukiwania można poruszać się strzałkami, a wyboru tytułu z listy można dokonać przy użyciu klawisza Enter.

Lista wyników zmienia się dynamicznie bez przeładowywania całej strony, a więc można się nie zorientować, że coś się zmieniło. Po odnalezieniu zakupionej książki przechodzimy strzałką w dół i szukamy linku „pobierz”. Po drodze natrafimy na pewien niedostępny fragment strony. Jest to sześć elementów czytanych jako „klikalne”. Są to gwiazdki służące do oceny zakupionej książki w skali od 1 do 6. Za nimi znajduje się już szukany przez nas link. Po jego kliknięciu otwiera się okienko dające możliwość pobrania zakupionej książki. Aby przejść do tego okienka z użyciem czytnika ekranu, należy przejść na koniec okienka przeglądu (czyli de facto na koniec strony) za pomocą skrótu klawiszowego Ctrl + End. Nie jest to prawidłowe zachowanie, ponieważ użytkownik powinien zostać automatycznie przeniesiony do okienka pobierania. Można tego dokonać za pomocą funkcji Focus() w języku JavaScript. Po wspomnianym okienku można poruszać się, nawigując po linkach. Jako ciekawostkę można podać, że istnieje niekonsekwencja w nazewnictwie linków wyboru formatu. Pobranie książki w formacie epub zostało oznaczone jako link, a w formacie mobi jako przycisk.

Reasumując, wygodne zrobienie zakupów na stronie woblink.com jest praktycznie niemożliwe do wykonania przez osobę niewidomą. Strona wymaga wielu poprawek, aby stała się dostępna i jest to zdecydowanie coś, czemu powinni przyjrzeć się programiści.

Artykuł dofinansowany ze środków PFRON w ramach projektu "Internetowa Platforma Nagłaśniania Problemów z Dostępnością Cyfrową"