La guida definitiva alle email accessibili

Come e-mail marketer, ci sforziamo di offrire l'esperienza di posta elettronica perfetta ai nostri abbonati. Ci assicuriamo che le nostre e-mail vengano inviate al momento giusto in base alle nostre analisi e che vengano recapitate nella casella di posta monitorando la nostra deliverability ed eseguendo test di spam. Personalizziamo i nostri contenuti per essere più pertinenti e armeggiare con il nostro design per assicurarci che le nostre e-mail vengano visualizzate perfettamente su innumerevoli dispositivi e in ogni client di posta elettronica.

Questi sono tutti passaggi consigliati per garantire che le tue e-mail portino a una conversione. Tuttavia, le tue e-mail potrebbero essere perse da una parte significativa dei tuoi abbonati: persone con disabilità visive, fisiche o cognitive e neurologiche.

Bastano pochi piccoli passaggi per rendere le tue email più accessibili a tutti i tuoi iscritti. In questo post, discuteremo di quali sono questi passaggi e di come possono migliorare la posta elettronica per tutti.

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ù →

Che cos'è l'accessibilità?

L'accessibilità è uno dei pilastri fondanti dell'esperienza utente e del design. Per la posta elettronica, significa assicurarsi che tutti possano ricevere e comprendere il tuo messaggio, indipendentemente da eventuali disabilità o dispositivi di assistenza che potrebbero utilizzare.

Puoi pensare all'accessibilità nella posta elettronica come un'estensione della gestione dei client di posta elettronica con scarso supporto. L'inclusione di soluzioni alternative e fallback garantisce che ogni abbonato riceva un'esperienza positiva.

In qualità di sviluppatori di posta elettronica, trascorriamo ore affinché un'e-mail appaia perfetta in un cliente con una quota di mercato inferiore all'1%, ma pochissimi di noi impiegheranno alcuni minuti a rendere accessibile l'e-mail.
– Mark Robbins, Rebelmail

Accessibilità nella progettazione delle e-mail

Iniziamo esaminando gli aspetti visivi della tua email che possono avere un impatto sull'accessibilità e dove è possibile apportare miglioramenti.

Usa il colore in modo intelligente

Gli abbonati con daltonismo potrebbero non essere in grado di distinguere tra alcuni colori nella tua e-mail, quindi assicurati che il colore non sia l'unico modo in cui vengono trasmesse le informazioni.

Il contrasto del colore può anche creare problemi agli abbonati con difficoltà visive. Usa un contrasto cromatico elevato tra i diversi elementi nella tua e-mail, in particolare tra i colori della copia e dello sfondo. Un modo per farlo è usare il Color Contrast Checker di WebAim per controllare il rapporto di contrasto dei colori nella tua email.

Le tue email sono accessibili? Guarda come appaiono le tue e-mail per gli utenti ipovedenti utilizzando il filtro daltonismo in Anteprime e-mail di tornasole. Prova il tornasole →

Non creare contenuti dannosi

I contenuti che lampeggiano a determinate velocità o secondo schemi, come le GIF animate, possono causare crisi fotosensibili in alcuni individui. Evita di mostrare contenuti lampeggianti o di includere collegamenti a video che potrebbero avere contenuti simili.

Bilancia testo e immagini

Mentre gli utenti vedenti possono scansionare visivamente o saltare i contenuti non rilevanti, gli utenti non vedenti devono ascoltare l'intero contenuto dell'e-mail, un'e-mail alla volta. Personalizza il contenuto scritto nella tua email per consegnare il messaggio principale. Inoltre, considera quanto è compatibile il tuo design con i lettori di schermo più diffusi come JAWS o Window-Eyes.

Migliora la leggibilità della tua email

Usa caratteri di dimensioni maggiori

Qualsiasi cosa più piccola di 14 pixel su uno schermo desktop o laptop richiede uno sforzo per la lettura. Gli utenti possono aumentare il livello di zoom sui loro dispositivi per aiutarli a leggere i loro schermi, ma questo può avere un impatto negativo sulla tua email, che può apparire interrotta o tagliata.

