Dzień 24: Odpowiedniki tekstowe dla map graficznych

Zadziwiające jak wiele stron internetowych używa map graficznych. Osobiście tego nie robię i nie sądzę, żeby były użyte w domyślnych szablonach blogów, ale widocznie wiele osób jakoś wpadło na to, żeby czegoś takiego użyć. Mapa graficzna to jeden obrazek, na którym są zdefiniowane obszary, będące odnośnikami do innych stron. Np. kliknięcie słowa „archiwum” na tym obrazku przenosi do strony z archiwum wpisów, kliknięcie słowa „kontakt” prowadzi do strony kontaktowej itd.

Mapy graficzne brzmią jak koszmar z punktu widzenia dostępności, ale wcale takie tragiczne nie są. Tak samo jak każdy obrazek potrzebuje odpowiednika tekstowego, każda mapa graficzna i każdy jej obszar potrzebuje takiego odpowiednika. Możesz dopisać tekst alternatywny (atrybut alt) dla obrazka mapy jako całości (w tagu <img>), a także dla każdego obszaru mapy z osobna (w tagu <area> albo w tagu <map>, który definiuje poszczególne obszary mapy i strony do których prowadzą). Kto na tym skorzysta?

Marek skorzysta. Lynx pokazuje tekst z atrybutu alt obrazka mapy jako odnośnik. Kiedy Marek wciśnie ENTER, Lynx pokaże osobną stronę z odnośnikami opisanymi w tej mapie. Każdy odnośnik jest opisany przez treść atrybutu alt z odpowiedniego taga <area>. Jeżeli nie podasz tekstów alternatywnych dla poszczególnych obszarów mapy, Lynx pokaże adresy odnośników, co może być niezrozumiałe.

Przykładowo, jeśli na Twoim blogu masz mapę graficzną opartą na pliku stopka.gif i nie masz tekstów alternatywnych, Marek zobaczy tylko tyle:

[USEMAP:stopka.gif]

Przejście do tego odnośnika spowoduje, że Marek zobaczy stronę z listą wszystkich odnośników zdefiniowanych w tej mapie. Jeżeli nie ma testów alternatywnych, Lynx może jedynie pokazać adresy URL odnośników, co wyglądałoby np. tak:

[USEMAP:stopka.gif] MAP: http://twoj.serwer.pl/blog/#Map

    1. http://twoj.serwer.pl/blog/archiwum.html
    2. http://twoj.serwer.pl/blog/kontakt.html
    3. http://twoj.serwer.pl/blog/linki.html
    4. http://twoj.serwer.pl/blog/about.html
    5. http://nibylog.org

Jednak jeśli dodasz poprawne atrybuty alt dla obrazka mapy i każdego jej obszaru, Marek zobaczy np. taki odnośnik:

Nawigacja bloga

Ten odnośnik mógłby przenieść Marka na stronę z obszarami mapy, np.:

Nawigacja bloga MAP: http://twoj.serwer.pl/blog/#Map

    1. archiwum wpisów
    2. napisz do mnie
    3. ciekawe strony
    4. o mnie
    5. powered by niByLog

Michał skorzysta. Links również pokazuje treść atrybutu alt z mapy graficznej jako odnośnik. Kiedy Michał wciśnie ENTER, Links otwiera małe okienko z odnośnikami zdefiniowanymi w danej mapie. Każdy odnośnik jest opisany przez atrybut alt danego obszaru. Bez atrybutów alt, Links pokazuje tylko adresy odnośników zdefiniowanych w mapie, co może być niezrozumiałe. Jadzia skorzysta. JAWS przeczyta tekst alternatywny dla każdego obszaru mapy w kolejności w jakiej są one zdefiniowane w kodzie HTML Twojej strony. Jadzia może przejść do danego odnośnika naciskając ENTER. Jeśli nie podasz tekstów alternatywnych w atrybutach alt, JAWS przeczyta adres odnośnika dla każdego obszaru, co niemal na pewno będzie niezrozumiałe (próbowałeś kiedyś podyktować długi adres strony komuś przez telefon?) Julia skorzysta. Internet Explorer pokazuje tooltip kiedy umieścisz kursor nad obszarem mapy graficznej. Google skorzysta. Googlebot indeksuje treści atrybutów alt w samym obrazku mapy oraz w zdefiniowanych obszarach. Teksty te posłużą do określenia związku zarówno Twojej strony jak i odnośników w mapie z zapytaniem w wyszukiwarce. Jak to zrobić?

Jeżeli masz mapę graficzną zdefiniowaną np. tak:

<img src="stopka.gif" width="500" height="212" usemap="#Map">

<map name="Map"> <area shape="rect" coords="203,114,258,129" href="archiwum.html"> <area shape="rect" coords="277,113,348,129" href="kontakt.html"> <area shape="rect" coords="364,113,401,128" href="linki.html"> <area shape="rect" coords="418,114,488,130" href="about.html"> <area shape="rect" coords="-4,190,131,210" href="http://nibylog.org"> </map>

Dodaj atrybuty alt zarówno dla obrazka, jak i dla każdego obszaru zdefiniowanego przez area, np.:

<img alt="Nawigacja bloga" src="stopka.gif" width="500" height="212" usemap="#Map">

<map name="Map"> <area alt="archiwum wpisów" shape="rect" coords="203,114,258,129" href="archiwum.html"> <area alt="napisz do mnie" shape="rect" coords="277,113,348,129" href="kontakt.html"> <area alt="ciekawe strony" shape="rect" coords="364,113,401,128" href="linki.html"> <area alt="o mnie" shape="rect" coords="418,114,488,130" href="about.html"> <area alt="powered by niByLog" shape="rect" coords="-4,190,131,210" href="http://nibylog.org"> </map>

Wszystkie zasady dotyczące tworzenia dobrych tekstów alt dla obrazków dotyczą również map graficznych. Możesz również dodać title="" do głównego taga <img> oraz każdego <area> aby powstrzymać pokazywanie jakiegokolwiek tekstu dla wyświetlonych obrazków w przeglądarkach graficznych. Rzeczy, których nie wolno robić

Nie wprowadzaj map server-side, czyli obrazków, z których dokładne współrzędne kliknięcia myszką są przesyłane na serwer do dalszego przetwarzania. Taki mechanizm jest całkowicie niedostępny dla użytkowników programów typu JAWS (jak Jadzia), użytkowników przeglądarek tekstowych (jak Michał i Marek), użytkowników korzystających tylko z klawiatury (jak Bill), oraz wyszukiwarek (jak Google). Jeżeli już koniecznie musisz korzystać z map przetwarzanych po stronie serwera, dodaj poniżej pasek tekstowy zawierający prawdziwe odnośniki do każdej strony, która jest osiągalna przez kliknięcie na obrazku mapy. Zobacz także A. J. Flavell: Imagemaps — Text-friendly?. O dostępności map w przeglądarkach tekstowych — fragment większej całości zatytułowanej Text-friendly authoring. (Strona w języku angielskim)



Zmodyfikowano: 18.03.2006, 23:17