Migliora le performance delle email rendendo accessibili le tue comunicazioni

Perché rendere le comunicazioni accessibili è una necessità

Rendere accessibili le comunicazioni alla tua audience, non riguarda solo il rispetto dell’European Accessibility Act (EAA).

L’EAA stabilisce una serie di requisiti comuni per garantire l’accessibilità di prodotti e servizi sia digitali che fisici (dai siti web ai terminali self service), con l’obiettivo di armonizzare le normative in tutti gli Stati membri dell’UE.

L’applicazione di questa normativa europea diventerà obbligatoria dal 28 giugno 2025, data entro cui tutti i prodotti e servizi interessati dovranno essere conformi agli standard di accessibilità previsti (ad esclusione delle microimprese con meno di 10 dipendenti).

Tornando al punto principale, l’accessibilità digitale non è solo un requisito legale.

È la scelta di raggiungere la tua audience rendendo accessibili i contenuti delle tue proprietà digitali attraverso gli strumenti che una persona può volere o dovere utilizzare.

Nella pratica – per fare degli esempi concreti – significa:

• usare correttamente titoli, paragrafi e alt text per permettere una scansione corretta del contenuto agli screen reader;
• scegliere font accessibili che sono di più facile lettura per persone con dislessia;
• utilizzare un contrasto di colori corretto per facilitare le persone con problemi di vista o di daltonismo.

Se ancora non ti convince l’idea che l’accessibilità abbia un impatto sulle performance, qui sotto ho scelto 3 ragioni pratiche che dovrebbero farti riflettere:

• essere inclusivo ti permette di raggiungere più persone: 1 adulto su 4 nell’Unione Europea è una persona con disabilità (e sì, anche l’invecchiamento della popolazione contribuisce ad allargare questo numero). Ora chiediti, quante persone stai escludendo involontariamente?
• L’accessibilità migliora l’usabilità per tutti (e anche la tua reputazione): oltre alle persone con una disabilità, l’accessibilità aiuta gli utenti con limitato accesso ad internet o che accedono ad internet con device vecchi.
• Migliori la deliverability email ma anche engagement e retention: linguaggio chiaro, testi ben formattati e immagini descrittive rendono i contenuti più comprensibili ed accessibili a tutti, portando ad un miglioramento di click ed open rate.

Se leggere questo elenco – non esaustivo – è stato interessante e ti ha dato alcuni spunti, potresti trovare utile anche il Webinar sull’Accessibilità digitale tenuto dai colleghi CRO di Moca e dal nostro partner Yeah! che puoi guardare da questo link.

L’email è uno dei canali digitali più utilizzati e il suo utilizzo continuerà a crescere

Il canale email è uno dei canali digitali più utilizzati in assoluto. In parte ha dovuto la sua crescita all’aumento della popolazione connessa (questo vale anche per i social o altri canali) ma la sua diffusione generale non è limitata a questa ragione.

Negli anni sono nati molti canali digitali alternativi (come i social o le app di messaggistica) che avrebbero potuto rubare spazio all’email ma, nonostante questo, l’utilizzo della posta elettronica non ha subito contraccolpi.

Trend che una recente ricerca di GWI e We Are Social ha confermato anche per il futuro: la Gen Z è la più grande utilizzatrice delle caselle di posta elettronica.

Quindi, tirando le somme, il canale email:

1. è uno dei canali preferiti dalle persone per comunicare con i brand;
2. il suo utilizzo non è destinato a scemare nel tempo.

Che sono già due ottime ragioni per includere questo spazio in una strategia di comunicazione digitale.

Questo confronto mostra un template ottimizzato per tutti i destinatari (sinistra) ed uno che non lo è (destra).

Se vuoi trasformare i tuoi template in una versione completamente accessibile o vuoi capire se nel tuo canale email c’è qualche ottimizzazione da fare in ottica accessibilità, abbiamo preparato una checklist che può esserti d’aiuto.

Iniziamo!

4 punti da ottimizzare per migliorare l’accessibilità delle tue email

1) Non far passare le tue email per spam: scegli un design curato e professionale

Alcuni punti del template email possono impattare sulla deliverability delle tue comunicazioni, quindi potresti apportare delle migliorie al tuo design.

Utilizza il colore in modo sapiente: non comunicare informazioni importanti solo attraverso il colore e controlla che il contrasto tra testo e sfondo sia sempre elevato.

Esistono molti strumenti gratuiti per controllare che le scelte di colore all’interno dei tuoi template abbiano un contrasto ottimale, uno tra questi è il Color Contrast Analyzer di Adobe.

Inoltre, se vuoi creare dei contenuti – come le gif – fai attenzione che non siano dannosi.
Da alcuni anni è buona prassi avvisare con dei “trigger warning” che le persone stanno per usufruire di contenuti potenzialmente pericolosi (ci hai mai fatto caso all’avvio di videogiochi o film?).
Questo aiuta le persone con un certo tipo di epilessia ad evitare di esporsi a contenuti per loro pericolosi.