Il testo può apparire più piccolo sui dispositivi mobili, costringendo gli utenti a lavorare di più per leggere la tua email. Utilizza le query multimediali per aumentare la dimensione minima del carattere da 14 a 16 pixel su dispositivi più piccoli per aiutare gli utenti a leggere la tua email:

 @media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

Dai alla tua copia spazio per respirare

Per alcuni può essere difficile leggere paragrafi e blocchi di testo in cui le righe della copia sono distanziate tra loro. Imposta un'altezza di riga appropriata sul testo per renderlo più facile da leggere per tutti. Ti consigliamo di scegliere un'altezza della linea di 4 pixel in più rispetto alla dimensione del carattere.

 <p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

Suggerimento: quando si aumenta la dimensione del carattere per i dispositivi mobili, non dimenticare di aumentare anche l'altezza della linea.

Anche i paragrafi della copia hanno bisogno di spazio per respirare per aiutare la leggibilità. Quando si esegue la scansione di un'e-mail, dovrebbe essere facile identificare i paragrafi ed essere in grado di mantenere il proprio posto. Crea abbastanza spazio bianco sopra e sotto i paragrafi.

Un altro passo per rendere il testo più facile da leggere è spostarlo lontano dai bordi delle tue e-mail. L'aggiunta di riempimento a una cella di tabella o tag di paragrafo ti aiuterà a raggiungere questo obiettivo.

Evita la copia giustificata nella tua email

Copia "giustificata" significa che la spaziatura tra lettere e parole è regolata in modo che il testo ricada a filo con entrambi i margini sinistro e destro. Sebbene sia comune nella stampa, la spaziatura delle parole incoerente può rendere difficile la lettura della copia giustificata. È stato dimostrato che il testo allineato a sinistra è più facile da leggere per tutti.

Scegli il carattere giusto

L'uso dei caratteri Web ha aumentato il pool di possibili caratteri tipografici che possono essere utilizzati nelle e-mail, ma prima di decidere di utilizzare Lobster come carattere del corpo, pensa a quanto sia accessibile. Quando selezioni il carattere tipografico per la tua e-mail, scegline uno che sia uniformemente distanziato e non troppo condensato. Questa è una buona idea non solo per l'accessibilità, ma anche per gli utenti mobili.

Usa elementi semantici

L'inclusione di elementi semantici offre ai tuoi abbonati che utilizzano lettori di schermo l'opzione di "scansionare" un'e-mail per intestazione. Puoi farlo usando i tag <p> e <h>. Questi sono supportati in ogni client, quindi è un buon punto di partenza per rendere la tua email più accessibile.

Storicamente, lo stile dei tag <p> e <h> non è stato facile, motivo per cui è ancora abbastanza raro vedere questi tag utilizzati nelle e-mail. I margini attorno al testo racchiuso in uno di questi tag erano difficili da gestire, ma usando un codice come questo sarai in grado di controllare quello spazio bianco:

 <h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

 <p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

Suggerimento: utilizzando mso-line-height-rule:esattamente; nei tag <h> manterrà la regola dell'altezza della riga impostata nei client di posta di Microsoft Outlook.

Guarda questa clip da Litmus Live 2017 mentre lo sviluppatore di posta elettronica Paul Airy spiega perché e come utilizza elementi HTML semantici nelle sue e-mail per renderle più accessibili:

Twitta questo video →

Impara dagli esperti di Litmus Live Diventa un email marketer migliore con consigli del mondo reale, best practice e suggerimenti pratici quando ti unisci a noi per la conferenza Litmus Live. Scopri di più →

Scrivi una copia leggibile

La creazione di un'e-mail più accessibile e leggibile non dipende solo da come è codificata l'e-mail, ma anche da come viene scritta la copia. Rendere più umana la tua copia della posta elettronica aiuterà nella sua leggibilità e aiuterà a costruire una comunicazione 1:1 tra te e i tuoi abbonati.

