Come scrivere un buon testo alternativo per le immagini per aiutare lo screen reader e l'utente cieco a capire di cosa si tratta?

Question

Come scrivere un buon testo alternativo per le immagini per aiutare lo screen reader e l'utente cieco a capire di cosa si tratta? e se stiamo usando il testo Alt, allora cosa dovrebbe essere in un Titolo = "testo" se usiamo entrambi in casi speciali come immagini di menu ecc.

Answer 1

Si dovrebbe non rendere l'utente non vedente capire ciò che l'immagine è tutto. Per i non vedenti, l'immagine efficacemente non esiste, tutto quello che c'è è il testo.

Il testo alt deve funzionare come una singola frase/paragrafo che può essere sostituito per l'immagine, trasmettere lo stesso contenuto e avere ancora senso nel contesto del contenuto adiacente.

Se l'immagine è qualcosa che fa parte della GUI, allora il testo alt dovrebbe trasmettere un'azione (un verbo), la linea upvote, risposta questa o log out.

Dovresti visitare il tuo sito con links e provare a capire il tuo sito. Se esiste ad esempio un grafico a torta, il suo testo alt dovrebbe essere un piccolo riepilogo delle percentuali. Se hai appena un bel fiore accanto a un post del blog, non dargli un testo originale fiore immagine del blogpost # 324 o peggio ancora flower.jpg.

Se l'immagine è importante per la navigazione o per ottenere informazioni, prova a dargli un testo alt che faccia funzionare il sito senza l'immagine. Se l'immagine è solo di presentazione, assegnagli un testo vuoto alt.

title, per quanto ne so, dovrebbe essere visualizzato solo al passaggio del mouse, quindi dovrebbero fornire ulteriori informazioni sull'immagine, pertanto è consigliabile evitare useless duplication of information. Per gli screen reader, questo è un po 'più complicato, in quanto il supporto e la configurazione possono essere molto diversi tra gli utenti.

Alcuni empirical data spettacoli title come inutile:

• La maggior parte degli utenti del software di lettura dello schermo non cambiano le impostazioni predefinite per accedere l'attributo TITOLO informazioni sui collegamenti.
• La maggior parte del software di lettura dello schermo può accedere al contenuto dell'attributo TITLE sui controlli del modulo per impostazione predefinita.
• Alcuni software di lettura dello schermo non possono accedere alle informazioni sugli attributi TITLE.
• Gli utenti di ingrandimenti dello schermo possono leggere il testo dell'attributo TITLE a livelli di ingrandimento inferiori.
• Gli utenti di ingrandimenti dello schermo non possono leggere il testo dell'attributo TITLE, che contiene più di 1 o 2 parole, a livelli di ingrandimento più elevati.

Here's good piece of advice, per meglio dire di quanto potessi

Utilizzare questo per fornire ulteriori informazioni che non è essenziale. La maggior parte dei browser visuali visualizza il testo del titolo come una descrizione quando l'elemento è al passaggio del mouse, tuttavia spetta al produttore del browser decidere come viene visualizzato il testo del titolo. Alcuni mostreranno invece il testo nella barra di stato. Le prime versioni di Safari lo facevano, per esempio.

Un buon uso dell'attributo titolo è di aggiungere testo descrittivo ai collegamenti, specialmente se il testo del collegamento stesso non descrive chiaramente la destinazione del collegamento. In questo modo puoi aiutare i visitatori a sapere dove il link li porterà, salvandoli dal caricare una pagina solo per scoprire che non era qualcosa a cui sono interessati. Un altro uso potenziale è fornire informazioni aggiuntive per un'immagine, come forse una data o altre informazioni che probabilmente non sono essenziali.

Ricordate che l'attributo longdesc dovrebbe essere un collegamento per ulteriori informazioni, non testo come alcune persone missuse esso.

Answer 2

Penso che la migliore pratica sia quella di mettere lo stesso contenuto negli attributi alt e title.

Riguardo a "cosa scrivere" - semplicemente semplice, in poche parole ciò che è nella foto.

controllare questo articolo in cui gli attributi ALT sono descritti abbastanza bene: http://www.cs.tut.fi/~jkorpela/html/alt.html

Answer 3

Sono un utente di screen reader e utilizzerò Stackoverflow come esempio sia di buono che di cattivo.

I tag alt devono essere brevi e descrittivi. Ad esempio, i tag alt di stackoverflow per le opzioni di voto su e di voto basso sono carini, poiché non richiedono molto tempo per essere letti e arrivare rapidamente al punto. Alcuni esempi di tag alt errati rendono questa domanda una delle preferite e accettano questa risposta. Nessuno dei tag è descrittivo, il tag preferito è solo "*" e l'accetta il tag di risposta è "check" L'unico modo per me di dire cosa sono è leggere la fonte o far visitare qualcuno che mi faccia sapere quali sono per.

Per quanto riguarda gli attributi title, non ho davvero molti consigli. Il mio screen reader non li legge di default, quindi di solito non li uso. Un esempio di qualcosa che potrebbe essere utile è un'informazione aggiuntiva. Ad esempio, la ragione per cui il mio tasso di risposta accettato è così basso è perché non ho modo di dire se ho accettato una risposta a una domanda. Sarebbe bello se l'attributo title nell'accettare questo grafico di risposta dicesse qualcosa come "clic per accettare questa risposta" se la risposta non è stata accettata e "Fare clic per rimuovere questa risposta come risposta accettata" se è la risposta accettata.