Inserire un simile avviso prima dell’apertura di un’email non è possibile, quindi è meglio evitare di inserire video o contenuti con quelle caratteristiche. Questo non significa eliminare del tutto le gif ma, nel caso tu voglia inserire un contenuto lampeggiante, dovrai fare in modo che abbia una frequenza tra i 2 Hz e i 55 Hz.

2) Crea una struttura equilibrata e segui le regole SEO

Fai largo uso degli elementi semantici

Un buon consiglio è fare largo uso degli elementi semantici: intestazioni e gerarchia visiva chiare migliorano la leggibilità delle email.

Questa struttura, oltre che organizzare in modo ottimale il contenuto, facilita la lettura alle persone che utilizzano gli screen reader.

Nella maggior parte dei casi, non è necessario intervenire nel codice HTML per settare queste impostazioni. Gli ESP più diffusi ti permettono di controllare queste caratteristiche direttamente all’interno degli editor dei template.

Qui un esempio dal nuovo editor Mailchimp.

Alterna in modo equilibrato immagini e testi

Ti consigliamo poi di creare una struttura email equilibrata: alterna testi ed immagini utilizzando sempre le spaziature corrette tra elementi.

Nella pratica, equilibrare la presenza di testi ed immagini aiuta le persone con difficoltà visive. Mentre gli utenti vedenti possono scansionare visivamente e saltare i contenuti non rilevanti, chi fa uso degli screen reader deve sempre riascoltare l’intero contenuto dell’email (un’email alla volta) se sta cercando qualcosa nello specifico.

Font: attenzione a dimensione e tipologia

Puoi anche scegliere di utilizzare una serie di font accessibili e aumentare le loro dimensioni – soprattutto da mobile.

I font a disposizione da inserire in un template sono pressoché infiniti, però solo alcuni sono accessibili. Prima di scegliere, ad esempio, un font “corsivo” per i titoli prova sempre ad immaginare e testare quanto sia accessibile da mobile.

Su uno schermo tutto ciò che è inferiore ai 14 pixel richiede un certo sforzo per essere letto. Se consideri, poi, che il testo apparirà ancora più piccolo da mobile, puoi immaginare che fatica stai chiedendo di fare ai tuoi lettori.

È vero che le persone possono utilizzare lo zoom per leggere con un minore sforzo i contenuti, ma questo con grande probabilità rischierà di far apparire spezzata o tagliata l’email (come nell’esempio qui sotto).

Il consiglio che ti diamo, come già indicato qualche riga sopra, è sfruttare l’editor dell’ESP o della CDP che utilizzi per impostare i valori default per i vari device.
Per il mobile, consigliamo di non scegliere mai valori sotto ai 16 pixel.

Ultimo consiglio in merito ai font, è quello di preferirne uno uniformemente spaziato e non troppo condensato che aiuta la lettura delle persone con DSA.

Infine, come sempre, assicurati di includere un font di fallback appropriato per i client di posta elettronica in cui il font web che hai scelto non è supportato.

Lascia spazio tra gli elementi ed allinea i testi a sinistra

Ricorda che anche la spaziatura può aiutare a rendere più leggibili i contenuti.
La scelta di una spaziatura tra righe non inferiore a 1,5 lascia respirare i tuoi paragrafi (ed i tuoi lettori) mentre l’utilizzo sapiente del padding tra elementi (titoli e paragrafi o paragrafi ed immagini) e dal bordo dell’email ne favorisce la leggibilità.

La lettura dei contenuti digitali segue uno schema peculiare (come raccontano gli studi di Norman Nielsen Group). Il web non si legge come un libro perché lo sguardo delle persone segue schemi di scanning specifici identificati da studi di eye tracking, come il pattern a F o il pattern a Z.
Per questo, la lettura della tua email sarà più accessibile per tutti attraverso la scelta di un testo allineato a sinistra.

3) Ottimizza le CTA: sempre accessibili e parlanti

In generale, tutti i link di un’email devono essere messi in evidenza, cliccabili e parlanti.
Le Call To Action (i pulsanti) allo stesso modo devono essere visibili e sufficientemente grandi: così potranno essere utilizzati facilmente sia dai dispositivi mobile che da coloro che non possono controllare il mouse con precisione.

I testi collegati alle CTA devono essere comprensibili anche senza o con scarso contesto: questo significa che dovresti evitare i copy come “clicca qui”.

Le persone spesso scorrono i contenuti (sia visivamente che attraverso gli screen reader) scansionando i template alla ricerca di parole chiave o indicazioni rilevanti su cui soffermarsi. Utilizzare link parlanti aiuterà le persone a decidere se cliccare o meno e ne riceverà un beneficio anche il click rate delle tue email.

