Accessibilità delle Email HTML: Guida per Sviluppatori
Crea email che funzionano per tutti, inclusi gli utenti con disabilità.
Circa il 15% della popolazione mondiale vive con qualche forma di disabilità. Molti usano tecnologie assistive come screen reader per accedere alle email. Il design accessibile delle email è sia etico che pratico poiché spesso migliora l’esperienza per tutti.
L’accessibilità delle email presenta sfide uniche. I layout basati su tabelle necessari per la compatibilità cross-client possono confondere i screen reader. Questa guida copre tecniche che rendono le email funzionanti per tutti gli utenti.
Struttura Semantica
Usa Attributi Role
Le tabelle usate per il layout dovrebbero essere contrassegnate con role="presentation" per dire ai screen reader che non sono tabelle dati:
<table role="presentation" width="100%">
<tr>
<td>
Layout content here
</td>
</tr>
</table>Senza questo attributo, i screen reader annunciano la navigazione della tabella ("row 1, column 1") che è confusa per le tabelle di layout.
Gerarchia Corretta dei Titoli
Usa elementi heading (h1, h2, h3) in ordine logico:
<h1 style="font-size: 24px; margin: 0;">Welcome to Our Service</h1>
<p>Introduction paragraph...</p>
<h2 style="font-size: 20px; margin: 20px 0 10px 0;">What's New</h2>
<p>Feature description...</p>
<h2 style="font-size: 20px; margin: 20px 0 10px 0;">Getting Started</h2>
<p>Instructions...</p>Gli utenti di screen reader navigano per titoli. Una gerarchia corretta li aiuta a capire la struttura del documento e saltare alle sezioni rilevanti.
Usa Elementi Semantici
Dove supportati, usa HTML semantico:
- <p> per paragrafi
- <ul>/<ol> per liste
- <strong> per testo importante
- <em> per enfasi
Immagini e Testo Alternativo
Testo Alt Significativo
Ogni immagine necessita di un testo alt appropriato:
<!-- Informative image: describe the content -->
<img src="product.jpg" alt="Blue running shoes with white soles" />
<!-- Decorative image: empty alt -->
<img src="divider.png" alt="" />
<!-- Image with text: include the text -->
<img src="sale-banner.jpg" alt="50% off all items this weekend" />Linee guida:
- Descrivi cosa mostra l’immagine, non che è un’immagine
- Tieni il testo alt conciso (sotto 125 caratteri)
- Per immagini decorative, usa alt="" (vuoto, non omesso)
- Se un’immagine contiene testo, includilo in alt
Non Affidarti Solo alle Immagini
Alcuni utenti hanno le immagini disabilitate. Le informazioni importanti dovrebbero essere in testo, non solo in immagini. Se usi un pulsante immagine, includi un fallback link testuale.
Colore e Contrasto
Rapporti di Contrasto Sufficienti
WCAG 2.1 richiede rapporti di contrasto minimi:
- Testo normale: rapporto di contrasto 4.5:1
- Testo grande (18px+ o 14px+ grassetto): rapporto 3:1
<!-- Good contrast -->
<p style="color: #333333; background-color: #ffffff;">
High contrast text
</p>
<!-- Poor contrast (avoid) -->
<p style="color: #999999; background-color: #ffffff;">
Low contrast text
</p>Usa strumenti di verifica contrasto come il contrast checker di WebAIM.
Non Usare Solo il Colore
Il colore non dovrebbe essere l’unico modo per trasmettere informazioni:
<!-- Bad: color only -->
<span style="color: red;">Error</span>
<!-- Good: color plus icon/text -->
<span style="color: red;">⚠ Error: Invalid email address</span>Link e Pulsanti
Testo Link Descrittivo
Il testo dei link dovrebbe descrivere la destinazione:
<!-- Bad -->
<a href="...">Click here</a>
<!-- Good -->
<a href="...">View your order details</a>
<!-- Good -->
<a href="...">Download the 2026 report (PDF, 2MB)</a>Gli utenti di screen reader spesso navigano per link. "Click here" ripetuto più volte è inutile. Il testo descrittivo aiuta gli utenti a capire dove porta ciascun link.
Indicatori di Focus
I link e i pulsanti dovrebbero avere stati di focus visibili per utenti tastiera. Sebbene i client email gestiscano questo in modo incoerente, puoi provare:
<a href="..." style="outline: 2px solid #007bff;">
Link text
</a>Lingua e Lettura
Dichiara la Lingua
Specifica la lingua del documento:
<html lang="en">I screen reader usano questo per selezionare la pronuncia corretta. Per contenuti in altre lingue, usa l’attributo lang su elementi specifici:
<p>The French word <span lang="fr">bonjour</span> means hello.</p>Dimensione Font Leggibile
Minimo 14px per il testo corpo, preferibilmente 16px. Altezza riga di 1.4-1.6 migliora la leggibilità:
<p style="font-size: 16px; line-height: 1.5;">
Body text that is easy to read
</p>Test dell’Accessibilità
Test con Screen Reader
Testa con screen reader reali se possibile:
- VoiceOver (macOS/iOS): Integrato, attivalo con Cmd+F5
- NVDA (Windows): Gratuito, ampiamente usato
- JAWS (Windows): Standard industriale, a pagamento
Ascolta come viene annunciata la tua email. La struttura è chiara? Le immagini sono descritte? I link sono significativi?
Test Automatizzato
Strumenti come Litmus e Email on Acid includono verificatori di accessibilità. Catturano problemi comuni come testo alt mancante e problemi di contrasto.
Email Builder e Accessibilità
Buoni email builder gestiscono alcune accessibilità automaticamente. Sequenzy e piattaforme simili aggiungono role="presentation" alle tabelle di layout, chiedono testo alt per immagini e generano HTML semantico.
Framework come MJML producono output accessibile per default. I componenti sono progettati tenendo conto dei screen reader.
Checklist Accessibilità
Prima di inviare:
- Tutte le tabelle di layout hanno role="presentation"
- Tutte le immagini significative hanno testo alt descrittivo
- Immagini decorative hanno alt="" vuoto
- I titoli sono in ordine logico (h1, h2, h3)
- Il contrasto colore soddisfa i requisiti WCAG
- I link hanno testo descrittivo
- La lingua è dichiarata
- Dimensione font almeno 14px
In Conclusione
Le email accessibili non sono difficili quando capisci le basi. Usa struttura semantica, fornisci testo alt, assicurati il contrasto e scrivi link descrittivi. Queste pratiche beneficiano tutti gli utenti, non solo quelli con disabilità.
Se stai usando un email builder o framework, verifica che segua le best practice di accessibilità. Buoni strumenti rendono l’accessibilità più facile. Sequenzy e altre piattaforme moderne includono funzionalità di accessibilità per impostazione predefinita.
Tabella decisionale: ciò che separa davvero le buone scelte dalle scomode
| Criterion | Question to answer |
|---|---|
| Fonte della verità | Il risultato può essere versionato, revisionato e annullato da un responsabile designato? |
| Affidabilità di rendering | Il risultato sopravvive a Outlook, dark mode, immagini disattivate e larghezze mobile strette? |
| Accessibilità | Ordine semantico, alt text, contrasto e utilità dei link senza complicazioni? |
| Passaggio | Quanti passaggi manuali tra design approvato e invio programmato? |
| Costo a scala | Il prezzo conteggia contatti, invii, postazioni o export — e dove sta la prossima soglia? |
Un piano di 30 giorni per provarlo nel vostro stack
| When | Do this |
|---|---|
| Settimana 1 | Inventariare un template rappresentativo, farlo passare nella shortlist e annotare i difetti per candidato. |
| Settimana 2 | Provare i due migliori: costruirli, renderli sui client di destinazione e documentare ogni passaggio manuale. |
| Settimana 3 | Misurare il tempo del responsabile, il numero di correzioni e ogni fallimento con dark mode o immagini off. |
| Settimana 4 | Decidere su prove scritte: rendering, accessibilità, costo della soglia successiva e piano di ripristino. |
Domande frequenti
Come iniziare a confrontare senza affogare nelle funzioni?
Scegliete un messaggio rappresentativo con il mix che ricorre di più: contenuto dinamico, riuso di moduli o accessibilità rigorosa. Provate quel singolo messaggio su tutti i candidati invece di sfogliare dashboard con dati giocattolo.
Quanti candidati vale la pena provare insieme?
Rimanete a tre al massimo: due in prova e uno in riserva. Ogni candidato aggiuntivo moltiplica le prove da raccogliere più di quanto renda il singolo vantaggio.
Quando conviene davvero cambiare strumento?
Quando lo stesso tipo di difetto ricorre tre volte di fila in un candidato, o quando la prossima soglia di prezzo costa più dell’intero pilota. Altrimenti prestare un pilota deciso è meno costoso di una migrazione.
I prezzi cambiano: verificate i piani attuali sulla pagina ufficiale del fornitore e ripetete la verifica a ogni rinnovo.