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

• 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ł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

• 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.