Niestety wygląda na to, że nikt nie dokonał jeszcze polskiego tłumaczenia. Jacyś chętni?

Nie miałem pomysłu na to, jaką stronę przeanalizować. No dobra, wpisałem w Google słowo “urząd” i powędrowałem do pierwszego wyniku. Niech to będzie Urząd Miasta Warszawa, proszę bardzo.

Krok po kroku

Na początek prosty test – wyłączam obsługę arkuszy stylów i patrzę na zachowanie strony. To co ukazuje się moim oczom jest straszne. Mnóstwo linków, które normalnie znajdują się w rozwijanym menu i brak możliwości jego przeskoczenia.

Przyglądam się też obrazkom. Linki obrazkowe mają atrybuty alt. To plus.

Rzut oka na kod strony. Tabelki, tabelki i jeszcze raz tabelki. Użytkownicy czytników ekranowych będą mieli niestety utrudnione zadanie. Na ogół można to szybko sprawdzić przy użyciu rozszerzenie Fangs do Firefoksa, choć tej strony Fangs akurat nie chce mi przenalizować (a może to ja jestem niecierpliwy).

Wszechobecne tabelki sprawiają także, że menu nie jest tworzone w semantyczy sposób. A powinno być listą nieuporządkowaną.

Chyba tylko jedna tabela zawiera prawdziwe dane tabelaryczne – tabela z kalendarzem. Nie posiada ona jednak nawet prawdziwych nagłówków TH.

Sprawdzam jeszcze podejście do użycia JavaScriptu. Z szybkiej analizy kodu wnioskuję, że strona jest od niego zbyt mocno uzależniona. Praktyka dowodzi, że mam rację. Po jego wyłączeniu nie działa menu rozwijane, przewijana informacja o Centrum Zarządzania Kryzysowego, a w kalendarzu nie wyświetla się nazwa miesiąca.

Pora na kolory strony. Narzędzie Colour Contrast Check mówi mi, że kotrast kolorów w menu jest za mały, choć nie tragiczny. Za słaby kontrast mają także nagłówki w menu.

Strona również nieco wolno się ładuje. Nie jest bardzo źle, ale zapewne mogłoby być lepiej. Aby tak było, warto zadbać o: semantykę kodu i oddzielenie warstwy prezentacji o warstwy struktury, poprawienie wykorzystania JavaScriptu. W mojej opinii takie odchudzenie serwisu mogłoby pomóc.

Wnioski: strona wymaga poprawek. Potrzebuje semantycznego kodu i zmniejszenia uzależnienie od JavaScriptu. Przydałyby się jej także poprawki wizualne i link do szybkiego przeskoczenia menu.

Tyle wynika z bardzo krótkiej, ogólnej analizy, a nie szczegółowego audytu.

Dlaczego to piszę?

Moim celem nie jest wytykanie błędów czy naśmiewanie się. Chcę pokazać, jak łatwo można przeanalizować dostępność dowolnej strony www. Jest to wręcz banalne. Oczywiście wprowadzenie poprawek, to zupełnie inna kwestia. Działania kontrolne może jednak podjąć każdy webmaster bez większego wysiłku.

Powinien o to zadbać każdy kto odpowiada za odbiór serwisów dla różnego rodzaju instytucji i organizacji. Dla nich dostępność powinna być przecież priorytetem. Chciałem również unaocznić, ile do zrobienia jest w tej dziedzinie.

Warto to zawsze podkreślać: zrozumienie zagadnienia dostępności jest łatwe, a jej ogólna analiza stosunkowo szybka i prosta. Niestety zdarza się jeszcze nieprofesjonalne podejście do tego zagadnienia o czym kiedyś pisałem.

Adresy podzieliłem na dwie grupy – strony polskojęzyczne i strony w języku angielskim. Przy okazji warto zaznaczyć, że w tej branży znajomość języka w stopniu chociażby średnim jest bardzo przydatna, ponieważ wiele ciekawych materiałow jest dostępnych tylko w tym języku.

Teksty w języku polskim:

• Budowa formularzy z wykorzystaniem standardów – tutorial na blogu Riddle’a.
• Captcha – nie uwaj – Robert Drózd dobrze analizuje wady obrazkowych kodów utrudniajcych korzystanie z formularzy
• Dostępność usług internetowych dla osób niepełnosprawnych – praca Krzysztofa Szafranka
• Dlaczego układ na tabelkach jest głupi? – dlaczego nie warto projektować układu strony przy pomocy tabelek
• W głąb dostępności – polska wersja książki Dive Into Accessibility Marka Pigrima w tłumaczeniu Michała Świątkiewicza
• Dostępność stron internetowych (accessibility) – ciekawy, przeglądowy artykuł
• Dostępność – definicja – na blogu Piotra Lewandowskiego
• Dostępność – najczęstsze błędy – opowiada Wojciech Bednarski

