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 linkami 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?

  1. Marek skorzysta. Lynx pokazuje tekst z atrybutu alt obrazka mapy jako link. Kiedy Marek wciśnie ENTER, Lynx pokaże osobną stronę z linkami opisanymi w tej mapie. Każdy link 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 linkó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 linku spowoduje, że Marek zobaczy stronę z listą wszystkich linków zdefiniowanych w tej mapie. Jeżeli nie ma testów alternatywnych, Lynx może jedynie pokazać adresy URL linkó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 link:

    Nawigacja bloga

    Ten link 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
  2. Michał skorzysta. Links również pokazuje treść atrybutu alt z mapy graficznej jako link. Kiedy Michał wciśnie ENTER, Links otwiera małe okienko z linkami zdefiniowanymi w danej mapie. Każdy link jest opisany przez atrybut alt danego obszaru. Bez atrybutów alt, Links pokazuje tylko adresy linków zdefiniowanych w mapie, co może być niezrozumiałe.
  3. 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 linku naciskając ENTER. Jeśli nie podasz tekstów alternatywnych w atrybutach alt, JAWS przeczyta adres linku dla każdego obszaru, co niemal na pewno będzie niezrozumiałe (próbowałeś kiedyś podyktować długi adres strony komuś przez telefon?)
  4. Julia skorzysta. Internet Explorer pokazuje tooltip kiedy umieścisz kursor nad obszarem mapy graficznej.
  5. 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 linkó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 linki do każdej strony, która jest osiągalna przez kliknięcie na obrazku mapy.

Zobacz także

 
<< Dzień 23: Odpowiedniki tekstowe dla obrazków | Spis treści | Dzień 25: Używanie prawdziwych linii (albo dobrze udawanych) >>