Testo ALT: metodo per accessibilità e SEO per tipo di immagine

ALT: un attributo il cui valore dipende dal contesto

Si parla spesso di «tag ALT», ma tecnicamente alt è un attributo dell’elemento img. Il riferimento MDN precisa che la relativa proprietà riflette questo attributo e può fornire un testo sostitutivo quando l’immagine non viene visualizzata.

Il suo scopo principale non è inserire una parola chiave. È preservare l’informazione o la funzione quando l’immagine non può essere percepita. Lo stesso file può quindi ricevere testi diversi in base all’uso, oppure un ALT vuoto quando diventa decorativo.

1. L’albero decisionale in cinque domande

W3C WAI propone un albero decisionale basato su funzione e contesto. Adattalo così:

1. L’immagine aggiunge un’informazione assente dal testo? Descrivi brevemente quell’informazione.
2. Attiva un’azione o un link? Descrivi l’azione o la destinazione, non soltanto l’aspetto.
3. Contiene un testo che non compare altrove? Riporta il testo utile, salvo che il vero testo sia una soluzione migliore.
4. È complessa? Riassumi l’idea essenziale nell’ALT e fornisci i dettagli nel contenuto, in una tabella o in una descrizione lunga accessibile.
5. È decorativa o ridondante? Usa alt="".

Se la funzione resta poco chiara, il problema può essere nel contenuto stesso. Chiediti che cosa un utente deve capire o fare senza vedere l’immagine.

2. Immagine informativa: descrivere l’informazione utile

Una foto prodotto deve distinguere ciò che quella vista aggiunge. Per esempio, se la pagina presenta più angolazioni di una borsa:

• Troppo vago: alt="borsa".
• Keyword stuffing inutile: alt="borsa pelle economica borsa donna lusso nera".
• Contestuale: alt="Borsa Alba in pelle nera, vista frontale con chiusura dorata".

Se il nome, il colore e la vista sono già indicati subito accanto e l’immagine non aggiunge nulla, una ripetizione integrale può diventare rumore. Il giudizio dipende dalla pagina.

Raccomandazione Seven Gold. Scrivi l’ALT dopo la didascalia e il testo vicino. Vedrai più facilmente ciò che manca, invece di copiare il titolo.

3. Immagine decorativa: vuoto non significa assente

Per una texture, un separatore visivo o un’illustrazione d’atmosfera priva di informazioni, usa alt="". Il tutorial WAI sulle immagini decorative spiega che un valore vuoto permette alle tecnologie assistive di ignorarle. Omettere l’attributo può indurre alcuni screen reader ad annunciare il nome del file.

Tre casi frequenti:

• l’immagine ripete esattamente un testo adiacente;
• amplia l’area cliccabile senza cambiare il significato dell’etichetta;
• aggiunge soltanto atmosfera o forma.

Fatto: un ALT vuoto è una decisione semantica valida. Ipotesi da verificare: l’immagine non aggiunge nulla di necessario in questo contesto. Se distingue un prodotto, un avviso o una fase, non è più decorativa.

4. Immagine funzionale: nominare l’azione o la destinazione

Quando l’immagine costituisce da sola un pulsante o un link, descrivi che cosa succede:

• icona della stampante da sola: alt="Stampa questa pagina";
• lente d’ingrandimento da sola in un pulsante: alt="Cerca" se non è previsto altrove un nome accessibile;
• logo Seven Gold da solo in un link alla home: alt="Home Seven Gold";
• logo accompagnato dal testo «Seven Gold — Home» nello stesso link: spesso l’immagine può avere alt="" per evitare la ripetizione.

Descrivere «icona nera a forma di lente» non comunica l’azione. Viceversa, non aggiungere testo ALT se il componente possiede già un nome accessibile affidabile e ciò crea un duplicato: testa il risultato nell’albero di accessibilità.

5. Grafico, mappa e screenshot: spostare i dettagli fuori dall’ALT

In genere, un grafico non può diventare accessibile con una frase interminabile. Indica nell’ALT l’argomento e la conclusione principale, poi fornisci i dati o l’analisi nelle vicinanze.

Esempio ipotetico:

• ALT: alt="Andamento mensile delle richieste qualificate, in crescita fino a giugno e poi stabile".
• Contenuto vicino: una tabella con valori mensili, periodo, definizione di «richiesta qualificata» e una nota sui limiti.

Per uno screenshot, descrivi l’attività o il problema mostrato: «Messaggio di errore dopo l’invio del modulo» è spesso più utile dell’inventario di ogni colore e pulsante. Se occorre seguire dei passaggi, scrivili nel testo della pagina.

6. Che cosa fa — e non fa — il testo alternativo per la SEO

Nelle best practice per le immagini, Google spiega di utilizzare l’ALT insieme al contesto della pagina e ai propri sistemi visivi per comprendere l’argomento. Consiglia contenuti utili e contestuali e sconsiglia il keyword stuffing.

Contano anche testo vicino, didascalia, title della pagina, nome del file e pertinenza complessiva. Un’immagine mal posizionata con un ALT ottimizzato non diventa automaticamente un risultato di Google Immagini.

Fatto: l’ALT fornisce un segnale di comprensione e sostiene l’accessibilità. Raccomandazione: usare i termini riconosciuti dagli utenti quando descrivono davvero l’immagine. Ipotesi: una descrizione più precisa può migliorare la reperibilità; non si devono promettere posizionamento o traffico senza misurazione.

7. Definire una regola editoriale su larga scala

Un foglio di calcolo compilato a posteriori produce spesso ALT generici. Integra invece la decisione nel workflow dei media:

1. indicare la funzione: informativa, funzionale, complessa, testuale o decorativa;
2. fornire il contesto d’uso e la pagina;
3. scrivere o convalidare l’ALT al momento dell’integrazione;
4. controllare duplicati, nomi file annunciati e immagini-link prive di nome;
5. testare con la tastiera, l’albero di accessibilità e, su un campione, uno screen reader;
6. rivedere dopo una modifica del componente o del contesto.

Per grandi librerie, l’automazione può proporre una bozza o segnalare attributi mancanti. Non deve decidere da sola se un’immagine è decorativa, né inventare un prodotto, una persona o un risultato non visibile.

8. Immagini di testo, lingue e riutilizzo

Quando un’immagine contiene un testo essenziale assente dall’HTML, il testo alternativo deve restituire l’informazione necessaria. Quando possibile, però, preferisci il vero testo: si ridimensiona, traduce, copia e personalizza più facilmente. Un hook già presente come titolo adiacente non deve essere ripetuto parola per parola nell’ALT di un visual decorativo.

Durante una traduzione, non copiare automaticamente l’ALT francese. Localizza la formulazione e rivaluta il contesto: l’immagine può essere informativa in una versione e ridondante in un’altra. Se il visual stesso contiene testo, prevedi un asset localizzato o un’alternativa accessibile equivalente.

Checklist prima della pubblicazione

• L’attributo ALT è presente su ogni elemento img?
• Il valore riflette la funzione dell’immagine in questa pagina specifica?
• Un’immagine decorativa usa alt="" invece di una parola generica?
• Un’immagine funzionale comunica l’azione o la destinazione?
• I dettagli di un’immagine complessa sono disponibili anche in forma accessibile?
• Il testo evita keyword stuffing, ripetizioni e informazioni non visibili?

Hai molte immagini e testi ALT incoerenti? Seven Gold può integrare accessibilità e ottimizzazione delle immagini nel tuo audit SEO. Analizzare SEO e accessibilità delle immagini.