Dostępność strony ebookpoint.pl - Piotr Komoda

Księgarnia ebookpoint.pl to najstarszy w Polsce sklep internetowy, w którym można zakupić ebooki. Jest to sklep należący do grupy wydawniczej Helion, największego w Polsce wydawcy książek o tematyce informatycznej. Ebookpoint.pl rozpoczął swoją działalność ponad dziesięć lat temu, stając się pionierem sprzedaży książek elektronicznych w w naszym kraju. Od tamtej pory oferta sklepu uległa znacznemu rozszerzeniu. W sprzedaży dostępne są ebooki wydane zarówno przez jedno z wydawnictw należących do grupy Helion, takich jak onepress (książki o tematyce biznesowej i ekonomicznej) czy sensus (psychologia oraz poradniki życiowe). W ofercie księgarni dostępne są też ebooki wydane przez zewnętrzne wydawnictwa. Księgarnia oferuje również audiobooki, a od niedawna także kursy wideo.

Poruszanie się po tej stronie za pomocą czytnika ekranu NVDA, jednego z najpopularniejszych wśród osób niewidomych, jest dość intuicyjne. Poszczególne kategorie książek dostępne są jako lista elementów, czyli można się do nich dostać za pomocą skrótu klawiaturowego „L”. Dzięki skrótowi klawiszowemu „D”, służącemu do przemieszczania się po punktach orientacyjnych, można dostać się do menu nawigacyjnego, gdzie możliwe jest wybranie rodzaju publikacji, np. ebooki, audiobooki, czy kursy wideo. Pewnym problemem jest zmieniający się banner reklamowy na stronie głównej, a konkretnie użycie w kodzie HTML atrybutu „aria-live=polite”. Teoretycznie jest to poprawne użycie tego atrybutu, ponieważ dynamicznie zmieniająca się zawartość strony powinna być przekazywana czytnikowi ekranu, ale w praktyce co 3-4 sekundy czytnik ekranu czyta treść banneru reklamowego, wcinając się w to, co aktualnie chcemy przeczytać na stronie. Po chwili zaczyna to irytować i przeszkadzać w zapoznawaniu się z zawartością strony.

Na stronie głównej są promowane różnego rodzaju książki, podzielone na kategorie, takie jak nowości, bestsellery czy przedsprzedaż. Pewnym problemem jest to, że przyciski naprzód i wstecz, pozwalające na przewinięcie książek z danej kategorii, mają ustawiony atrybut aria-label=”previous” oraz aria-label=”next”. Nie każdy niewidomy zna język angielski i zrozumie, za co odpowiadają te przyciski. Dodatkowym problemem jest to, że czytnik ekranu widzi tylko pierwszą książkę z listy. Pozostałe książki, a jest ich pięć w każdej kategorii, pozostają niedostępne dla osoby niewidomej. Warto również wspomnieć o tym, że pod okładką każdej z książek znajduje się informacja, w jakim formacie dany tytuł jest dostępny. Najczęściej jest to epub oraz mobi, ale zdarzają się również tytuły dostępne w formacie PDF. Spora liczba książek jest dostępna zarówno w postaci ebooka, jak i audiobooka. Ta informacja jest niedostępna dla osoby niewidomej. Trzeba kliknąć w dany tytuł, aż otworzy się strona z opisem wybranej książki, i wtedy dopiero osoba niewidoma jest w stanie zapoznać się z listą dostępnych do zakupienia formatów.

Na szczęście występujące na stronie głównej problemy nie są powielane na podstronach księgarni. 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 szybko się przedostać za pomocą wspomnianego wcześniej 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 „Encyklopedie, słowniki”, „Poradniki”, „Sport, fitness, diety” czy „Przewodniki i podróże”. Jest też oczywiście i „Informatyka”, Wszystkich kategorii jest łącznie dwadzieścia sześć, co tylko pokazuje, jak bardzo ewoluowała księgarnia wydawnictwa zajmującego się tematyką informatyczną.

Pod listą kategorii znajdują się linki do sklepów mobilnych, z których można pobrać aplikację ebookpoint.pl. Wewnątrz linków zostały umieszczone obrazki będące logotypami wspomnianych sklepów. Problem w tym, że znaczniki img odpowiadające za te obrazki nie zostały wyposażone w atrybut alt, przez co osoba niewidoma nie wie do którego sklepu prowadzi dany link. Powinno to wyglądać na przykład w ten sposób:

<a href=”https://play.google.com/store/apps/details?id=pl.helion.ebookpoint” target=”_blank”><img src=”https://static01.helion.com.pl/ebookpoint/img/aplikacja_mobilna/button_google.png” alt=”Pobierz z Google Play”></a>