Il test più popolare, noto come test Flesch-Kincaid Reading Ease, può essere trovato in Microsoft Word e calcola la facilità di lettura dei tuoi contenuti su una scala da 0 a 100. Questo significa:

• Un punteggio di 90-100 sarà facilmente compreso da uno studente di 11 anni
• Un punteggio di 60-70 sarà facilmente comprensibile dagli studenti dai 13 ai 15 anni
• Un punteggio di 30-50 sarà compreso dagli studenti universitari
• Un punteggio di 0-30 sarà compreso meglio dai laureati

Rendere qualcosa di più "leggibile" non dovrebbe significare che ti allontani da argomenti difficili o argomenti pesanti. Piuttosto che sminuire la tua scrittura, si riferisce all'accessibilità del testo. Il tuo punto debole è da qualche parte tra 60 e 70 per catturare un pubblico generale. Naturalmente, se il tuo pubblico è altamente istruito, non aver paura di usare un linguaggio più complesso.

Puoi anche aumentare la leggibilità modificando la tua copia per essere diretta e al punto.

Crea contenuti accessibili

Rendi i link cliccabili/toccabili

Garantire che le dimensioni dei pulsanti antiproiettile siano abbastanza grandi da essere utilizzate con pollici e dita sui dispositivi mobili aiuterà anche con l'accessibilità della tua email. Un pulsante più grande sarà vantaggioso per coloro che non possono controllare un mouse con precisione.

Mi piacciono i bottoni grandi e non posso mentire.
– Justine Jordan, tornasole

Sebbene le linee guida per l'interfaccia umana dell'iPhone di Apple raccomandino una larghezza e un'altezza minime di 44 pixel per i pulsanti, questo numero varia a seconda del fornitore del dispositivo mobile. Una regola empirica alternativa consiste nell'utilizzare una larghezza e un'altezza minime di 72 pixel poiché questa è la larghezza media in pixel di un pollice.

Elimina la copia del collegamento "Fai clic qui"

Evita di usare "clicca qui" come copia per i tuoi collegamenti. Gli utenti di screen reader spesso scorrono i contenuti, saltandoli come un modo per scansionare un'e-mail. Fornire il contesto dei collegamenti aiuterà questi utenti a decidere se desiderano fare clic o meno.

Ad esempio, se disponi di un link che rimanda a un elenco di prodotti di scarpe, l'utilizzo di una copia del link come "Vedi più scarpe" riduce l'ambiguità del link per gli utenti di screen reader. Ridurre l'ambiguità dei collegamenti è vantaggioso per tutti gli abbonati, in quanto non richiede loro di leggere il contesto che circonda il collegamento, utile per coloro che scansionano regolarmente le e-mail senza assorbire tutto.

Non è solo per l'accessibilità, bandendo i link "fai clic qui" il contenuto della tua email sarà più indipendente dal dispositivo. Mentre "fai clic qui" può avere senso per un abbonato che utilizza un laptop o un desktop, ma non per qualcuno che utilizza un dispositivo mobile o un tablet in cui toccare è l'azione richiesta.

Usa correttamente l'attributo ALT

L'attributo ALT è stato una best practice per le email sin dagli albori delle email HTML, a causa dei client di posta che bloccano le immagini per impostazione predefinita. Il testo utilizzato in un attributo ALT allegato a un'immagine viene visualizzato quando l'immagine non viene caricata. Ciò aiuta l'abbonato a "vedere" l'e-mail se ha le immagini disattivate per impostazione predefinita nel proprio client di posta elettronica o se utilizza uno screen reader per leggere l'e-mail.

Per utilizzare correttamente l'attributo ALT, il contesto dell'immagine deve essere pienamente compreso in relazione al contenuto che lo circonda. Innanzitutto, devi decidere se l'immagine è funzionale, illustrativa o decorativa.

Tutte le immagini richiedono attributi ALT, quindi un attributo ALT nullo dovrebbe essere utilizzato per le immagini che non devono essere lette dagli screen reader o rappresentano qualcosa di vitale per l'abbonato.