Teksty w języku angielskim:

• Dostępność aplikacji AJAX – zbiór 40 linków do dobrych tekstów.
• Prettier Accesible Forms – artykuł na A List Apart na temat formularzy
• What Is Web Accessibility? – następny tekst na ALA. Jest tego więcej w dziale poświęconym dostępności (to właściwie lektura obowiązkowa).
• An Introduction To Accessible Web Design – dobry wstęp do tematyki dostępności
• Dział o dostępności na sitepoint.com – zbiór słabszych i lepszych artykułów, warto się zapoznać
• Web accessibility articles ∧ resources – kolejny zbardzo ciekawy biór tekstów.
• Access Matters – strona poświęcona w całości dostępności

To chyba tyle, jeśli chodzi o najciekawsze, najbardziej wartościowe materiały według mojej opinii. Oczywiście bez problemu mogę tutaj coś dopisać. Propozycje proszę zostawiać w komentarzach.

Z powyższego powodu postanowiłem stworzyć listę najlepszych narzędzi ułatwiających kontrolowanie i poprawianie dostępności stron, a także listę najciekawszych artykułów i tutoriali.

Dzisiaj prezentuję pierwszą część dotyczącą narzędzi. Sugestie dodania do listy jeszcze innych narzędzi proszę zgłaszać w komentarzach. Następna część zbierająca odnośniki do interesujących materiałów pojawi się niedługo.

Narzędzia podzieliłem na kategorie.

1. Kontrast, kolory:

• AccessColor – narzędzie sprawdzające kontrast strony i wskazujące błędy. Wystarczy podać adres.
• Accessibility Color Wheel – dzięki tej stronie można szybko sprawdzić odbiór tekstu i tła przez osoby cierpiące na różne odmiany daltonizmu.
• Colorblind Filter – sprawdza, jak widzą stronę osoby z różnymi rodzajami zaburzeń postrzegania kolorów.
• Color Contrast Check – kolejne narzędzie do sprawdzania kontrastu różnych kolorów, ale działające w trochę innych sposób.

2. Automatyczne sprawdzanie dostępności:

• Cynthia Says – sprawdza zgodność strony z wytycznymi WAI, jak i amerykańską sekcją 508 (która jednak dla nas nie ma większego znaczenia).
• WAVE 3.5 Accesibility Tool – ten automat robi to samo, co wcześniejszy, ale jako wynik pokazuje sprawdzaną stronę i przy pomocy ikonek oznacza na niej błędy i ostrzeżenia.
• WebXACT – sprawdza między innymi dostępność.

3. Przeglądarki:

• Symulator Opery Mini – można popatrzeć, jak wygląda strona pod Operą Mini.
• Lynx Viewer – jak Twoja strona wygląda w przeglądarce tekstowej? Wiem, że dzisiaj nie ma to już praktycznego znaczenia, ale warto odnotować to narzędzie choćby jako ciekawostkę :-) Aby zadziałało należy mieć na serwerze plik “delorie.htm”.
• Browsershots.org – pozwala robić zrzuty ekranu pod różnymi przeglądarkami.

4. Różne:

• Link Checker – czy wszystkie linki na stronie są poprawne?
• Emulator modemu – ciekawe…

Z biegiem czasu mogą się tutaj pojawiać linki do kolejnych narzędzi. Czekam też na ewentualne propozycje.

Film pokazuje w jaki sposób z Sieci korzystają osoby niewidome. Bartek, który sam jest niewidomy, opisuje, co najbardziej przeszkadza mu w źle zaprojekowanych stronach, a co najbardziej pomaga mu w codziennej pracy.

Film nie jest najwyższej jakości, ale jest z całą pewnością wartościową inicjatywą. Wielkie brawo. Film może świetnie posłużyć do uświadamiania niektórych twórców stron, którzy nadal produkują tag-zupę, a semantyka to dla nich czysta abstrakcja.

Osoby niewidome i niedowidzące zamieszkałe w Poznaniu mogą uzyskać informacje m.in. o polityce społecznej swojego miasta za pomocą przystosowanej dla nich “mówionej” strony internetowej.

