Accessibilità nell'email marketing: 7 semplici trucchi per rendere più accessibile il tuo codice

Pubblicato: 2019-04-16

L'accessibilità sta rapidamente diventando un pilastro dell'email marketing quanto lo è nell'esperienza utente e nel design. Sempre più marchi si stanno assicurando che le loro campagne e-mail possano essere apprezzate da tutti gli abbonati, indipendentemente dal fatto che abbiano disabilità fisiche, visive o cognitive, o anche se semplicemente non possono visualizzare le immagini nelle loro e-mail a causa di un'impostazione aziendale.

In qualità di e-mail marketer, ci sforziamo tutti di fornire e-mail di qualità alle caselle di posta dei nostri abbonati. Eseguiamo test di spam e test di posta elettronica per garantire che il nostro design sia perfettamente visualizzato su tutti i dispositivi e client di posta elettronica. Ma a volte ci dimentichiamo di impostare i tag ALT per le nostre immagini, di utilizzare una combinazione di colori difficile da leggere o di non ottimizzare le nostre e-mail per gli screen reader, e questo allontana alcuni dei nostri abbonati.

Se hai appena iniziato a rendere il tuo codice email più accessibile, le cose possono essere travolgenti. Ma ci sono alcuni semplici trucchi che puoi implementare facilmente e hanno un grande impatto sull'accessibilità della posta elettronica.

Ecco come controllare la tua posta elettronica per la sua accessibilità a tutti i tuoi abbonati, sezione per sezione.

La tua email è accessibile?

I controlli di accessibilità in Litmus Checklist semplificano il test della tua posta elettronica rispetto alle migliori pratiche di accessibilità chiave, identificano le aree di miglioramento e rendono le tue e-mail più accessibili a tutti i tuoi abbonati.

Scopri di più →

La tua lista di controllo per l'accessibilità

1. Aggiungi un codice lingua al tuo <HTML>

Non tutti i tuoi abbonati leggeranno la tua e-mail sui loro laptop o telefoni: alcuni utilizzeranno screen reader per accedere alla tua e-mail. Dal momento che il contenuto della tua email verrà letto ad alta voce, dovrebbe essere nella lingua giusta in modo che le pronunce siano corrette: non vorresti che la tua email scritta in francese fosse pronunciata in inglese americano, vero?

Per evitare che ciò accada, dovrai far sapere agli screen reader in quale lingua è scritta la tua e-mail. Se non c'è un codice lingua specificato nelle tue e-mail, gli screen reader non possono pronunciare la copia correttamente e la tua e-mail eloquente potrebbe uscire suonando completamente sbagliato.

Ecco perché è fondamentale controllare il tuo <HTML> per un codice lingua: è un semplice frammento di codice che specifica la lingua della tua email. Se non è già nel tuo codice, aggiungi lang=“xx” —sostituisci xx con il codice della lingua appropriato per la tua email. Un elenco di tutti i possibili codici di lingua e località, che ti consente di tenere conto di accenti diversi, come una differenziazione tra inglese britannico e americano, può essere trovato qui .

 Ci sono alcuni casi speciali da considerare:

  • Se stai utilizzando XML nel tag <HTML>, dovrai anche aggiungere xml:lang=“xx” .
  • Se includi la correzione a 120 dpi di Outlook nel codice e-mail, questa soluzione ti servirà per specificare una lingua. Ecco come appare il nostro codice con questa correzione:
     <html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">

Suggerimento per professionisti: è possibile popolare il codice della lingua in modo dinamico se hai impostato la localizzazione all'interno del tuo ESP.

2. Includi sempre i tag ALT per le tue immagini

È importante tenere presente che le immagini nelle tue e-mail potrebbero non essere sempre visibili per i tuoi iscritti. Forse hanno le immagini disattivate, o hanno una cattiva connessione, o stanno usando uno screen reader, e se includi molte informazioni importanti nelle tue immagini, quel messaggio andrà perso. È qui che entra in gioco il testo ALT. Puoi impostare il testo che è visibile ai tuoi abbonati (o letto dal loro screen reader) in modo che ricevano ancora lo stesso messaggio delle persone che possono vedere le tue immagini.

Ovunque tu abbia un tag <IMG> nel tuo codice email, assicurati di impostare il tag ALT. Se hai già popolato i tag ALT, ricontrolla per assicurarti che il testo corrisponda al testo sull'immagine. Se hai tag ALT vuoti, assicurati che non ci sia testo sull'immagine che deve essere popolato per essere visualizzato da uno screen reader. Se non ci sono tag ALT sulle tue immagini e nessun testo nell'immagine stessa, o nessun testo necessario per il significato dell'e-mail, assicurati di aggiungere un tag ALT vuoto: alt="" . Se non lo includi, gli screen reader leggeranno l'URL dell'immagine e nessuno vuole che gli venga letto un URL lungo!

Dopo aver impostato tutti i tag ALT, vuoti o meno, per le immagini nella tua e-mail, aggiungi lo stile del carattere nel tag <IMG> per il testo ALT con stile . Questo stile ti consente di essere fantasioso con il tuo testo ALT e ti consente di modificare l'aspetto del carattere, del colore, delle dimensioni, dello stile e del peso.

3. Includere l'attributo role="presentation" su tutti gli elementi <TABLE>