Facciamo degli esempi.

In questa email di Ikea la CTA è ottimizzata: è in grado di spiegare cosa succederà dopo il click anche senza contesto.

In questa email di un altro ecommerce di arredamento, la CTA non è in grado di ridurre l’ambiguità legata al contenuto di quel link: cosa possiamo aspettarci cliccando?

4) Utilizza i testi alternativi nelle immagini in modo corretto

Spesso chi invia una newsletter pensa che quell’email sia perfettamente leggibile. Il punto è: per chi? Se chi la riceve ha impostazioni diverse del browser o una connessione lenta non la vedrà così com’è stata pensata.

Per esempio, quando le immagini non si caricano (e succede più spesso di quanto si speri), del messaggio resta poco se e puntiamo tutto sull’immagine.

Questo esempio preso da una newsletter di Leroy Merlin è piuttosto efficace.

Un’email efficace è leggibile anche in condizioni non ideali: deve funzionare anche senza immagini e per questo ci vengono in aiuto gli Alt text.

Questo esempio di Velasca mostra un utilizzo estremamente efficace degli Alt text.

L’alt text, è un attributo utilizzato per descrivere le immagini ed è una best practice da implementare quando si costruisce un’email (fin dalla nascita di questo canale).

Il testo utilizzato in un attributo ALT è collegato ad un’immagine e viene visualizzato quando questa non viene caricata. Serve quindi per permettere alle persone di “vedere” l’email anche se le immagini sono disattivate per impostazione predefinita del client di posta elettronica, per una connessione scarsa o se la persona utilizza uno screen reader per leggere l’e-mail.

Per utilizzare correttamente gli alt text, è necessario comprendere appieno il contesto dell’immagine in relazione al contenuto che la circonda.

Ovvero bisogna decidere se l’immagine è funzionale, illustrativa o decorativa.

Tutte le immagini richiedono l’attributo ALT, ma si dovrebbe utilizzare un Alt text nullo per le immagini che non devono essere lette dagli screen reader o che non rappresentano nulla di vitale nel contesto della comunicazione.

Un capitolo a parte: la dark mode nelle email

È molto tempo che, come Moca, cerchiamo una soluzione per controllare il tema dark delle email. Purtroppo, ad oggi, abbiamo definito solo alcune linee guida per gestirlo poichè il controllo delle regole dei vari client di posta esce dal raggio d’azione nostro e dei nostri clienti.

In generale, compreso per il dark mode, vale questo concetto “Email rendering is complex. An email that looks great in one client might look broken in another. Now, Dark Mode is adding another layer of complexity.” e in questo articolo puoi trovare un approfondimento sul tema della complessità dell’email rendering.

È possibile gestire un po’ di più l’aspetto finale delle email lavorando in termini di css e html ma lo sconsigliamo perchè:

• a fronte di un grande investimento di risorse comunque non garantisce il risultato;
• limita in modo importante l’autonomia di modifica dei template e la scalabilità delle attività email;
• può forzare la visione di un’email come l’abbiamo progettata ma bypassando le impostazioni preferite del lettore (se ha abilitato il dark mode – così come il non caricamento delle immagini – meglio rispettare la scelta).

Qui puoi vedere un riassunto, al 2023, della situazione dei provider più diffusi.

Senza toccare CSS o HTML, ci sono alcune best practices che possono essere d’aiuto:

Ottimizzazione di loghi e altre immagini:

• contorno traslucido ai PNG trasparenti con testo scuro per garantire la leggibilità (aiuta nel caso di inversione parziale o completa del colore);

• in caso di immagini con sfondo, cercare di lasciare un bordo sufficientemente ampio per mantenere l’immagine centrata;

Ottimizzare i blocchi di contenuto

• cercare di mantenere il contenuto del corpo email sullo stile: testo nero/sfondo bianco (o comunque con un forte contrasto di colori)

Poi, tema da esplorare se lo riteniamo opportuno, ci sono tool come Litmus che si integrano con gli ESP (in questo caso qui l’integrazione per Klaviyo https://www.litmus.com/solutions/esp/klaviyo) e permettono di controllare con maggiore dettaglio l’aspetto dell’email su vari client.

In conclusione

Ogni accorgimento che migliora l’accessibilità ha un impatto positivo anche sulle performance delle tue email: dalla deliverability all’engagement, dalla reputazione del brand alla fidelizzazione dei clienti.
L’email resta uno dei canali più potenti, ma solo se è progettata per tutti.

Spero che questi consigli ti possano essere utili. se hai bisogno di un confronto per rendere più performanti le tue campagne email parliamone davanti ad un caffè.

Fonti:
Help Klaviyo
Email on Acid