Il «tag alt» in sé non esiste. Alt è un attributo del tag <img>: contiene il testo alternativo dell’immagine, mostrato quando questa non si carica, letto ad alta voce dagli screen reader e sfruttato dai motori di ricerca per capire il contenuto visivo. Sintassi e regole di scrittura valgono per qualsiasi supporto. Le newsletter aggiungono 2 difficoltà: immagini che alcuni client di posta bloccano e pulsanti in formato immagine che scompaiono insieme a loro.
Sintassi dell’attributo alt
L’attributo alt va inserito nel tag <img>, accanto a src, che indica l’indirizzo del file:
<img src="logo-captain-verify.png" alt="Captain Verify" width="200" height="60">
Indicate anche width e height (qui 200 x 60 px): queste dimensioni riservano lo spazio dell’immagine. Quando il client di posta blocca il file, il testo alternativo compare in quell’area. L’attributo title mostra un suggerimento al passaggio del mouse e non sostituisce mai alt.
Scrivere un testo alternativo utile
Descrivete la funzione dell’immagine nel suo contesto. La stessa foto di uno smartphone richiede 2 alt diversi a seconda che illustri una recensione di prodotto o rimandi a una scheda d’acquisto. Fatevi questa domanda: se l’immagine sparisse, che cosa andrebbe letto al suo posto?
Puntate a una frase breve. Abondance indica come riferimento meno di 125 caratteri nella sua guida al tag alt (in francese). Il limite nasce dalla pratica degli editori: WCAG 2.2 non ne fissa nessuno. Per un pulsante, Mailjet consiglia circa 25 caratteri su 200 px di larghezza, nei suoi consigli sull’alt text (in francese).
Eliminate le formule «immagine di» e «foto di»: gli screen reader annunciano già che si tratta di un’immagine. Per un logo, scrivete il nome del marchio. Per un pulsante «Scarica la guida», basta l’alt «Scarica la guida»: «pulsante blu» non dice nulla all’iscritto che non vede l’immagine. Rileggetelo ad alta voce.
Quale alt per quale tipo di immagine?
Tutto dipende dal ruolo dell’immagine nel messaggio: portare un’informazione o solo decorare. L’albero decisionale del W3C distingue 5 casi, dall’immagine decorativa a quella complessa. Per una newsletter bastano 4 domande, in quest’ordine:
- L’immagine è dentro un link o un pulsante? L’alt descrive la destinazione o l’azione.
- L’immagine contiene del testo? L’alt lo riporta parola per parola, a meno che non compaia già accanto.
- L’immagine porta un’informazione (offerta, prodotto, grafico)? L’alt dà l’essenziale. I dati dettagliati vanno come testo nell’email.
- L’immagine è puramente decorativa o ridondante rispetto al testo vicino? L’alt resta vuoto.
| Tipo di immagine | Alt consigliato | Motivo |
|---|---|---|
| Logo nell’intestazione | Captain Verify | Il nome identifica il mittente |
| Pulsante in formato immagine | Scarica la guida | L’alt descrive l’azione attesa |
| Banner con testo | Offerta di stagione: spedizione gratuita da 50 € di acquisti | Il testo dell’immagine è riportato per intero |
| Grafico | Aperture in crescita da gennaio a giugno, dettaglio nella tabella qui sotto | Il messaggio chiave nell’alt e i numeri in testo |
| Linea o separatore | alt=”” | Nessuna informazione da trasmettere |
Alt vuoto e immagini decorative
Un’immagine decorativa riceve alt="": l’attributo c’è ma non contiene testo, e le tecnologie assistive lo ignorano. Omettere l’attributo produce l’effetto opposto: alcuni screen reader annunciano allora il nome del file, rovinando la lettura.
Il W3C (WAI) ammette l’alt vuoto quando l’immagine è un semplice effetto visivo o è ridondante rispetto al testo vicino. Il W3C cita gli spaziatori tra le immagini decorative. In un’email è preferibile una spaziatura in CSS (il padding di una cella di tabella): così non c’è nulla da ignorare.
Norme: WCAG 1.1.1 e RGAA 1.1 e 1.2
Il criterio 1.1.1 «Contenuti non testuali» di WCAG 2.2 è di livello A, il più basilare: ogni contenuto non testuale ha un’alternativa testuale che svolge una funzione equivalente. La pura decorazione fa eccezione, a condizione che le tecnologie assistive possano ignorarla. Il RGAA 4.1.2 della DINUM (riferimento francese, in francese) riprende questo principio in 2 criteri del tema Immagini: l’1.1 «Ogni immagine che porta informazione ha un’alternativa testuale?» e l’1.2 «Ogni immagine decorativa è correttamente ignorata dalle tecnologie assistive?». La versione 5 del riferimento è annunciata per fine 2026.
Per approfondire il lato email, consultate il nostro articolo sulle tecniche di codifica di email accessibili e quello sull’accessibilità delle email.
SEO e Google Immagini
Abondance colloca l’indicizzazione delle immagini tra i motivi per scrivere un alt curato e si appoggia a Google Search Central, alla specifica WHATWG e a MDN. Nessuna fonte consultata quantifica un miglioramento di posizionamento attribuibile all’attributo: riempire di parole chiave non serve a nulla e peggiora la lettura con lo screen reader. In una newsletter l’effetto SEO è trascurabile, dato che il messaggio non è una pagina indicizzata, salvo se lo pubblicate in versione web. Su un sito, date al file un nome di 2-4 parole separate da trattini, per esempio logo-captain-verify.png, come consiglia Abondance.
Errori frequenti
- Omettere l’attributo su un’immagine decorativa invece di scrivere
alt="". - Iniziare con «immagine di» o «foto di».
- Elencare parole chiave (keyword stuffing) invece di descrivere la funzione dell’immagine.
- Copiare lo stesso alt su tutte le immagini di un’email.
- Lasciare il testo importante solo nell’immagine, senza equivalente in HTML.
- Scrivere un alt più lungo dell’area dell’immagine: in caso di blocco può essere tagliato.
Testo alt nelle newsletter: immagini bloccate
Un sito web mostra quasi sempre le sue immagini. Un’email dipende dal client di posta di ogni iscritto. È qui che l’alt diventa una rete di sicurezza.
Nella sua guida al blocco delle immagini (pubblicata nel 2017, aggiornata il 17 agosto 2021), Litmus indica i client Outlook desktop come i principali bloccanti. La maggior parte degli altri client mostra le immagini per impostazione predefinita, con l’eccezione di AOL. Anche i client mobile testati da Litmus le mostrano: l’iscritto deve cercare tra le impostazioni per disattivarle. Il blocco riguarda quindi soprattutto le postazioni desktop con Outlook. Microsoft configura Outlook per impostazione predefinita in modo da bloccare il download automatico delle immagini. Gmail le carica automaticamente secondo la guida di Google (opzione Mostra sempre le immagini esterne), tranne se il messaggio o il mittente sembrano sospetti o se l’utente ha chiesto una conferma preventiva.
Il peso di questi iscritti dipende dal vostro target. Litmus cita Email Client Market Share: Outlook si piazza al 4° posto tra i client di posta con il 6% delle aperture. Litmus aggiunge che questa cifra potrebbe essere sottostimata, perché Outlook blocca per impostazione predefinita il pixel di tracciamento e queste aperture non vengono conteggiate. Una base B2B ha buone probabilità di contarne di più, secondo Litmus.
Lo screenshot mostra il difetto tipico: a sinistra, solo l’immagine dell’intestazione visualizza un testo alternativo, minuscolo. Le immagini dei blocchi sottostanti restano vuote. Litmus precisa che in Outlook desktop l’alt compare solo dopo il banner di avviso e soltanto se le immagini sono disattivate. Un’immagine rotta non mostra nulla.
Alt con stile: quali client lo mostrano?
Gmail, Outlook.com e Apple Mail rendono l’alt con stile, Outlook desktop 2007-2019 no. Yahoo! Mail in webmail non mostra alcun alt, secondo la tabella di Litmus (aggiornata nel 2021). L’alt si formatta con uno stile inline sul tag <img>, per esempio il colore e la dimensione del testo.
<img src="pulsante.png" alt="Scarica la guida" width="200" height="50" style="color:#0b5cad; font-size:16px; font-family:Arial, sans-serif;">
| Client | Alt con stile | Da sapere |
|---|---|---|
| Gmail | Sì | Immagini mostrate per impostazione predefinita (guida di Gmail) |
| Outlook.com | Sì | Webmail, diverso da Outlook desktop |
| Apple Mail | Sì | Testato da Litmus |
| Outlook per Mac | Sì | Diverso da Outlook per Windows |
| Outlook desktop 2007-2019 | No | Alt semplice, solo con immagini disattivate |
| Yahoo! Mail (webmail) | No | Nessun alt mostrato secondo Litmus |
Litmus precisa che il blocco predefinito di Outlook desktop risale ai suoi test su Outlook 2016, senza nuove verifiche da allora. Rifate un test di rendering prima di costruire un’email su questa tabella.
Pulsante bulletproof invece della CTA in immagine
Un pulsante bulletproof è un pulsante costruito in HTML e CSS: una cella di tabella colorata che contiene un link in testo vero. Resta visibile e cliccabile a immagini disattivate, mentre un pulsante in immagine scompare o si riduce al suo alt. Outlook desktop renderizza l’HTML con il motore di Word da Outlook 2007, come indica la documentazione Microsoft. Per quelle versioni, alcuni modelli di pulsante aggiungono un frammento VML (Vector Markup Language), non trattato qui.
<table role="presentation" cellspacing="0" cellpadding="0"><tr>
<td bgcolor="#0b5cad" style="border-radius:4px;">
<a href="https://esempio.com/guida" style="display:inline-block; padding:12px 24px; color:#ffffff; font-family:Arial, sans-serif; text-decoration:none;">Scarica la guida</a>
</td></tr></table>Il codice qui sopra produce un pulsante con 12 px di riempimento verticale e 24 px orizzontale, in #0b5cad con testo bianco #ffffff. Lo stesso principio vale per ogni testo importante (titolo, offerta, data, link di disiscrizione): in HTML, non in un’immagine. Un link d’azione come il pulsante «aggiungi al calendario» deve restare leggibile senza immagini. Un’email fatta solo di immagini appare quasi vuota in Outlook desktop finché l’iscritto non scarica nulla. Litmus consiglia di tenere testo e pulsanti in HTML: il test che conta resta la leggibilità senza immagini.
Mantenete inoltre una versione plain text coerente e tenete d’occhio il peso delle immagini, che incide sulla visualizzazione per gli iscritti con connessione lenta.
Testare con le immagini disattivate
In Gmail, aprite Impostazioni > Visualizza tutte le impostazioni, scorrete fino alla sezione Immagini e selezionate Chiedi conferma prima di visualizzare le immagini esterne. Cliccate su Salva modifiche in fondo alla pagina, poi riaprite il vostro invio. In Outlook desktop il blocco è attivo per impostazione predefinita; altrimenti aprite File > Opzioni > Centro protezione dati > Impostazioni Centro protezione dati e selezionate «Non scaricare automaticamente le immagini nei messaggi di posta elettronica HTML o negli elementi RSS». Completate con uno strumento di anteprima delle email.
Verificate che il pulsante principale resti leggibile e che ogni alt abbia senso da solo. Un testo alternativo curato non salva un’email che rimbalza: fate passare anche la lista da una verifica degli indirizzi prima dell’invio, per individuare quelli non validi.
