HTML tag img:attributo title vsl'attributo alt?

Question

Ero navigazione Amazon e ho notato che quando la ricerca "1TB"se si posiziona il cursore del mouse sopra le stelle di valutazione di immagine, si vede solo il punteggio in caso di utilizzo di IE.Se si utilizza un altro browser, quindi il punteggio non mostra.

Una valutazione di 3.8 e una valutazione di 4.2 mostra come 4 stelle.Naturalmente 3,8 stelle vs 4.2 stelle (76% vs 84% score) potrebbe fare la differenza!

Questo perché il modo normale di visualizzazione alt il testo è solo quando l'utente spegne grafica o quando il browser è "leggere" (e.g browser per gli utenti ipovedenti).CIOÈ, tuttavia, mostra che al passaggio del mouse.

Quindi penso che se Amazon è quello di mostrare a prescindere dal browser utilizzato dall'utente, quindi title deve essere utilizzato in aggiunta a alt.Lei è d'accordo?

Answer 1

Mi piacerebbe andare per entrambi.Titolo mostra una bella descrizione in tutti i browser e alt dare una descrizione durante la navigazione in un browser senza immagini.

Detto questo, mi piacerebbe vedere alcune statistiche di quante "navigatori" là fuori sta per "archivio" per sfogliare la merce effettivamente hanno disattivato le immagini, o stai usando un browser che non supportano le immagini.Penso che il giorno in cui il 90% della popolazione utilizza un 28k modem per la connessione a InterWeb è looooong oltre.

Answer 2

Essi sono utilizzati per cose diverse.Il alt attributo è utilizzato invece dell'immagine.Se l'immagine non può essere visualizzata, o (credo) in lettori di schermo.

Il title attributo viene visualizzato lungo con l'immagine, di solito come passa tooltip.

Uno non deve essere usato "invece di" dell'altro.Ognuno dovrebbe essere utilizzato correttamente, per fare le cose che sono stati progettati per fare.

Answer 3

alt e titolo sono cose diverse, come già accennato.Mentre il titolo attributo di fornire una descrizione, alt è anche un attributo importante, in quanto consente di specificare il testo da visualizzare se l'immagine non può essere visualizzata.(E in alcuni browser, come firefox, potrete anche vedere questo testo mentre il caricamento dell'immagine)

Un altro punto che mi sento dovrebbe essere fatta è che il alt attributo è richiesto per convalidare un documento XHTML, mentre il titolo attributo è solo un "optional", come si trattasse.

Answer 4

Questo perché hanno scopi diversi, ed entrambi dovrebbero essere utilizzati non solo uno sopra l'altro.

Il "alt" è per quello che voi ragazzi già detto, così si può vedere ciò che l'immagine è tutto su di se l'immagine non può essere visualizzata (per qualsiasi motivo), ma consente anche ai non vedenti di capire qual è l'immagine.

L'attributo "title" sia quello corretto per visualizzare la descrizione con un titolo per l'immagine.

Answer 5

A mio parere dovrebbero testo alt sempre descrivere ciò che è visibile in foto, per il caso che l'immagine non viene visualizzata.

alt = testo [CS] Per gli agenti utente che non riesce a visualizzare le immagini, forme, o applet, questo attributo specifica il testo alternativo.La lingua del testo alternativo specificato dall'attributo lang.

w3.org

Answer 6

Credo alt è necessario per XHTML strict compliance.

Come altri hanno notato, il titolo è per il tooltip (nice to have), alt è per l'accessibilità.Niente di sbagliato con l'utilizzo di entrambi, ma alt deve essere sempre lì.

Answer 7

No, penso alt è meglio, perché lo scopo di tale attributo è quello di fornire "alternativo" di testo nel caso in cui l'immagine non può essere vista (se è possibile che l'immagine non è disponibile o che il browser stesso è incapace di visualizzazione).

Answer 8

Il MVCFutures per ASP.NET MVC deciso di fare entrambe le cose.Infatti se si fornire 'alt' creerà automaticamente un "titolo" con lo stesso valore per voi.

Non ho il codice sorgente di mano, ma una rapida ricerca su google alzato un banco di prova per esso!

    [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);
    }

Answer 9

Non si deve usare attributo title per l'elemento img.Il ragionamento dietro questo è abbastanza semplice:

Presumibilmente didascalia informazioni importanti informazioni che devono essere disponibili a tutti gli utenti per impostazione predefinita.Se è così presente in 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 su come utilizzare l'attributo title:

Basandosi su l'attributo title è attualmente scoraggiato molti agenti utente non esporre l'attributo in modo accessibile, come richiesto dalle specifiche (ad es.che necessitano di un dispositivo di puntamento, ad esempio un mouse a causa di un tooltip inserito, che esclude utenti della sola tastiera e touch-solo gli utenti, come chiunque con un moderno telefono o tablet).

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