Visualizza la tua email con tutte le immagini disattivate per aiutarti a decidere quali immagini richiedono l'attributo ALT e quali possono avere un attributo nullo.

Per un approfondimento sulla comprensione di come il contesto informa l'uso dell'attributo ALT per le tue immagini, visita la pagina di WebAim sull'attributo ALT.

Usa role="presentation" su tutte le tue tabelle di presentazione

Nella progettazione dell'e-mail, le tabelle vengono utilizzate per contenere il contenuto e strutturare il design dell'e-mail. I tavoli non sono mai stati pensati per essere usati per il design; tuttavia, a causa delle restrizioni nei client di posta elettronica come Outlook, i progettisti di posta elettronica sono stati costretti a utilizzare l'elemento <table> come elemento di progettazione.

Per aiutare gli screen reader a capire la differenza tra gli elementi <table> che contengono contenuto e quelli che sono puramente di design, usa add role=”presentation” su ogni tabella che contiene il contenuto che l'abbonato deve leggere. Devi solo aggiungerlo a ogni elemento <table>, non a ogni <td>. Ciò evita di costringere uno screen reader a leggere ogni cella delle tue tabelle una alla volta e aiuta l'abbonato a raggiungere direttamente il contenuto importante.

Oltre a role=”presentation”, aria-hidden=”true” è un altro attributo HTML che può essere aggiunto agli elementi nel tuo HTML che sono per il contenuto visivo e dovrebbero essere nascosti agli screen reader:

 <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>

role="presentation" può essere utilizzato anche sulle immagini. Lo sviluppatore di posta elettronica Remi Parmienter ha scoperto alcuni comportamenti insoliti in Chrome per gli utenti di VoiceOver, un'applicazione di lettura dello schermo per MacOS. VoiceOver ha iniziato a leggere i nomi dei file per le immagini, anche se l'attributo ALT è presente ma vuoto. Si consiglia di utilizzare l'attributo HTML role=”presentation” su qualsiasi immagine con un attributo ALT vuoto per evitare che il nome dell'immagine venga letto.

Email accessibili in azione

Possiamo implementare un livello di accessibilità se guardiamo oltre le sfide. Concentrati su ciò che puoi fare, non su ciò che non puoi fare.
– Paul Airy, Oltre la busta

I membri della comunità di tornasole hanno preso parte a un concorso della comunità per creare un'e-mail accessibile. Le presentazioni hanno illustrato i piccoli passi che possono essere intrapresi per aprire la posta elettronica a un nuovo pubblico.

Gli abbonati a questa e-mail potranno aumentare la dimensione del testo tramite il browser fino al 200% senza alterare il design dell'e-mail. E presenta una GIF animata che si interrompe dopo tre cicli (entro cinque secondi) per coloro che soffrono di crisi fotosensibili.

Eyal Bitton ha creato un'e-mail che utilizza la copia per i collegamenti che hanno un senso fuori contesto ed Eyal segnala la fine dell'e-mail agli abbonati ciechi utilizzando del testo nascosto.

La newsletter di tipo E utilizza un miglioramento progressivo interattivo per consentire all'abbonato di scegliere tra dimensioni di testo standard o grandi. Lo sviluppatore di posta elettronica Paul Airy ha anche incluso un'opzione, guidata da un opt-in, in cui l'abbonato può scegliere di visualizzare l'e-mail con sfondi colorati se soffre di determinate disabilità.

Queste e-mail illustrano che bastano pochi piccoli passi affinché le e-mail siano più accessibili e potenzialmente raggiungano un pubblico più ampio. Molti di questi passaggi non solo aiutano l'accessibilità, ma aiutano anche a migliorare le tue e-mail per tutti.

ANTEPRIMA LE TUE EMAIL CON IMMAGINI ON E OFF

Vuoi vedere come appaiono le tue e-mail in oltre 60 client desktop, mobili e webmail, comprese le visualizzazioni senza immagini? Fai una prova al tornasole, gratis!

Inizia il test ora →

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 →