Wojciech Bednarski

Nie tak dawno temu panowała moda na umieszczanie na stronach znaczków - Valid XHTML! i Valid CSS!

Teraz panuje moda na znaczki WAI-n, gdzie w miejsce n autorzy stron wpisują od jednego do trzech A…

Niestety walidator Cynthia lub Web Accessibility Test, czy jakikolwiek inny, sprawdza tylko syntaktykę dokumentu. Sprawdzenie semantyki pozostawiają osobie, która posiada pewną wiedzę na temat budowania dostępnych, semantycznie poprawnych dokumentów XHTML.

Niestety większość twórców stron internetowych uważa, że jeśli dokument się waliduje to jest prawidłowo napisany, dostępny i w ogóle. Otóż niekoniecznie.

Powstają też firmy, które oferują audyt stron internetowych, pytanie tylko czy osoby odpowiedzialne za wykonywanie audytów dostępności, użyteczności posiadają wiedzę umożliwiającą na właściwe zinterpretowanie danych dostarczonych im przez maszynę - walidator.

Czy tylko istnieją, by zarabiać na firmach zatrudniających low-profile’owych webmasterów i osoby na wysokich stołkach, które nie mają pojęcia o co tak naprawdę w tym wszystkim chodzi, więc decydują się na zlecenie audytu stron internetowych firmom zewnętrznym. Czy też zwykłych klientach, którzy chcą sprawdzić jakość swoich serwisów.

Wracając do głównego wątku. Abstrahując od kolejności priorytetów WCAG, jest kilka elementarnych błędów, które często się powtarzają na stronach WWW. Nie mam tu na myśli tablelkowych potworów, tylko strony, które z lepszym czy gorszym skutkiem podążają drogą standardów sieciowych.

<a />

Pierwszym i chyba najczęstszym błędem silnie wpływającym na brak dostępności strony jest niewłaściwy sposób konstruowania linków - <a />.

Konstrukcje typu kliknij tutaj! w zasadzie wymarły i są zastępowane przez tekst, który w sensowny sposób opisuje zasób, do którego link prowadzi.

Jednak to tylko jedna z trzech zasad konstruowania poprawnego odsyłacza tekstowego.

3 zasady dobrego odsyłacza

1. Tekst odsyłacza powinien jak najlepiej odzwierciedlać zasób do którego prowadzi, także oderwany od kontekstu.
2. Tekst odsyłacza powinien mieć wystarczającą powierzchnię, tak by kliknięcie w niego nie wymagało nadmiernej precyzji.
3. Tekst odsyłacza musi wyróżniać się inną własnością niż tylko kolor.

Osoby widzące, posiadające różne wady wzroku mogą mieć problemy z odróżnieniem odsyłacza od reszty tekstu.

Przykładów stron z niepoprawnymi odsyłaczami jest mnóstwo, główny jak i większość szablonów do popularnego WordPressa, Wikipedia, strony rządowe czy też BIP-y.

Przykłady:

Strona widziana przez osobę z wadą wzroku:

Strona widziana przez osobę bez wady wzroku:

Strona widziana przez osobę z wadą wzroku:

Strona widziana przez osobę bez wady wzroku:

Różnica jest kolosalna, zwłaszcza przy Wikipedii.

Kolor tekstu a obrazki tła

Kolejnym często spotykanym błędem jest brak ustawienia własności background-color dla tekstu, którego tłem jest obrazek, pod którym znajduje się element, który ma taki sam lub zbliżony kolor do koloru tekstu.

W efekcie po wyłączeniu pobierania obrazków w przeglądarce, internauta może nie zauważyć linków czy innych elementów strony.

Sytuację gdy użytkownik wyłącza pobieranie obrazków nietrudno sobie wyobrazić. Przykładowym powodem może być wolne połączenie z internetem, czy też połączenie przez telefon komórkowy, gdzie zazwyczaj płaci się za ilość pobranych danych.

Poszukajmy więc klasycznego przykładu niedostępnej strony. Dobrym przykładem jest strona prezydent.pl, przepraszam www.prezydent.pl, ponieważ by zobaczyć, co znajduje się pod domeną prezydent.pl musimy dostać się do niej poprzez subdomenę www. Ciekawe dlaczego adres mailowy do kogoś kto ma śmiałość podpisać się webmaster ma postać: tbrzezinski@prezydent.pl a nie: tbrzezinski@www.prezydent.pl. Ciekawe… Widzę tu pewną niekonsekwencję.

Wracając do tematu. Co prawda strona www.prezydent.pl jest tabelkowym koszmarem, opisywany błąd występuje często na stronach, które zmierzają w dobrym kierunku. Kierunku standardów.

