WyleczDepresje.pl

Dzisiaj nieco bliżej przyjrzymy się stronie WyleczDepresje.pl.

Wygląd i działanie

  • W przypadku tego typu stron, których głównym celem jest przekazanie informacji jak największej liczbie osób, kluczowe jest właśnie to, by jak najwięcej osóby było w stanie je przeczytać. Dlatego strona powinna działać również w przypadku, gdy JS nie działa. Wyświetlanie tekstu nie powinno wymagać nic ponad HTML – tutaj jednak treść strony nie wyświetla się, gdy JS nie działa.

    Wydaje się, że fakt niewyświetlania się tekstu przy niedziałającym JS-ie jest spowodowany niepoprawnie wykonaną animacją wjeżdżania tekstu. O wiele bezpieczniej jest domyślnie pokazywać treść i ukrywać ją na potrzeby animacji dopiero wówczas, gdy mamy pewność, że JS zadziała. W takim wypadku treść pokaże się bez względu na to, czy użytkownikowi JS działa, czy nie. Zastosowane tutaj rozwiązanie domyślnie ukrywa treść, przez co nie działa w części przypadków.

  • Rozumiem zamysł strony głównej, niemniej wykonanie sprawia, że całość jest skrajnie niedostępna. Pomijając już problemy z kontrastem (zielony napis na zielonym tle), to automatyczne odtwarzanie dźwięku sprawia, że strona może zagłuszyć czytnik ekranowy. Co najgorsze, dźwięku się nie da wyłączyć – a to bezpośrednie pogwałcenie zasad WCAG 2.1.

    Mylące jest także to, że wypowiadane kwestie są zmienane przy próbie przewinięcia strony. Jest to jeszcze bardziej kłopotliwe na urządzeniach mobilnych, gdzie pasek przewijania jest często domyślnie niewidoczny i o tym, czy stronę da się przewinąć, dowiadujemy się, próbując to zrobić. Dodatkowo mechanizm zmiany kwestii nie działa, gdy próbujemy przewinąć przy pomocy klawiatury. To oznacza, że część użytkowników zapozna się tylko z jednym zwrotem ze słowniczka prezentowanego na stronie głównej.

    Każde przewinięcie na stronie głównej generuje także nowy komunikat w konsoli przeglądarki. Tego typu rzeczy nie powinny się dziać na produkcji.

  • Nawigacja klawiaturą po stronie głównej jest również zepsuta. Nie widać w ogóle znacznika focusu. Dodatkowo można przetabować przez wszystkie pozycje menu, gdy to jest zwinięte. Nie da się natomiast sfocusować przycisku otwierającego menu, bo ten nie jest przyciskiem.

  • Wszelkie animacje na stronie odtwarzają się, mimo że mam zaznaczoną w systemie opcję ograniczenia animacji. Tego typu ustawienie można wykryć w CSS-ie.

  • Część tekstu na podstronach – zwłaszcza na mniejszym ekranie – jest nieczytelna, z powodu najeżdżania na niego figur geometrycznych, stanowiących tło strony.

  • Na urządzeniach mobilnych strony nie da się w żaden sposób powiększyć. To kolejne pogwałcenie zasad WCAG, które wymagają, aby tekst dało się powiększyć co najmniej dwukrotnie.

  • Prawdę mówiąc rozdźwięk między stroną główną a podstronami jest na tyle duży, że wyglądają one jak dwa różne projekty. Jakby 90% budżetu poszło na stronę główną, a dla reszty starczyło funduszy jedynie na animację wjeżdżającego tekstu…

Kod

To typowy WordPress, więc nie ma za bardzo o czym się rozpisywać. Chciałbym jedynie zwrócić uwagę na jeden szczegół – implementację hamburgera na stronie głównej:


<div class="hamburger hamburger--emphatic js-hamburger">
	<div class="hamburger-box">
		<div class="hamburger-inner"></div>
	</div>
</div>
<nav class="side-nav">[…]</nav>

To typowy antywzorzec hamburgera, który wizualnie wygląda ok, ale na tym jego zalety się kończą. Pisałem o tym w 10. odcinku Wpadek i wypadków.

Podsumowanie

Po raz kolejny muszę powiedzieć to, co często powtarzam na WebKrytyku: ta strona ewidentnie była pisana z myślą o tym, by po prostu wyglądała, bez większego zwracania uwagi na sprawy dostępności. Ta strona tak naprawdę działa dobrze wyłącznie dla pełnosprawnych użytkowników posługujących się myszką. W każdym innym przypadku pojawiają się problemy. A szkoda, bo akurat tego typu strony powinny być jak najbardziej inkluzywne.

2 myśli w temacie “WyleczDepresje.pl”

  1. Świetny post, szkoda że takie błędy pojawiają się na stornach rządowych. Niestety temat dostępności jest często pomijany już w poradnikach dla początkujących i potem traktowany po macoszemu. Mam też pytanie z innej beczki. Comandeer polecasz jakieś kursy lub teksty na temat OOP w JS? Nie rozumiem do końca schematu działa obiektów w JS, mimo przeczytania dużej ilości materiałów dalej wydaję mi się, że brakuje w mojej wiedzy tego ostatniego puzzla, który pozwoli mi wszystko zrozumieć.

    1. Osobiście polecam https://javascript.info/ jako źródło do nauki JS-a. Co prawda nie ma tam za dużo materiałów o OOP, ale są dość dokładnie opisane obiekty i prototypy. Natomiast ostatnim puzzlem jest IMO pisanie własnego kodu i dawanie go do review – czy to mentorowi, czy choćby na grupach na FB. To pozwoli przetestować wiedzę w praktyce, a review zapewni dobre praktyki.

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.