WebAudit Blog

Poniżej znajdziecie artykuł, który napisałem dla press roomu Instytutu Wzornictwa Przemysłowego w związku z konferencją Projektowanie uniwersalne.

Tekst ma charakter popularny, więc specjaliści niech wybaczą uproszczenia.

Czym jest tekst alternatywny?

Jedno z najważniejszych wyzwań w dostępności stron internetowych stanowi prawidłowe użycie tekstu alternatywnego. Nazywamy w ten sposób każdy tekst, który pojawia się zamiast innego elementu, najczęściej – zamiast ilustracji.

Komu przydaje się taki tekst alternatywny?

1. Przede wszystkim – niewidomym, gdyż oni nie mogą w ogóle przeczytać treści obrazków, zaś treść tekstu alternatywnego odtwarzają dla nich czytniki ekranu, np. JAWS.
2. Tym, którzy wyłączyli obrazki w przeglądarce. Kiedyś przyczyną takiego wyłączania były wolne połączenia z Internetem, np. za pomocą modemu, gdy płacono za czas połączenia. Obecnie – tysiące ludzi korzysta z połączeń GPRS przy użyciu laptopów lub telefonów komórkowych – i płacą za pobrane dane. Strona z wieloma obrazkami może „ważyć” 500 kB – a to oznacza koszt od 15 groszy do nawet kilku złotych za jej otwarcie.
3. Użytkownikom nielicznych już dziś przeglądarek tekstowych, np. Lynx i Links.
4. Wyszukiwarkom internetowym, m.in. Google. Programy wyszukiwarek grafiki nie są w stanie zrozumieć treści ilustracji, dlatego wykorzystują tekst alternatywny.

Tekst alternatywny ma „przezroczysty” charakter – nie jest widoczny podczas normalnego korzystania ze strony, tj. przez widzącą osobę, która nie wyłącza obrazków.

Co stanie się, jeśli o takim tekście zapomnimy? Osoba niewidoma usłyszy, a osoba która wyłączyła obrazki przeczyta samą nazwę pliku z ilustracją. Może to mieć sens (np. „logo_firmy.jpg”), ale najczęściej pliki nie są poprawnie nazywane (np. „img_34234_dkkk.png”). Jeśli taki obrazek jest odnośnikiem do innej strony, to nie ma możliwości zorientowania się, do jakiej strony on właściwie prowadzi.

Kto powinien pisać teksty alternatywne?

Zdałoby się, że jest to sprawa czysto techniczna, administracyjna, nie warto więc się zastanawiać nad takim tekstem. Niestety, sprawa ma się inaczej. Nie można pisania takiego tekstu pozostawić webmasterom czy informatykom. Oni najczęściej nie rozumieją potrzeb osób które muszą korzystać z takich udogodnień. Nie istnieją też narzędzia, które umiałyby taki tekst wstawiać automatycznie. Narzędzie – podobnie jak czytnik ekranu nie wie, jaka treść kryje się za obrazkiem.

Wniosek jest tylko jeden: za teksty alternatywne musi odpowiadać osoba, która zajmuje się resztą treści w serwisie. Co to oznacza w praktyce? Jeśli w systemie zarządzania treścią serwisu można wstawiać ilustracje, musi być tam również możliwość umieszczenia tekstu alternatywnego do tej ilustracji.

Tekst alternatywny (zwany też „alt” od nazwy atrybutu HTML) należy odróżniać od atrybutu „title”, który zawiera tekst „dymka”, jaki pojawia się po najechaniu nad dany element kursorem myszy. Taki „dymek” jest przydatny – ale nie obowiązkowy, a tekst alternatywny musimy mieć.

Jak napisać tekst alternatywny?

Tekst alternatywny ma przede wszystkim pomóc korzystać ze strony osobie, która nie może obejrzeć grafiki. Co byśmy komuś takiemu opowiedzieli , gdyby przyszło nam czytać dla niej tę stronę?

