Giorno 24 – Fornite testi equivalenti per mappe di immagini

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.

Potrebbero interessarti anche i seguenti articoli

Condividi:

Informazioni sull'autore

Franco Carcillo
Franco Carcillo
Sono nato (1956) e vivo a Torino.  Da oltre 26 anni lavoro ('da sempre') presso il Comune di Torino, presso il Sistema Informativo. Mi occupo di web.  Sono infatti Direttore Responsabile dei siti internet della Città, sin dalla loro nascita, nel 1994. Prima del 1994 mi sono occupato di informatica gestionale classica, anche se in ambiente distribuito (mini e pc, sin dal loro apparire nella Civica Amministrazione).  Negli anni 80 mi sono appassionato, nel tempo libero, di telematica.  Mio è stato il primo nodo della rete Fidonet in Torino città (Fido_Torino e  TO_news) nel 1987.  Sono stato anche coordinatore nazionale della rete amatoriale, anche se solo per 6 mesi. Poi ho abbandonato:  troppe le pressioni intorno a quello che doveva essere, alla fine, un semplice hobby. Quando non ci si diverte più, meglio spegnere. Ma la passione telematica è rimasta.  Ed ecco che ho tenuto ogni settimana (sino alla chiusura del giornale!) la prima rubrica di telematica pubblicata  su un quotidiano italiano "StampaSera"; a quei tempi di internet se ne parlava vagheggiandola nei meandri universitari e militari americani. Ho pubblicato il primo speciale pubblicato in Italia riguardante i bbs su BIT della Jackson;  ho collaborato, con altre riviste, tra cui PCWORLD dove ho avuto per lungo tempo una rubrica fissa. Di interner e dei siti, che dire? C'è ancora tanta strada da percorrere: l'accessibilità ne è un'esempio. Ma anche rendere i siti davvero fruibili così come far 'trovare' la montagna di informazioni memorizzate tra le pagine, sono sfide  non da poco. Vi pare? All'Università di Torino, quest'anno, molti studenti hanno partecipato, interessatissimi, ad un mio breve seminario su 'Progettare siti web per la Pubblica Amministrazione, la sfida dell'accessibiltià e usabilità'.  E' stupefacente notare come le persone che usano tutti i giorni la rete e a cui spieghi come e perchè i siti non sono nè usabili nè accessibili si rendano immediatamente conto e capiscano: quasi un velo, un sipario sia stato loro svelato. Ecco perchè ho deciso di tradurre 'Dive into accessibility':  perchè affrontare l'accessibilità non è così difficile. Certo nei siti mastodontici le operazioni possono essere lunghe, ma non vi sono più scuse per partire con nuovi progetti 'alla cieca'.

Commenti

Nessun commento

    Rispondi

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Link e informazioni