Artykuł dotyczy strony internetowej https://www.komputronik.pl/
Na moje biurko trafił tani laptop wyposażony w zaledwie 4GB pamięci RAM. Komputer już wyposażony w pamięci DDR4, więc nie jakiś całkiem stary model, ale 4GB RAM przy 6‑bitowym Windows 10, to trochę mało. To minimalna ilość wymagana przez system, a więc dają się wyraźnie odczuć braki pamięci w codziennym użytkowaniu. Niestety, mimo że to laptop 17,3 cala, to ta tania konstrukcja wyposażona była w jeden slot pamięci RAM. Ustaliliśmy z właścicielem, że wymieniamy pamięć na 8GB.
Wiedząc jaka pamięć jest mi potrzebna, postanowiłem sprawdzić ofertę jednej z najpopularniejszych sieci sklepów komputerowych w Polsce – Komputronik.
Otworzyłem więc stronę https://www.komputronik.pl/. Dla formalności wspomnę, że serwis już na wstępie oblewa test zgodności HTML i CSS według wytycznych organizacji W3C. Lista błędów HTML jest niekończąca się. Błędów CSS jest niewiele mniej. I to już dyskwalifikuje tę stronę pod kątem dostępności. Ale nie będę się poddawał. Potrzebuję przecież tej pamięci. Spójrzmy więc, co się dzieje dalej.
Najpierw przejrzałem stronę główną pod kątem nagłówków. Zaczyna się od nagłówka trzeciego poziomu „Okazje dnia”. To już jest błąd, bo brakuje nagłówków pierwszego i drugiego poziomu. Mamy tu zresztą kilka nagłówków trzeciego poziomu, a po nich nagle kilka nagłówków piątego poziomu. Kolejny błąd, ponieważ pominięty jest poziom czwarty. Zresztą poziomy tych nagłówków nie odzwierciedlają w żaden sposób struktury informacji zawartej na stronie. Ale cóż, walczę z serwisem dalej.
Teoretycznie mógłbym użyć łatwo dostępnej na początku strony wyszukiwarki, ale wpisanie typu pamięci 8GB DDR4 zwraca całą masę niepotrzebnych wyników w postaci laptopów i komputerów wyposażonych w taką ilość tego typu pamięci RAM. A mi chodzi o jedną kość pamięci. Spróbuję więc przefiltrować ofertę firmy Komputronik. Na stronie nie ma niestety żadnego nagłówka, który poinformowałby o możliwości wyszukiwania zaawansowanego. Trzeba skorzystać z menu sklepu i za jego pomocą odszukać dostępne w sklepie pamięci RAM.
Niestety menu na stronie Komputronik nie rozwija się za pomocą klawiatury. Kiedy już odnajdziemy pierwszą pozycję „Laptopy i komputery”, która jest elementem specyficznej listy ułożonej poziomo w postaci menu, przechodząc między kolejnymi elementami, słyszymy po nazwie danej pozycji „menu rozwijane”, ale ani naciśnięcie klawisza spacji, ani też Enter czy też strzałka w dół nie rozwijają tego menu. Menu to rozwija się po długim naciśnięciu spacji, ale skorzystanie z niego bez myszy jest niemożliwe. Zostawiam ten sposób, ponieważ po naciśnięciu menu „Sprzęt PC” Spacją lub Enterem, na stronie wyświetlają się kategorie do niego przypisane, a wśród nich „Części PC”.
Ale żeby nie było tak łatwo. O ile wyniki „naszego przeszukiwania” oferty znajdziemy szybko nagłówkiem pierwszego poziomu o nazwie „Sprzęt PC”, to potem znalezienie podkategorii „Części PC” 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 „Sprzęt PC”. Nie ma niestety sposobu na wybranie za pomocą klawiatury pozycji „Części PC”. O ile uda się rozwinąć to menu, potem nie można bez użycia myszy wybrać „Zobacz więcej” i następnie „Pamięci RAM”. Nie pomoże tu nawet za bardzo symulacja myszy, bo kursor przywołamy co najwyżej do łącza „Części PC”. Pomijam tu kombinowanie z pomocą dodatku Golden Cursor. Poszukam więc innego sposobu. Choć na tym etapie należałoby się poddać, bo serwis jest beznadziejny dla niewidomych.
Spróbujemy jednak użyć głównego menu strony, mimo że się ono nie rozwija bez myszy. Zasymulujemy mysz w NVDA i tak odnajdziemy pamięci RAM.
Wracam 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 „Sprzęt PC”. Skrótem Insert + numeryczny Slash przywołujemy kursor myszy do aktualnego obiektu nawigatora. Menu automatycznie rozwinie się. Teraz Tabulatorem odszukujemy „Części PC” i ponownie do tej pozycji skrótem Insert + numeryczny Slash przywołujemy kursor myszy. Znów ta pozycja automatycznie rozwinie się. Tabulatorem odszukujemy „Pamięci RAM” i naciskamy Spację lub Enter. Pod nagłówkiem pierwszego poziomu „Pamięci RAM” wyświetlone zostaną propozycje z tej kategorii.
Ja potrzebuję pamięci do laptopa. Konkretnie DDR4 o wielkości 8GB w jednej kości. Dlatego postaram się przefiltrować tę kategorię. Tabulatorem odnajduję „Pamięci do laptopów (SO-DIMM)” i naciskam Spację. Po chwili mogę znaleźć taki nagłówek pierwszego poziomu. Niestety sekcja filtrowania nie jest oznaczona nagłówkiem, więc cierpliwie strzałką w dół odnajduję 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 na przykład wielkości pamięci, czy też ilości modułów.
Cierpliwie naciskając strzałką w dół, odczytuję kolejne kryteria filtrowania. Cenę pozostawiamy pustą. Nie wybieram też producenta. Chcę kupić cokolwiek, co będzie się nadawało. W pewnym momencie napotkamy kryterium „Rodzaj pamięci”, a w nim dwie pozycje listy: SO-DIMM (do laptopów) i DIMM (do PC). 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 SO-DIMM (do laptopów), to odznaczymy tę pozycję i wrócimy się do początku wyszukiwania. A to, że to ma być pamięć do laptopa, 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 wybrałem pamięci do laptopów SO-DIMM, nie powinienem ruszać listy „Rodzaj pamięci”, tylko pójść dalej do listy „Typ”. Tu napotkamy DDR4, a ponieważ o tego typu pamięć mi chodzi, zaznaczam to pole Spacją. Choć znów brak informacji, że jest to pole wyboru i że jest niezaznaczone. Po zaznaczeniu opcji DDR4 strona odświeża się automatycznie, a my wracamy na jej początek i znów nawigujemy do nagłówka poziomu pierwszego „Pamięci do laptopów SO-DIMM”.
Teraz żmudnie strzałką w dół znajduję kolejne kryterium „Pojemność pojedynczego modułu”. W polu „od” wpisuję 8, bo potrzebuję pamięci 8GB. Po przejściu Tabulatorem do kolejnego pola „do” można znów wpisać 8, albo pozostawić je puste i przejść dalej Tabulatorem. Ponownie strona się odświeży. 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 „Pojemność pojedynczego modułu” musimy użyć Tabulatora, który wprowadzi nas w pole „od”, a tryb formularza włączy się automatycznie.
Kolejnym kryterium, które warto wybrać, to „Ilość modułów”. Znów czeka nas żmudne poszukiwanie tego kryterium. Jeśli po naciśnięciu cyfry 1 nie znajdujemy nagłówka pierwszego poziomu „Pamięci do laptopów SO-DIMM”, to poszukujemy go wstecz skrótem Shift + 1. Jak już zaznaczymy, że interesuje nas jeden moduł, otrzymamy wreszcie wyniki naszego filtrowania.
Generalnie brakuje tu, o czym już wspomniałem, 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.
Generalnie błędem jest też stosowanie dynamicznego filtrowania. Przynajmniej w takiej postaci, kiedy po każdym odświeżeniu strony musimy od nowa przeglądać filtry. Zdecydowanie lepszym rozwiązaniem byłoby zastosowanie na końcu, po wybraniu wszystkich kryteriów, przycisku „Filtruj”, który uruchomiłby filtrowanie na żądanie.
Niemniej jednak po ciężkich bojach możemy przejść do przeglądania oferty sklepu Komputronik z kategorii pamięci RAM do laptopa, pojedynczy moduł 8GB DDR4. Ł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.
A ja jeszcze chciałbym posortować wyniki od najtańszego produktu. I znów 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 naciskam spację i strzałką w dół wybieram „Po cenie rosnąco”. Po naciśnięciu klawisza Enter strona znów się odświeży, a wyniki wyszukiwania zostaną posortowane.
Znów cierpliwie szukamy linku o nazwie pamięci, który będzie gdzieś za linkami z kolejnymi numerami podstron, na których prezentowane są wyniki wyszukiwania. Możemy nieco przyśpieszyć przeglądanie strony, jeśli zastosujemy przechodzenie po listach. W NVDA jest to litera „L”. Ale zysk jest niewielki, bo niemal wszystko na stronie jest prezentowane w formie list. Łącznie z górnym menu. Kiedy odnajdziemy pierwszą ofertę, dalej lepiej stosować nawigację po linkach, albo cierpliwie czytać skrócony opis strzałkami w dół i w górę. Niedługo po nazwie znajdziemy cenę.
Załóżmy, że chcę kupić pierwszą pamięć. Mogę otworzyć link o nazwie tej pamięci lub przejść do linku „Zobacz więcej”. Otworzy się pełny opis produktu. Tu o dziwo nazwa produktu napisana jest w formie nagłówka pierwszego poziomu, więc szybko odnajdujemy ją literą „H” lub cyfrą 1. Możemy poczytać więcej o produkcie, otwierając link „Zobacz wszystkie cechy”, choć jeśli chodzi o pamięć do laptopa, to wszystkie parametry zdradza nazwa produktu.
Dlatego literą „B” odszukuję przycisk „Do koszyka” i naciskam Spację. Otwiera się 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 przedłużenia gwarancji na kupowany sprzęt, 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ą przedłużenia gwarancji, 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. Możemy wybrać: wysyłkę kurierem, Paczkomat InPost, DHL Parcel Shop i odbiór w salonie za 0 zł.
Po wyborze, na przykład wysyłki kurierem, 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, Za pobraniem, ApplePay, GooglePay, raty 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.
Przyznać muszę, że zakupy w sklepie Komputronik, to droga przez mękę. Strona nie jest kompletnie dostosowana do potrzeb niepełnosprawnych. Nie tylko osób niewidomych, ale i osób niepełnosprawnych ruchowo, bo serwis jest nieobsługiwany z klawiatury. W pewnym momencie musieliśmy posłużyć się symulacją myszy. Ponadto permanentnie brakuje nagłówków, a te które są, mają niewłaściwą strukturę. Za to z uwielbieniem nadużywane są listy. No i zamiast klasycznych pól wyboru w mechanizmie filtru są linki.
Teoretycznie ten artykuł mógłby zostać potraktowany jako instrukcja dokonywania zakupów w sklepie internetowym komputronik.pl, ale patrząc, ile karkołomnych kroków trzeba było wykonać, aby dotrzeć do złożenia zamówienia, lepiej chyba złożyć zamówienie telefonicznie. Tylko że nie o to chodzi. Serwis powinien być gruntownie przebudowany lub wręcz zmieniony na zupełnie nowy, dlatego że w obecnej formie spełnia zaledwie garstkę spośród 49 kryteriów WCAG 2.1, do których odwołuje się wprowadzona w życie z początkiem tego roku ustawa o dostępności. Choć przyznać trzeba, że jak na razie nie dotyczy ona sklepów internetowych, to jednak dobre praktyki i dbałość o klienta sugerowałyby podporządkować się jej wymogom.