NowoczesnaStrona.pl, podejście drugie

Dzisiejszy bohater artykułu, strona NowoczesnaStrona.pl, już na WebKrytyku gościła. Doszły mnie jednak słuchy, że przeszła gruntowne zmiany, więc postanowiłem sprawdzić ją jeszcze raz.

Wygląd i działanie

  • Screen strony sugeruje, że mogą być problemy związane z odczytywaniem zawartości strony przez automatyczne systemy, m.in. robota Google. Polecanym rozwiązaniem jest domyślne pokazywanie elementów na samym początku i ukrywanie ich oraz dołączanie animacji dopiero, gdy wykryje się scroll użytkownika.

  • Nawigacja po stronie przy pomocy klawiatury jest praktycznie niemożliwa, bo nie widać, gdzie znajduje się focus. To bardzo poważny problem z dostępnością.

  • Menu rozwijane czasami rozwija się poza ekran, przez co nie zawsze wiadomo, co klikamy.

  • Osobiście te odwracane karty (Wypozycjonowanie frazy, Nasi klienci itd.) w całości bym zalinkował. Nie widzę za bardzo powodu, dla którego muszę koniecznie kartę odwrócić i kliknąć w przycisk.

    Zresztą bardzo podobny problem mam z sekcją Nasze ostatnie realizacje. W niej też aż się prosi, żeby cały obszar tych miniaturek był klikalny, a nie wyłącznie mały link i mała strzałka.

  • Przy sekcji Opinie klientów bardzo łatwo przeoczyć fakt, że jest to przesuwalny slider. Zwłaszcza, że jego nawigacja nie spełnia wymogów WCAG dotyczących kontrastu.

  • Podstrona Kontakt używa [placeholder] jako zastępstwa dla label, co jest niewystarczające z punktu widzenia dostępności. Może także powodować problemy z użytecznością.

  • Strona co prawda się poprawnie skaluje na urządzeniach mobilnych, ale elementy klikalne pozostają tak samo małe, jak w wersji desktopowej. Sprawia to spore problemy przy trafianiu w odpowiednie elementy na stronie (np. trzy razy próbowałem zamknąć menu). WCAG 2.1 zaleca, by elementy klikalne miały co najmniej 44×44 piksele.

  • Wg Lighthouse’u z wydajnością jest kiepsko. Polecam także pełną analizę – czy to za pomocą audytów w Google Chrome, czy na stronie Web.dev – która wskaże więcej błędów, także z zakresu dostępności czy ogólnie uznanych dobrych praktyk.

Kod

HTML

  • Standardowo zaczniemy od walidatora: 87 błędów i uwag oraz dość dziwna hierarchia nagłówków.

    Nagłówki powinny oddawać podział treści na sekcje. W tym wypadku wydają się jednak użyte w dużym nadmiarze i dodatkowo raczej w celu wypozycjonowania odpowiednich fraz, nie zaś – do faktycznego podziału treści. Wskazywać może na to m.in brak głównego nagłówka, ale także umieszczenie np. liczby klientów w nagłówku h2 oraz wyjaśnienia znaczenia tej liczby w nagłówku h4. Żaden z tych elementów nie powinien się znaleźć w nagłówku, a już tym bardziej – w osobnych nagłówkach. 476 jako nagłówek nie ma sensu i tylko utrudni nawigację użytkownikom technologii asystującej. To samo dotyczy nagłówka Zadowolonych klientów. To po prostu brzmi jak urwane zdanie (bo też nim jest). Nagłówki powinny mieć sens samodzielnie. Dlatego w ostateczności zrozumiałbym, gdyby nagłówek zawierał w całości 476 zadowolonych klientów. Niemniej miałby sens tylko wówczas, gdy wprowadzałby faktycznie sekcję poświęconą tym klientom. Jeśli taka sekcja nie następuje po nagłówku (czyli innymi słowy: nagłówek jest po prostu na stronie, ale nie istnieje treść, którą ma wprowadzać), to najprawdopodobniej użycie nagłówka jest niepoprawne.

    Najbardziej odpowiednią semantycznie strukturą do opisu tych liczników jest lista dl:

    <dl>
    	<dt>Lat doświadczenia</dt>
    	<dd>11</dd>
    	<dt>Zadowolonych klientów</dt>
    	<dd>476</dd>
    	<dt>Wypozycjonowanych fraz</dt>
    	<dd>3101</dd>
    </dl>

    Samą tę listę można z kolei wprowadzić przy pomocy nagłówka, np. Garść statystyk.

    Sekcja Nasze najnowsze realizacje także sugeruje, że nagłówki są tutaj użyte niezgodnie z przeznaczeniem, ponieważ przy każdym projekcie pojawia się dodatkowy nagłówek o tej samej treści, de facto niezwiązanej z danym projektem – Nasze Realizacje VIP-tworzeniestron. Te nagłówki tak po prawdzie nie powinny w ogóle istnieć.

  • W kodzie istnieją dwa tagi html: jeden dla przeglądarek niebędących IE oraz dla IE8. To oznacza, że IE 9 i 10 tak naprawdę zostały pozbawione tagu otwierającego html, a tym samym – informacji o języku strony.

  • Na stronie jest 21 arkuszy stylów. To zdecydowanie za dużo, warto byłoby to jakoś zoptymalizować, np. podzielić na kilka mniejszych bundle’i.

    Dokładnie taki sam problem jest ze skryptami JS, których również jest sporo.

  • Kod cierpi na poważny divitis. Znaczniki nav oraz main nie są użyte w ogóle, a section wydaje się występować w 4 losowych miejscach.

  • Submenu w menu nawigacyjnym są oznaczone niepoprawnie. Do nawigacji nie stosuje się [role=menu]. To automatycznie sprawia, że użycie [aria-haspopup] jest błędne. Można spojrzeć na przykłady dostępnych rozwijanych nawigacji, m.in. przykład Adriana Roselliego.

  • Przycisk do otwerania menu mobilnego jest zrobiony w sposób niedostępny. O tym, jak to zrobić lepiej, pisałem swego czasu na WebKrytyku.

Strona zdecydowanie wygląda teraz na o wiele nowocześniejszą. Ale równocześnie wydaje się, że część błędów w kodzie została dokładnie taka sama (jak np. brak label w formularzach czy divitis). Niemniej zdecydowanie jest to krok w dobrą stronę.

4 myśli w temacie “NowoczesnaStrona.pl, podejście drugie”

  1. Jak zawsze super 🙂 Czytając Twoje wpisy, zawsze jakaś nowa wiedza wpada do głowy, dziś dowiedziałem się o istnieniu takich znaczników jak dl i dt.

      1. Przepraszam, że wcześniej nie zauważyłem tego komentarza.
        Po co? A po co nam microdata czy RDFa? 😉 W taki sposób można przekazać więcej informacji na temat treści. Użycie dl oznacza, że w tym miejscu nie występuje normalna lista (czyli po prostu wyliczenie poszczególnych rzeczy, jak np. na liście zakupów), ale lista klucz – wartość (czyli taka, jak występuje np. w słowniku: termin – wyjaśnienie).

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.