Tag HTML img: attributo titolo e attributo alt?

Stavo navigando su Amazon e ho notato che durante la ricerca di " 1 TB " se passi il cursore del mouse sull'immagine di valutazione delle stelle, vedrai il punteggio solo se utilizzi IE. Se utilizzi un altro browser, il punteggio non verrà visualizzato.

Un punteggio di 3,8 e un punteggio di 4,2 vengono visualizzati entrambi come 4 stelle. Ovviamente un 3,8 stelle contro 4,2 stelle (punteggio 76% contro 84%) potrebbe fare la differenza!

Questo perché il modo standard di visualizzare il alttesto è solo quando l'utente disattiva la grafica o quando il browser è "letto" (es. Browser per utenti con problemi di vista). IE, tuttavia, lo mostra al passaggio del mouse.

Quindi penso che se Amazon vuole mostrarlo indipendentemente dal browser dell'utente, titledovrebbe essere utilizzato in aggiunta a alt. Saresti d'accordo?

Vorrei entrambi. Il titolo mostrerà un simpatico suggerimento in tutti i browser e alt darà una descrizione durante la navigazione in un browser senza immagini.

Detto questo, mi piacerebbe vedere alcune statistiche di quanti "surfisti" là fuori che vanno in un "negozio" per sfogliare la merce hanno effettivamente le immagini disattivate o stanno usando un browser che non supporta le immagini. Penso che i giorni in cui il 90% della popolazione utilizza un modem 28k per connettersi a InterWeb siano finiti.

Sono usati per cose diverse. L' altattributo viene utilizzato al posto dell'immagine. Se l'immagine non può essere visualizzata e negli screen reader.

L' titleattributo viene mostrato insieme all'immagine, in genere come suggerimento al passaggio del mouse.

Uno non dovrebbe essere usato "al posto dell'altro". Ciascuno dovrebbe essere usato correttamente , per fare le cose per cui è stato progettato.