Jest jeszcze jedna rzecz, o której moim zdaniem warto wspomnieć. Trudno to nazwać błędem dostępności, niemniej jednak warto aby programiści zdawali sobie z tego sprawę. W menu bocznym znajduje się link „Podaruj ebooka”. Przed tym linkiem prawdopodobnie wyświetla się ikonka przedstawiająca serce, a tak przynajmniej można wywnioskować z atrybutu class o wartości „icon-heart”. W kodzie css znajduje się reguła

.icon-heart::before {

content: „\0056”;

}

Kod 0056 to w tabeli znaków Unicode litera V i tak to interpretuje czytnik ekranu NVDA. A więc link jest czytany jako „VPodaruj ebooka”. Podobna sytuacja występuje na początku strony: link „Konto” jest czytany jako „IKonto”; link „Biblioteka” jest czytany jako „TBiblioteka”; link „Koszyk” jest czytany jako „PKoszyk”; link „Pomoc” jest czytany jako „Spomoc”; a link „Live Chat” jest czytany jako „Qlive Chat”.

W menu bocznym znajdują się jeszcze dwie listy elementów. Pierwsza pozwala między innymi zapoznać się z nowościami wydawniczymi, bestsellerami czy najlepiej ocenianymi książkami. Druga lista to spis najbardziej popularnych autorów.

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 Remigiusz, i naciśnięciu strzałki w dół, ciągle słyszymy „Remigiusz”, podczas gdy tak naprawdę przeskakujemy przez kilka tytułów autorstwa Remigiusza Mroza. Można to obejść przełączając się z trybu formularza czytnika ekranu w tryb przeglądania, niemniej jednak należałoby poprawić działanie wyszukiwarki, ponieważ tylko nieco bardziej zaawansowani użytkownicy czytnika ekranu będą wstanie domyślić się, jak obejść ten problem.

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 „Literatura”, na stronie wyświetla się lista książek danego rodzaju, domyślnie sortowana według popularności, ale można to zmienić za pomocą listy rozwijanej (tzw. combo). Po lewej znów widoczne jest menu boczne, w którym otrzymujemy dostęp do podkategorii, ale tym razem zostało ono osadzone jako punkt orientacyjny nawigacja. Co jest nieco dziwne, lista rozwijana odpowiedzialna za sortowanie nie znajduje się przed listą książek, jak to bywa w wielu sklepach, tylko przed menu bocznym. Innym problemem związanym z dostępnością jest lista kategorii, która jest dostępna z poziomu czytnika ekranu, mimo że dla osób widzących jest niewidoczna. Należało by tutaj użyć atrybutu aria-hidden=”true” dla znacznika <div class=”left-menu-container”>. Ewentualnie można byłoby użyć reguły display:none zamiast overflow:hidden w kodzie css.

Poniżej listy podkategorii znajduje się spis aktualnych promocji. Wbrew oczekiwaniom po kliknięciu w nazwę danej promocji wyświetlana lista książek nie zawęża się do tytułów objętych wybraną promocją. Konieczne jest kliknięcie przycisku „Filtruj”, który jest dość daleko oddalony od listy 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 „Filtruj” 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 zastosowaniu interesujących nas filtrów możemy przejść do przeglądania listy książek. Strona ebookpoint 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ł jest dostępny pod nagłówkiem poziomu trzeciego, a więc można łatwo przeskoczyć do pierwszego i każdego kolejnego tytułu naciskając cyfrę 3 w bloku alfanumerycznym klawiatury. W tym miejscu należy pochwalić twórców strony za użycie znacznika „ins” dla bieżącej (obniżonej) ceny oraz znacznika „del” dla poprzedniej ceny. Dzięki temu czytnik ekranu mówi „wstawione” w przypadku znacznika „ins” oraz „usunięte” w przypadku znacznika „del”. Inne sklepy powinny brać z tego przykład. Niestety tutaj również występuje problem z właściwością „content” w regule css. W efekcie czytnika ekranu wymawia np. „Link X wstawione 24,64 zł”. 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.), oceny i opinie klientów oraz spis treści. 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”), a oceny i opinie, szczegóły i spis treści pod nagłówkiem poziomu trzeciego. Jeśli opis nas zainteresuje i zechcemy dokonać zakupu, to warto wiedzieć że odpowiednie opcje są dostępne pod nagłówkiem poziomu trzeciego. Możemy dodać książkę do koszyka, kupić na prezent lub, wzorem Amazonu, dokonać zakupu jednym kliknięciem. Jeśli dany tytuł jest dostępny zarówno w postaci ebooka jak i audiobooka, to możemy przeskoczyć do drugiego formatu również za pomocą klawisza „3”. Należy jeszcze nacisnąć klawisz enter, aby aktywować opcje zakupu w danym formacie.

