PKiN.pl

Dzisiaj w ramach odskoczni od materiałów edukacyjnych przyjrzymy się stronie PKiN.pl, czyli oficjalnej witrynie Pałacu Kultury i Nauki.

Wygląd i działanie

  • Pierwsze, co rzuca się w oczy, to fakt, że strona nie przekierowuje na HTTPS. Co więcej, próba ręcznego wymuszenia bezpiecznego połączenia kończy się błędem. To dość niepokojące, zwłaszcza, że od dawna wiadomo, jak ważną rolę pełni HTTPS jako fundamentalny mechanizm bezpieczeństwa w Sieci.

  • Strona działa pod 2 różnymi adresami:

    • http://pkin.pl
    • http://www.pkin.pl

    Nie dość, że powoduje to tak naprawdę powstanie zduplikowanej treści w Google, to dodatkowo obydwa te adresy mają odrębne ciasteczka (po zamknięciu komunikatu o ciasteczkach na jednym adresie, pojawi się on po pierwszym wejściu na drugi).

  • A jak już jesteśmy przy komunikacie o ciasteczkach: przycisk w nim zachowuje się inaczej od reszty przycisków na stronie. Nie dość, że nie ma kursora-łapki, to dodatkowo po najechaniu na tekst w przycisku pojawia się zwykły kursor tekstowy. Zachowanie takich samych elementów w obrębie witryny powinno być spójne.

  • Kontrast jest za niski – a to z powodu zastosowania zdjęcia jako tła dla tekstu. Co więcej, strona nie jest przystosowana do pracy z trybem wysokiego kontrastu.

  • I choć jest to poważny problem, to da się to jeszcze usprawiedliwić faktem, że strona posiada swój własny tryb wysokiego kontrastu. Niemniej przycisk go włączający jest mikroskopijny i ukryty pod ikonką bez jakiejkolwiek etykiety. Istnieje spore prawdopodobieństwo, że osoba potrzebująca takiego trybu najzwyczajniej w świecie go nie znajdzie.

  • Dodatkowo nawigacja klawiaturą po stronie jest po prostu niemożliwa. Nie dość, że nie widać, gdzie aktualnie znajduje się focus, to dodatkowo spora część elementów interaktywnych pojawia się tylko po najechaniu na nie myszką. To sprawia, że użytkownicy poruszający się po stronie przy pomocy klawiatury muszą poruszać się na ślepo.

  • A jak już jesteśmy przy nawigacji klawiaturą: przydałyby się skip linki.

  • Formularz zapisu na newsletter nie wygląda jak formularz. Tego typu działanie wprowadza jedynie poczucie zagubienia u użytkownika.

  • Strona nie wczytuje treści, gdy nie zadziała JS. Jest to spowodowane faktem, że wczytywanie treści jest animowane. Niemniej można to zrobić w sposób dostępny: domyślnie nie ukrywać treści i ukryć ją dopiero wówczas, gdy użytkownik zacznie przewijać stronę. To pozwoli użytkownikom, którym nie działa JS, lub wszelkiego rodzaju robotom (np. Google) zobaczyć całą treść strony.

  • Raport LightHouse’u pokazuje, że strona ma poważne problemy z wydajnością i dostępnością.

Kod

