WAVE – narzędzie do walidacji i prezentacji

Logo WaveDzisiaj moje ulubione narzędzie do walidacji dostępności stron internetowych. Nadaje się zarówno do wspomagania testowania, jak i na prezentacje.

Aplikacja nosi nazwę WAVE, co jest akronimem Web Accessibility Evaluation Tool, a dostępna jest pod adresem http://wave.webaim.org/ Tamże można wpisać w pole edycyjne adres strony do sprawdzenia i uzyskania wyniku testu. Jest to jednak mało wygodne i polecam tutaj użycie wtyczki do przeglądarki Firefox dostępnej na podstronie Toolbar. Po zainstalowaniu dostajemy w przeglądarce wygodne narzędzie, które pokrótce opiszę.

Błędy, ostrzeżenia i sztuczki

Zrzut ekranu z wyświetloną oryginalną stroną www.scon.waw.plWtyczki w zasadzie nie trzeba konfigurować, bo w opcjach znajdziemy wyłącznie ustawienia dla interfejsu użytkownika. Zatem otwieramy interesującą nas stronę internetową , którą w tym wypadku jest serwis internetowy Stołecznego Centrum Osób Niepełnosprawnych (SCON) i wybieramy z narzędzi to najważniejsze, czyli "Errors, features and alerts" i naszym oczom lub uszom ukazuje się strona w zupełnie innym świetle – upstrzona kolorowymi ikonkami informującymi o tym, z czego do tej pory nie zdawaliśmy sobie sprawy. W ten sposób można zwizualizować błędy i problemy na stronach internetowych.

Zrzut ekranu serwisu www.scon.waw.pl po użyciu narzędzia do wyświetlania błędów. Widoczne są kolorowe ikonki.Ikony są w czterech kolorach i każdy z nich ma swoje znaczenie:

  • czerwone oznaczają błąd dostępności, który koniecznie należy poprawić,
  • żółte oznaczają ostrzeżenie, że w tym miejscu jest coś podejrzanego, co potencjalnie może generować błąd, ale program nie umie tego z pewnością stwierdzić,
  • zielone oznaczają, że tutaj sprytny webmaster zastosował odpowiednie rozwiązanie, na przykład tekst alternatywny,
  • niebieskie oznaczają, że webmaster był porządny i kodował stronę semantycznie.

A zatem – im więcej czerwonego i żółtego – tym gorzej. Kolory zielony i niebieski zaś to ordery przypinane do piersi webmastera. Od tego momentu jego misją życiową może stać się tępienie czerwonych i żółtych z równoczesnym mnożeniem zielonych i niebieskich. Troszkę tu zajechało rasizmem, ale to czysty przypadek.

Oczywiście nie tylko kolor jest ważny, bo to byłoby za mało informacji. Po wybraniu narzędzia "Icons key" otrzymujemy pełną listę wszystkich ikonek używanych w programie z objaśnieniem, co też one oznaczają. Krótką informację można uzyskać w dymku po najechaniu na ikonę już na stronie testowanej, ale komunikaty niekoniecznie muszą być dla wszystkich jasne. Tutaj można przeczytać dokładniej, do czego program się przyczepił, a zatem wiadome też będzie, jak się problemu pozbyć.

Struktura dokumentu

Kolejne narzędzie pod nazwą "Structure/order" pozwala spojrzeć na stronę od strony kolejności elementów w niej zawartych. Kodując stronę opartą na stylach często można zapomnieć, że pod spodem jest kod semantyczny, który ma określoną kolejność. Układając z niemal dowolną swobodą elementy graficzne interfejsu warto czasem sprawdzić, jaką mają kolejność i czy ta kolejność ma sens. Tą ścieżkę można prześledzić dzięki wyświetlanym na stronie numerom kolejnym. Jeżeli wszystko wygląda z sensem, to w porządku. Program za nas nie sprawdzi logiki i trzeba to zrobić na własną rękę.

Tryb tekstowy

Zrzut ekranu strony www.scon.waw.pl po użyciu narzędzia "tylko tekst". Tak odczytają tą stronę użytkownicy niewidomi.Wspomniałem już, że ta wtyczka nadaje się na prezentacje o dostępności, a to dzięki kolejnemu narzędziu – "Text-only". Po włączeniu można zobaczyć, jak wygląda strona w przeglądarce tekstowej lub jak jest słyszana przez niewidomego użytkownika. Taki widok potrafi wyrwać głośne westchnienie wśród zebranych na pokazie, bo znajoma do tej pory strona zamienia się w potwora ohydnego, a informacje znikają gdzieś jak kamfora. Jednak w wypadku stron dostępnych wrażenie jest dużo mniejsze, a funkcjonalność strony pozostaje bez zmian.

Podobnie można sobie obejrzeć stronę z wyłączonymi stylami, do czego służy narzędzie "Disable styles". Wciąż bowiem można spotkać przeglądarki, które słabo interpretują CSS, więc warto wiedzieć, czy strona nadal będzie użyteczna. Dodatkowym, choć moim zdaniem mało przydatnym narzędziem jest "Outline". Jest to coś podobnego do konspektu w edytorach tekstu, gdy zamiast całego dokumentu możemy obejrzeć jego strukturę. Jest to raczej narzędzie pomocnicze, uzupełniające komplet, niż samodzielne rozwiązanie testujące.

Zastrzeżenie

Trzeba mieć świadomość, że żadne automatyczne narzędzie nie dokona pełnej analizy strony internetowej pod kątem dostępności. Jednak wyeliminowanie błędów i uważne przyjrzenie się ostrzeżeniom może rozwiązać większość problemów. Należy też zauważyć, że WAVE nie jest prymitywnym analizatorem kodu. Potrafi na przykład zwrócić uwagę na linki, które formalnie mają opis alternatywny, ale jest on podejrzany. Polecam wypróbowanie i przekonanie się osobiście.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie na Google

Komentujesz korzystając z konta Google. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

Połączenie z %s

Ta witryna wykorzystuje usługę Akismet aby zredukować ilość spamu. Dowiedz się w jaki sposób dane w twoich komentarzach są przetwarzane.