Dostępność strony Publio.pl - Piotr Komoda - Fundacja Polskich Niewidomych i Słabowidzących "Trakt"

Księgarnia internetowa Publio.pl należy do wydawnictwa Agora i jest zdecydowanie największą księgarnią z prasą elektroniczną w Polsce. Jest też jedną z najstarszych księgarni elektronicznych na naszym rynku. W swojej ofercie, oprócz prasy, mają też książki elektroniczne i audiobooki. Na pewno dużym plusem tej księgarni są częste promocje, dzięki którym możemy nabyć interesującą nas książkę w atrakcyjnej cenie. Nie zmienia to jednak faktu, że osoba niewidoma musi wiele się natrudzić, aby dokonać zakupu wybranego przez siebie kryminału lub powieści.

Jak możemy przeczytać na stronie tej księgarni, „Publio.pl jest liderem dystrybucji prasy. Nasz właściciel ma ponad 35-letnie doświadczenie w branży, które pozwoliło nam zbudować gęstą sieć sprzedaży i zaistnieć we wszystkich dostępnych kanałach dystrybucji. Jesteśmy odważni i wyraziści – wytrwale szukamy innowacyjnych rozwiązań, wyprzedzając oczekiwania naszych Klientów, a w kreowaniu wizerunku naszej marki staramy się budzić emocje, które pozytywnie zapadają w pamięć”.

Poniższy artykuł ma za zadanie przedstawić doświadczenia z korzystania ze strony internetowej tej księgarni z perspektywy osoby niewidomej, która do obsługi komputera wykorzystuje program udźwiękawiający.

Odwiedziny tej strony internetowej zaczniemy od zalogowania się na konto. Następnie dodamy do koszyka jeden wybrany produkt i spróbujemy pobrać go na nasz komputer. Na początku przejrzymy za pomocą programu udźwiękawiającego całą stronę główną tego sklepu, aby sprawdzić, jakie błędy dostępności są od razu widoczne po wejściu na tę witrynę. Na samej górze znajduje się niezaetykietowane hiperłącze, co powoduje, że osoby niewidome nie będą wiedziały, gdzie zostaną przekierowani po kliknięciu w ten link. Prawidłowy kod HTML dostępnego hiperłącza powinien wyglądać, na przykład, w następujący sposób: „<a href=”Index.html”>Strona główna</a>”. Natomiast jeśli nie możemy z jakiegoś powodu użyć powyższej zaproponowanej formuły, to innym dobrym sposobem opisania takich elementów jest użycie atrybutu „aria-label”. Zgodnie z opisem podanym na stronie https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label, atrybutu aria-label można używać do znaczników interaktywnych, czyli: a href, button, input oraz textarea, a także punktów orientacyjnych (landmark) oraz znaczników, które posiadają rolę widżetu.

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 Olga, i naciśnięciu strzałki w dół, ciągle słyszymy „Olga”, podczas gdy tak naprawdę przeskakujemy przez kilka tytułów autorstwa Olgi Tokarczuk. 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.

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 publio 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. 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 19,99 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. Możemy dodać książkę do koszyka, kupić na prezent lub dokonać zakupu jednym kliknięciem.

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 „Moje 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ć.

Jeśli chodzi o nagłówki, które występują na stronie głównej publio.pl to trzeba pochwalić ten element, ponieważ są one ułożone hierarchicznie „<h1> – <h6>”. Niestety, w nagłówku stopnia pierwszego „<h1></h1>” znajduje się znowu niezaetykietowane hiperłącze, które należałoby poprawić.

Po przejrzeniu strony głównej możemy spróbować odnaleźć książkę naszego ulubionego autora i dodać ją do koszyka. Możemy w tym celu skorzystać z wyszukiwarki aby odnaleźć dany produkt, sprawdzić jego cenę oraz opis i dodać go do naszego zakupowego koszyka. W tym celu możemy użyć litery „F” na klawiaturze, aby szybko przeskoczyć do pierwszego pola edycyjnego o nazwie „Wyszukaj słowo kluczowe, tytuł, autora”, które było poprawnie zaetykietowane. Niestety, pod spodem nie znalazłem żadnego przycisku o nazwie, na przykład, „Wyszukaj”, które po jego aktywowaniu pozwoliłoby na znalezienie wpisanej w powyższym polu danej frazy. Jednak po napisaniu „Olga Tokarczyk” i naciśnięciu klawisza Enter, strona na szczęście się przeładowuje i po jednokrotnym naciśnięciu litery „H”, szybko przeskakujemy do pierwszego nagłówka, gdzie mamy już wyświetloną liczbę znalezionych produktów.

