2009-03-05 9 views
7

Qual è esattamente l'uso previsto dell'attributo alt sui tag <img>?Immagine attributo alt best practice

Dovrebbe descrivere l'immagine o dovrebbe fornire un testo sostitutivo significativo per gli screen reader (e le persone che hanno le immagini disattivate)?

Ad esempio, se ho una breve biografia di una persona sul mio sito Web e ne includo una piccola foto, è davvero significativo per gli utenti ipovedenti avere "Foto di John Smith" letto per loro?

risposta

18

L'HTML 5 spec ha un huge section su questo.

Fondamentalmente, l'attributo alt dovrebbe essere quello che sarebbe lì come testo se non si fosse utilizzata affatto un'immagine. Se la tua immagine è puramente decorativa, puoi usare alt="".Una descrizione va nell'attributo title.

+0

true, non dovresti usare l'attributo alt sulle immagini decorative, ma che valore c'è nel sapere che c'è una foto di John Smith per un cieco? A meno che tu non abbia intenzione di approfondire e descrivere le sue caratteristiche, sembra un po 'inutile. – nickf

+0

Anche loro hanno parlato - se davvero non puoi fornire alcun testo alternativo utile, o se non ha senso perché il testo della pagina è abbastanza buono, ometti l'attributo interamente. – flussence

+7

Non omettere interamente l'attributo. Lasciatelo come alt = "" altrimenti alcuni screen reader lo leggeranno come "grafico " – Kai

2

Fornisce testo "alternativo" se l'immagine non può essere caricata per qualche motivo. Nel tuo esempio, direi di sì, sarebbe appropriato.

0

Dovrebbe essere tutto ciò che aiuta l'utente se l'immagine non viene visualizzata.

A proposito della "funzione" di quando si passa con il mouse su un'immagine in IE e la descrizione comando indica che l'ALT non è il comportamento corretto di ALT. Il titolo dovrebbe essere usato per questo.

+0

IE mostra solo il testo ALT, se il testo del titolo non è disponibile. E questo è solo un possibile uso di TITLE. – Sparr

1

prima volta su google per questo [img alt accessibility] dà Considerare come appare la pagina o quando le immagini non vengono visualizzate. Quindi, scrivi per ogni immagine un testo alternativo che funziona al meglio come sostituto (Guidelines on alt texts in img elements)

0

Descrivi succintamente l'immagine, come se parlassi con un cieco. Abbastanza semplice.

Sono sicuro che questo valore di attributi è utilizzato da Google per indicizzare le ricerche di immagini.

3

Da w3.org:

Mentre il testo alternativo può essere molto utile, deve essere maneggiato con cura. Gli autori dovrebbero osservare le seguenti linee guida:

  • Non specificare testo alternativo irrilevante quando l'inclusione di immagini destinate a formattare una pagina, ad esempio, alt = "palla rossa" sarebbe inappropriato per un'immagine che aggiunge una palla rossa per la decorazione un'intestazione o un paragrafo. In questi casi, il testo alternativo dovrebbe essere la stringa vuota (""). Gli autori sono comunque invitati a evitare l'uso di immagini per la formattazione delle pagine; dovrebbero invece essere usati fogli di stile.
  • Non specificare un testo alternativo senza significato (ad es. "Testo fittizio"). Non solo questo frustrerà gli utenti, ma rallenterà i programmi utente che devono convertire il testo in parlato o l'output in Braille.
4

Penso che l'idea sia quella di utilizzare il testo alternativo per comunicare le stesse informazioni previste per l'immagine. Questo dipende da cosa è l'immagine.

Gli elementi di navigazione sono forse meglio descritti dalla loro funzione ("pagina successiva", "indietro") rispetto al loro aspetto ("freccia destra").

La foto di John Smith potrebbe essere sostituito con una descrizione di John Smith, o una descrizione del luogo prendere evento, ecc

2

L'attributo "alt" è una rappresentazione alternativa (testuale) della semantica dell'immagine. Questo non è solo usato per immagini che non possono essere caricate: è anche usato per screen-reader o browser di solo testo.

Nel tuo caso particolare, incluso il tipo di testo alternativo dipende dal fatto che pensi sia importante notare che la pagina contiene un'immagine della persona o meno. Se si tratta di un oggetto puramente visivo, potresti non volere alcun testo alternativo. Se è anche usato come collegamento di qualche tipo, probabilmente do vuoi un testo alternativo in modo che una persona che utilizza uno screen reader abbia qualche indizio su cosa potrebbe fare il seguente link.

0

se ho una breve biografia di una persona sul mio sito, e comprendono una piccola foto di loro , è davvero significativo per gli utenti non vedenti di avere "Foto di John Smith" leggere a loro?

Se non si dispone di tale testo alternativo, cosa pensi che suppongono che l'immagine è? "Foto di John Smith e sua moglie"? "Foto di John Smith che accetta il suo Oscar"? "Foto di John Smith che assassina JFK"? "Foto di John Smith che giace morto nel suo patio dopo essere stato assassinato dal suo elefante domestico"?

Se è una foto di John Smith, sì, dillo. Se è qualcos'altro, dillo.

+0

uomo, quel ragazzo di John Smith ha delle grandi avventure. L'alternativa a cui alludevo stava usando alt = "" per le immagini che non includono Oscar o pachidermici omicidi. – nickf

0

L'attributo Alt viene utilizzato con il tag img.

Alt significa alternative

Viene utilizzato per breve descrizione dell'immagine.

è visualizzata sullo schermo nel caso in cui il browser è in grado di caricare immagine

Click to Know more

+1

Spiegare in che modo il collegamento potrebbe aiutare a risolvere il problema. – Phani

+0

Per favore spiega anche la tua risposta. –