Najszybsza.pl

Jakiś czas temu trafiłem na aplikację Najszybsza.pl. Stwierdziłem, że stanowi dobrego kandydata do bliższego przyjrzenia się na WebKrytyku.

Najszybsza.pl to kreator stron napisanych w technologii AMP. Choć moja niechęć do AMP jest ogólnie znana, to jednak w tym artykule chciałbym się skupić przede wszystkim na dostępności i użyteczności kreatora, nie na tym, co wypluwa.

• Strona ma niezbyt widoczne style focusu, przez co często nie widać, jaki element jest aktualnie sfocusowany. Dodatkowo style dla niektórych elementów (np. przycisków rozwijających menu w nawigacji) są inne niż te domyślne, wprowadzając tym samym niespójność doświadczenia.

• Cała strona ma też spore problemy z obsługą z poziomu klawiatury. Można podać przykłady rzeczy, których po prostu nie da się zrobić, np.

  • nie da się zatwierdzić wyboru szablonu z galerii dostępnych szablonów, a spowodowane jest to faktem, że przycisk do wybrania szablonu nie jest przyciskiem;
  • nie da się zmienić kolejności sekcji na tworzonej stronie; to możliwe jest wyłącznie przy pomocy mechanizmu „przeciągnij i upuść” na liście sekcji lub przy pomocy niefocusowalnych przycisków na podglądzie strony;
  • nie da się użyć przycisków znajdujących się bezpośrednio na podglądzie aktualnie tworzonej strony.

  Oprocz tego pewne elementy mają zaimplementowaną niewłaściwą obsługę klawiatury, np.

  • w niektórych miejscach strony znajdują się zakładki, między którymi przełączać się można przy pomocy Tab, niemniej powinno się przełączać przy pomocy strzałek kierunkowych;
  • również same panele zawierające treść tabów powinny być focusowalne, podczas gdy w kreatorze nie są;
  • część linków wygląda na przyciski, co może powodować pewne zamieszanie;
  • niektórych okien dialogowych nie da się zamknąć przy pomocy klawisza Esc, co jest ogólnie uznanym standardem.

• Niektóre okienka dialogowe są ucięte (link do screenshota).

• Większość kreatora jest stworzona na podstawie pól formularzy. Niestety, etykiety tych pól są niepoprawnie przypięte (nie jest tutaj używany znacznik label), co sprawia, że pola te nie posiadają dostępnej nazwy. To oznacza, że m.in. w czasie korzystania ze strony przy pomocy czytnika ekranowego użytkownik nie usłyszy, do czego służą poszczególne pola. Szkoda tym bardziej, że same umiejscowienie etykiet wraz z dodatkowymi informacjami (np. opisem formatu danych) jest jak najbardziej zgodne z dobrymi praktykami. Chociaż już sam ich kontrast jest do poprawy.

• Nie tylko zresztą pola formularzy cierpią na brak dostępnych nazw. To samo spotkało większość przycisków w kreatorze, których etykiety są prezentowane w postaci dymków ukazujących się nad sfocusowanym przyciskiem. W takim przypadku najprostszym rozwiązaniem wydaje się połączenie tooltipa z przyciskiem przy pomocy [aria-labelledby] albo zduplikowanie etykiety w atrybucie [aria-label].

• Można się też zastanowić, czy część przycisków w kreatorze nie stanowi toolbarów, co powinno zostać odpowiednio oznaczone.

• Przyciski, które znajdują się wewnątrz samego podglądu strony, nie są focusowalne. Spowodowane jest to sposobem ich stworzenia:

  <a onclick="parent.clickDOM( 'duplicate-section-button-k5b3cny5')" class="btn btn-default section-toolbar-button" style="color: #ffffff; background-color: #008080;"> 
  	<svg class="svg-icon" role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> 
  		<path fill="currentColor" d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path> 
  	</svg> 
  </a>

  Linki, które nie mają atrybutu [href], są uznawane za placeholdery dla prawdziwych linków. Dlatego też nie są focusowalne. Najlepiej byłoby to zamienić po prostu na button.

• Focus jest źle przenoszony pomiędzy poszczególnymi elementami interfejsu kreatora, np. jeśli klikniemy przycisk usuwania sekcji i w pojawiającym się okienku dialogowym potwierdzimy naszą decyzję, nie zostaniemy przeniesieni z powrotem do listy sekcji. Zamiast tego focus zostanie wyrzucony poza aplikację.

Cały kreator jest optymalizowany pod obsługiwanie go myszką, nie udostępniając większości opcji użytkownikom posługującym się wyłącznie klawiaturą. Dodatkowo rozwiązania, takie jak brak używania label czy umieszczenie etykiet przycisków w tooltipach, skutecznie utrudniają używanie aplikacji użytkownikom czytników ekranowych. To sprawia, że cała aplikacja jest mocno niedostępna.

Dodatkowo odnoszę wrażenie obcowania z produktem dość archaicznym, poprzez jego używanie okien dialogowych niemal do wszystkiego. W dobie rozwiązań takich jak Gutenberg czy edytorów pokroju CKEditora 5, wyposażonego w „balonowy toolbar”, o wiele bardziej oczekiwałbym kreatora, który „doczepia się” do żywej strony i pozwala mi ją edytować „na żywca”. Tutaj stronę edytujemy w sterylnym, odizolowanym środowisku. Myślę, że tego typu rozwiązania powinny ewoluować właśnie w kierunku edytorów bardziej zintegrowanych z samymi edytowanymi stronami.