Strona www.prezydent.pl z wyłączonymi obrazkami:

Strona www.prezydent.pl z włączonymi obrazkami:

Gdzie są linki? Są tam gdzie były, tylko mają taki sam kolor jak tła. Ok, uciekamy z tej strony i szukamy następnych przykładów (Gdybym chciał opisać błędy na tej stronie wydałbym niekończącą się opowieść…).

alt=”tekst alternatywny” vs alt=”"

Kolejny, częsty błąd to umieszczanie niepustego atrybutu alt do graficznych elementów strony, które nie stanowią jej treści tylko element layoutu.

Generalna zasada jest taka, że jeśli element graficzny jest tylko ozdobnikiem na stronie, to wyświetlany powinien być z poziomu CSS. Jeśli już z jakiegoś powodu musimy wyświetlić ozdobnik po przez znacznik <img /> atrybut alt musi być pusty.

Dobrym przykładem niepoprawnego kodu są podstrony z artykułami na art.websteem.pl.

Zrzut ekranu z przykładowego artykułu.

Prześledźmy ten fragment strony. Pierwsze co znajduje się na powyższym zrzucie ekranowym to obrazek, który jest zakodowany w następujący sposób:

<a href="shin.php" title="Jinyoung Shin : Minigaleria">
<img src="gfx/mg_js28.jpg" alt="Jinyoung Shin : Minigaleria"
title="Jinyoung Shin : Minigaleria" width="200" height="200" />

Powyższy obrazek nie ma nic wspólnego z treścią strony i powinien mieć pusty atrybut alt. Tymczasem znajduje się tam następujący tekst: Jinyoung Shin : Minigaleria, a sam obrazek jest linkiem do mini galerii autora obrazka.

Następnie pod nazwiskiem autora i tytułem artykułu znajduje się tekst: Ilustracja: Jinyoung Shin, który to właśnie powinien być linkiem do mini galerii a nie jest.

Jeśli w tym momencie ktoś z Was pomyślał, że przecież ten obrazek, może być jakąś próbą zilustrowania problemu, o którym traktuje ten artykuł zwracam uwagę na to, jaki tekst znajduje się w atrybucie alt i że obrazek jest linkiem. Więc jest to ewidentny błąd.

Taka interpretacja miałaby sens, jedynie gdyby obrazek posiadał alternatywny tekst w rodzaju: ilustracja obrazująca problem poruszany w artykule lub w ostateczności tytuł artykułu.

display:none vs text-indent:-9999px

Najczęstszym sposobem ukrywania tekstu jest display:none, niestety większość czytników ekranowych nie jest wstanie odczytać tekstu, który posiada taką właściwość. Rozwiązaniem jest użycie text-indent:-9999px.

Niestety, to rozwiązanie ma swoje wady, o ile załatwiamy sprawę dostępności dla urządzeń udźwiękowiających strony, o tyle taki zapis psuje nam inne rzeczy. Przykładowo, jeśli ukryliśmy w ten sposób zawartość tytułu strony, a w jego miejsce wyświetlane jest logo w formie obrazka z punktu widzenia czytników ekranowych wszystko jest poprawnie.

Jednak jeśli użytkownik widzący wyłączy z jakiegoś powodu wczytywanie obrazków, to nie zobaczy ani loga, ani tekstu, ponieważ fizycznie go nie będzie w tym miejscu. Jest to jednak temat na dłuższą dyskusję i z reguły decyzja z jakiego sposobu skorzystać jest rozpatrywana indywidualnie dla każdego przypadku.

404

Bardzo często spotykanym błędem jest niewłaściwa konstrukcja strony błędu 404.

Jeśli użytkownik dostanie taką stronę to oznacza, że albo wpisał zły adres albo odwołuje się do już nieistniejącego/przeniesionego zasobu.

Najbardziej obrazowe są przykłady. A zatem wróćmy jeszcze na chwilkę do naszego biednego www.prezydent.pl. Po wpisaniu błędnego adresu, przykładowo http://www.prezydent.pl/fdsf dostajemy coś z czego przeciętny internauta niewiele zrozumie.

W takim razie, co powinna zawierać taka strona? Generalnie jak najwięcej informacji pomocnych użytkownikowi do znalezienia tego czego szuka.

Dobrym pomysłem jest umieszczenie na takiej stronie wyszukiwarki, linka do mapy strony, linka do strony głównej, kontaktu itp. Dobrze jest też gdy strona błędu posiada ten sam design, co reszta strony.