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, 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. Quindi per l’immagine che inseriremo 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 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 esemöpio se la foto é inserita in un link. Ad esempio cliccando sulla foto si ottiene l’immagine in dimensioni reasli. 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, il title in realtá non serve a nulla. Firefox fa apparire il title se si passa il mouse sulla foto, ma per quale motivo dovremmo passare il mouse sulla foto alla ricerca del testo, se abbiamo gli occhi che ci funzionano ancora?
Per questo il Firefox non usa far apparire nulla se é presente ALT. Per una questione di logica.
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 non serve in nessuno dei due casi.
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 della navigabilitá del sito.