Od czasu do czasu w łamach WebKrytyka pojawia się jakaś strona ze świata SEO. A iż dawno już takiej nie było, stwierdziłem, iż przyjrzę sie witrynie agencji WordWeb.
Pierwsze, co rzuciło mi się w oczy, to fakt, iż nawigacja klawiaturą po stronie jest bardzo utrudniona. Nie ma bowiem żadnego widocznego znacznika focusu. Dodatkowo część elementów reaguje na najechanie myszką, ale już nie na focus. Tym samym użytkownicy korzystający z klawiatury do nawigacji nie są w stanie rozwinąć sekcji Oferta w nawigacji. Nie uzyskają także informacji na temat poszczególnych usług firmy, jakie są wyróżnione na stronie głównej. Boksy z tymi informacjami bowiem ujawniają szczegóły jedynie po najechaniu myszą. Dodatkowo, tego typu boksy utrudniają też nieco korzystanie ze strony na urządzeniach dotykowych. To, co na desktopie robi się niejako samo (żeby kliknąć link w boksie, trzeba na niego najechać myszką, co pokaże szczegóły), na urządzeniu dotykowym już nie jest tak intuicyjne. Prawdopodobnie spora część użytkowników dowie się o istnieniu dodatkowych informacji dopiero w chwili tapnięcia linku przenoszącego na konkretną podstronę oferty. A więc w momencie, gdy te informacje nie będą im już potrzebne.
Także style po najechaniu myszą wydają się nie do końca przemyślane. Widać to dobrze w przypadku nawigacji, w której aktualnie najechany link oznaczany jest przy pomocy niebieskiego podkreślenia. Problem polega na tym, iż po przewinięciu nieco strony nawigacja zyskuje ciemnoniebieskie tło. To sprawia, iż to podkreślenie przestaje być widoczne. Nie jest to krytyczny błąd (jeśli użytkownik najeżdża na coś myszką, to o klikalności poinformuje go zmiana kursora), ale można byłoby tu zadbać o lepszy kontrast, np. zmieniając podkreślenie na białe w chwili, gdy nawigacja stanie się ciemnoniebieska.
Warto także pochylić się nad formularzem kontaktowym, dostępnym na podstronie Kontakt. Etykiety pól są tutaj zamieszczone bezpośrednio wewnątrz nich i znikają, gdy zacznie się wpisywać jakikolwiek tekst do pól. To sprawia, iż taki formularz jest niezgodny z wymogami WCAG. Te bowiem, a dokładniej wymóg 3.3.2 Etykiety i instrukcje, wymagają, by etykieta pola była widoczna przez cały czas. Inaczej użytkownik może zapomnieć, do czego służyło dane pole w trakcie wypełniania formularza. Problem będzie też widoczny w formularzach, w których użytkownik skorzysta z autouzupełniania przez przeglądarkę. Wówczas tak naprawdę nie wie, czy przeglądarka uzupełniła pola poprawnie – nie mają one bowiem żadnego oznaczenia. Warto także zauważyć, iż formularz wykorzystuje CAPTCHA, a te znane są ze swej niedostępności. Standard WCAG wprost wymaga odpowiednich alternatyw:
Jeśli celem treści nietekstowej jest potwierdzenie, iż do treści ma dostęp człowiek, a nie komputer, wtedy dostarcza się alternatywę w postaci tekstu, która identyfikuje oraz opisuje cel treści nietekstowej. Dostarcza się również alternatywnych zabezpieczeń typu CAPTCHA, dostosowanych do różnych możliwości percepcji użytkowników, uwzględniając różne rodzaje niepełnosprawności.
Co prawda reCAPTCHA udostępnia dźwiękową alternatywę, ale wciąż nie pokrywa to wszystkich przypadków.
A zostawiając na chwilę sprawy techniczne na boku, pozwolę sobie na odrobinę bardziej prywatnej opinii. Na podstronie O nas umiejętności zespołu są wyrażone przy pomocy pasków z procentami. Tym sposobem dowiedziałem się, iż zespół potrafi poprawiać szybkość stron na 90%. Tylko nie bardzo wiem, co to ma znaczyć? Bo jeżeli to, iż moja strona będzie miała 90 punktów w Google’owym PageSpeed Insights, to tak szczerze powiedziawszy nie wiem, czy to jest taka dobra oferta. 90 to faktycznie dobry wynik, ale to wciąż nie 100, które zdobyć znowu nie tak trudno.
Przy okazji paski z procentami pokazują też inny problem z tą stroną: nadmierne (czy wręcz niewłaściwe) wykorzystanie ARIA. Kod paska prezentuje się następująco:
<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="95" aria-valuetext=""> <div data-max="95" style="width: 95%;"> <span></span> <span>95%</span> </div> </div>Wykorzystywana jest tu rola ARIA progressbar. Problem w tym, iż elementy z tą rolą służą do prezentacji postępu jakiegoś zadania (np. instalacji). Tutaj nie mamy do czynienia ze zmieniającą się wartością. Tu mamy po prostu stałą wartość liczbową, która jest przedstawiona również w postaci graficznej. O wiele bardziej nadawałaby się tu rola meter. Osobiście jednak potraktowałbym te paski jako ozdobniki graficzne, a procenty wyraził zwykłym tekstem. Ale najlepiej byłoby zrezygnować z procentów i zamiast nich krótko opisać, co tak naprawdę zespół jest w stanie zrobić.
I to by było na dzisiaj tyle. W przyszłym miesiącu za to wrócimy nieco do świata kursowego.