Zanim przejdziemy do opisu zamawiania i opłacania książki, warto wspomnieć o jednej ciekawej cesze tego sklepu. Przy każdym ebooku i audiobooku widnieje napis mówiący o ilości punktów. Jest to program lojalnościowy księgarni ebookpoint. Za każdą wydaną złotówkę otrzymuje się jeden punkt. Po zdobyciu 250 punktów otrzymuje się stały rabat na zakupy w wysokości 5 procent, a po zdobyciu 750 punktów otrzymuje się stały rabat w wysokości 10 procent.

Przed dodaniem książki do koszyka warto jest się zalogować, a jeśli nie mamy założonego konta – zarejestrować się. Strona logowania wyświetli się po kliknięciu na link „Konto”. Warto przy tym wspomnieć, że osoby widzące po najechaniu myszką na ten link widzą dodatkowe opcje pod postacią rozwijanego menu. Osoby niewidome, jako że korzystają tylko z klawiatury, nie mają do nich dostępu i jest to błąd dostępności, który zdecydowanie należałoby poprawić.

Po zalogowaniu się i dodaniu wybranego tytułu do koszyka zostajemy przeniesieni do samego koszyka, gdzie możemy zapoznać się z jego zawartością. Jeśli dodaliśmy więcej niż jedną książkę, zobaczymy tutaj je wszystkie. Tuż pod linkiem „Wróć do sklepu” znajduje się pasek postępu, który pokazuje na jakim etapie składania zamówienia obecnie jesteśmy. Osoba widząca rozpozna bieżący etap dzięki innemu kolorowi czcionki. Osoba niewidoma nie otrzymuje głosowego odpowiednika tej informacji. Można to naprawić za pomocą stosownego atrybutu WAI-ARIA, a konkretnie za pomocą aria-current o wartości „step”. Mogłoby to wyglądać w następujący sposób:

<div id=”page-title”>

<ul>

<li aria-current=”step”><h1>Twój koszyk</h1></li>

<li>Dane adresowe i płatność</li>

<li>Podsumowanie zamówienia</li>

</ul>

</div>

Produkty dodane do koszyka są prezentowane w postaci tabelki. W ostatniej kolumnie znajduje się ikonka usunięcia danego produktu z koszyka. Niestety, podobnie jak w przypadku logotypów sklepów mobilnych na stronie głównej, tak i tu wewnątrz linku został umieszczony obrazek bez atrybutu „alt”. Powinno to wyglądać w następujący sposób:

<td class=”delete-column „>

<a href=”/zakupy/delete.cgi?troya=e_1fzk_ebook”>

<img src=”https://static01.helion.com.pl/global/images/basket_delete.png” style=”max-width: 30px;” alt=”Usuń z koszyka”>

</a>

</td>

Strona koszyka jest też miejscem, w którym można wpisać kod rabatowy, jeśli takowy posiadamy. Są one czasami podawane na stronie z promocjami, najczęściej przy okazji świąt pokroju dzień kobiet, dzień matki, dzień ojca, a także z okazji różnego rodzaju targów książek.

Po przejrzeniu dodanych do koszyka produktów oraz ewentualnym wpisaniu kodu rabatowego należy nacisnąć przycisk „Zamawiam”, po czym zostajemy przeniesieni do drugiego etapu składania zamówienia, czyli do „Dane adresowe i płatność”.W tym miejscu wybieramy, czy kupujemy jako firma czy jako osoba prywatna, a następnie podać adres, jeśli go nie podaliśmy podczas rejestracji. Następnie przechodzimy do wyboru formy płatności. 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, a ponadto Apple Pay, Google Pay, MasterPass, Visa Checkout i PayPal. Drugą opcją jest płatność za pomocą karty płatniczej/kredytowej. Trzecią opcją jest płatność za pomocą Blika, a czwartą płatność na podstawie faktury pro-forma.

Po wybraniu formy płatności przechodzimy do pola o nazwie „Korespondencja dodatkowa”. To nic innego, jak możliwość zostawienia komentarza do zamówienia. Możemy się rozpisać na maksymalnie dwieście znaków. Następnie widzimy podsumowanie kwoty do zapłaty oraz przycisk „Zamawiam i płacę”, który jest nieaktywny. Aby go aktywować należy przejść nieco dalej i zaznaczyć pole wyboru odpowiedzialne za zaakceptowanie regulaminu oraz polityki prywatności. Gdy to zrobimy, możemy już nacisnąć wspomniany przycisk, po czym zostaniemy przeniesieni na stronę banku lub operatora płatności.