Najłatwiej jest w sytuacji, gdy ilustracja zawiera już jakiś tekst. Wtedy najczęściej można po prostu ten tekst powtórzyć w tekście alternatywnym.

Gdy ilustracja nie zawiera tekstu, należy pamiętać o dwóch zasadach: piszemy, czym ten obrazek jest, lub co opisuje, ewentualnie opisujemy funkcję tego obrazka. Nie piszemy jednak, że to jest obraz. Lakoniczny opis: „Zdjęcie” nic nie powie osobie niewidomej. Musimy napisać, jaka jest zawartość takiego zdjęcia: „Premier Iksiński i minister Kowalski podczas konferencji prasowej”.

W przypadku bannerów czy innych form reklamy, należy wyraźnie określić, że jest to reklama. Widząc banner wiemy o tym natychmiast. Jednak osoba niewidoma nie będzie w stanie wywnioskować tego z kontekstu. Nie możemy napisać tylko „Reklama”, lepiej będzie streścić przesłanie reklamy czy też najważniejszy slogan.

Tekst alternatywny powinien być krótki – do 250 znaków. Im krócej tym lepiej – pamiętajmy, że osoba niewidoma musi tych wszystkich informacji wysłuchać, co zabiera jej czas.

Co z opisem bardziej skomplikowanych ilustracji, np. wykresów lub infografik? W tekście alternatywnym podsumowujemy zawartość grafiki: „Zachorowania na grypę wśród mieszkańców Polski w latach 1970-2000”, albo „Wartość Produktu Narodowego Brutto w krajach Europy w roku 2007”. Taki opis niestety nie wystarczy, bo czytelnik wprawdzie wie o czym jest wykres, ale nadal nie zna jego treści. Jak te zachorowania na grypę się kształtowały? Najlepiej opis zawartości takiego wykresu umieścić na osobnej stronie pozostawiając odnośnik. To oczywiście nie oznacza, że musimy podawać wszystkie dane liczbowe. Wystarczy streszczenie i opis trendów – tak jakbyśmy wykres przedstawiali komuś przez telefon.

Co zrobić w sytuacji, gdy ilustracja nie zawiera żadnej treści? Na przykład, gdy jest to czysty ozdobnik. W takiej sytuacji wstawiamy po prostu pusty opis (ale opis musi być, nawet jeśli jest pusty – w przeciwnym razie czytnik znowu odczyta całą długą nazwę pliku np. „pionowa_belka_3422_optimised.gif”). Nie musimy też wstawiać opisów dla obrazków tła.

Co możesz zrobić?

Najpierw należy sprawdzić jakość tekstów alternatywnych w swojej witrynie. W tym celu należy wyłączyć obrazki w swojej przeglądarce:

• Internet Explorer: Narzędzia — Opcje internetowe — Zaawansowane — Pokaż obrazy
• Mozilla Firefox: Narzędzia — Opcje — Treść –Pobieraj obrazki automatycznie
• Opera: Widok — Obrazki — Bez obrazków

Następnie chodzimy po stronie tak, jakbyśmy jej używali normalnie – ale bez ilustracji. Szukamy przy tym odpowiedzi na pytania:

• czy tracimy jakieś informacje?
• czy możemy wejść na wszystkie strony?
• czy opisy obrazków są zrozumiałe?

Ostatni etap to poprawienie tekstów alternatywnych. Jeśli wykryte przez nas problemy dotyczą treści artykułów, prawdopodobnie możemy to zrobić przez system zarządzania treścią. Jeśli zauważymy problemy np. z menu czy innymi elementami powtarzającymi się na każdej stronie, kwestia dotyczy zapewne szablonu strony – i tu musimy skontaktować się z osobami odpowiedzialnymi za opiekę techniczną nad serwisem.

Osoby niewidome oraz te, które z innych powodów wyłączają obrazki na pewno docenią nasz wysiłek.

Bibliografia

1. Joe Clark, Building Accessible Websites, wersja online dostępna na http://joeclark.org/book/
2. Mark Pilgrim, W głąb dostępności, wersja online dostępna na http://mimas.ceti.pl/dia/