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.

8 myśli w temacie “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ą.

  2. Cześć Comandeer. Mam do Ciebie pytanie, bo nie mogę znaleźć jednoznacznej odpowiedzi. Czy w takiej sytuacji jak na tym zdjęciu: https://ibb.co/CBNJDVd zdjęcia powinny mieć pusty alt czy nie? One nie są elementami interaktywnymi, czyli nie są linkami, po prostu zwykłe zdjęcia.

  3. Dziękuję Ci bardzo. Mam jeszcze jedno pytanie. Co w sytuacji kiedy jest taki sam schemat, ale zamiast takiego jednego zdjęcia jest slider z kilkoma zdjęciami, mniej więcej tak to wygląda: https://ibb.co/PDj4ySP czy alt również powinien pozostać pusty?

    1. Tu już sytuacja jest inna. Nawet nie skupiając się na slajderze, widać, że te zdjęcia stanowią wartość dodaną do tekstu (bo to zdjęcia z tej konkretnej wycieczki). We wcześniejszym przykładzie były to typowe ozdobniki (stockowe zdjęcia itd.). Niemniej slider sam z siebie też niejako wymusza dodanie opisów do zdjęć, z powodu tego, że jest elementem interaktywnym i wypada, żeby coś sobą reprezentował.

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.