Linee guida per l'accessibilità delle e-mail: standard e best practice

Guardati intorno, ascolta cosa sta succedendo. Vedi tutto nitido, in modalità a colori? E senti bene i rumori e le voci? Congratulazioni, sei sicuramente una persona fortunata. Inoltre, sei davvero molto felice. Hai vista e udito!

Potresti pensare che queste abilità siano comuni e date per impostazione predefinita a tutti? E se ti dicessi che il 4,5% dei destinatari nel tuo elenco di contatti soffre di daltonismo, quindi è difficile per loro leggere o comprendere il contenuto della tua e-mail?

Sebbene il daltonismo non sia l'unico disturbo diffuso. Solo un dato di fatto: 285 milioni di persone nel mondo soffrono di gravi disabilità visive che rendono la vista un problema anche con lenti a contatto o occhiali.

E il 5% della popolazione terrestre ha problemi di udito. In altri termini, oltre 360 ​​milioni.

È qualcosa a cui pensare. Non possiamo ignorare tutte quelle persone. Dobbiamo fare del nostro meglio per essere amichevoli con loro e per rendere la loro vita migliore. Questo è tutto ciò che riguarda l'accessibilità.

Ora preparatevi una tazza di tè o caffè e tuffiamoci nei dettagli.

Che cosa significa accessibilità alla posta elettronica?

Ci sono persone che soffrono di gravi disturbi visivi o addirittura di cecità completa. Stanno utilizzando un software di lettura dello schermo per dare voce alle e-mail della posta in arrivo: VoiceOver, Microsoft Narrator e altri strumenti simili. Pertanto il nostro dovere è adeguare i nostri contenuti a questi assistenti.

Quando si tratta di daltonismo, dalla protanopia (quando le persone non riescono a distinguere determinati colori) alla monocromia, non ci sono strumenti che aiutino le persone con queste condizioni. Quindi dobbiamo ottimizzare noi stessi le immagini delle e-mail.

Altri soffrono di problemi di udito, dislessia, ecc. Di conseguenza, ci sono delle regole di accessibilità per ogni tipo di disturbo. Così siamo arrivati ​​alla risposta a una domanda nel titolo.

In poche parole, significa attenersi a standard che rendono le e-mail leggibili per le persone con tutti i tipi di requisiti speciali. Fortunatamente, i moderni costruttori di modelli di email HTML e altri software di marketing ci forniscono strumenti avanzati per implementare questi standard abbastanza facilmente e senza competenze speciali.

Di seguito condividerò questi standard, nonché alcune pratiche che saranno utili per creare e-mail accessibili.

Standard di accessibilità

Quindi, cari amici, è tempo di esplorare uno per uno questi insiemi di raccomandazioni che dobbiamo seguire per inviare e-mail "universali" che saranno facili da leggere per i destinatari con tutti i tipi di malfunzionamenti visivi, uditivi e percettivi.

1. Daltonismo

C'è un elenco di tipi di daltonismo. Eccoli:

Protanopia significa percezione defunta del colore rosso. I lettori con protanopia, alias persone daltoniche, tendono a confondere il colore nero con tutte le sfumature del rosso. Inoltre non riescono a distinguere il marrone scuro dal verde scuro e non vedono alcuna differenza tra il colore blu e il diapason medio del rosso. Dai un'occhiata a questa email di Uber:

Ed è così che lo vedono i destinatari con protanopia:

La deuteranopia è una ridotta percezione del verde. Queste persone tendono anche a confondere i colori del diapason rosso medio/verde, verde brillante/giallo e azzurro/lilla. Di nuovo, dai un'occhiata alla stessa email: originale a sinistra e versione deuteranopia a destra.

Tritanopia significa cecità al colore blu e alle sue sfumature. Questo è il motivo per cui coloro che soffrono di questa menomazione in genere confondono l'azzurro/grigio e il viola scuro/nero. Lo stesso esempio di email, ma puoi vederne la percezione tritanopica sulla destra:

La monocromia è per il daltonismo totale. Queste persone possono vedere la realtà dipinta solo in nero, bianco e diverse sfumature di grigio. Nessun altro colore. Immagina il mondo sullo schermo di un televisore molto vecchio. Ecco come appare la monocromia. Seriamente, mi viene la pelle d'oca.

Cosa dovremmo fare?

• Scegli la dimensione del carattere per la copia e-mail non inferiore a 14 px. Tuttavia, consiglio 16px per fornire ai destinatari un design di posta elettronica accessibile;
• Evita le soluzioni di contrasto basate su colori che i clienti daltonici potrebbero non distinguere. Ad esempio, non scrivere la tua copia con testo verde o blu su uno sfondo rosso o lilla. Guarda il messaggio qui sotto. Va bene per le persone con piena diapason della percezione dei colori... ma va bene anche nel caso della protanopia o della visione monocromatica? non credo...

(messaggio originale)

(questo è come lo vedranno i clienti con protanopia)

(il modo in cui i monocromatici vedono questo messaggio)

Come dovrebbero capire se la loro squadra del cuore ha vinto o perso la partita?