Problemy pojawiają się w momencie, gdy chcemy zawęzić listę tytułów do określonego formatu, np. ebook lub audiobook. Nie da się, niestety, szybko przeskoczyć do określonego rodzaju filtru, ponieważ kategorie filtrów (Cena, Format, Wydawca itd.) nie zostały oznaczone w kodzie strony jako nagłówki. Kolejny problem dotyczy samych filtrów. Każdy filtr (np. Audiobook w kategorii „Format”) to pole wyboru, które można zaznaczyć. Jako osoby niewidome nie wiemy, że jest to pole wyboru ani czy jest ono zaznaczone czy odznaczone. Dzieje się tak, ponieważ kod strony został przygotowany w taki sposób, że informacja o polu wyboru jest ukrywana przed czytnikiem ekranu. Pole wyboru to taki kwadracik, który standardowo można zaznaczyć zarówno za pomocą myszki, jak i klawisza spacji. Dla wielu twórców stron internetowych owy kwadracik jest nieatrakcyjny wizualnie, dlatego ukrywają go za pomocą kodu CSS i zamiast niego wstawiają coś własnego. Za ukrycie domyślnego kwadracika odpowiada następująca reguła w kodzie CSS strony:

.checkbox-css input[type=”checkbox”] {

display: none;

}

Wiersz zakończony średnikiem to w kodzie CSS tak zwana deklaracja. Pokazana powyżej deklaracja przekazuje do przeglądarki internetowej informację, że pole wyboru ma nie być wyświetlane. A przynajmniej to standardowe pole wyboru, generowane przez znacznik input. Zamiast tego twórca strony internetowej umieścił w kodzie strony następujący wiersz:

<i></i>

A następnie sprawił za pomocą kodu CSS, że wygląda jak pole wyboru. Rzecz w tym, że znacznik „i” odpowiada w kodzie HTML za wyświetlanie tekstu kursywą. Tym samym ani przeglądarka internetowa, ani czytnik ekranu nie wiedzą, że jest to pole wyboru. Rozwiązaniem tego problemu byłaby zamiana deklaracji display: none; na opacity: 0;

Taki kod zadziała, ponieważ deklaracje „display: none” oraz „visibility: hidden” ukrywają dany fragment strony razem z przypisaną mu funkcjonalnością, a deklaracja „opacity: 0” zamiast ukrywać ustawia przezroczystość. W tym konkretnym przypadku jest to przezroczystość 100%.

Innym problemem związanym z filtrowaniem produktów jest to, że poszczególne kategorie filtrów można zwijać, a tym samym ukryć zawarte w danej kategorii filtry. Osoba widząca widzi przed nazwą filtra strzałkę, która sugeruje, że zawartość poniżej jest zwinięta lub rozwinięta. Osoba niewidoma niestety nie otrzymuje tej samej informacji. Jak więc można to naprawić? Nie ma w kodzie HTML atrybutu, który przekazywałby do przeglądarki internetowej informację o zwinięciu lub rozwinięciu jakiegoś elementu. Na szczęście można tu wykorzystać WAI-ARIA, czyli zestaw atrybutów, który powstał specjalnie po to, aby przekazywać dodatkowe informacje do czytników ekranu. Do przekazania stanu rozwijalnego elementu służy atrybut aria-expanded. Może on przyjąć jedną z dwóch wartości: „true”, czyli prawda, lub „false”, czyli fałsz. Należy jednak pamiętać, że nie wystarczy dodać samo aria-expanded=”true”, aby ten kod zadziałał. Specyfikacja WAI-ARIA dokładnie precyzuje, w jakich sytuacjach można użyć atrybutu aria-expanded. Dlatego w przypadku tych znaczników div konieczne będzie dodanie także atrybutu role=”button”.

Po przefiltrowaniu wyników znalezione tytuły 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 około dziesięciu wynikó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ą.

Przed listą znalezionych tytułów znajduje się lista rozwijana, która pozwala na zmianę sposobu sortowania wyników. Czytnik ekranu informuje, że jest ona w trybie „tylko do odczytu”, ale da się zmienić jej 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 sposób sortowania, a następnie zatwierdzić wybór klawiszem Enter. Jest to rzecz, której mniej zaawansowane osoby mogą się nie domyślić. Przed listą rozwijaną odnaleźć można jeszcze dwa tajemnicze przyciski. Nie zostały one bezpośrednio zaetykietowane, a więc po przeniesieniu punktu przeglądu na któryś z nich (na przykład za pomocą skrótu klawiszowego „B”) czytnik ekranu informuje jedynie, że znajduje się na elemencie, który jest przyciskiem. Dopiero naciśnięcie strzałki w dół powoduje, że czytnik ekranu odczytuje opis funkcjonalności danego przycisku.

Zapoznanie się z opisem i ceną danej książki również nie jest rzeczą łatwą, podobnie jak dodanie danego produktu do koszyka. Po drodze można natrafić na wiele nieopisanych przycisków, na które zdecydowanie powinni zwrócić uwagę programiści tworzący stronę.

