• Super User

    Title e Alt nelle immagini: cosa cambia?

    Ho provato a cercare un po' nei vecchi topic ma non ho trovato niente a riguardo, più che altro perché non so cosa cercare.
    Nelle immagini si può mettere sia il tag title sia il tag alt.
    Qualcuno mi può fare un po' di chiarezza sulle differenze tra questi due tag e sul modo in cui dovrebbero andare usati? sia per l'ottimizzazione per i motori sia per l'accessibilità.
    grazie.


  • User Attivo

    Non vorrei dire fesserie ma mi pare che i due tag vengano interpretati diversamente dai browser: l'ALT è x Internet Explorer, mentre il TITLE viene visto da Firefox.


  • Super User

    Verdonda, hai perfettamente ragione, ma comunque c'è una differenza nei tag e nel modo in cui devono andare usati, altrimenti non avrebbe senso che per ciascun browser serve un tag diverso.


  • Super User

    Dal punto di vista logico dell'attributo in sè:
    TITLE = titolo dell'immagine
    ALT = descrizione alternativa dell'immagine.

    Va da sè che i due attributi possono (e in alcuni casi devono) coesistere all'interno del tag IMG.

    Esempio, abbiamo una foto che ritrae HENRY che è in procinto di fare gol

    ![image](henry.jpg)
    

    Dal punto di vista dell'accessibilità, i due browser principali Explorer e Firefox hanno un comportamento diverso: Explorer mostra il tooltip al passaggio del mouse mostrando il contenuto dell'attributo ALT; Firefox invece ignora l'ALT e inserisce nel tooltip il contenuto del TITLE (scelta corretta).

    Dal punto di vista dell'ottimizzazione per i motori di ricerca, attualmente viene considerato maggiormente l'ALT di un'immagine se l'immagine funge da link. L'importanza che viene data all'ALT delle immagini linkate è paragonabile all'anchor dei link testuali (anche se a mio parere non ha il medesimo impatto).

    Ciò non esclude che il contenuto di ogni attributo presente in un codice html, anche quando è parsato dallo spider, non sia tenuto in qualche modo in considerazione (anche solo a livello di keyword count): la cosa migliore quindi è utilizzare tag e attributi in maniera logica, senza spam, e con un occhio rivolto all'accessibilità delle pagine.

    Cordialmente,
    Stuart


  • Super User

    @Stuart said:

    ![image](henry.jpg)
    

    Dal punto di vista dell'accessibilità, i due browser principali Explorer e Firefox hanno un comportamento diverso: Explorer mostra il tooltip al passaggio del mouse mostrando il contenuto dell'attributo ALT; Firefox invece ignora l'ALT e inserisce nel tooltip il contenuto del TITLE (scelta corretta).

    Effettivamente allora avevo intuito bene la differenza tra i due tag, il problema è però appunto che con IE viene mostrato l'ALT e con Firefox il TITLE.
    Sarebbe ora che si mettessero d'accordo questi browser!


  • Super User

    @lukas said:

    Effettivamente allora avevo intuito bene la differenza tra i due tag, il problema è però appunto che con IE viene mostrato l'ALT e con Firefox il TITLE.
    Sarebbe ora che si mettessero d'accordo questi browser!
    Eggià. Posso però dirti che l'interpretazione corretta è quella di Firefox. Un browser grafico dovrebbe mostrare l'ALT (descrizione alternativa, appunto), solo quando per qualsiasi motivo l'immagine non viene caricata.

    Cordialmente,
    Stuart


  • User Attivo

    Il ragionamento di Stuart non fa una piega, notavo però che sia Google nell'immagine che fornisce attraverso il servizio Adsense che il W3C nelle immagini che fornisce come attestazione della validità del codice, non hanno il TITLE.


  • Super User

    quindi in definitiva che fare? Usarli entrambi? Io personalmente li uso entrambi cambiando il testo e conservando lo stesso valore semantico


  • Super User

    @sole said:

    Il ragionamento di Stuart non fa una piega, notavo però che sia Google nell'immagine che fornisce attraverso il servizio Adsense che il W3C nelle immagini che fornisce come attestazione della validità del codice, non hanno il TITLE.
    La presenza dell'attributo TITLE per le immagini non è requisito essenziale per la validazione (la presenza dell'ALT si).

    Differenza che mi ero scordato di menzionare 😉

    Cordialmente,
    Stuart


  • Super User

    @Stuart said:

    Eggià. Posso però dirti che l'interpretazione corretta è quella di Firefox. Un browser grafico dovrebbe mostrare l'ALT (descrizione alternativa, appunto), solo quando per qualsiasi motivo l'immagine non viene caricata.

    Sì sì lo so, infatti è IE che dovrebbe adattarsi.


  • Super User

    @Stuart said:

    La presenza dell'attributo TITLE per le immagini non è requisito essenziale per la validazione (la presenza dell'ALT si).

    Questo è vero, però comunque secondo me è meglio inserirli tutti e due, utilizzandoli come nell'esempio che hai scritto nella prima tua risposta Stuart.


  • Super User

    @verdonda said:

    Non vorrei dire fesserie ma mi pare che i due tag vengano interpretati diversamente dai browser: l'ALT è x Internet Explorer, mentre il TITLE viene visto da Firefox.

    in realtà, come sempre, è IE che sbaglia il comportamento
    http://blog.html.it/archivi/2006/04/12/alt-e-tooltip.php

    per il resto: il title ha lo stesso valore semantico del title nei link, mentre l'alt servirebbe a descrivere esattamente il contenuto dell'immagine.

    esempio: immagine con grafico a torta 54% - 46% in un articolo statistico.
    ALT metterei "grafico: valore A 54% - valore B 46%" in modo che anche chi non visualizza l'immagine abbia il senso della cosa...
    TITLE metterei una didascalia " il valore A, seppure predominante, non ha maggioranza assoluta" o una roba simile.


  • User Attivo

    Ho trovato un articolo molto interessante (anche se un po' datato) sul tema dell'[url=http://www.diodati.org/scritti/2002/g_alt/index.asp] utilizzo dell'attributo ALT nelle immagini su Diodati.org, il punto di riferimento italiano in tema di accessibilità 😉

    Curioso il paragrafo sull'[url=http://www.diodati.org/scritti/2002/g_alt/alt07.asp]evoluzione degli attributi ALT e TITLE:

    Versione dopo versione, i popolari browser grafici sono andati sempre peggiorando la loro visualizzazione dei testi ALT, quando è disabilitato l'autocaricamento delle immagini.
    Sembra così che ci si sia imbattuti casualmente nell'idea di visualizzare i testi ALT come "suggerimenti a comparsa", quando il puntatore del mouse veniva a trovarsi nella posizione dell'immagine.
    Schiere di autori sembrano aver reagito utilizzando il testo ALT per specificare il loro testo a comparsa desiderato, senza nessun riguardo al fatto che il testo fosse del tutto inidoneo ad essere usato come il "testo alternativo" descritto nelle specifiche HTML.

    Bene, l'HTML4 ha una risposta per questo: l'attributo TITLE. Le specifiche HTML4 dicono esplicitamente che sarebbe appropriato visualizzare l'attributo TITLE come un "suggerimento a comparsa": in questo modo ogni cosa va al suo posto.
    Usate il testo ALT allo scopo di fornire un testo alternativo, per esempio sulla falsariga di quanto discusso in quest'articolo, ed usate l'attributo TITLE per dare un titolo all'immagine, in un modo che sarebbe appropriato per un suggerimento a comparsa.
    Supporto per l'attributo TITLE era stato introdotto in MSIE4, in Opera ed in altri browser: il problema principale era con le versioni 4.* di Netscape, ma Netscape 6 finalmente lo supporta.


  • Super User

    Sia per l'usabilità che per il SEO (e non è un caso che le due cose coincidano):

    • Descrittivi o funzionali i contenuti dell'ALT

    • Titoli, commenti, suggerimenti, approfondimenti o call to action nei contenuti del TITLE


  • Super User

    [url=http://www.sf.id.au/WE05/]Good reading.