Dag 24: Tilby alternativ tekst til bildekart

Jeg var overrasket over å finne ut hvor mange høyt profilerte nettsteder som brukte klientside-bildekart. Jeg bruker dem ikke selv, og jeg tror ikke de er inkludert i noen standard-webloggmaler, men mange har tydeligvis funnet ut av å bruke dem. Hvis du ikke vet hva et bildekart er, så bruker Leslie Harpold et slikt for navigasjon og lenker på bunnen av sin hjemmeside. Det hele er kun ett bilde, men når du klikker på ordet «archives» så blir du tatt til en ny side, «by category» tar deg til en annen, osv.

Bildekart høres ut som et tilgjengelighets-mareritt, men det er ikke dét. På samme måte som at alle bilder trenger en alternativ tekst, trenger hvert bildekart og hvert klikkbare område på bildekartet en alternativ tekst. Du kan tilby en alt-tekst for selve bildet (i <img>-taggen), og for hvert klikkbare område i bildekartet (i <area>-taggen assosiert med <map>, det definerer hvor det klikkbare området er og hva det lenker til).

Hvem har nytte av det?

  1. Marius har nytte av det. Lynx viser alt-teksten til bildet som en lenke. Når Marius trykker ENTER viser Lynx en egen side som lister alle lenkene i bildekartet. Hver lenke er merket med alt-teksten til area i bildekartet. Uten noen alt-tekst viser Lynx lenke-adressen til hver area, noe som kan bli uforståelig.

    Hvis ikke Leslie hadde alt-tekster på bildekartet sitt, så ville Marius sett følgende lenke på bunnen av hennes hjemmeside:

    [USEMAP:hpfooter.gif]

    Denne lenken skal ta Marius til en side som lister alle lenkene i bildekartet. Uten alt-tekster kan Lynx bare vise hver URL, noe som vil se ut som dette:

    [USEMAP:hpfooter.gif]

MAP: http://leslie.harpold.com/#Map

    1. http://leslie.harpold.com/archives.html
    2. http://leslie.harpold.com/category/
    3. http://leslie.harpold.com/links.html
    4. http://leslie.harpold.com/leslie.html
    5. http://www.moveabletype.org

    Dog, i det virkelige liv har Leslie en ordentlig alt-tekst for sitt bilde og hvert av områdene på bildekartet. Så dette er lenken Marius faktisk ser på bunnen av hennes hjemmeside:

    Site navigation links

    Denne lenken tar Marius til en side som ser ut som dette:

    Site navigation links

MAP: http://leslie.harpold.com/#Map

    1. previously...
    2. by category
    3. about the site
    4. about leslie
    5. Powered by Movable Type
  2. Jørgen har nytte av det. Links viser alt-teksten til bilder som lenker. Når Jørgen trykker ENTER spretter det en meny opp i Links med alle lenkene i kartet. Hver lenke er merket med alt-teksten til dets area. Uten noen alt-tekst ville Links vist lenke-adressen til hver area, noe som kan bli uforståelig.
  3. Anne har nytte av det. JAWS leser alt-teksten til hver area i bildekartet i den rekkefølgen de er definert i HTML-kilden din. Anne kan trykke ENTER for å følge lenken. Uten alt-teksten leser JAWS lenke-adressen til hver area, noe som nesten helt sikkert blir uforståelig. (Har du noensinne prøvd å lese opp en lang webadresse til noen over telefonen?)
  4. Lillian har nytte av det. Internet Explorer viser et verktøytips når hun holder musen over hvert lenked area på bildekartet.
  5. Google har nytte av det. Googles Googlebot indekserer alt-teksten til bildet på hovedsiden og hver area innen bildekartet. alt-teksten er en faktor for å avgjøre både dine siders relevans til nøkkelord, og også hver lenkes relevans til nøkkelord innenfor alt-teksten til area.

Hvordan gjøre det

Hvis du har et bildekart som dette:

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

<map name="Map">
<area shape="rect" coords="203,114,258,129" href="/archives.html">
<area shape="rect" coords="277,113,348,129" href="/category/">
<area shape="rect" coords="364,113,401,128" href="links.html">
<area shape="rect" coords="418,114,488,130" href="leslie.html">
<area shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org">
</map>

Legg til alt-tekst til både hovedsidens bilde, og til hvert lenkede area innenfor bildekartet, slik:

<img alt="Site navigation links" src="footer.gif" width="500" height="212" usemap="#Map">

<map name="Map">
<area alt="previously..." shape="rect" coords="203,114,258,129" href="/archives.html">
<area alt="by category" shape="rect" coords="277,113,348,129" href="/category/">
<area alt="about the site" shape="rect" coords="364,113,401,128" href="links.html">
<area alt="about leslie" shape="rect" coords="418,114,488,130" href="leslie.html">
<area alt="Powered by Movable Type" shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org">
</map>

Alle reglene for å skrive gode alt-tekster til bilder gjelder også bildekart. Du kan også legge på title="" til hoved-<img> og til hver <area> for å skjule verktøytipset i visuelle nettlesere.

Ikke-gjøre ting

Ikke lag bildekart på serveren, altså bilder der de nøyaktige koordinatene for hvor du klikket blir sendt tilbake til serveren for å behandles der. Disse er fullstendig utilgjengelige for JAWS-brukere som Anne Merete, brukere av tekstbaserte nettlesere som Jørgen og Marius, kun-tastatur-brukere som Knut og søkemotorer som Google. Hvis du må bruke serverside-bildekart så legg til en tekstbasert navigasjonsliste nedenfor som inkluderer ekte tekstlenker til hver side du kan komme til ved å klikke på bildekartet.

Les mer

 
<< Dag 23: Tilby alternativ tekst til bilder | Innholdsfortegnelse | Dag 25: Bruke ekte horisontale linjer (eller etterlikne dem skikkelig) >>