alt e title sono per cose diverse, come già accennato. Sebbene l' attributo title fornisca un suggerimento, anche alt è un attributo importante, poiché specifica il testo da visualizzare se l'immagine non può essere visualizzata. (E in alcuni browser, come Firefox, vedrai anche questo testo durante il caricamento dell'immagine)

Un altro punto che ritengo debba essere fatto è che l' attributo alt è necessario per convalidare come documento XHTML, mentre l' attributo title è solo una "opzione extra", per così dire.

Questo perché servono a scopi diversi ed entrambi dovrebbero essere usati non solo l'uno sull'altro.

L '"alt" è per quello che avete già detto, quindi potete vedere di cosa tratta l'immagine se l'immagine non può essere visualizzata (per qualsiasi motivo), permette anche alle persone con problemi di vista di capire di cosa tratta l'immagine.

L'attributo "title" è quello corretto per mostrare il tooltip con un titolo per l'immagine.

A mio parere l'alt text dovrebbe descrivere sempre ciò che è visibile nell'immagine, nel caso in cui l'immagine non venga visualizzata.

alt = text [CS] Per i programmi utente che non possono visualizzare immagini, moduli o applet, questo attributo specifica il testo alternativo. La lingua del testo alternativo è specificata dall'attributo lang.

w3.org

Credo che alt sia richiesto per la rigorosa conformità XHTML.

Come altri hanno notato, il titolo è per i suggerimenti (bello da avere), alt è per l'accessibilità. Niente di sbagliato nell'usarli entrambi, ma alt dovrebbe essere sempre presente.

L'attributo ALT è per gli utenti con problemi di vista che utilizzerebbero uno screen reader. Se l'ALT non è presente in QUALSIASI tag immagine, verrà letto l'intero URL dell'immagine. Se le immagini fanno parte del design del sito, dovrebbero comunque avere l'ALT ma possono essere lasciate vuote in modo che l'URL non debba essere letto per ogni parte del sito.

Attributo ALT

L' altattributo è definito in una serie di tag (cioè img, areaed eventualmente per inpute applet) per consentire di fornire un equivalente testuale per l'oggetto.

Un equivalente testuale offre i seguenti vantaggi al tuo sito web e ai suoi visitatori nelle seguenti situazioni comuni:

• al giorno d'oggi, i browser Web sono disponibili in un'ampia varietà di piattaforme con capacità molto diverse; alcuni non possono visualizzare affatto le immagini o solo un insieme limitato di tipi di immagini; alcuni possono essere configurati per non caricare le immagini. Se il tuo codice ha l'attributo alt impostato nelle sue immagini, la maggior parte di questi browser visualizzerà la descrizione che hai fornito invece delle immagini
• alcuni dei tuoi visitatori non possono vedere le immagini, siano essi ciechi, daltonici, ipovedenti; l'attributo alt è di grande aiuto per quelle persone che possono fare affidamento su di esso per avere una buona idea di cosa c'è sulla tua pagina
• I bot dei motori di ricerca appartengono alle due categorie precedenti: se vuoi che il tuo sito web sia indicizzato come merita, usa l'attributo alt per assicurarti che non perdano sezioni importanti delle tue pagine.

Attributo del titolo

L'obiettivo di questa tecnica è fornire una guida sensibile al contesto per gli utenti quando immettono i dati nei moduli fornendo le informazioni della guida in un titleattributo. La guida può includere informazioni sul formato o esempi di input.

Esempio 1: un menu a discesa che limita l'ambito di una ricerca
Un modulo di ricerca utilizza un menu a discesa per limitare l'ambito della ricerca. Il menu a discesa è immediatamente adiacente al campo di testo utilizzato per inserire il termine di ricerca. La relazione tra il campo di ricerca e il menu a discesa è chiara per gli utenti che possono vedere il design visivo, che non ha spazio per un'etichetta visibile. L' titleattributo viene utilizzato per identificare il selectmenu. L' titleattributo può essere pronunciato dagli screen reader o visualizzato come suggerimento per gli utenti che utilizzano l'ingrandimento dello schermo.

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
    ...
</select> 

Esempio 2: campi di input per un numero di telefono
Una pagina Web contiene i controlli per l'immissione di un numero di telefono negli Stati Uniti, con tre campi per prefisso, centralino e ultime quattro cifre.

<fieldset>
    <legend>Phone number</legend>
    <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
    <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
    <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset> 

Esempio 3: una funzione di ricerca Una pagina Web contiene un campo di testo in cui l'utente può immettere i termini di ricerca e un pulsante denominato "Cerca" per eseguire la ricerca. L' titleattributo viene utilizzato per identificare il controllo del modulo e il pulsante è posizionato subito dopo il campo di testo in modo che sia chiaro all'utente che il campo di testo è dove deve essere inserito il termine di ricerca.

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

Esempio 4: una tabella dati di controlli modulo
Una tabella dati di controlli modulo deve associare ogni controllo alle intestazioni di colonna e di riga per quella cella. Senza un titolo (o un'ETICHETTA fuori schermo) è difficile per gli utenti non visivi mettere in pausa e interrogare i valori di intestazione di riga / colonna corrispondenti utilizzando la loro tecnologia assistiva durante la tabulazione del modulo.

Ad esempio, un modulo di sondaggio ha quattro intestazioni di colonna nella prima riga: Domanda, D'accordo, Indeciso, In disaccordo. Ogni riga successiva contiene una domanda e un pulsante di opzione in ogni cella corrispondente alla scelta di risposta nelle tre colonne. L'attributo del titolo per ogni pulsante di opzione è una concatenazione della scelta della risposta (intestazione di colonna) e il testo della domanda (intestazione di riga) con un trattino o due punti come separatore.

Elemento Img

Attributi consentiti menzionati in MDN .

• alt
• crossorigin
• decoding
• height
• importance (API sperimentale)
• intrinsicsize (API sperimentale)
• ismap
• referrerpolicy (API sperimentale)
• src
• srcset
• width
• usemap

Come puoi vedere l' titleattributo non è consentito all'interno imgdell'elemento. Userei l' altattributo e, se necessario, userei CSS (Esempio: pseudo classe :hover) invece di titleattributo.

No, penso altsia meglio perché lo scopo di quell'attributo è fornire un testo "alternativo" nel caso in cui l'immagine non possa essere visualizzata (sia che l'immagine manchi o che il browser stesso non sia in grado di visualizzarla).

MVCFutures per ASP.NET MVC ha deciso di fare entrambe le cose. Infatti, se fornisci "alt", creerà automaticamente un "titolo" con lo stesso valore per te.

Non ho il codice sorgente a portata di mano, ma una rapida ricerca su Google ha rivelato un caso di prova per questo!

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }

Non dovresti usare l'attributo title per l'elemento img. Il ragionamento alla base di questo è abbastanza semplice:

Presumibilmente le informazioni sui sottotitoli sono informazioni importanti che dovrebbero essere disponibili a tutti gli utenti per impostazione predefinita. In tal caso, presenta questo contenuto come testo accanto all'immagine.

Fonte: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1 include consigli generali sull'uso dell'attributo title:

Affidarsi all'attributo title è attualmente sconsigliato in quanto molti programmi utente non espongono l'attributo in modo accessibile come richiesto da questa specifica (ad esempio, richiedendo un dispositivo di puntamento come un mouse per far apparire un suggerimento, il che esclude gli utenti solo da tastiera e utenti solo touch, come chiunque disponga di un telefono o tablet moderno).

Fonte: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

Quando si tratta di accessibilità e diversi screen reader:

• Jaws 10-11: disattivato per impostazione predefinita
• Window-Eyes 7.02: attivato per impostazione predefinita
• NVDA: non supportato (nessuna opzione di supporto)
• VoiceOver: non supportato (nessuna opzione di supporto)

Quindi, come ha detto adeguatamente Denis Boudreau : chiaramente non è una pratica raccomandata .