MateuszWtorek.pl

Dawno nie było recenzji żadnej strony, zatem dzisiaj przyjrzymy się stronie MateuszWtorek.pl.

Wygląd i działanie

Pierwsze, co rzuca się w oczy, to loader. Jestem sporym przeciwnikiem tego typu rozwiązań na stronach internetowych, które nie są aplikacjami. W zdecydowanej większości przypadków loadery są dla stron całkowicie niepotrzebne. O wiele lepiej zainwestować w optymalizację wydajności przy pomocy choćby takich technik jak wzorzec PRPL. Zwłaszcza, że 30 punktów w PageSpeed to jednak mało. W takim wypadku loader jedynie maskuje problem, a nie rozwiązuje go.

Kolejnym rzucającym się elementem jest animacja przesuwających się gwiazdozbiorów po prawej stronie. Gwiazdozbiory te poruszają się przy ruchu myszą. Niestety, w żaden sposób nie reagują na ustawienia użytkownika w zakresie ograniczenia ruchu.

A jak już przy ruchu jesteśmy, to wydaje mi się, że przewijanie również jest „ulepszone”, co jest mocno frustrujące. Nie jestem w stanie przewinąć przy pomocy kółka myszki do miejsca, do którego chcę, bo całość „pływa”. Niektóre rzeczy mimo wszystko warto zostawić przeglądarce.

W formularzu kontaktowym brakuje etykiet dla poszczególnych pól. Co prawda jest [placeholder], ale on nie zastępuje etykiety. Choćby dlatego, że nie działa poprawnie z autouzupełnianiem formularzy (nie da się w wygodny sposób sprawdzić, czy przeglądarka wypełniła poprawnie pola bez wycinania z nich treści i sprawdzania „etykiety”). Z tego samego też powodu nie działa, gdy choć na chwilę przerwiemy wypełnianie formularza. Gdy do niego wrócimy, jest szansa, że już zapomnimy, do czego służyło któreś z pól formularza (np. czy ta dwójka to numer mieszkania, czy może liczba zamawianych produktów).

Dodatkowo formularz, w przypadku błędu, wyświetla komunikat o nim przy pomocy białego tekstu. Ten w połączeniu z jasnoszarym tłem jest praktycznie niewidoczny (WCAG wymaga kontrastu co najmniej 4.5:1).

Jednak chyba najciekawszy błąd związany jest z przyciskiem do otwierania nawigacji. Da się go sfocusować przy pomocy klawiatury, ale… nie da się go kliknąć. Równocześnie da się przetabować po całym menu nawigacyjnym bez potrzeby jego otwierania. Co niby jest bugiem, ale w tym wypadku to ficzer, bo pozwala skorzystać z menu osobom nawigującym bez użycia myszki. O tym, jak zrobić takie menu tak, by współpracowało z klawiaturą, pisałem we Wpadkach i wypadkach.

Problemy z nawigacją klawiaturą są też widoczne w innych częściach strony. Na niektórych przyciskach i w sekcji z przykładowymi projektami nie ma widocznego wskaźnika focusu. Przez to trudno zorientować, gdzie obecnie się znajdujemy na stronie. Dodatkowo, w sekcji najczęściej zadawanych pytań brakuje przycisków pozwalających na rozwijanie poszczególnych sekcji z pytaniami. Przez to nie da się do nich dostać, używając wyłącznie klawiatury. Można posłużyć się ARIA Practices, by zobaczyć przykładową implementację takiego rozwiązania w dostępny sposób.

Kod

Jeśli chodzi o kod, to nie ma tutaj za bardzo nic do omówienia, ponieważ jest to dość standardowy WordPress. W niektórych miejscach zaburzona jest hierarchia nagłówków (po h2 następuje od razu h4). Również nie do końca rozumiem, czemu nawigacja jest umieszczona w aside a nie w nav. Ten pierwszy elemente służy do zamieszczania treści pobocznej, luźno związanej z główną treścią, natomiast drugi jest przeznaczony właśnie do oznaczania nawigacji. Niemniej najciekawszym elementem jest bez wątpienia przycisk otwierający nawigację:

<div class="toggle-nav" tabindex="0" aria-label="Menu" role="button" aria-controls="navigation">
	<div class="hamburger">
		<div class="hamburger-box">
			<div class="hamburger-inner"></div>
		</div>
	</div>
</div>

Przycisk jest zrobiony na elemencie div. Dzięki atrybutowi [tabindex] jest focusowalny, a dzięki atrybutowi [role] jest faktycznie pokazywany w drzewku dostępności jako przycisk. Zadbano nawet o odpowiednią etykietę przy pomocy atrybutu [aria-label]. Niemniej brakuje dwóch ważnych rzeczy:

• obsługi „klikania” klawiaturą – w przypadku elementów takich jak div obsługę klawiatury trzeba dodać samemu w JS-ie,
• oznaczenia, czy menu jest aktualnie rozwinięte – co można załatwić atrybutem [aria-expanded].

Stworzenie przycisku wcale nie jest takie proste. A jak tworzymy do tego tzw. hamburgera, to trzeba pamiętać o dodatkowych rzeczach.

Podsumowanie

Tak po prawdzie nie jest to zła strona. Większość błędów można na niej naprawić niskim nakładem pracy – ot, podmiana div na button, dorzucenie jakiegoś media query, itp. To, co zwróciło moją uwagę, to właśnie ten nieszczęśny przycisk otwierania nawigacji. Widziałem przyciski, które były zrobione tragicznie, widziałem takie, które były naprawdę złe, nawet zdarzyło mi się widzieć takie, które były wykonane poprawnie… Ale dotąd nigdy nie widziałem przycisku, który byłby tak bardzo prawie dobrze.