Szczególną uwagę zwraca tu słowo “przystosowanej”. Sprawdźmy, jak to wygląda w praktyce. Po odwiedzeniu strony głównej przeglądarka próbuje załadować plik mp3 z informacją o wspaniale przystosowanej witrynie. Dlaczego ktoś wciska mi jakiś plik bez mojej zgody? Plik taki powienien być raczej dostępny pod specjalnym odnośnikiem umieszczonym w widocznym miejscu strony i łatwo dostępnym dla osób zainteresowanych. Przecież on próbuje się ładować przy każdym przejściu na stronę główną… To żart, kpina, czy jeszcze coś innego?

Serwis współpracuje z programem Intelligent Web Reader firmy Ivo. Co to za program? Na odpowiedniej podstronie firmowego serwisu możemy przeczytać:

IWR do odczytywania serwisu potrzebuje krótkiego “profilu” – który uczy przeglądarkę najlepszego sposobu radzenia sobie z prezentowaniem danej witryny interentowej. Aby uruchomić “mówiącą” stronę nie zmienia się całej, często liczącej kilkadziesiąt tysięcy podstron witryny, lecz przygotowuje wspomniany “profil” (zajmuje się tym IVO Software).

Samo korzystanie z przeglądarki jest więc bezpłatne, ale już dostosowanie strony… Z tego też powodu sądzę, że rozwiązanie to nie ma większych szans na upowszechnienie się, a osoby niedowidzące i niewidome wolą raczej korzystać z programów uniwersalnych, działających z każdą stroną internetową. Dlatego o wiele lepszą inwestycją niż płacenie za tego typu usługi, jest dostosowanie swojego serwisu do osób niewidomych zgodnie z odpowiednimi wytycznymi.

Przyjrzymy się bliżej samej stronie Miejskiego Ośrodka Pomocy Rodzinie w Poznaniu:

• Strona wykonana jest przy pomocy ramek
• Układ strony oparty jest na fatalnie wykonanych tabelach
• Wenątrz tych tabel znadują się kolejne pływające ramki
• Menu strony oparte jest na technologii Flash

Jeśli to jest humor, to raczej bardzo, bardzo czarny. Webmaster do pozycjonowania elementów strony używa komórek tabeli z tak zwanym znakiem twardej spacji, który powinien być wykorzystywany tylko przy pracy z tekstem.

Strona ciekawie przedstawia się też w przeglądarkach tekstowych. Użytkownicy takich przeglądarek muszą przejść na kolejną stronę, aby odczytać umieszczane w serwisie newsy. Dostanie się do innych podstron serwisu jest zaś dla nich praktycznie niemożliwe.

Podsumowując, możemy wyraźnie stwierdzić, że osoby projektujące tą stronę internetową nie mają żadnego pojęcia na temat dostępności i definitywnie powinny zająć się czymś innym, a sam urząd niech wreszcie zatrudni profesjonalistów.

.skipnav {
     height: 1px;
     overflow: hidden
     margin-bottom: -1px
}

Element DIV o wysokości 1 piksela w przypadku wielu projektów może w niczym nie przeszkadzać. Jednak może się również zdarzyć, że popsuje on pieczołowicie dopieszczany design. Dlatego nadałem mu minusowy margines. Teraz jest on całkowicie niewidoczny. Z kolei dzięki właściwości OVERFLOW jego zawartość nie próbuje wyjść poza jego granice.

Kod XHTML mógłby wyglądać na przykład tak:

<div class="skipnav">
     <a href="#content" title="Naciśnij, aby przejść do głównej treści">
     Przeskocz menu</a>
</div>

Tworzenie dostępnych stron internetowych nie jest proste, ale jest łatwe. Nie jest proste, ponieważ wymaga wysiłku, wiedzy i doświadczenia. Jest za to łatwe, ponieważ wszystko to leży wprost przed tobą, na wyciągnięcie ręki. Nic, poza czasem i zdrowiem, nie ogranicza Cię w przejawianiu wysiłku, zdobywaniu wiedzy i nabywaniu doświadczenia.

Czy więc jesteś gotów tworzyć dostępne strony internetowe? Czy chcesz, aby z Twojej witryny mogli korzystać użytkownicy różnych przeglądarek (nawet tekstowych) łączący się z różnych urządzeń? Czy pragniesz, aby Twoje dzieła okazały się przydatne dla osób niedowidzących, niewidomych i z ograniczoną sprawnością ruchową? Jeśli tak, to zapraszam do dalszej lektury.