Po opłaceniu zamówienia zostajemy ponownie przeniesieni na stronę księgarni, tym razem do ostatniego etapu procesu składania zamówienia, czyli do „Podsumowanie zamówienia”. Jeśli nie było problemów w trakcie płatności otrzymamy komunikat, że płatność przebiegła pomyślnie i że dostęp do zakupionych książek elektronicznych otrzymamy po przejściu do biblioteki, czyli takiej naszej wirtualnej półki z książkami zakupionymi w tej księgarni. Na tej samej stronie ponownie widnieje też tabela z listą zakupionych tytułów wraz z ich poszczególnymi cenami oraz łączną kwotą zamówienia. Istnieje też możliwość pobrania potwierdzenia zamówienia. Generowany jest wtedy plik PDF z spisem w zamówionych książek. Wizualnie ma to postać tabelki, ale czytnik ekranu widzi to jako ciąg tekstu. Innymi słowy wygenerowany plik PDF ma poważne problemy z dostępnością. Z właściwości pliku wynika, że do jego wygenerowania użyto biblioteki o nazwie mPDF w wersji 5.0. Jest to biblioteka, która pozwala na stworzenie dostępnego pliku PDF, ale wymaga to pewnej konfiguracji. Wszystko zależy tutaj od dobrej woli twórców strony oraz ich chęci sprawienia, by strona stała się dostępna dla osób z niepełnosprawnością.

Gdy już sprawdzimy podsumowanie zamówienia możemy przejść do biblioteki, z poziomu której możliwe jest pobranie zakupionej książki. Na tej stronie ponownie czytnik ekranu czyta zawartość listy kategorii, mimo że nie jest ona widoczna na ekranie. Na szczęście możemy pominąć zarówno tę listę jak i całe menu nawigacyjne i przejść od razu do głównej treści za pomocą klawisza „1”. Przejdziemy wtedy do nagłówka poziomu pierwszego „Witaj w Twoim koncie”. 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. Tytuły domyślnie wyświetlają się w kolejności daty zakupu, ale można to zmienić za pomocą listy rozwijanej i posortować je według autora, tytułu, daty czytania lub daty pobrania. Można też zmienić ilość tytułów wyświetlanych jednocześnie na stronie. Domyślnie jest to dziesięć, ale może to być piętnaście, trzydzieści, pięćdziesiąt, a nawet sto pozycji. Problemem pojawia się, gdy chcemy przejść na drugą lub kolejną stronę naszej wirtualnej półki. Zawartość wirtualnej półki zmienia się dynamicznie bez przeładowywania całej strony, a więc można się nie zorientować, że coś się zmieniło, ale znacznie większym problemem jest to, że nie wiemy, na której stronie obecnie się znajdujemy. Osoba widząca otrzymuje informację w postaci innego koloru tła dla linku z bieżącym numerem strony. Osoba nie widoma nie otrzymuje dźwiękowego odpowiednika tej informacji. Przydałoby się zastosować tutaj atrybut WAI-ARIA aria-current=”page”.

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 kliknięciu w niego znów napotykamy na problem, ponieważ nie jesteśmy od razu przenoszeni do okienka dialogowego, które na przykład w przypadku ebooków pozwala na wybranie, w jakim formacie chcemy pobrać książkę (do wyboru zazwyczaj jest epub lub mobi). Wspomniane okienko wyświetla się przed nagłówkiem poziomu drugiego „Twoja biblioteka”. A więc można się tam dostać albo naciskając kombinację klawiszy „shift” + „2” na klawiaturze i idąc do góry strony za pomocą strzałki w górę, albo za pomocą kombinacji klawiszy „shift” + „B”, co pozwoli na przedostanie się do ostatniego przycisku w okienku. Niedostępny jest również przycisk zamykający okienko dialogowe. Czytnik ekranu wymawia w tym miejscu „klikalne”. Wisienką na torcie niedostępności jest fakt, że ze strony nie da się wylogować, ponieważ odpowiedni link znajduje się w menu „Konto”, do którego da się dostać jedynie za pomocą myszki.

Podsumowując, nie cała funkcjonalność strony internetowej ebookpoint.pl jest dostępna dla niewidomych i słabowidzących klientów i wymaga to poprawy ze strony programistów tworzących stronę. Poprawa dostępności strony z pewnością sprawi, że więcej osób będzie mogło dokonać na niej zakupu, a tym samym zwiększą się obroty sklepu. Jest to coś, na czym skorzystają zarówno właściciele sklepu, jak i niepełnosprawni klienci.

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 12:18:14