Po dodaniu produktu do koszyka na ekranie pojawia się okienko dialogowe z dwoma przyciskami. Można przejść do koszyka albo kontynuować zakupy. Niestety osoba niewidoma nie ma świadomości pojawienia się tego okienka ponieważ nie jest na nie przenoszony fokus czytnika ekranu (służy do tego metoda focus() w języku javascript). Co gorsze, po kliknięciu w link „Koszyk” na górze strony nadal nie jesteśmy przenoszeni do koszyka. Pojawia się menu z listą dodanych do koszyka produktów, ich cen, tytułów, formatów i autorów. Dopiero na końcu tej wyliczanki pojawia się link „Dodaj do koszyka”. Ponadto znajduje się tam nieopisany przycisk, który odpowiada za zamknięcie menu. Należałoby tu użyć atrybutu aria-label. Mogłoby to wyglądać w następujący sposób:

Po przejściu do koszyka już na początku strony da się zaobserwować pewien problem. Jest on związany ze wskaźnikiem postępu procesu zamówienia. W ostatnich latach tego typu wskaźniki stały się bardzo popularne. Można je zaobserwować zarówno na stronach sklepów internetowych, gdzie wskazują postęp składania zamówienia, jak i na stronach banków, gdzie wskazują postęp aktualizacji danych, np. dowodu osobistego. Strona publio.pl jest przykładem tego pierwszego rodzaju strony. Wskaźnik postępu został tu podzielony na cztery kroki: pierwszy to „Koszyk”, drugi to „Logowanie lub rejestracja”, trzeci to „Płatność”, a ostatni, czwarty, to „Pobieranie produktów”. Bieżący krok został oznaczony za pomocą klasy active. Nie ma sensu przedstawianie tutaj kodu CSS za to odpowiedzialnego, ponieważ jest to kilka reguł. Istotne jest to, że bieżący krok jest wyróżniony innym kolorem czcionki, a ponieważ do oznaczania poszczególnych kroków używa się też cyfr, również i cyfra w bieżącym kroku ma inny kolor czcionki oraz inny kolor tła.

Niestety, osoby niewidome nie otrzymują dźwiękowego odpowiednika tej wizualnej informacji. Jak więc można to naprawić? Wśród atrybutów WAI-ARIA znajduje się coś odpowiedniego na tę okazję. Tym czymś jest atrybut aria-curent. Jak można przeczytać ze specyfikacji WAI-ARIA, atrybut aria-current może przyjąć jedną z pięciu właściwości: page (strona), step (krok), location (lokalizacja), date (data) oraz time (czas). Specyfikacja dopuszcza również użycie właściwości ”true” w sytuacji, gdy żadne z wymienionych wcześniej oznaczeń nie wydaje się być odpowiednie. Czytnik ekranu wymówi wtedy „bieżący”. Odpowiednią właściwością w tym konkretnym przypadku będzie oczywiście step, czyli krok. Czytnik ekranu wymówi w takiej sytuacji „bieżący krok”. Można to oznaczyć w kodzie HTML w przykładowy sposób:

</div>

<span basket-shop-step=””>Koszyk</span>

</div>

Kolejny problem jest związany z tym, jak dany produkt jest wyświetlany na liście produktów w koszyku. Jeśli dany produkt ma obniżoną cenę, stara cena jest przekreślona. Świadczy o tym następujący znacznik oraz reguła w kodzie CSS:

Kod HTML:

Reguła CSS:

.product-price .prices .normal[basket-shop-info] {

color: #8f8f8f;

text-decoration: line-through;

line-height: 1.57;

}

Deklaracja „text-decoration: line-through” oznacza właśnie przekreślenie. Problem w tym, że coś takiego nie jest przekazywane jako przekreślenie do czytnika ekranu. Jak to naprawić?

Jest jeden znacznik w kodzie HTML, który odpowiada za przekreślenie, a właściwie za usunięcie. Jest nim znacznik „del”. A więc należałoby zamienić znacznik div na znacznik del, tak aby kod HTML wyglądał w następujący sposób:

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

Po przejrzeniu dodanych produktów do koszyka, jeśli jesteśmy zalogowani, oraz ewentualnym wpisaniu kodu rabatowego należy nacisnąć przycisk „Zamawiam”, po czym zostajemy przeniesieni do trzeciego etapu składania zamówienia, czyli do „Płatność”. W tym miejscu wybieramy, czy kupujemy jako firma czy jako osoba prywatna, a następnie podajemy 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 opłaceniu zamówienia zostajemy ponownie przeniesieni na stronę księgarni, tym razem do ostatniego etapu procesu, czyli do „Pobieranie produktów”. 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.

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. 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.

Reasumując, proces zakupowy na stronie Publio.pl pozostawia wiele do życzenia i wymaga poprawek w kodzie strony, aby można było z niej komfortowo korzystać będąc osobą niewidomą.