• Dimentica l'idea di aggiungere pulsanti verdi su immagini rosse o viceversa. Lo stesso vale per tutte le combinazioni di colori “rischiose” di cui sopra. L'idea è davvero pessima: le persone con malfunzionamenti nella percezione del colore potrebbero non notare affatto il pulsante;
• Specificare sempre tra parentesi il colore del prodotto: i clienti potrebbero non distinguere, ad esempio, il colore rosso, ma sanno che le camicie o gli abiti rossi corrispondono perfettamente alla loro immagine;
• Crea link nelle tue email in grassetto.

Sì, il normale colore blu per il testo dei collegamenti non è sufficiente. E non solo per i destinatari daltonici. Hai mai letto le email per strada quando il sole splende senza pietà direttamente sullo schermo dello smartphone? Allora capisci cosa intendo: è difficile distinguere i colori. Quindi rendi i link in grassetto e non sottolinearli. Come mai? Perché la sottolineatura può distrarre le persone con dislessia. Parleremo in dettaglio della dislessia un po' più avanti.

In questa email, anche le voci di menu sono in grassetto. Questa semplice idea ottimizza la navigazione dei clienti all'interno della newsletter: troveranno facilmente la categoria di appartamenti desiderata.

Notare il collegamento "Visualizza dettagli" con una freccia. Dice che puoi vedere più dettagli facendo clic su di esso;

Se aggiungi elementi di interattività o esegui test nella tua campagna, scegli i colori verde/rosso intenso/azzurro per evidenziare le risposte corrette. E rispettivamente rosso/nero/grigio per sbagliato. Assicurati di duplicare le risposte sì/no con il testo.

È davvero essenziale verificare se l'e-mail soddisfa i requisiti delle persone che soffrono di una carenza di colore. Per tua comodità, vorrei aggiungere questa tabella al nostro post. Salvalo per trovare i colori corrispondenti ed evitare confusione:

C'è anche uno strumento gratuito di simulazione del daltonismo che mostra le tue foto come le percepiranno i destinatari daltonici.

Come possiamo vedere, il test del colore non è troppo complesso, ma non ignorarlo. Mostra la tua attenzione per tutti gli abbonati. Essere buono.

2. Cecità e gravi disabilità visive

Il prossimo capitolo è dedicato agli standard di accessibilità per non vedenti e ipovedenti. Queste regole riguardano anche i disturbi visivi, ma i principi e le soluzioni qui sono totalmente diversi. Nessuna combinazione di colori o combinazione di contrasto può aiutare in questo caso. Questo aspetto della scienza dell'accessibilità si basa sull'utilizzo di software di lettura dello schermo.

Di conseguenza, la nostra missione è adattare le nostre e-mail a questi strumenti. In altri termini, dobbiamo rendere le e-mail leggibili per questi strumenti.

A cosa dovrebbe prestare particolare attenzione qui?

Oggetto dell'email

In genere, le utilità per la lettura dello schermo iniziano a leggere un messaggio di posta elettronica dall'oggetto.

Quindi la regola comunemente accettata è semplice ma efficace: rendi la tua riga dell'oggetto breve e descrittiva. Un buon soggetto dovrebbe spiegare l'essenza centrale del messaggio.

Impostazioni della lingua

È molto importante configurare le impostazioni della lingua nella copia dell'e-mail. Questa attività richiede un certo sforzo e lavora con la copia e-mail, ma ne vale la pena. La questione è che il testo dell'e-mail vocalizzato dagli screen reader può sembrare terrificante se ignori queste impostazioni. Qualcosa come le conversazioni degli orchi del Signore degli Anelli

Per evitare ciò, specificare la rispettiva lingua nel codice e-mail (se disponibile).

Ordine logico

I lettori di schermo hanno un ordine rigoroso su come vocalizzare le e-mail. Leggono contenitori e blocchi da sinistra a destra e poi procedono con la riga successiva.

Per fornire accessibilità, specifica tag di intestazione come <h1> , <h2> , <p> , ecc. nel codice HTML. Questi tag aggiungeranno priorità al testo normale, quindi questi elementi vengono vocalizzati per primi.

Inoltre, la dimensione del carattere non ha importanza quando vengono specificati i tag. Nell'esempio sopra, la dimensione del carattere dell'intestazione 2 è 24px e il normale carattere della copia è più grande: 27px. Ma i lettori di schermo canteranno prima il titolo 2.

Testo alternativo

Le tecnologie di intelligenza artificiale si stanno sviluppando costantemente oggi. Ma gli strumenti per la lettura dello schermo non sono ancora abbastanza intelligenti da "guardare" le immagini nell'e-mail e descriverle. Forse nel prossimo futuro... Per quanto riguarda oggigiorno, queste utilità possono leggere solo testo alternativo, noto anche come testo alternativo che aggiungiamo alle immagini.

Come adattare il testo alternativo agli standard di accessibilità? Hai indovinato, è abbastanza ovvio: rendi questo testo conciso, descrittivo e informativo. Una nota utile: evita la parola "immagine" in questo testo. Il tag dell'immagine lo specifica già, quindi sarà un po' strano sentire l'"immagine immagine..." duplicata