Quando si parla di accessibilità e di diversi lettori di schermo:

• Ganasce 10-11:disattivata per impostazione predefinita
• Window-Eyes 7.02:attivata per impostazione predefinita
• NVDA:non supportato (non supporta le opzioni)
• VoiceOver:non supportato (non supporta le opzioni)

Quindi, come Denis Boudreau adeguatamente messo: chiaramente non è una pratica consigliata.

Answer 10

L'attributo ALT è per ipovedenti e non vedenti utente che si utilizza un lettore di schermo.Se l'ALT manca QUALSIASI tag di immagine, l'intero url per l'immagine sarà essere letta.Se le immagini sono parte integrante del design del sito, che dovrebbe ancora avere l'ALT, ma che può essere lasciata vuota in modo che l'url non deve essere letto per ogni parte del sito.

Answer 11

L'Attributo ALT

Il alt attributo è definito in una serie di tag (cioè, img, area e, facoltativamente, per input e applet) per consentire di fornire un equivalente testuale per l'oggetto.

Un testo equivalente apporta i seguenti benefici per il vostro sito web e i suoi visitatori anche nei comuni seguenti situazioni:

• oggi, i browser Web sono disponibili in un ampia varietà di piattaforme con diverse capacità;alcune non è possibile visualizzare le immagini o solo un insieme limitato di tipo di immagini;alcuni possono essere configurati in modo da non caricare le immagini.Se il codice ha l'attributo alt impostare nelle sue immagini, la maggior parte di questi browser visualizzerà la descrizione che hai dato, invece delle immagini
• alcuni dei visitatori non possono vedere le immagini, siano esse cieco, il colore cieco, basso-vedenti;l'attributo alt è di grande aiuto per quelle persone che possono contare su di esso per avere una buona idea di ciò che è sulla vostra pagina
• bot dei motori di ricerca appartengono alle due categorie di cui sopra:se vuoi che il tuo sito web per essere indicizzato così come merita, utilizzare l'attributo alt per assicurarsi che essi non perdere sezioni importanti delle pagine.

Attributo Title

L'obiettivo di questa tecnica è quello di fornire una guida sensibile al contesto per gli utenti dell'immissione di dati nel form fornendo le informazioni della guida in un title attributo.L'aiuto può includere informazioni di formato o esempi di input.

Esempio 1:Un menu a tendina che limita l'ambito di una ricerca
Un modulo di ricerca utilizza un menu a tendina per limitare l'ambito della ricerca.Il menu a tendina è immediatamente adiacente al campo di testo utilizzato per immettere il termine di ricerca.Il rapporto tra il campo di ricerca e il menu a tendina è chiaro per gli utenti che possono vedere il visual design, che non hanno spazio per un etichetta visibile.Il title l'attributo viene utilizzato per identificare il select menu.Il title attributo possono essere letti dai lettori di schermo o visualizzato come uno strumento di punta per le persone 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:I campi di Input per un numero di telefono
Una pagina Web che contiene i controlli per l'immissione di un numero di telefono negli Stati Uniti, con tre campi per il codice di zona, di cambio, e le 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 dove l'utente può inserire i termini di ricerca e un pulsante "Ricerca" per eseguire la ricerca.Il title attributo è utilizzato per identificare il modulo di controllo e il pulsante è posizionato subito dopo il campo di testo in modo che sia chiaro per l'utente che il campo di testo è dove il termine di ricerca deve essere inserito.

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

Esempio 4:Una tabella di dati dei controlli del form
Una tabella di dati dei controlli modulo deve associare ogni controllo con le intestazioni di colonna e riga per quella cella.Senza titolo (o off-screen ETICHETTA) è difficile per i non-visivo agli utenti di mettere in pausa e interrogare per corrispondente intestazione di riga/colonna dei valori utilizzando la loro tecnologia di supporto mentre la tabulazione attraverso il form.

Per esempio, una forma di indagine ha quattro intestazioni di colonna nella prima riga:Domanda, D'Accordo, Indeciso, Non Sono D'Accordo.Ogni riga contiene una domanda e un pulsante di opzione in ciascuna cella corrispondente alla risposta scelta, con tre colonne.L'attributo title per ogni pulsante è una concatenazione di risposta scelta (intestazione di colonna) e il testo della domanda (intestazione di riga) con un trattino o due punti come separatore.

Elemento Img

Ammessi attributi menzionati all' MDN.

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

Come si può vedere title attributo non è consentito all'interno di img elemento.Vorrei utilizzare alt attributo e se richiede vorrei usare i CSS (Esempio:pseudo classe :hover) invece di title attributo.