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.

3 myśli w temacie “Najszybsza.pl”

  1. Zawsze lubię czytać Twoje recenzje. Natomiast niepokoi mnie Twoje oczekiwanie oparcia tego typu edytora o edytory wizualne. Grozi to tym, co mamy teraz w edytorach biurkowych, czyli zanikiem semantyki. Gutenberg co prawda dba o semantykę, jak może, ale użytkownik potrafi. Może takie oddzielenie edytora od wyglądu nie jest takie głupie.

    1. Może mam nieco skrzywioną perspektywę z powodu pracy nad CKEditorem. Niemniej tworząc go, dbaliśmy właśnie o to, aby generowany HTML był jak najbardziej semantyczny (czego wyrazem jest projekt Editor Recommendations). Dlatego uważam, że jest możliwe stworzenie edytora wizualnego, który generuje ładny, semantyczny kod. Nie jest to łatwe, ale możliwe. Wydaje się, że, paradoksalnie, najszybciej można to osiągnąć odbierając użytkownikowi możliwość ręcznego modyfikowania kodu HTML i wymuszając używanie jedynie tych funkcji, które udostępnia sam edytor. W taki sposób można w pełni kontrolować generowany kod. Jeśli doda się do tego narzędzia bezpośrednio zintegrowane z edytorem i sprawdzające w czasie rzeczywistym, czy nie występują problemy z dostępnością (np. brak opisu alternatywnego dla obrazków), to efekt powinien być zadowalający. I w tę stronę szedłbym, w rozwijanie całego ekosystemu tego typu narzędzi wokół edytorów wizualnych. A że użytkownik potrafi – cóż, na to to chyba nigdy nie znajdzie się rozwiązania.

  2. A może lepiej dać prosty edytor, na przykład Markdown i podgląd wyniku bez możliwości ingerencji. Ludzie po wielu latach odkrywają, że w Word są jakieś style. A ponieważ nigdy im nie były potrzebne, to uznają, że są zbędne. O wiele za dużo ludzi tworzy treści.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.