Giorno 24: Fornite testi equivalenti per mappe di immagini

Sono rimasto sorpreso nel verificare come molti web d’alto profilo utilizzino le mappe di immagini client-side. Personalmente non le uso, non credo siano incluse nei modelli forniti per i weblog, ma apparentemente moltissimi le hanno scoperte. Se non sapete cosa sono le mappe di immagini, Leslie Harpold ne usa una come barra di navigazione al fondo della sua pagina. E’ tutta una sola immagine, ma cliccando sulla parola “archives” andate in quella pagina, su “by category” e siete su un’altra, e così via.

Le mappe di immagini potrebbero sembrare un incubo per l’accessibilità, ma non è così. Come ogni immagine necessita di un testo equivalente, così anche ogni mappa di immagine, ed ogni sua area sensibile, ha bisogno di un equivalente testuale. Potete inserire alt text dell’immagine stessa (nel tag <img> ), e per ogni area sensibile della mappa (nel tag <area> associato a <map>, che definisce l’area sensibile e il link associato).

A chi serve?

  • A Marcus. Lynx visualizza gli alt text delle immagini come link. Quando Marcus preme ENTER, Lynx visualizza in una pagina separata i link presenti nella mappa di immagini. Ogni link è etichettato come alt text dell’ area della mappa di immagini. Senza gli alt text, Lynx visualizza gli indirizzi dei link di ogni area, il chè può apparire incomprensibile.

Se Leslie non avesse alt text sulla sua mapppa di immagini, questo sarebbe il link che Marcus vedrebbe al fondo della pagina:

[USEMAP:hpfooter.gif]

Seguendo questo link Marcus arriverebbe ad una pagina che lista tutti i link della mappa di immagini. Senza alt text, Lynx può solo visualizzare ogni URL, in questo modo:

[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

A dire il vero, Leslie ha davvero alt text per l’immagine e per ogni area della mappa.
Ed ecco allora cosa vede Marcus:

Site navigation links

E seguendo questo link:

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
  1. A Michael. Links visualizza gli  alt text delle immagini come link. Quando Michael preme ENTER, Links propone un menu con tutti i link definiti nella mappa. Ogni link è etichettato con il valore dell’ alt text dell’ area . Senza alt text, Links visualizza l’indirizzo del link di ogni area, cosa di per sè incomprensibile.
  2. A Jackie. JAWS leggerà gli  alt text di ogni area della mappa di immagini, nell’ordine in cui sono stai definiti nel codice sorgente HTML . Jackie può premere ENTER e seguire il link. Senza   alt text, JAWS legge l’indirizzo del link di ogni area, che, quasi certamente, risulta incomprensibile. (Avete mai cercato di leggere a qualcuno al telefono un lungo indirizzo web?)
  3. A Lillian. Internet Explorer visualizza un tooltip quando si passa con il mouse su ogni area che presenta dei link nella mappa di immagini.
  4. A Google. Googlebot indicizza gli  alt text dell’immagine principale e di ogni  area all’interno della mappa di immagini. L’ alt text è un fattore utilizzato per determinare sia la rilevanza della pagina rispetto alle parole chiave, sia la rilevanza di ogni link rispetto alle parole chiave contenute nell’ alt text di quell’  area.

Come fare

Se avete una mappa di immagini come questa:

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

Aggiungete l’ alt text sia all’immagine principale, sia ad ogni  area con link all’interno della mappa di immagini, così:

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

Tutte le regole sullo  scrivere dei buoni  alt text per le immagini valgono anche per le mappe di immagini. Potete inoltre aggiungere title=""  all’ <img> principale e di ogni <area>, per eliminare la visualizzazione del tooltip nei browser visuali.

Cose da non fare

Non create mappe di immagini server-side, ovvero immagini che rispediscono al server le coordinate esatte di quanto selezionato, per ulteriori elaborazioni. Queste mappe sono  completamente inaccessibili  agli utenti di JAWS come Jackie, a quelli dei browser solo testuali come Michael e Marcus, a chi usa solo la tastiera come Bill, e ai motori di ricerca come Google. Se dovete usare mappe di immagini server-side, aggiungetevi, subito sotto, un barra di navigazione solo testo che includa veri link testuali ad ognuna delle pagine a cui si accederebbe selezionando ognuno dei punti della mappa di immagini.

Approfondimenti

  • Leslie Harpold: The Historical Present. Leslie mi ha consentito di utilizzare il suo weblog come base per l’esempio di oggi.