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.