HTML

  • Brakuje atrybutu html[lang], który wskazywałby na język treści. Jego brak może powodować problemy z odczytaniem treści przez czytniki ekranowe.

  • Deklaracja kodowania strony powinna być na początku head – a już na pewno przed wszystkimi widzialnymi znakami wysłanymi do użytkownika (jak np. title).

  • Zdecydowanie za dużo blokujących renderowanie skryptów w head. To w dużej mierze wpływa na niską wydajność.

  • <a title="Przejdź do strony głównej" href="/">
    	<img src="/frontend/img/logo.svg" alt="logo" class="normal"/>
    	<img src="/frontend/img/logo-yellow.svg" alt="logo" class="contrast"/>
    </a>

    Obrazek ma zły [alt]. W tym wypadku fakt, że to logo, jest całkowicie nieistotny. Ważne jest to, że ten obrazek jest wewnątrz linku, który prowadzi do strony głównej. Tutaj poprawnym tekstem alternatywnym byłaby nazwa strony.

  • Na stronie nie ma ani jednego znacznika HTML5 ani nie są zastosowane role ARIA. To oznacza, że nie ma tutaj tzw. landmarków. Sytuację nieco ratuje w miarę sensowna hierarchia nagłówków.

  • <ul>
    	<li class="size-plus"><a href="">A+</a></li>
    	<li class="size-minus"><a href="">A-</a></li>
    	<li class="size-medium"><a href="">A</a></li>
    	<li class="contrast"><a href=""><i class="fa fa-adjust" aria-hidden="true"></i></a></li>
    </ul>

    Tego typu elementy są niezrozumiałe dla użytkownika czytnika ekranowego – zwłaszcza ostatni, który jest dla niego de facto pusty. O wiele lepiej byłoby zastosować .visuallyhidden:

    <button>
    	<span aria-hidden="true">A+</span>
    	<span class="visuallyhidden">Powiększ czcionkę</span>
    </button>

    Do tego zmieniłem element na button, bo właśnie przecież przycisk tutaj chcemy mieć (wykonujemy akcję na stronie, nie przechodzimy na inną stronę).

  • <a class="toggle-menu" href=""><i></i></a>

    Przycisk otwierania menu powinien być odpowiednio zrobionym przyciskiem.

  • <a class="slider-item fancybox trigger" href="/processed/uploads/photobox/phppZIEow_582c629523447.$thumb,451,384,outbound.jpg" rel="gallery-main"><img src="/processed/uploads/photobox/phppZIEow_582c629523447.$thumb,372,372,outbound.jpg" alt="" width="372" height="372"></a>

    Znów mamy do czynienia z niedostępnymi elementami. Tutaj z kolei z powodu pustego atrybutu [alt]. Tym samym czytnik ekranowy – zamiast przeczytać alternatywny tekst obrazka – przeczyta atrybut [href] linku.

  • Formularz subskrybcji do newslettera nie ma etykiet pól.

CSS

  • @import url(https://fonts.googleapis.com/css?family=Playfair+Display);

    Importy w CSS-ie znacząco obniżają wydajność. Lepiej załączyć ten plik jako osobny arkusz.

  • html body .business-tourist-zone ul li.bg:not(.instruction):not(.in-palace):not(.curiosities)>div.absolute .buttons a

    Nigdy dotąd nie widziałem tak rozwlekłego selektora. Łamie praktycznie wszystkie dobre praktyki pisania CSS-a:

    Tak po prawdzie najlepiej byłoby zamienić cały ten długi selektor na odpowiednią klasę dla przycisku (np. .button-<nazwa-kategorii>).

  • .animate-show.animate-time-10x {
    	transition: all 5s ease 0.1s;
    	-webkit-transition: all 5s ease 0.1s;
    	-moz-transition: all 5s ease 0.1s
    }

    Te prefiksy nie są już potrzebne od lat. Dodatkowo standardową nazwę własności należy podawać jako ostatnią. Inaczej implementacja zgodna ze specyfikacją może zostać nadpisana niestandardową implementacją danej przeglądarki, jak miało to miejsce z border-radius i -moz-border-radius.

JS

  • Trochę rzeczy wycieka do globalnego zasięgu, jak np. getQueryParams.
  • Menu = (function ($) { […] })(jQuery)

    Takie wykorzystanie zmiennych (deklarowanie bez słowa kluczowego var) sprawia, że kod jest niepoprawny składniowo w trybie ścisłym. A ten mimo wszystko od lat jest standardem w branży.

  • No i przydałoby się, żeby kod był zminifikowany.

Taka ciekawostka: gdy zaczynałem pisać ten artykuł, był środek dnia i w tle widniał błyszczący w słońcu Pałac. Gdy kończę go pisać, za oknem już ciemna noc – zatem na stronie też pojawił się Pałac w swej nocnej odsłonie. Bardzo miły smaczek.

Niestety, nie zmienia on faktu, że na tę chwilę strona Pałacu Kultury i Nauki jest po prostu mało dostępna. I link w menu PKiN bez barier brzmi w tym kontekście nieco ironicznie…

Chciałbym z tego miejsca podziękować Tomaszowi Gąsiorowi za podsunięcie tej strony do oceny!

4 komentarze do “PKiN.pl”

  1. Może kiedyś dla odmiany ocenisz jakąś dobrą stronę 🙂 i zwrócisz uwagę na te poprawne elementy. Coś na czym można się wzorować.

  2. To nie stricte na temat artykuły, ale chciałem po prostu powiedzieć, że bardzo cenię Pana pracę i zaangażowanie i z wielką przyjemnością śledzę bloga

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

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