WebIdea.pl

Dzisiaj na tapet wezmę stronę firmy WebIdea.pl. Bo w końcu dawno nie było żadnej strony na WK, prawda?

Wygląd/działanie

Kod

HTML

  • Struktura nagłówków jest mocno spłaszczona, co znacząco obniża dostępność.

  • <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    Wyłączenie skalowania dla użytkowników mobilnych obniża dostępność. Nie pozwalamy bowiem powiększać treści, co dla niektórych może być równoznaczne z niemożnością przeczytania treści. Zwłaszcza, że WCAG 2.1 AA wymaga możliwości powiększenia tekstu strony do 200%.

  • <h1 data-label-open="Menu" data-label-close="Zamknij"> <span>Menu</span></h1>

    Tak stworzony przycisk menu jest niedostępny, ponieważ nie jest przyciskiem ani nie reprezentuje stanu menu (czy jest zwinięte, czy rozwinięte). Poprawnie zrobiony przycisk oparty byłby na elemencie button i posiadał atrybut [aria-expanded].

    Jeśli chodzi o nagłówek w menu, miałby większy sens, gdyby całe menu było dzięki niemu opisane przy pomocy [aria-labelledby]. Niemniej zastanowiłbym się, czy nie zastąpić go przez [aria-label] lub zwykły span z opisem. Menu i tak łatwo znaleźć poprzez nawigację regionami lub poprzez – nieobecne na tej stronie – skip links.

  • <a href="#" class="scrollto">
    	<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="50px" viewBox="-39.579 39.938 20 50" enable-background="new -39.579 39.938 20 50" xml:space="preserve">[…]</svg>
    </a>

    Tego typu link jest niedostępny, ponieważ nie zawiera tekstowej alternatywy. Można ją dodać choćby poprzez dodanie atrybutu [aria-label] do linku.

    Dodatkowo ten link nie działa bez JS, a przecież nie ma najmniejszego powodu, by tak było. Wystarczyłoby zamiast [href=#] odesłać do odpowiedniej sekcji na stronie, dzięki czemu link działałby nawet przy niedziałającym JS.

  • <header class="visuallyhidden">
    	<h1>Poznaj naszą ofertę</h1>
    </header>

    Nie bardzo rozumiem zamysł ukrywania tego nagłówka, zwłaszcza, że wniósłby sporo do struktury strony. Na razie bowiem po zjechaniu z pierwszego ekranu po prostu zostajemy „zaatakowani” przez wjeżdżające boksy z treścią. Nie do końca jednak wiadomo, co dokładnie reprezentują. Dopiero po pobieżnym zapoznaniu się z ich treścią można domyślić się z kontekstu, że chodzi o prezentację oferty.

  • Menu w stopce nie jest na liście.

CSS

Jak widać, strona cierpi głównie z powodu problemów z dostępnością, które sprawiają, że dla pewnych grup użytkowników strona może być całkowicie niezdatna do użytku. A szkoda, bo pod innymi względami nie jest źle.

3 myśli na temat “WebIdea.pl”

  1. Comandeerze, a co chodzi z tym ostatnim komentarzem w sekcji Kod –> html, który brzmi:

    „Menu w stopce nie jest na liście.”

    Odsyłasz tam do artykułu gdzie jest wypisane za i przeciw menu umieszczanym w liście i na końcu tego artykuły, jest napisane, że jednak menu w liście jest zwycięzcom, a strona, którą krytykujesz, czyli WebIdea.pl ma menu w stopce na liście, nawet są tam dwa menu. To one nie powinny być na liście czy powinny?

    1. Zauważ, że te linki w stopce są rozłożone pomiędzy kilka div. Raptem dwa pierwsze linki znajdują się w liście, a reszta nie dość, że jest poza elementem nav, to także i poza listą.

Dodaj komentarz

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.