PROGRAMMIAMO
HTML - Accessibilità e immagini
L'attributo alt

Ovviamente le immagini costituiscono uno degli elementi più critici per gli utenti con disabilità visive, in quanto non possono essere facilmente tradotte in modo vocale dai lettori automatici. Per consentire una corretta identificazione del contenuto di un'immagine bisogna usare l'attributo alt, come nel seguente esempio:

<img src="eclissi.jpg" alt="Eclissi totale di sole">

Come si vede l'attributo alt fornisce una breve descrizione del contenuto dell'immagine. Tale descrizione viene letta dai lettori vocali e sostituisce, per chi non è in grado di vedere l'immagine stessa. Ciò è naturalmente di grande aiuto per le persone con disabilità visive, ma è anche utile per il corretto riconoscimento e indicizzazione dell'immagine da parte dei motori di ricerca. Come spesso accade, un sito progettato bene, avendo in mente l'accessibilità, è anche un sito che viene riconosciuto e indicizzato correttamente dai motori di ricerca (come per esempio Google).

In generale l'attributo alt dovrebbe contenere solo una breve descrizione dell'immagine, evitando frasi lunghe o inutili precisazioni. Per esempio:

<img src="cane.jpg" alt="foto di un cane di razza pastore tedesco">

è sostituibile, in modo più efficace, con:

<img src="cane.jpg" alt="pastore tedesco">

Quando l'immagine viene usata per realizzare un link (immagini cliccabili), l'attributo alt dovrebbe descrivere il link e non il contenuto dell'immagine. Per esempio questa soluzione non è corretta:

<a href="http://www.miosito.it"> <img src="casetta.gif" alt="piccola casa"> </a>

mentre è senz'altro meglio scrivere così:

<a href="http://www.miosito.it"> <img src="casetta.gif" alt="Pagina principale"> </a>

Una breve nota va anche dedicata a quelle immagini usate con puro scopo decorativo (come linee di separazione, immagini vuote segnaposto, etc.) senza nessun significato o contenuto. In questo caso la soluzione corretta è utilizzare un attributo alt vuoto, come nel seguente esempio:

<img src="barra.gif" alt=" " >

In questo modo il lettore vocale non leggerà nulla in corrispondenza della immagine (che, essendo un puro elemento decorativo, non avrebbe comunque nessun significato per una persona non vedente).

L'attributo title

In alcuni browser l'attributo alt viene visualizzato come un breve suggerimento (tooltip) al momento del caricamento dell'immagine. Questa visualizzazione non è però standard e non viene fatta da tutti browser. Se si vuole inserire un testo da visualizzare come tooltip, occorre usare l'attributo title, come nel seguente esempio:

<img src="bluemark.gif" alt="Penn State University" title="Founded in 1855" >

In questo caso, passando il mouse sopra l'immagine, si ottiene il seguente risultato:

Attrbuto title

Si osservi che nell'elemento <img> sono stati usati sia l'attributo alt (usato dai lettori vocali) che l'attributo title (usato per fornire un tooltip).

L'attributo longdesc

Il testo alternativo dell'attributo alt dovrebbe essere sempre piuttosto breve (poche parole). In alcuni casi, quando l'immagine è particolarmente importante e/o il suo contenuto è complesso, può essere necessario ricorrere a una descrizione più lunga. In queste situazioni si può usare l'attributo longdesc come nell'esempio seguente:

<img src="gatto.jpg" alt="Gatto dell'isola di Man" longdesc="gattoman.html" >

Si noti che longdesc rimanda a una pagina html la quale contiene una descrizione più lunga e dettagliata dell'immagine stessa. Occorre tuttavia notare che longdesc non viene supportato correttamente da tutti i lettori vocali e inoltre è deprecato in HTML 5.

Una soluzione più semplice, e probabilmente migliore, consiste nel fornire direttamente un link con la descrizione sotto l'immagine stessa, come nell'esempio qui sotto:

Manx breed cat named Inkku.jpg
Visualizzare la descrizione estesa

Captcha

Un particolare problema di accessibilità presentano anche le cosiddette captcha, cioè quelle immagini che l'utente deve riconoscere per poter dimostrare di essere un umano e non un computer:

captcha

In generale un captcha ben progettato dovrebbe offrire sempre un'alternativa audio alla semplice immagine visiva.

 

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it