Zacznijmy od bardzo prostej rzeczy. Powinieneś używać znacznik ABBR. Przy jego pomocy możesz zdefiniować skróty. Prosty przykład:

<abbr title="Hypertext Markup Language" lang="en">HTML<abbr>

Jak widzisz, w atrybucie TITLE możemy umieścić znaczenie skrótu, a w LANG język z którego pochodzi.

Kolejna ważna i zarazem prosta rzecz to korzystanie z atrybutów ALT i TITLE. Pierwszy definiuje tekst zastępczy dla elementów graficznych:

<img src="marchewka.png" alt="ładna marchewka" />

Atrybut ten pozostawimy pustym dla elementów o charakterze czysto dekoracyjnym:

<img src="dekoracja.png" alt="" />

Tekst zastępczy pojawi się w przeglądarkach tekstowych, jak links, lynx, czy elinks, oraz w sytuacji, gdy użytkownik sam wyłączy wczytywanie grafiki ze względu na np. wolne połączenie z Internetem. Zupełnie inną funkcję spełnia TITLE. To tytuł, który powinien przedstawiać dodatkowe informacje na temat elementu, jak obrazek, czy odnośnik:

<a href="index.html" title="Główna strona z newsami i ważnymi informacjami">Strona główna</a>

Tak więc w przypadku odnośników title ma poszerzać informację przekazywaną przez samą treść odnośnika o dodatkowe wiadomości. Atrybutu tego możemy użyć także w przypadku innych elementów, np. nagłówków. Ogólnie rzecz ujmując znajduje on zastosowanie wszędzie tam, gdzie chcemy przekazać dodatkową informację i ułatwić użytkownikom życie.

Omówmy teraz kwestię grafiki. Musi ona być “lekka”. Nie istnieją tu żadne standardy, ale staraj się po prostu nie przesadzać. Kiedyś sam na własne oczy widziałem, jak początkujący twórca wsadził na stronę wielką bitmapę. Naturalnie na jego twarzy pojawiło się wielkie zdziwienie, gdy ujrzał tempo ładowania się tej grafiki… Zapewne wiesz, że zrobienie czegoś takiego jest internetowym samobójstwem. Niestety, nawet osoby mające doświadczenie komputerowo-internetowe robią strony, których wyświetlanie na wolniejszych łączach jest niezłą torturą.

Kolejna, o dziwo rzadko poruszana sprawa, unikaj stosowania pseudoklasy :hover na elementach, które nie są interaktywne(interaktywne są np. odnośniki, formularze). Wyjątkiem jest tu chociażby listing kodu, gdyż z góry wiadomo czym on jest i nie istnieje prawdopobieństwo, iż ktoś pomyli go z odnośnikiem. Innym wyjątkiem może być zmiana tła notki, lub wiadomości nad którą aktualnie znajduje się kursor. Musimy więc wykazać się dużym rozeznaniem i stosować takie zabiegi tylko wtedy, gdy mamy absolutną pewność, że nikt źle ich nie zrozumie. Nieprawidłowe z punktu widzenia dostępności jest zmienianie koloru np. pojedynczych wyrazów, czy zwykłych list nieuporządkowanych. Wielu doświadczonych użytkowników internetu z łatwością pojmie, iż to tylko artystyczne zabiegi autora, ale jak zareagują na nie początkujący internauci?

<ul>
     <li><a href="#">jeden</a></li>
     <li><a href="#">dwa</a></li>
     <li><a href="#">trzy</a></li>
     <li><a href="#">cztery</a></li>
</ul>

Pierwszy problem to odstępy. Niektóre przeglądarki używają właściwości margin, a inne właściwości padding. Najlepiej więc będzie, jeśli wyzerujemy jedną z nich, a posłużymy się tylko drugą. Pozbądźmy się także wypunktowania:

ul {
    margin: 0;
    padding: 5px

}

li {
     style-type; none;
     margin: 0;
     padding: 2px;
     width: 150px
     }

To co prawia najwięcej kłopotu, to zrobienie menu, które zmieniałoby kolor po najechaniu na nie kursorem. Niektórzy używają do tego JavaScriptu, inni pseudoklasy :hover na elemencie LI. JavaScript to w tym przypadku uderzanie kilofem w muchę, a drugie, choć najprostsze i chyba najbardziej eleganckie, nie jest obsługiwane przez Internet Explorera. Musimy poradzić sobie inaczej – zdefiniujmy po prostu pseudoklasę :hover dla odnośnika:

