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
-
Pomarańczowe logo na pomarańczowym tle jest średnio widoczne. Podobny problem mają pomarańczowe przyciski.
-
Nie da się nawigować po stronie przy użyciu klawiatury, ponieważ nie wiadomo, gdzie jest focus. To bardzo poważny problem z dostępnością.
-
Na wąskich ekranach przycisk zamykania menu najeżdża na logo.
-
Menu mobilne jest dostępne z klawiatury nawet wtedy, gdy jest zwinięte. To równocześnie sprawia, że jest dostępne także dla technologii asystującej. Tego typu ukryty element powinien być ukryty w taki sposób, żeby nie można się było do niego dostać w żaden sposób.
-
Natomiast muszę pochwalić za poprawne użycie atrybutu
[placeholder]
w formularzu kontaktowym. Do tego właśnie został stworzony. Za specyfikacją HTML:The
placeholder
attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.[Atrybut
placeholder
reprezentuje krótką wskazowkę (słowo lub krótką frazę) mającą pomóc użytkownikowi we wprowadzeniu danych, gdy kontrolka formularza nie ma wartości. Wskazówka może być przykładowymi danymi lub krótkim opisem oczekiwanego formatu danych.]Jedyny zarzut można mieć do niskiego kontrastu pomiędzy wskazówką a tłem pola.
-
Filtr prac w portfolio powinien odświeżać adres strony, w myśl zasady
URL to część UI
. Tym bardziej, że pierwszy stan filtra („Wszystkie”) ma odzwierciedlenie w adresie (/portfolio/wszystkie/
). -
Górna połowa strony nie działa, gdy JS nie działa. To ciekawe o tyle, że na stronie jest zaimplementowana stara, dobra technika wykrywania niedziałającego JS-a.
Niemniej takie animacje, jak w tej niedziałającej części strony, można zrobić w taki sposób, żeby nie psuły strony, gdy JS nie zadziała. Zamiast ukrywać elementy na samym początku, można je ukryć przy pomocy JS-a, gdy użytkownik zacznie przewijać stronę.
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łyspan
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.
CSS
-
Na początku arkusza stylów znajduje się link do błędu minifikatora. Dodatkowo warto zauważyć, że
@import
jest zabójczy dla wydajności. -
W arkuszu można znaleźć sporo nieoptymalnych selektorów, jak np.
#portfolio-filter li.current-page-ancestor>a
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.
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?
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ą.
Racja. Nie zauważyłem tego. Teraz już rozumiem o co chodziło. Dziękuję.
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.
Według mnie tak, powinny mieć pusty [alt]. Nie dodają bowiem nic do treści artykułów, są zwykłymi ozdobnikami.
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?
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ł.
Dziękiiiiii 🙂 Teraz już mniej więcej zaczynam rozumieć kiedy alt w takich sytuacjach, a kiedy nie.