Collegamenti, elementi CTA, icone social

I collegamenti dovrebbero essere il più concisi e informativi possibile. Aggiungi loro del testo in chiaro e ricorda che i lettori di schermo trasformeranno questo testo in voce! Fai sapere ai destinatari cosa offri loro e dove andranno con un clic.

Basta guardare questi link:

Il primo collegamento... uh... seriamente, temo di immaginare quanto suonerà inquietante. Mentre il secondo specifica chiaramente il sito web, la data di pubblicazione e il titolo del post.

Lo stesso vale per i pulsanti CTA e le icone dei social media. In effetti, anche questi elementi sono collegamenti ipertestuali, semplicemente avvolti in una forma visiva esteticamente accattivante. Ogni esperto e-mail marketer presta loro la massima attenzione, lavora sul design e sugli effetti, sceglie soluzioni di colore perfette per generare clic...

Ma quando si tratta di screen reader e accessibilità per i non vedenti, l'unica cosa importante qui è il testo. Rendilo abbastanza accattivante da completare la sua missione: obbliga gli abbonati a fare clic sul pulsante.

Ecco come vediamo il pulsante CTA nell'e-mail:

Ma agli strumenti di lettura dello schermo non frega niente di tutti i nostri trucchi di design e i meravigliosi effetti al passaggio del mouse. Tutto ciò che il software vede è il semplice testo. Nient'altro. Quindi assicurati che il tuo testo funzioni da solo.

Per quanto riguarda le icone dei social media, alcuni abbonati che "ascoltano" le e-mail della posta in arrivo potrebbero non comprendere le abbreviazioni che applichiamo a queste icone. Quindi scrivi un testo alternativo descrittivo per questi elementi.

È tutta una questione di cecità. Solo un'altra nota importante: i lettori di schermo sono oggi ampiamente utilizzati non solo da persone con gravi disturbi visivi. Milioni di destinatari ascoltano le loro e-mail in arrivo quando sono occupati, in strada, in macchina, ecc. Quindi questo aspetto dell'accessibilità è ancora più vitale di quanto si possa immaginare.

3. Dislessia

Le persone che soffrono di dislessia tendono a confondere l'ordine delle lettere nel testo, nonostante il normale livello di QI.

Ecco le pratiche di accessibilità per i destinatari dislessici in base al post pubblicato da il Associazione britannica per la dislessia.

• Evita di sottolineare i link. Come ho già accennato un po' sopra, rendi i tuoi link in grassetto invece di sottolinearli;
• Non iniziare una nuova frase alla fine di una riga. La nuova frase dovrebbe essere rispettivamente una nuova riga;
• Nessun BLOC MAIUSC se hai bisogno di evidenziare/enfatizzare una certa idea - usa invece il carattere più grande;
• Dimentica l'allineamento centrale, solo sul lato sinistro dello schermo;
• Lo sfondo bianco può distrarre i destinatari dislessici, i colori crema sono più tenui e non creano difficoltà;
• Termina tutte le frasi con un punto (.), dovresti anche usare il punto e virgola quando ci sono punti elenco nella copia dell'e-mail.

4. Sordità e udito parziale

Per le persone con problemi di udito, esiste un unico standard. Tutti i video incorporati nelle tue e-mail dovrebbero essere dotati di sottotitoli o descrizioni di testo.

Basta non fare affidamento sui sottotitoli automatici forniti da Youtube e altri hosting video. Sono spesso, eh eh... per usare un eufemismo, tutt'altro che ideali. E in alcune occasioni sono addirittura sull'orlo della schizofasia.

Suggerimenti per l'accessibilità della posta elettronica

Finirò con la nostra recensione delle migliori pratiche di accessibilità oggi. Come possiamo vedere, questo aspetto del lavoro degli e-mail marketer è davvero essenziale. Di conseguenza, non saltare mai il test di accessibilità prima di fare clic sul pulsante "Invia"! Controlla le tue campagne con il suddetto simulatore di daltonismo, invia l'e-mail di prova a tutti i dispositivi disponibili e ascoltale con diversi lettori di schermo.

Ora ricapitoliamo brevemente i punti chiave di questo post. Come fornire accessibilità?

• Scegli colori diversi per creare uno schema di contrasto per evitare confusione;
• Scrivi linee tematiche chiare e descrittive;
• Non dimenticare mai il testo alternativo, aggiungilo a tutte le immagini;
• Se l'animazione GIF ha un ruolo educativo, fornisci ai lettori una descrizione dettagliata;
• Non utilizzare lingue diverse in un'e-mail perché le utilità per la lettura dello schermo possono funzionare solo con una sola lingua alla volta;
• Verifica la significatività dei tuoi link;
• Allinea il testo dal lato sinistro;
• Crea le tue newsletter e le e-mail attivate con vero amore. Prenditi cura di tutti i tuoi iscritti.

Ti auguro sinceramente tutto il meglio. Diffondi cura e gentilezza ovunque!