a {
     background: black;
     color: white
}

a:hover {
     background: white;
     color: red
}

Teraz musimy “rozszerzyć” odnośnik tak, aby całkowicie wypełniał element LI. Zrobimy to przekształcając go w element blokowy:

a {
     display: block;
     background: black;
     color: white
}

Możemy dla odnośników zdefiniować więcej właściwości tworząc w pełni semantyczne, działające w każdej przeglądarce i ładne menu.

Kolejne wyzwanie, to menu o ułożeniu poziomym. Najprostsza metoda na osiągnięcie takiego efektu to ustawienie floatu dla LI:

li {
     style-type; none;
     margin: 0;
     padding: 2px;
     width: 150px;
     float: left

W rezultacie otrzymujemy ładne, proste i dobrze zbudowane menu.

Nowicjusze często używają ramek. Ramki są niedobre z kilku powodów – uniemożliwiają skuteczne pozycjonowanie strony w wyszukiwarkach internetowych i utrudniają drukowanie. Nawigacja tworzona na ramkach oznacza de facto brak nawigacji… Najczęściej nie można skopiować adresu pojedynczej podstrony, ani dodać jej do zakładek. O różnych innych ważnych szczegółach przemawiających przeciw ramkom można poczytać na stronie pornel.net/ramki.

Często budują strukturę strony w oparciu o tabele. To równiez zły nawyk, o czym napisano szerzej na stronie http://osiolki.net/tabelki/

Osoby początkujące cechuje często brak umiejętności doboru odpowiednich kolorów. Nie chodzi bynajmniej o brak artystycznego drygu, który wcale nie jest cechą każdego profesjonalnego webmastera, lecz o wybieranie kolorów, które utrudniają odbiór treści zawartych na stronie. Przede wszystkim należy zadbać o odpowiedni kontrast tekstu z tłem i pamiętać, że najlepiej czyta się ciemne litery na jasnym tle. Złym pomysłem są też w ogóle wszelkie jaskrawe kolory.

Kolejny błąd to umieszczanie ciężkiej grafiki. Grafika dekoracyjna powinna być maksymalnie lekka i najlepiej zapisana w formacie GIF, lub PNG.

Następna bolączka na stronach tworzonych przez początkujących twórców to gigantyczna ilość animowanych GIF-ów i przeróżnych efektów osiągniętych przy pomocy darmowych skryptów języka JavaScript. Jest to typowy przerost formy nad treścią, którego należy unikać. Większość osóbv prędko ucieknie z takiej strony.

Bardzo denerwujące są applety Javy, które najczęściej zastępują menu. Na szczęście jest to raczej nieczęste zjawisko. Pamiętajmy, że stanowi ono pogwałcenie podstawowych zasad dostępności stron internetowych. Ważne funkcje witryny, jak np. menu, powinny być tworzone przy użyciu technologii z których każdy może korzystać. Java do takich technologii nie należy.

Nie należy do nich również Macromedia Flash, a jest to technologia nagminnie nadużywana w naszym kraju. Tworzenie w niej ważnych elementów strony, nie mówiąc już o całych serwisach, to kompletne nieporozumienie i brak zrozumienia tematyki tworzenia stron.

Jedną z rzeczy, które najbardziej mnie denerwują jest tak zwana strona wstępna. Jest to niepotrzebne utrudnianie życia internautów, którzy bez wyraźnej potrzeby muszą pobrać większe ilości danych(co w niektórych przypadkach ma duże znaczenie). Wywołuje irytację i zmusza do dłuższego oczekiwania na możliwości skorzystania w właściwej treści strony.

Widać także braki w tworzeniu dobrych odnośników. Odnośnik w tekście musi być odpowiednio wyróżniony, w menu nie koniecznie. Nie należy w odnośnikach używać JavaScriptu, ani wymuszać otwierania nowych okien. Niby proste… ale jednak trudne.

Korzystanie ze strony utrudniają także zbyt małe litery. Używania w tekstach malutkich czcioneczek, które 90% osób musi i tak powiększyć nie świadczy raczej o zbyt wielkim rozsądku twórcy(tfurcy?).

To podstawy, absolutne minimum. Jeśli popełniasz którykolwiek z tych błędów, to znaczy, że jeszcze wielu rzeczy musisz się nauczyć.