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 comealt
text dell’area
della mappa di immagini. Senza glialt
text, Lynx visualizza gli indirizzi dei link di ogniarea
, 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
- 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
. Senzaalt
text, Links visualizza l’indirizzo del link di ogniarea
, cosa di per sè incomprensibile. - A Jackie. JAWS leggerà gli
alt
text di ogniarea
della mappa di immagini, nell’ordine in cui sono stai definiti nel codice sorgente HTML . Jackie può premere ENTER e seguire il link. Senzaalt
text, JAWS legge l’indirizzo del link di ogniarea
, che, quasi certamente, risulta incomprensibile. (Avete mai cercato di leggere a qualcuno al telefono un lungo indirizzo web?) - A Lillian. Internet Explorer visualizza un tooltip quando si passa con il mouse su ogni
area
che presenta dei link nella mappa di immagini. - A Google. Googlebot indicizza gli
alt
text dell’immagine principale e di ogniarea
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.