Zintegrowany Raport Roczny Grupy Kapitałowej GAZ-SYSTEM 2015

Fundacja Widzialni wraz z Szerokim Porozumieniem na rzecz Rozwoju Umiejętności Cyfrowych organizują od lat konkurs Strona Internetowa bez Barier. Pod koniec kwietnia ogłoszono laureatów za rok 2016. Nie byłbym sobą, gdybym się bliżej tym stronom nie przyjrzał – zwłaszcza, że jednej już się przyjrzałem. Na pierwszy ogień poszedł laureat w kategorii Najlepszy z Najlepszych, Zintegrowany Raport Roczny Grupy Kapitałowej GAZ-SYSTEM 2015.

Uwaga: nie mam zamiaru w żaden sposób podważać decyzji komisji. Po prostu uważam, że niektóre elementy warto byłoby poprawić.

• Nie jestem zwolennikiem animacji na wejściu. Przy interakcji ze stroną – tak, ale po co mnie witać tanim efektem kolorowania obrazka?
• ¾ powierzchni strony jest niewykorzystane. Cała treść znajduje się w prawej, przewijalnej kolumnie. Co więcej, treść ta jest dostępna wyłącznie po przewinięciu. Może to efektownie wygląda, ale bynajmniej nie jest efektywne.
• Nie wiem, czy taki układ jest intuicyjny. Stron horyzontalnych praktycznie się nie spotyka, bo przeczą popularnych wzorcom zachowań użytkowników.
• Domyślna wielkość czcionki jest dość mała na moim ekranie. Równocześnie zauważyłem, że na innym komputerze z inną rozdzielczością czcionka ma inną wielkość. Zatem jest skalowana – to dobrze! Szkoda tylko, że jest to bardzo naiwne skalowanie, opierające się w pełni na wielkości ekranu. To może dawać nieciekawe rezultaty, bo na ekranie urządzenia mobilnego czcionka może być za mała, a na ekranie Full HD – za duża. Dlatego wyszedłbym z prostego założenia, że czcionka nie może być mniejsza od domyślnego 1rem, ale może się dodatkowo skalować w zależności od wielkości ekranu. To sprawi, że nie spadnie poniżej sensownego poziomu. Technika ta nazywa się CSS locks.
• Co prawda powyższy problem nie jest taki dotkliwy, ponieważ na stronie znajduje się przycisk do zmieniania wielkości czcionki. Szkoda tylko, że jest niesamowicie mały, przez co trudno go zauważyć i jeszcze trudniej trafić w niego myszką. Kolejnym problemem z nim związanym jest fakt, że nie działa na menu, a tylko i wyłącznie na tekst znajdujący się w prawej sekcji strony.
• Natomiast do trybu wysokiego kontrastu nie mam zastrzeżeń. Działa tak, jak powinien. Szkoda tylko, że strona nie współpracuje dobrze z natywnym trybem wysokiego kontrastu w Windowsie.
• W treści strony przewijają się skróty typu PLN czy TWh, które nie są wyjaśnione, a powinny.
• Przypisy do tekstu nie są wyświetlane w całości, lecz posiadają przycisk „zobacz całość”. Sensu tego przycisku całkowicie nie rozumiem, bo jedynie utrudnia zapoznanie się z treścią przypisu. Nie ma też uzasadnienia na desktopie, gdzie nie musimy walczyć o każdy skrawek miejsca.
• Layout na komórce jest… normalny. To raczej minus, gdy layout mobilny jest bardziej intuicyjny od desktopowego, który jest irytujący po kilku minutach.
• Nawigacja klawiaturą po stronie jest skrajnie niewygodna. Oznaczenie aktualnego focusu nigdy nie powinno być opcją opt-in! Nie rozumiem zamysłu przycisku „Oznacz focus na stronie”. Focus powinien być zawsze.
• Przycisk „Oznacz focus na stronie” jest częścią tzw. skip linków, podobnie jak odnośniki do pozostałych części strony. Problem polega na tym, że tylko „Oznacz focus na stronie” jest faktycznie przyciskiem, a reszta to linki. Niemniej wszystkie te elementy są przedstawiane czytnikowi ekranowemu jako przyciski. Co więcej: są to przyciski niepoprawnie zaimplementowane, gdyż nie reagują na naciśnięcie spacji.
• Zresztą praktycznie wszystkie przyciski na stronie są źle zaimplementowane, bo na podobną przypadłość cierpią przyciski zmieniające wielkość czcionki.
• Wszystkie linki w menu z kolei są tak naprawdę przyciskami, bo służą do otwierania podmenu. Bardzo dobrze, że focus jest do tego podmenu przenoszony. Szkoda tylko, że podmenu tego nie da się zamknąć naciskając Esc, a przycisk zamykający z poziomu klawiatury jest dostępny dopiero po przejechaniu całego menu. Tym sposobem, żeby dostać się do kolejnej pozycji menu głównego, trzeba przejść przez całe podmenu. Co jeszcze gorsze, focus po zamknięciu podmenu nie jest przenoszony na link, który to podmenu otworzył! Jak tego typu rzeczy robić poprawnie, doskonale opisuje Heydon Pickering na swoim blogu.
• Po wpisaniu czegokolwiek w wyszukiwarkę jesteśmy przenoszeni na stronę, na której nigdzie nie jest wyszczególnione wyszukiwane hasło. Wyłącznym wskaźnikiem, co wpisaliśmy w wyszukiwarkę, jest podkreślenie szukanej frazy w wynikach. Niemniej jest to wyłącznie efekt estetyczny.
• Strona główna jest dostępna pod dwoma adresami: / (ten, który dostaniemy po wejściu do serwisu) oraz /index.html (podlinkowany przez logo). Warto byłoby to ustandaryzować.
• Zajrzyjmy do kodu strony. Widać, że strona posiada manifest. Szkoda zatem, że nie zdecydowała się przejść na tryb PWA