La maggior parte degli e-mail marketer si affida alle tabelle per strutturare il layout delle e-mail, ma queste possono causare seri problemi agli screen reader. Se uno screen reader identifica una tabella nel codice della tua email, verrà letta ad alta voce come una. Potrebbe letteralmente dirti quante righe e colonne ci sono, indicandoti la posizione e il contenuto di ciascuna colonna, rendendo impossibile la comprensione del tuo messaggio.

Ecco perché è fondamentale dire allo screen reader che stai usando la tabella solo per scopi di layout. Puoi farlo aggiungendo role="presentation" a ogni tabella nella tua email. Questo ruolo dice agli screen reader di rimuovere qualsiasi significato semantico dalle tabelle, quindi invece di leggere i numeri di riga e colonna, si concentra invece sul contenuto.

Diamo un'occhiata a questa intestazione di posta elettronica davvero semplice da una delle nostre e-mail:

Prima di essere ottimizzato per l'accessibilità, il nostro codice aveva questo aspetto:

 <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

Hai notato che mancano gli attributi ALT e le tabelle non sono impostate su role=”presentation” ?

Queste piccole sviste hanno un grande impatto sull'accessibilità. Ecco come uno screen reader interpreta il codice sopra:

Lettore schermo: intestazione e-mail non accessibile

Ed ecco lo stesso codice che è stato rifattorizzato aggiungendo l' attributo ALT=”” e il ruolo=”presentazione” ai tag <TABLE> per facilitare la lettura dello schermo:

 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

Lettore schermo: intestazione e-mail accessibile

Come puoi sentire, c'è una bella differenza!

4. Usa elementi semantici per strutturare i tuoi contenuti

Gli elementi semantici semplificano l'evidenziazione della gerarchia dei contenuti, mostrando agli abbonati (e agli screen reader) che cos'è un titolo e che cos'è una copia del paragrafo. L'inclusione di elementi semantici offre ai tuoi abbonati che utilizzano lettori di schermo la possibilità di "scansionare" più facilmente un'e-mail.

Quando ricontrolla la tua copia, assicurati che qualsiasi copia degna di titolo sia racchiusa all'interno di un tag <H> : <H1> , <H2> , <H3> e così via. Allo stesso modo, assicurati che qualsiasi copia del corpo sia ospitata all'interno di un tag <P> . Quando esamini la tua email, gli screen reader mettono l'accento su intestazioni specifiche e l'impostazione di questi tag <H> e <P> renderà la tua email più facile da navigare.

5. Allinea a sinistra la tua copia, se possibile

Quando si tratta del testo del tuo corpo, potresti essere tentato di allineare al centro. Tuttavia, quando si tratta di accessibilità, questo è un grande no !

Quando centri il testo, il bordo iniziale cambia per ogni riga, il che costringe i tuoi iscritti a lavorare di più per trovare l'inizio di ogni riga, e questa è una sfida per le persone con dislessia e altri problemi di lettura. Se hai una copia più lunga di due righe, allinea a sinistra quella copia. Ciò è particolarmente importante per i dispositivi mobili, poiché la larghezza ridotta spesso produce più righe di testo di quanto tu possa immaginare. Potrebbe essere necessario allineare a sinistra il testo in modo reattivo sul cellulare.

6. Controlla il contrasto della tua copia

Controlla il rapporto di contrasto dei colori del tuo testo rispetto ai colori di sfondo della tua email. Potresti avere abbonati che hanno deficit di colore e se i tuoi colori non forniscono un contrasto sufficiente per loro, potrebbero non essere in grado di leggere la tua email. Esistono due modi per controllare il rapporto di contrasto:

  • Se puoi ospitare il tuo HTML e produrre un URL da usare, questo è il mio modo preferito per controllare i miei colori: http://www.checkmycolours.com/
  • Se hai bisogno di inserire manualmente i tuoi codici colore, controlla https://contrast-ratio.com/

7. Aggiungi effetti al passaggio del mouse per CTA, collegamenti e immagini

In Litmus, utilizziamo effetti al passaggio del mouse sui nostri CTA, link e immagini per indicare la cliccabilità. Gli effetti al passaggio del mouse sono un semplice elemento interattivo che può rendere le tue e-mail più coinvolgenti e migliorare l'esperienza dei tuoi iscritti. Sebbene gli effetti al passaggio del mouse siano supportati solo in AOL, Apple Mail, Gmail e Yahoo! Mail, sono un effetto popolare e vale la pena implementarli nel codice email. Puoi sfumare un'immagine, cambiare il colore del pulsante CTA, aggiungere una scheda pop-up e altro ancora.
Gli effetti al passaggio del mouse possono aiutarti a rendere la tua email più accessibile, come in questo esempio, in cui il pulsante cambia colore al passaggio del mouse.

Vedi l'email completa in Litmus Builder →

Vuoi altri suggerimenti per e-mail?

Guida definitiva all'accessibilità della posta elettronica

Questa guida contiene gli approfondimenti e i consigli passo passo necessari per scrivere, progettare e codificare e-mail che possono essere apprezzate da chiunque, indipendentemente dalle proprie capacità.

Scarica l'ebook →


Ricevi i migliori suggerimenti per l'email marketing e la progettazione, le statistiche e le risorse direttamente nella tua casella di posta e rimani in prima linea nell'innovazione dell'email quando ti iscrivi a Litmus News.

Resta informato →