Esempi di testo alternativo: cosa scrivere per ogni tipo di immagine
Esempi di testo alternativo
Esempi di testo alternativo: buoni e cattivi, per tipo di immagine | We.Inc
Cos'è il testo alternativo, esempi buoni e cattivi per loghi, prodotti, icone, grafici e immagini decorative, i passaggi decisionali del W3C e un breve quiz di pratica.
Il testo alternativo è il breve sostituto scritto di un'immagine, inserito nell'attributo alt di un tag img. Gli screen reader lo leggono ad alta voce e i browser lo mostrano quando l'immagine non si carica. Un buon testo alternativo dice cosa significa l'immagine nel suo punto della pagina; le immagini decorative ricevono un alt vuoto.
Esempi rapidi per tipo di immagine
Immagine
Alt debole
Alt migliore
Logo con link alla home
Smith Roofing home
Foto di prodotto
Borsa tote in pelle marrone con fibbia in ottone
Pulsante con icona di ricerca
lente di ingrandimento
Cerca
Ghirigoro divisorio
ghirigoro decorativo
(vuoto: alt="")
Foto del team
I nostri quattro conciatetti davanti al furgone dell'officina
Grafico delle vendite
Vendite per mese, dettagli nella tabella qui sotto
Le parole giuste dipendono dal motivo per cui l'immagine c'è, non dal suo aspetto. Una lente di ingrandimento dentro un pulsante significa Cerca; la stessa forma usata come decorazione della pagina non significa nulla. Prova le domande di pratica, poi copia gli schemi per il tuo negozio o sito.
Leggi la situazione in ogni scheda di pratica: cosa mostra l'immagine e dove si trova nella pagina.
Scegli tra le tre opzioni il testo alternativo che scriveresti.
La scheda ti dice se la scelta funziona e quale passaggio dell'albero decisionale del W3C si applica.
Usa la tabella di esempi qui sotto come riferimento quando aggiungi immagini alle tue pagine.
Evita parole come immagine di o foto di. Gli screen reader annunciano già che si tratta di un'immagine.
Per le foto di prodotto, indica i dettagli che un cliente chiederebbe: colore, materiale, cosa distingue questa variante.
Se la stessa informazione è già nel testo accanto all'immagine, un alt vuoto evita di ripeterla due volte.
Non riempire mai di parole chiave. Google avverte che riempire gli attributi alt di parole chiave può far considerare il tuo sito come spam.
Domande frequenti
Cosa significa alt nel testo?
Alt è l'abbreviazione di alternative, cioè alternativo. Il testo alternativo è il testo che sostituisce un'immagine: le parole che uno screen reader pronuncia e ciò che il browser mostra al posto di un'immagine che non si carica. Si trova nell'attributo alt dell'elemento img.
Ogni immagine deve avere un testo alternativo?
Ogni img deve avere un attributo alt, ma non tutte hanno bisogno di parole. MDN spiega che un alt vuoto indica che l'immagine non è una parte chiave del contenuto. Omettere del tutto l'alt è peggio: alcuni screen reader leggono allora il nome del file.
Quanto deve essere lungo il testo alternativo?
Abbastanza breve da dirlo in un solo respiro per la maggior parte delle immagini. L'albero del W3C chiede una breve descrizione per le foto semplici. Grafici e diagrammi sono l'eccezione: metti un'etichetta breve nell'alt e le informazioni complete nel testo della pagina.
Il testo alternativo aiuta la SEO?
Sì. La guida di Google sulle immagini dice che usa il testo alternativo insieme alla computer vision e al contenuto della pagina per capire le immagini. Il suo stesso esempio preferisce cucciolo di dalmata che riporta la pallina a un semplice cucciolo, e sconsiglia gli elenchi di parole chiave.
Che testo alternativo deve avere un logo?
Se il logo ha un link alla tua home page, l'alt deve descrivere dove porta il link, per esempio il nome della tua attività più home. Se è solo mostrato e il tuo nome compare già come testo accanto, un alt vuoto va bene.
L'albero decisionale del W3C in parole semplici
Primo, l'immagine contiene testo? Se quel testo compare anche lì vicino come testo vero, usa un alt vuoto; altrimenti, metti il testo nell'alt. Poi, si trova dentro un link o un pulsante? Allora descrivi dove porta il link o cosa fa il pulsante.
Aggiunge significato? Dai alle foto semplici una breve descrizione e, per i grafici, metti i dati altrove nella pagina. È solo decorazione? Usa un alt vuoto.
Testo alternativo per i negozi online
I clienti che usano screen reader contano sul testo alternativo delle immagini di prodotto come altri contano sullo zoom. Quando un prodotto ha più foto, rendi ogni alt diverso: vista frontale, dettaglio della tasca posteriore, indossato da un modello alto 170 cm.
Altri esempi per negozi e siti aziendali
Esempi di testo alternativo per immagini aziendali comuni
Dove si trova l'immagine
Esempio di testo alternativo
Perché
Foto hero dell'interno di un caffè
Bancone di un caffè soleggiato con pasticcini freschi in vetrina
Descrive la scena in poche parole
Ritratto in una pagina Chi siamo
Dott.ssa Amira Khan, dentista responsabile
Nome e ruolo, non il colore dei capelli
Icona social con link a Instagram
Harbour Bakery su Instagram
Descrive la destinazione del link
Screenshot di una mappa con il tuo indirizzo accanto
(vuoto: alt="")
L'indirizzo è già presente come testo lì vicino
Foto prima e dopo di un tetto riparato
Tetto prima della riparazione, con tegole mancanti sul colmo
Dice cosa cambia tra le foto
Badge di certificazione
Certificato dal consiglio regionale di categoria
Dice cosa certifica il badge
Esempi di codice
Tre casi comuni in HTML
Un logo con link, una foto di prodotto e un'immagine decorativa. Nota che quella decorativa ha comunque l'attributo alt, solo vuoto.
Un grafico con i dati nel testo
L'alt dà un nome al grafico e rimanda ai dettagli, che si trovano in una didascalia leggibile da ogni visitatore.
Pratica: scegli il testo alternativo migliore
{n} su {v} risposte corrette.
Giusto.
Non proprio. La risposta migliore è: {v}.
Ricomincia
Opzioni di testo alternativo
Il tuo logo si trova nell'header e ha un link alla home page. Il nome della tua attività non è scritto da nessun'altra parte nell'header.
Harbour Bakery home
Il nostro bellissimo logo in blu
Un'immagine con link ha bisogno di un testo alternativo che dica dove porta il link.
Una sottile linea ondulata separa due sezioni. Non aggiunge alcuna informazione.
linea ondulata
immagine divisoria
Un alt vuoto (alt="")
Le immagini puramente decorative ricevono un alt vuoto, così gli screen reader le saltano.
La foto principale nella pagina prodotto di una tazza disponibile in tre colori. Questa è quella verde salvia.
Tazza in gres verde salvia con manico curvo
tazza tazza tazza caffè miglior tazza regalo
foto prodotto
Una breve descrizione con i dettagli che distinguono questa variante. Gli elenchi di parole chiave sono spam.
Un pulsante con solo un'icona del carrello apre il carrello.
Icona del carrello della spesa
Vedi carrello
Per un'immagine dentro un pulsante, descrivi l'azione, non il disegno.
Un banner con le parole Consegna gratuita questo weekend. Le stesse parole non compaiono nella pagina come testo.
Banner
Banner saldi con sfondo rosso
Consegna gratuita questo weekend
Quando un testo compare solo dentro l'immagine, l'alt deve riportare quel testo.