ALT testo alternativo immagini
Oggi parleremo dell'attributo ALT che nel testo HTML, funge da portavoce per le immagini.
Cosa significa ALT?
ALT sta per "alternative", che tradotto nella nostra lingua significa "Alternativo".
A cosa serve l'attributo ALT?
Come ci dice appunto la parola, questo attributo fu inserito giá dai tempi di Noé dagli sviluppatori per "far parlare" i Browser di testo come il Lynx.
Il testo alternativo va inserito nelle stringhe immagini per dare "una voce" all'immagine che altrimenti per i Browser accessibili che leggono il solo testo HTML, sarebbe muta. Funge inoltre per i browser come il Lynx proprio da testo alternativo giacché questo tipo di browser legge solo il testo.
Questo attributo, che é stato sfruttato molto spesso per riempire la pagina di parole chiave, ha ancora un significato molto importante. Bisogna anche dire che molto spesso gli sviluppatori hanno totalmente fatto a meno dell'uso di questo attributo per ignoranza sulla vera funzione di esso. Chi invece lo ha riempito di parole chiave, avrebbe dovuto ascoltare ció che accade ai Browser parlanti quando incontrano quell'attributo.
I browser accessibili, grazie ad un software che scansiona il testo HTML, vanno alla ricerca delle informazioni contenute nei paragrafi, negli attributi ALT e Title, nei sommari, ecc., quando incontrano un attributo ALT zeppo di parole chiave ripetono a cantilena ció che é stato inserito, lasciandovi immaginare la delusione e lo sdegno di chi ascolta. Molto spesso questi é un disabile della vista che naviga il web con questo tipo di browser.
Provate ad ascoltare vosi stessi cosa succede quando un Speak Browser trova l'attributo ALT zeppo di parole chiave: ascolta il browser
Uso corretto del testo alternativo (ALT)
Partendo dal principio e dalla funzione per cui é stato ideato ci é molto semplice capire che per poter sfruttare le potenzialitá di questo attributo dovremo anche utilizzarlo per quel che effettivamente serve. Quindi quando svilupperremo la nostra pagina web terremo presente che:
la stringa immagini deve contenere i seguenti fondamentali elementi o attributi:
<img src="/images/kibongo.jpg" alt="Un piccolo kibongo" height="264" width="350" />
NOTA Indicare i parametri altezza e larghezza della foto é di fondamentale importanza, specie quando la pagina contiene molte immagini. La mancanza di questi parametri obbligherebbe il browser a fare un calcolo aggiuntivo per ottenerli a discapito della velocitá di apertura della pagina.
Qui sotto vediamo l'immagine. Passandoci su il mouse (dalla versione 8 di Explorer il testo alternativo non viene mostrato), otterremo la visualizzazione dell'attributo alternativo per le immagini il quale apparirebbe sottoforma di testo anche nel caso l'utente ha disattivato le immagini del suo browser.
Quante parole o caratteri si possono inserire nell'attributo ALT?
Diciamo "si consiglia inserire", al posto di dire "possono inserire", perché il W3C ha consigliato un numero massimo di 80 caratteri che peró non devono essere necessariamente utilizzati per intero. Google ha piú volte trattato l'argomento indicando che il testo alternativo delle immagini deve essere utile a comprendere il contenuto dell'immagine. Sembra tra l'altro che questo motore non mostri più di 26 caratteri di descrizione nel suo indice immagini per le foto che inserisce. Tuttavia vista l'importanza ai fini dell'accessibilità della pagina di indicare esattamente cosa mostra la foto, per l'immagine che abbiamo inserito qui sotto il testo alternativo sará: "Un topolino innammorato nasconde dietro la schiena un mazzo di fiori".
Importanza del testo alternativo ALT per i motori di ricerca
Oltre ad essere un attributo indispensabile per l'accessibilitá della pagina (omettendo il testo ALT non si ottiene la validazione del codice da parte del W3C) questo testo alternativo é molto importante come dicevamo anche per la presenza nella sezione immagini dei motori di ricerca. Oggigiorno moltissimi utenti fanno ricerche mirate attraverso le immagini per ottenere informazioni direttamente visibili e complete. Potersi posizionare bene quindi in quell'indice dei motori di ricerca porterebbe senz'altro un'incremento di ingressi alle nostre pagine.
Google John Mu ha recentemente ribadito l'importanza dell'attributo ALT e spiegato che l'attributo Title puó, e deve essere aggiunto per esempio, se la foto é inserita in un link. Ad esempio quando cliccando sulla foto si ottiene l'immagine in dimensioni reali, l'attributo title in questo caso potrebbe contenere "title="guarda la foto nele sue dimensioni originali"
http://groups.google.com/group/Google_Webmaster_Help-Indexing/browse_thread/thread/f379c6390f0ecc23
Conclusione, aggiungere il testo alternativo per le immagini é di fondamentale importanza, l'uso invece dell'attributo title é facoltativo ma consigliato. Per ottenere il massimo delle potenzialitá da questo attributo dovremo utilizzarlo con l'intenzione di apportare un servizio di informazione chiaro e onesto.
Alla prossima…. 
Angelo Palma
Angelo Palma é consulente e web stratega su www.webxall.net. WebXall si occupa dello studio per l’ottimizzazione del codice HTML.
usando firefox se vai con il mouse sull’immagine non ti viene il testo alternativo, ti viene il testo che hai messo nel title dell’immagine.
Io avevo aggiornato le immagini dei miei siti con il title aggiuntivo quando alcuni anni fa vidi che firefox non faceva vedere il testo alt con il mouseover.
da alcuni mesi metto anche un alt nel tag img (prima nel tag alt avevo semplicemente il testo: foto), in quanto ho letto che e’ forse + importante del title, specialmente x la ricerca di immagini.
pero’ molte volte sono quasi costretto a mettere 2 testi uguali sia x l’alt che x il title.
Il testo alternativo di un’immagine (ALT) deve apparire solo se l’immagine non viene caricata, per questo il Firefox non usa far apparire nulla se é presente l’immagine. Per una questione di logica che la Microsoft non condivide.
Se la foto non dovesse venire caricata e il testo alternativo ALT é presente , anche in firefox apparirá ció che ci si é scritto. Mentre invece non apparirebbe il Title. Nel tuo caso apparirebbe “foto” ma non ció che hai scritto nel title.
Come giá spiegato piú sopra, l’attributo ALT é indispensabile sia per la validazione del codice, che per i motori di ricerca quando la foto é messa al posto del testo anchor di un link. Il title dal canto suo non serve in nessuno dei due casi, ma potrebbe servire a indicare il tema di un gruppo di immagini per distinguerle dagli altri gruppi.
Grazie per avermi detto le cose come stanno.
Alcuni anni fa avevo letto che il tag alt sarebbe uno dei tag che non sarebbero + serviti (come font) in quanto sarebbe stato sostituito dal tag title, per questo avevo iniziato ad usare il title.
In futuro lo lascero’ perdere anche io.
Ho appena tolto da alcuni tag img il title. Pero’ non e’ vero che proprio non serva a niente. Infatti ho visto che potrebbe diventare utile nel caso che in una pagina ci siano diverse foto (di chiese per esempio). Passando con il mouse sulla foto ed usando firefox riesco a comunicare all’utente del sito il nome della chiesa (nel caso non scriva i nomi sotto alle foto). Logicamente quando sono sulla pagina che parla di una chiesa particolare, a questo punto non mi serve mettere il nome.
Diciamo che il title si puo’ usare o meno, e’ una possibilita’ in + (facoltativa) per descrivere la foto.
Alcuni anni fa quando vidi che firefox bypassava il tag alt quando con il mouse andavo sopra ad una foto, pensavo che considerasse “deprecated” il tag alt e considerasse solamente il title.
Personalmente a me piace vedere apparire una finestrella gialla con un testo quando vai sopra ad una foto (dipende comunque dal contesto).
Sono daccordo Guido,
infatti non c’é una regola specifica da parte dei motori di ricerca sull’uso o no del tag Title nelle foto. Se il suo uso puó essere utile all’utente, il motore di ricerca apprezzerá la finezza usata dallo sviluppatore a favore dell’accessibilità del sito.