• <a href="#main-nav" role=button>Przejdź do menu głównego</a>

  To jest link, bo służy do przejścia w inne miejsce. Przedstawianie tego czytnikowi ekranowego jako przycisk to nieporozumienie.

• <a href="#" class=focus-btn role=button><span class=green>Oznacz</span> focus na stronie</a>

  To z kolei jest przycisk. Dodanie [role=button] do innego elementu HTML nie robi z niego przycisku, gdyż muszą być spełnione także inne przesłanki (choćby obsługa klawiaturą). Lepiej zastosować po prostu button i nie bawić się niepotrzebnie.

• <button class=close-submenu>
  <span class=graphic>
  <span class=wcag_hide role=button>Zamknij menu</span>
  </span>
  </button>

  Tego typu kod nie ma sensu, bo tworzy przycisk (span[role=button]) wewnątrz przycisku (button). Wypada wywalić całkowicie zbędne [role].

• Na stronie są dwa elementy nav. Przydałoby się je odróżnić przy pomocy nagłówków lub przynajmniej [aria-label].

• <a href="#" class=big><span aria-hidden=true>A</span><span class=wcag_hide role=button>Duża czcionka</span></a>

  W tym wypadku mamy do czynienia z przyciskiem ([role=button]) wewnątrz linku (a[href]). A wystarczy to zamienić na normalny button:

  <button class=big>
  	<span aria-hidden=true>A</span>
  	<span class=wcag_hide>Duża czcionka</span>
  </button>

  Można to jeszcze bardziej uprościć stosując button[aria-label] zamiast .wcag_hide (chociaż technikę z dodatkowym elementem uważam za lepszą).

• Bardzo mi się natomiast podoba, że nazwy serwisów anglojęzycznych są otoczone w span[lang=en]!
• Treść jak treść – nic ciekawego. Ot, zwykła, poprawnie zastosowana lista.

• <span>Wielkość przesłanego paliwa gazowego</span>
  <a href="#" class=show-more> ...zobacz całość <span class=wcag_hide role=button>przypisu 1 poniżej</span></a>
  <span class=wcag_hide>uwzględnia przesył gazu zaazotowanego (Lw), którego objętość przeliczono na gaz wysokometanowy (E). Nie uwzględniono paliwa gazowego przesłanego na rynku OTC i giełdzie gazu. W 2015 r. rozliczenie usługi przesyłu odbywało się w oparciu o jednostki energii, w związku z tym wielkość przesłanego paliwa gazowego w jednostkach objętości jest wartością poglądową.</span>

  Patrząc na kod tego przypisu, dostrzegamy bezsens przycisku „zobacz całość”. Dla czytnika ekranowego równie dobrze mogłoby go nie być, bo cała reszta jest ukryta tylko dla osób widzących. To sprawia, że czytnik ekranowy przeczyta przycisk „zobacz całość”, a następnie radośnie ową całość przeczyta.

• Nie bardzo też rozumiem, po co wewnętrznym linkom [rel=nofollow]?

• Na podstronach można znaleźć kwiatki typu:

  <figure class="draw-img img-map">
  	<img src="img/wspolpraca_z_uczelniami.png" alt="">
  </figure>

  Jest to niewłaściwe użycie znacznika figure, który powinien zawierać obrazki istotne z punktu widzenia treści, a które można także zaprezentować samodzielnie. I chociaż logo Akademii Energii można zaprezentować samodzielnie i nawet jest istotne z punktu widzenia treści, to brakuje sensownego atrybutu [alt].

• I na koniec ciekawostka: GIF poklatkowy! Co prawda rozumiem zamysł animowania tego przez JS, ale wybrałbym w tym celu inny format – najprawdopodobniej SVG.

Strona tragiczna nie jest i widać, że bardzo stara się dbać o dostępność, niemniej niektórych decyzji całkowicie nie rozumiem, a inne trochę tej dostępności szkodzą. Mimo wszystko czuć chęć życia w zgodzie z zasadami WCAG, a to duży postęp!