Najszybsza.pl – ponowne odwiedziny

webkrytyk.pl 2 lat temu

Dzisiaj powrócimy do aplikacji Najszybsza.pl, ponieważ ostatnio pojawiła się jej nowa wersja.

Po zalogowaniu się trafiam do panelu użytkownika. Mogę tutaj dostać się do stworzonych przeze mnie stron albo zobaczyć szczegóły mojego konta. Co jednak interesujące, gdy odświeżam stronę, zostaję wylogowany. Wygląda na to, iż aplikacja przechowuje identyfikator sesji użytkownika bezpośrednio w kodzie, nie zapisując go choćby do localStorage. To sprawia, iż gdy użytkownik odświeży stronę albo spróbuje otworzyć dowolny link w nowej karcie (np. przez naciśnięcie go środkowym przyciskiem myszy), trafi na stronę logowania. Bardzo dziwne rozwiązanie, które psuje mój sposób korzystania z aplikacji internetowych. Chciałem sobie otworzyć listę stworzonych przez siebie stron w osobnej karcie, mając panel otwarty w innej, ale, niestety, nie mogę.

Jak już jesteśmy przy formularzu logowania: istnieją tak naprawdę dwa. Pierwszy dostępny jest przez link na stronie głównej i ma poprawnie przypięte etykiety do pól. Drugi jest niejako częścią aplikacji panelu użytkownika i ma już niepoprawnie przypięte etykiety. Co więcej, nie posiada też absolutnie żadnej walidacji. jeżeli wpisze się niepoprawne dane, użytkownik nie dostanie o tym żadnej informacji zwrotnej – nie pojawi się żaden komunikat o błędzie, nic nie wskazuje choćby na to, żeby formularz się wysłał. Jednak jak najbardziej się wysyła Ajaksem w tle. Po prostu brakuje wyświetlania błędów użytkownikowi.

Sam panel użytkownika ma z kolei problemy z zarządzaniem focusem. Dobrze widać to w nawigacji po lewej, którą otworzyć można przyciskiem w lewym górnym rogu. Kliknięcie w przycisk otwiera menu nawigacyjne, ale focus nie jest przenoszony na pierwszy element w tym menu. Z kolei, gdy zamknie się menu, focus nie jest przenoszony z powrotem na przycisk otwierająćy menu. Zamiast tego nie jest przypinany do żadnego konkretnego elementu. Podobny problem jest przy przejściu na dowolną podstronę panelu. Z racji tego, iż treść jest podmieniana przy pomocy JS-a, focus nie jest przenoszony w sensowne miejsce (np. na początek strony czy do pierwszego nagłówka).

Wróćmy jeszcze na chwilę do przycisku otwierającego nawigację. Jego kod wygląda następująco:

Nie jest to zatem przycisk a link. Dodatkowo, nie posiada on etykiety tekstowej. W przypadku, gdy wewnątrz linku jedynym elementem jest grafika SVG, etykietę najłatwiej dodać przy pomocy tekstu widocznego wyłącznie dla czytników ekranowych lub atrybutu [aria-label].

Sama nawigacja również działa niepoprawnie z czytnikiem ekranowym. Wszystkie linki są oznaczone jako elementy przełaczające stan samego menu. W tym celu jest ponownie użyty kod wykorzystywany przy „przycisku” do otwierania menu. Ale to powoduje, iż wszystkie linki w menu mają dodany atrybut [aria-expanded]. Z perspektywy użytkownika te linki prowadzą na podstrony, nie służą do pokazywania i ukrywania menu – to jedynie skutek uboczny ich działania. Dlatego też nie powinny mieć atrybutu [aria-expanded]. Zwłaszcza, iż w tym kontekście nie ma on sensu – dlaczego bowiem podstrona Domeny miałaby być rozwinięta? Użytkownik czytnika ekranowego mógłby ostatecznie uznać to za oznaczenie aktualnej podstrony (chociaż od tego jest atrybut [aria-current]), ale wówczas bardzo gwałtownie zorientowałby się, iż wszystkie linki są oznaczone jako rozwinięte. Dla użytkownika ta informacja po prostu nie ma sensu w tym kontekście.

Kolejnym problemem z panelem użytkownika są etykiety linkóœ. Nie licząc nawigacji, na stronie jest pięć linków. Każdy z nich ma dokładnie tę samą etykietę, POKAŻ. To sprawia, iż użytkownik czytnika ekranowego nie będzie mógl odróżnić linków od siebie, kiedy będzie próbował między nimi przeskakiwać przy pomocy rotora. Narzędzie to umożliwia wyświetlenie wszystkich elementów danego typu na stronie i przeskakiwanie między nimi. W teorii użytkownik może przeskoczyć do danego linku i następnie spróbować zrozumieć jego przeznaczenie dzięki kontekstowi, w którym się znajduje (co, swoją drogą, opisuje WCAG w kryterium 2.4.4). To jednak wymaga tego, by ten kontekst faktycznie był i do tego był pomocny. Tutaj tak nie jest. Cztery z tych linków znajdują się wewnątrz tabeli, która nie posiada żadnych nagłówków dla kolumn czy wierszy. Przez to użytkownik czytnika ekranowego musi przenawigować przez całą tabelę, żeby dowiedzieć się, do czego ostatecznie dany link prowadzi. Pomijam już tutaj sam fakt konieczności sprawdzania każdego linku osobno, co samo w sobie nie jest najbardziej przyjaznym użytkownikowi rozwiązaniem.

Zostawmy już jednak panel użytkownika i przejdźmy do samego kreatora stron! Ten, niestety, nie jest praktycznie w ogóle używalny z poziomu samej klawiatury. Zacznijmy od tego, iż praktycznie wszystkie przyciski na stronie są wykonane przy pomocy elementu a. To sprawia, iż część z nich zachowuje się jak linki, np. reagują na Enter, ale już nie na spację. Dodatkowo, poszczególnych elementów strony nie da się edytować przy pomocy klawiatury. Choć każdy element na stronie (nagłówek, boks, poszczególne obrazki) jest focusowalny, to nic się nie dzieje ani po naciśnięciu spacji, ani Entera. Elementy te reagują wyłącznie na kliknięcie myszą. Wówczas otwiera się okienko pozwalające na ich modyfikację, ale focus nie jest do niego przerzucany, co dodatkowo utrudnia używanie kreatora wyłącznie z poziomu klawiatury. Focus jest też źle zarządzany w innych miejscach. Żadne okienko dialogowe nie jest focusowane po otwarciu, a fakt, iż znajdują się one na końcu kodu, sprawia, iż użytkownik posługujący się klawiaturą jest zmuszony przetabować przez całą stronę, by się do nich dostać. Odnoszę wręcz wrażenie, iż nowa wersja jest gorsza od starej pod względem obsługi klawiaturą i ogólnej dostępności.

Uważam, iż druga wersja kreatora Najszybsza.pl to dość spory krok w tył, nie tylko w zakresie dostępności całego rozwiązania. Sama aplikacja wydaje się być niedokończona i wygląda raczej jak prototyp rozwiązania a nie pełnoprawny produkt. I choć nie sądziłem, iż Najszybsza.pl zajmie miejsce w niszy dostępnych kreatorów stron, jestem mimo wszystko rozczarowany, w jaką stronę to poszło.

Idź do oryginalnego materiału