Czytelnik zasugerował przyjrzenie się stronie Coolbrand.pl. Kimże ja jestem, by odmawiać?
Nie wiem, czy takie było założenie autorów, ale pierwsze skojarzenie, jakie miałem po zobaczeniu hasła Wyższa Cooltura IT
i melonika, to stare reklamy Alliora. Tam też pojawiało się hasło wyższa kultura
oraz człowiek w meloniku. Ale to taka mała dygresja na start, przejdźmy do konkretów!
To, co pierwsze rzuca się w oczy, to animowany melonik, który porusza się w górę i w dół (jakby imitując ruch kłaniania się kapeluszem). Problem w tym, że mam systemowo ustawioną redukację ruchu i byłoby fajnie, gdyby ta animacja również to ustawienie respektowała. Można to prosto osiągnąć przy pomocy media query prefers-reduced-motion.
Kolejna rzecz, która tym razem właśnie nie rzuca się w oczy, to słaby kontrast niektórych przycisków/linków. Mają one bowiem biały tekst na pomarańczowym tle. Ja osobiście mam problem z przeczytaniem tekstu na tych przyciskach (co, swoją drogą, dość skutecznie pozwala mi wykrywać elementy ze zbyt niskim kontrastem). Zgodnie z wymogami WCAG, kontrast między tekstem a jego tłem powinien wynosić co najmniej 4.5:1.
Z tymi przyciskami wiąże się też inny problem: gdy sfocusuje się je przy pomocy klawiatury, ich kolor tekstu zmienia się na pomarańczowy, przez co jest całkowicie niewidoczny. Także style focusu dla innych elementów na stronie mogłyby być lepsze. Niektóre ciemnoniebieskie przyciski dostają na focus niebieską obwódkę, która jest całkowicie niewidoczna. Bardzo dobrze o wszelkich problemach związanych z dostępnymi wskaźnikami focusu pisała Sara Soueidan. Ja od siebie tylko dorzucę, że w niektórych miejscach warto byłoby zadbać o to, by focus klawiaturą dawał te same efekty, co najechanie myszką. Najbardziej widoczne jest to w przypadku projektów w portfolio. Po najechaniu myszką pokazuje się plansza z krótką informacją o projekcie. Jednak przy focusie z klawiatury ta informacja nie jest w żaden sposób dostępna, a sam wskaźnik focusu jest mało widoczny.
Na stronie jest więcej niedostępnych informacji. Przykładem może być sekcja Prowadzimy i utrzymujemy projekty na całym świecie. Nad samym jej nagłówkiem jest słabo widoczny pomarańczowy tekst na białym tle (NASZE WDROŻENIA NA ŚWIECIE
). Z kolei całą treść sekcji stanowi obrazek tła – mapa z zaznaczonymi poszczególnymi krajami, w których Coolbrand tworzyło projekty. Problem w tym, że ta informacja nie jest w żaden sposób przedstawiona w alternatywnej, tekstowej postaci. To jest niezgodne z wytyczną 1.1.1 WCAG i uniemożliwia części użytkownikom dotarcie do tych informacji. Dla użytkownika czytnika ekranowego ta sekcja zawiera jedynie nagłówek informujący o licznych projektach na całym świecie – ale nie dowie się już, gdzie dokładnie.
Dość nieprzyjemnie korzysta się też ze strony przy pomocy mobilnego czytnika ekranu (np. VoiceOvera na iOS-ie). Spora część przycisków jest całkowicie nieopisana, w tym przycisk do otwierania hamburgera. W samym menu znajdują się też przyciski rozwijające podmenu (np. przy kategorii Usługi). One również nie mają etykiet tekstowych, przez co przez czytnik ekranowy są czytane po prostu jako przycisk
. W chwili, gdy na stronie jest kilka takich przycisków (zwłaszcza obok siebie), użytkownik czytnika ekranowego nie bardzo ma możliwość zorientować się, do czego te przyciski służą. Co więcej, po otwarciu menu na urządzeniu mobilnym zasłania ono całą stronę. Da się jednak uciec poza nie focusem. W takim wypadku jednak focus powinien być uwięziony wewnątrz takiego menu, aż nie zostanie zamknięte. Pomogłoby to choćby użytkownikom, którzy posługują się klawiaturą. I choć brzmi to dość dziwnie, żeby użytkownik urządzenia mobilnego posługiwał się klawiaturą do nawigacji po stronie, nie można zapominać o dwóch rzeczach. Pierwszą z nich jest możliwość uruchomienia strony na komputerze w małym oknie przeglądarki – wówczas użytkownik dostanie widok mobilny. Druga z nich to klawiatury po Bluetooth, które można sparować z urządzeniem mobilnym. Założenia, jakie robimy o naszych użytkownikach, są zazwyczaj błędne. Dlatego warto się przygotować na taką ewentualność.
Przy pomocy mobilnego czytnika ekranu trudno się też przebić przez niektóre części strony, takie jak karuzela z opiniami klientów. Zgodnie z wytycznymi WCAG, powinna być możliwość jej zatrzymania. Także nawigacja po tej karuzeli jest utrudniona, ponieważ przyciski służące do przeskakiwania między poszczególnymi slajdami nie mają etykiet tekstowych.
Użytkownik czytnika ekranowego dowie się też, że jest sekcja Te wyjątkowe marki już nam zaufały
, ale nie dowie się już, jakie dokładnie to marki. A to dlatego, że wszystkie prezentowane w tej sekcji logotypy mają pusty atrybut [alt], przez co są ignorowane przez czytnik. Specyfikacja HTML ma bardzo dokładnie opisane dobieranie tekstu alternatywnego dla obrazków – może być ona dobrym punktem wyjścia do poprawiania tego typu błędów.
Z innych rzeczy wspomnieć wypadałoby także o przycisku wyświetlającym wyszukiwarkę. Problem z nim jest taki, że nie jest obrazkiem a pustym [alt]em, przez co jest ignorowany przez czytniki ekranowe, a i użytkownicy nawigujący klawiaturą nie będą w stanie go sfocusować.
Podsumowując, strona nie wygląda źle. Od strony wizualnej prezentuje się przyjemnie. Niemniej to, co zdecydowanie zawodzi w jej przypadku, to dostępność – w tym zakresie sporo rzeczy można by poprawić. Odnoszę wrażenie, że w Polsce dostępność wciąż się „nie sprzedaje”, dlatego sporo firm nie widzi powodu, by w nią inwestować. To, na szczęście, powoli się zmienia. A dodatkowym bodźcem mogą być zmiany w prawie unijnym.