Questa guida ti guiderà attraverso una lista di oltre trenta miglioramenti che puoi apportare alle tue e-mail per assicurarti che siano il più accessibili possibile. È inoltre dotato di link e tutorial utili, quindi aggiungi questa pagina ai segnalibri e rendi la tua risorsa di riferimento per l'accessibilità alla posta elettronica.

Nota: questo tutorial fa parte dell'intera settimana di contenuti e-mail su Tuts + Web Design: consulta la guida di apprendimento Mastering HTML Email per ulteriori informazioni!

Professionisti email: è il momento di dare priorità all'accessibilità

Ci impegniamo molto nelle newsletter, nelle campagne di marketing e in altre e-mail che inviamo. Elaboriamo con cura il messaggio giusto. Progettiamo diligentemente le immagini. Testiamo trionfalmente in Outlook.

E paga. L'email è ancora il modo in cui la maggior parte delle persone preferisce ascoltare le società e, come canale di marketing, ha un ritorno medio dell'investimento di 32 a 1.

Ma ancora, la maggior parte di noi potrebbe fare ancora meglio. Le e-mail HTML non sono progettate e codificate in modo tradizionale per garantire l'accessibilità. Di conseguenza, molti dei nostri destinatari lottano per aderire e stiamo allontanando parte del nostro pubblico.

A volte i miglioramenti sono evidenti. Se la tua e-mail è interamente stampata, la maggior parte di noi con più di 25 anni avrà difficoltà a leggerlo. Ma più spesso, le barriere che poniamo tra il nostro messaggio e i nostri destinatari sono più sottili. Devo ammettere che mi ci è voluto un momento per notare il problema nella seguente foto:

Cosa c'è di sbagliato in questa immagine? #accessfail pic.twitter.com/H7tAy5X5ud

- Elisha Friday Wright (@MsFridayology), 24 novembre 2016

Una volta venuti a conoscenza di questi problemi, sono spesso facili da risolvere. Leggendo questo, stai già compiendo un primo importante passo verso rendere le tue e-mail accessibili a più persone.

Se sei nuovo nelle email di codifica, ti consiglio di leggere prima le esercitazioni di Nicole Merlin. Questi ti insegneranno i fondamenti delle e-mail HTML e in che modo differiscono dalle pagine web.

Svilupperemo queste competenze man mano che impareremo come applicare le considerazioni sull'accessibilità alle nostre e-mail.

Cosa intendiamo per "accessibilità"?

Al centro, l'accessibilità alla posta elettronica consiste nel rendere le tue e-mail disponibili a quanti più destinatari possibile, indipendentemente dalle circostanze. Generalmente pensiamo all'accessibilità come alla contabilità di diverse disabilità, e questo è vero, ma in realtà è una definizione più ampia di quella, come delineato da Sami Keijonen:

"Siamo tutti diversi e le nostre esigenze possono cambiare nel tempo." - Sami Keijonen

Le disabilità si presentano in molte forme e gravità. Il rapporto mondiale dell'OMS sulla disabilità stima che il 15% della popolazione mondiale vive con una disabilità. A seconda della loro situazione, queste persone possono avere accesso alla tecnologia assistiva che facilita le attività quotidiane. Per rendere le nostre e-mail più accessibili, dobbiamo evitare di porre barriere alle persone e agli strumenti su cui si basano.

Inizia con un'esperienza di base

Scegli una email che hai inviato di recente. Aprilo sullo schermo, o stampalo in modo da poter prendere appunti su di esso.

Qual è l'obiettivo dell'e-mail? Quale azione dovrebbero intraprendere i destinatari dopo averla letta o quali informazioni dovrebbero aver appreso?

Di quali elementi è composta l'email? In che modo ciascuno contribuisce all'obiettivo? L'e-mail avrebbe ancora senso se uno dei paragrafi, collegamenti o immagini fossero stati rimossi?

Chiedere questo tipo di domande ti aiuta a definire a esperienza di base-il minimo indispensabile che deve essere comunicato con successo al destinatario. Questo potrebbe essere semplice come un link e la sua etichetta, o potrebbero essercene altri che devi attraversare.

Soprattutto, l'esperienza di base deve essere disponibile per tutti i destinatari per l'accesso e la comprensione. E tutto il resto dovrebbe essere progettato per non intralciarlo. Ora per le specifiche ...

1. Rendi leggibile il testo

Evitare muri di testo

Più lungo è il paragrafo, più è difficile da leggere. Questo vale per tutti, ma soprattutto per le persone con dislessia o altri disturbi dell'apprendimento.

Ecco alcuni suggerimenti per rendere il tuo testo più leggibile:

• Dividi i paragrafi lunghi in quelli più brevi. Ogni paragrafo dovrebbe avere un unico focus. Leggi ogni frase e vedi se si concentra sulla stessa cosa dell'ultima. In caso contrario, iniziare un nuovo paragrafo.
• Paragrafi relativi al gruppo sotto intestazioni descrittive. Se si utilizza più di un livello di intestazione, assicurarsi che la gerarchia abbia senso; tipicamente userai un 

  per la voce principale,

  s per ogni sezione,

  s per sottosezioni, e così via. L'utilizzo di elementi di intestazione semantica facilita la navigazione della posta elettronica tramite gli screen reader.

• Uso corsivo o grassetto per l'enfasi, ma usali con parsimonia. Se sottolinei tutto, niente spicca.
• Gruppi di punti presenti come puntati (
  ) o numerato (
  ) Elenchi per renderli facilmente digeribili.
  1. Include grafica per visualizzare e supportare il contenuto del testo.

  Usa parole semplici

  Se sei un designer o uno sviluppatore, la scrittura potrebbe non far parte del tuo lavoro. In tal caso, considera di condividere questo tutorial con il tuo collega o cliente. Quando si lavora per rendere le nostre e-mail accessibili, il linguaggio che usiamo è almeno altrettanto importante quanto gli aspetti più visivi o tecnici.

  Ricorda che le persone leggono a diversi livelli di lettura, per molte ragioni. Potresti avere dei riceventi con dislessia. Potresti scrivere nella loro seconda lingua. O forse non hanno familiarità con il gergo del soggetto.

  Se stai scrivendo a un gruppo di persone su un argomento, sarai spesso più esperto rispetto all'argomento. Più conosciamo qualcosa, più dimentichiamo cosa vuol dire non sapere. Questo fenomeno è noto come la "maledizione della conoscenza".

  Se non sei sicuro che le persone che hanno meno familiarità con l'argomento possano capire la tua scrittura, trova qualcuno a cui chiedere feedback. Anche i tuoi colleghi potrebbero soffrire della maledizione della conoscenza. Forse puoi ricevere aiuto da un amico, un familiare o uno dei tuoi abbonati?

  Quando ho firmato per scrivere per Tuts +, mi hanno inviato la loro guida di stile che contiene alcuni esempi di semplici parole in inglese:

  Usa "compra", non "acquista". Usa "aiuto", non "assistenza". Usa "circa", non "circa".

  Potresti sostituire qualcuna delle parole nelle tue e-mail con quelle più semplici? Che ne dici di tenere una lista di termini confusi che usi comunemente, e parole da usare invece?

  Ci sono anche diverse formule per misurare quanto è leggibile il tuo testo. 
  

  Se copi e incolli il tuo contenuto in Word o Outlook, puoi ottenere la sua leggibilità con due test: il test Flesch Reading Ease, che segna la facilità di lettura da 0 a 100, e il test Flesch-Kincaid Grade Level, che stima in quale livello scolastico a livello statunitense qualcuno in genere comprenderà il testo.

  Questi test esaminano il numero medio di parole per frase e il numero medio di sillabe per parola, come indicatori di quanto il testo sia facile da leggere.

  Per test più completi, prova readable.io. Questo strumento online ti consente di eseguire i tuoi contenuti attraverso test di leggibilità multipli. I loro piani a pagamento offrono persino uno strumento specifico per le e-mail: inoltrano l'e-mail a uno specifico indirizzo e-mail e rispondono con un rapporto di leggibilità automatizzato.

  Utilizza dimensioni carattere 14px o maggiore

  Aumentare la dimensione del carattere non è solo un trucco sciocco per rendere il tuo saggio sembrare più lungo.

  È anche un modo semplice per rendere le tue e-mail più facili da leggere. 14px è il minimo indispensabile per la copia del corpo. Il testo qui su Tuts + ha una dimensione del font di 18px, e anche questo non sembra troppo grande.

  I titoli dovrebbero essere abbastanza grandi da distinguersi facilmente dalla copia del corpo. Type Scale è uno strumento utile per il calcolo e l'anteprima delle dimensioni dei caratteri appropriati. Ulteriori informazioni su scala e gerarchia da questi tutorial:

  Assicurati di usare colori contrastanti
  

  Come regola generale, il testo scuro su un colore di sfondo chiaro è più facile da leggere per la maggior parte delle persone.

  Se si utilizza una combinazione di colori con basso contrasto, ad esempio un testo grigio chiaro su uno sfondo bianco, può risultare difficile da leggere per le persone con problemi di vista o di cecità ai colori. Il contrasto basso rende anche il testo più difficile da leggere in condizioni di scarsa illuminazione come la luce solare diretta.

  Anche testi chiari su uno sfondo scuro possono funzionare bene, soprattutto per le persone con sensibilità alla luce o quando si utilizza uno schermo luminoso in ambienti bui. Ma per le persone con presbiopia (visione offuscata), il testo chiaro su uno sfondo scuro crea una sorta di effetto alone o bagliore. Tutti alla fine sperimentano la presbiopia in una certa misura. La capacità di concentrazione dei nostri occhi si riduce con l'età, in genere inizia dopo il 40.

  Esistono molti strumenti per verificare se il contrasto del colore è abbastanza alto:

  • contrast-ratio.com è uno strumento utile con un nome di dominio memorabile. Quando si immette una combinazione di colori, viene immediatamente visualizzata l'anteprima del contrasto e la barra degli indirizzi viene modificata in un collegamento diretto in modo da poter condividere la combinazione di colori.
  • Mi piace molto anche il cercatore di contrasto tanaguru, che suggerisce altre opzioni di colore se il contrasto è troppo basso.

  
  

  Esatto, PapayaWhip e DarkSlateGrey, bellissime

  Evita pesi di caratteri sottili

  I caratteri ultraleggeri sono diventati popolari tra i designer da alcuni anni, ma sono meno popolari tra le persone con problemi di vista.

  Contrasto buono, peso del carattere scarso

  Se combinato con un basso contrasto di colore e schermi più vecchi, questi pesi dei font sono particolarmente difficili da leggere. Per un'esperienza di lettura migliore, utilizzare pesi da 500 (normale) e superiore.

  Allinea la tua copia del corpo, non giustifica o centra

  Le lingue lette da sinistra a destra, come l'inglese, sono più facili da leggere se allineate a sinistra. Per gli script da destra a sinistra come quelli usati in arabo, persiano ed ebraico, allineare il testo a destra.

  Anche se preferisci l'aspetto del testo centrato, dovresti evitarlo se puoi. Il testo è più facile da leggere per tutti quando ogni riga inizia appena sotto il precedente. Questo è vero anche per le intestazioni, ma è particolarmente importante per la copia del corpo.

  Infine, non si dovrebbe mai usare l'allineamento giustificato, in cui il testo è disposto in modo che abbia bordi uniformi su entrambi i lati. Il testo giustificato è più difficile da leggere in generale, e in particolare nei browser Web e nei client di posta elettronica, che non gestiscono correttamente la giustificazione.

  Usa altezza abbastanza grande della linea

  Le parole hanno bisogno di spazio per respirare.

  Se le righe di testo sono troppo ravvicinate, possono essere difficili da separare per l'occhio. Diventa troppo facile saltare accidentalmente alla linea sbagliata. Se sono troppo distanti, iniziano a sembrare paragrafi separati.

  L'altezza della linea migliore da utilizzare dipende dalla dimensione del carattere e dalla lunghezza della linea. Ma se vuoi una regola generale veloce, non puoi sbagliare troppo con un'altezza della linea di 1,5 volte la dimensione del carattere. Ad esempio, una dimensione del font di 16px sarebbe comoda da leggere con un'altezza della linea di 24 px.

  Invia e-mail al supporto client per altezza della linea la proprietà è in gran parte solida, ad eccezione di alcuni comportamenti strani in Outlook. Uso px valori invece di em, percentuale, o valori "senza unità" per risultati più coerenti.

  Rendere leggibile la lunghezza della linea (la "misura")

  Più prosegui lungo una linea di testo, più è difficile trovare la strada per tornare a dove hai iniziato.

  Se il testo è troppo ampio, l'occhio deve muoversi molto ed è difficile continuare a leggere da una riga a quella successiva.

  Per una leggibilità ottimale, mirare a una lunghezza della linea di circa 45-75 caratteri.

  La dimensione del carattere, l'altezza della linea e la lunghezza della linea si influenzano a vicenda. Ci sono molti approcci per decidere le proporzioni. Ad alcune persone piace usare la sezione aurea (anche se le sue proprietà magiche non sono necessariamente una ricetta garantita per il successo). Utilizzando la calcolatrice Golden Ratio Typography, puoi ottenere rapidamente consigli sull'altezza della linea e calcolare la lunghezza approssimativa della linea (CPL o caratteri per riga) in base alla dimensione del carattere e alla larghezza della colonna.

  Utilizza il markup semantico

  Tradizionalmente, gli sviluppatori di e-mail hanno codificato ogni parte delle loro e-mail come markup della tabella, incluse righe di tabella separate per ogni intestazione e paragrafo. Ciò è dovuto in parte al fatto che alcuni client di posta elettronica hanno utilizzato gli stili degli elementi semantici, ma anche perché le persone avrebbero avuto una certa familiarità con il funzionamento delle tabelle HTML e hanno finito per utilizzarle per impostazione predefinita.

  Come dice il proverbio: se tutto quello che hai è un martello, tutto sembra un chiodo.

  Ma come i client di posta elettronica hanno migliorato il loro rendering, e come sviluppatori di e-mail hanno collettivamente migliorato le nostre pratiche di codifica, molti hanno scoperto che ci sono più svantaggi dei vantaggi dello stile di codifica basato su tabella.

  Se invece codi i tuoi paragrafi, elenchi e titoli, come

  ,

  ,
  ,

  ,

  , ecc., quindi le persone che utilizzano screen reader e altre tecnologie assistive potranno navigare più facilmente e dare un senso al contenuto.

  Avrai ancora lo stesso livello di controllo sul modo in cui i tuoi contenuti appariranno disegnandoli con i CSS, e sarà più accessibile, con meno codice. Dovrai applicare i margini che desideri per ciascun elemento, mentre stili come la dimensione e il colore del carattere di copia del corpo possono essere impostati su un elemento padre e ereditati da tutti i paragrafi.

  Ecco un esempio di base:

   
  Prektig aristocratico banchiere
   
  Grundigere vitende enkelstående bevares duer sum lengste, påfallende opplevet hukommelse dunstkrets, kant observasjon drakt besynderlig tillatt tent.
   
  Hyss gjeldsbevis luftdraget broderi, unyttig hvorledes ringeaktende begriper.
   

  Utilizzare il Lang Attributo

  La maggior parte dei computer e degli smartphone è dotata di un software di lettura dello schermo che legge il testo come voce. Per pronunciare correttamente le parole e non come uno stuntman italiano, gli screen reader devono sapere in quale lingua è scritto il testo.

  Per specificare la lingua del contenuto, noi usiamo il Lang attributo. Ecco un rapido esempio di come una frase francese suoni con e senza la lingua specificata (video di Léonie Watson):

  Il Lang l'attributo funziona con qualsiasi elemento HTML. Se si utilizzano elementi diversi all'interno della stessa e-mail, specificare la lingua corretta per ciascuna parte.
  

  La lingua principale dovrebbe essere impostata per elemento. Ma poiché alcuni client di posta elettronica rimuoveranno questo elemento durante la visualizzazione dell'email, è anche più sicuro ripetere l'attributo su un elemento wrapper all'interno del , come un

  intorno al contenuto dell'intera email.

  Per trovare il giusto valore da utilizzare per la tua lingua, puoi fare riferimento al registro dei sottotag della lingua IANA, che è un lungo file di testo di lingue e i corrispondenti valori di sottotag. Oppure usa la ricerca di sottotag della lingua più amichevole che ti permette di cercare le stesse informazioni.

  Ecco la frase francese di prima, con la lingua impostata correttamente:

  l'acqua e il profumo della natura.

  2. Usa il Colore in modo considerevole

  Non comunicare solo con il colore

  L'uso premuroso del colore può aiutare a sostenere il tuo messaggio o trasmettere uno stato d'animo. Ma se ti affidi solo al colore per comunicare determinate informazioni, potrebbe non essere riconosciuto dai destinatari che sono ciechi, daltonici o da una cultura in cui quei colori hanno un significato diverso.

  Ad esempio, invece di utilizzare un punto rosso o verde per indicare se un prodotto è disponibile, utilizzare il testo come "in stock" e "esaurito" e utilizzare solo il colore per supportarlo.

  Prendi il colore cieco nell'account

  Esistono diversi tipi di daltonismo che fanno sì che le persone abbiano difficoltà a distinguere i colori. Il tipo più comune è la cecità ai colori rosso-verde, che rende difficile distinguere i colori rosso e verde. La cecità ai colori totale, che rende tutto bianco e nero, è rara.

  Quando si scelgono i colori per il testo, la grafica e gli elementi di layout, prestare attenzione alle combinazioni di colori nell'intervallo rosso-arancio-giallo-verde, posizionati vicini. Soprattutto se i colori sono simili per luminosità e saturazione.

  Ci sono anche altre combinazioni di colori che possono essere scomode per le persone con diversi tipi di daltonismo da distinguere. È possibile utilizzare un simulatore di daltonismo per cogliere eventuali problemi nelle e-mail. Ce ne sono molti tra cui scegliere. 

  • Con il filtro della pagina Web Colorblind di Toptal, puoi inserire l'URL della versione web della tua email. 
  • Litmus ha un filtro daltonico incorporato nei test delle e-mail. 
  • Color Oracle (Mac, Windows e Linux) e Sim Daltonism (Mac e iOS) sono strumenti di simulazione open source.

  Non abusare di colori brillanti e saturi

  Per le persone con sensibilità alla luce e emicrania, fissando schermi retroilluminati può causare affaticamento degli occhi e agire come un trigger di emicrania. Ciò può essere aggravato da colori vivaci, specialmente nei toni del blu e del rosso.

  Per aree di grandi dimensioni come i colori di sfondo, utilizzare colori più tenui quando possibile.

  Evita il testo non sottolineato o colorato non collegato (soprattutto blu)

  Non tutti i collegamenti sono blu e sottolineati, ma tutti sottolineati e il testo blu è collegato. Almeno questo è ciò che i lettori si aspettano.

  Per evitare confusione e frustrazione, non utilizzare la sottolineatura e i colori per l'enfasi.

  3. Verifica che le tue immagini siano accessibili

  Evita il testo nelle immagini

  Molti mittenti continuano a progettare e-mail con testo in immagini anziché testo HTML attivo. Se il tuo datore di lavoro o cliente richiede il rendering pixel perfetto, è facile vedere come questa potrebbe sembrare una buona soluzione. Ma gli svantaggi di intrappolare il testo nei file di immagine superano i vantaggi.

  • Gli screen reader non possono leggere il testo nelle immagini.
  • Se il blocco delle immagini è attivato nel client di posta elettronica o se l'email viene letta offline, le immagini si interrompono.
  • Non è possibile selezionare, copiare e incollare il testo.
  • Il software di traduzione non può interpretare il contenuto.
  • Il testo non può essere ridimensionato o ridimensionato in modo appropriato per adattarsi a dimensioni dello schermo o livelli di zoom diversi.

  Alcuni di questi problemi possono essere parzialmente risolti impostando il contenuto come testo alternativo dell'immagine e modificandolo con CSS. Sfortunatamente, i client di posta elettronica non condividono un modo coerente di gestire il blocco delle immagini e il testo alternativo. E qualsiasi gerarchia, come le intestazioni, andrebbe persa nella versione di testo alternativa del contenuto.

  Se il tuo progetto richiede il testo su un'immagine, backgrounds.cm ti aiuta a codificarlo in un modo che funziona sulla maggior parte dei principali client di posta elettronica.

  Infine, in situazioni in cui non è possibile evitare l'uso di immagini per il testo, aggiungere il role = "text" all'immagine in modo che i lettori di schermo considerino il suo valore di testo alternativo come testo normale.

  Usa testo alternativo utile

  Usiamo le immagini per molti scopi diversi. Alcuni contengono informazioni importanti, altri sono illustrazioni o parte del layout.

  Tutte le immagini devono avere un alt attributo, ma l'attributo non dovrebbe sempre avere un valore. Nei casi in cui il testo alternativo non è necessario, utilizzare uno spazio vuoto alt attributo per impedire agli screen reader di specificare il nome del file immagine o l'URL del collegamento. Guarda questo esempio di Rémi Parmentier:

  
  

  Se l'immagine ha contenuti di valore, descriverla nel testo alternativo. O se l'immagine è un collegamento, aggiungi un testo alternativo per descrivere dove punta il link.

  W3C ha un comodo albero decisionale per il testo alternativo. Copre la maggior parte degli usi comuni per le immagini e come usare il alt attributo in ogni caso.

  Utilizzare le GIF in modo responsabile

  La nostra opzione principale per includere animazioni nelle nostre e-mail che funzioneranno nella maggior parte dei client di posta elettronica è utilizzare le GIF. Abbiamo visto molti grandi esempi di GIF in e-mail. Possono essere utili per spiegare le idee in modo più efficace di quanto potresti con un'immagine statica o per aggiungere interesse visivo. I timer per il conto alla rovescia e le anteprime video sono altri usi popolari.

  Sfortunatamente, le GIF possono causare problemi ad alcuni destinatari.

  In esempi estremi, animazioni intense possono scatenare attacchi per le persone con epilessia fotosensibile. Se si dispone di file GIF con colori intermittenti o lampeggianti o motivi in ​​grassetto con contrasto elevato, è opportuno testarli utilizzando lo strumento gratuito per l'analisi dell'epilessia fotosensibile di The Trace Center (solo Windows). Questo strumento cattura animazioni dallo schermo e identifica potenziali rischi di grippaggio.

  Anche se le animazioni meno drammatiche e sottili possono causare problemi. Le GIF che si chiudono per sempre possono distrarre dal tuo altro contenuto, specialmente per le persone con disordine da deficit di attenzione e iperattività (ADHD) o autismo. Email on Acid offre alcune best practice di animazione per gli abbonati con ADHD.

  4. Prestare attenzione al layout e alle tabelle

  Evita tabelle inutili

  Sebbene le tabelle HTML siano necessarie per ottenere la corretta visualizzazione di determinati layout nei client di posta elettronica, specialmente in Outlook, gli sviluppatori di e-mail tendono a usarli eccessivamente.

  Vorrei raccomandare la ricerca attraverso il codice del modello per ogni istanza di  e valutare se tale tabella è necessaria. Mi capita spesso

   tag che potrebbero essere facilmente sostituiti con un più accessibile e leggero

  , o addirittura rimosso completamente, senza che ciò influisca sul modo in cui l'email viene visualizzata.

  Uso role = "presentazione" nelle tabelle di layout

  Sulle tabelle rimanenti, aggiungere il role = "presentazione" attributo. I lettori di schermo in genere annunciano ogni cella di tabella che incontrano, il che può rendere le e-mail molto noiose da leggere.

  Aggiungendo role = "presentazione", stai dicendo allo screen reader di considerare la tabella come un normale elemento di testo e di non spostarla come tabella di dati. Guarda gli esempi su Accessibilità nell'email: parte II di Mark Robbins.

  Se le tue e-mail hanno tabelle contenenti dati tabulari effettivi, non utilizzare il ruolo attributo su quelli.

  Uso aria-hidden = "true" su Spacer Elements

  Poiché il margine e il padding hanno un supporto incoerente tra i client di posta, non è raro utilizzare elementi separati come

  s o persino immagini spaziali di vecchia scuola per aggiungere spaziature a un design di e-mail.

  Tali elementi spaziali non aggiungono alcun valore per le persone che leggono la tua email con uno screen reader. Per fare in modo che gli screen reader ignorino uno spaziatore, aggiungi il aria-hidden = "true" attributo all'elemento.

  5. Progetta collegamenti chiari e target di clic

  Crea collegamenti ovvi, oltre il colore

  I collegamenti sono spesso la parte più importante di un'e-mail, dal momento che sono come i destinatari faranno il passo successivo. Dargli un colore diverso rispetto al resto del contenuto li renderà più facili da trovare. Il testo blu ha la migliore possibilità di essere riconosciuto come collegamento, ma puoi usare altri colori finché si distinguono, anche per gli utenti daltonici.

  Evita di usare il colore del link per il testo non cliccabile, per evitare confusione.

  La sottolineatura del testo aiuta anche a suggerire che sia cliccabile. Alcuni preferiscono in grassetto i loro collegamenti, invece, per ragioni estetiche, ma potrebbe valere la pena riservare del testo in grassetto per enfatizzare.

  In genere è meglio evitare i "pulsanti Ghost", uno stile comune di pulsanti con un colore di contorno ma uno sfondo trasparente. Questi possono essere difficili da riconoscere per i destinatari come cliccabili, soprattutto se posizionati sopra un'immagine di sfondo. Gli stili di pulsanti con un colore di sfondo a contrasto sono più facili da scoprire.

  Usa il testo del link utile

  Le persone che leggono la tua email con uno screen reader potrebbero saltare da un collegamento all'altro senza leggere il contenuto tra di loro. E i destinatari ipovedenti potrebbero leggere la tua e-mail ingrandita, perdendo il contesto intorno ai tuoi link. Affinché i link siano accessibili a loro, il testo del link dovrebbe essere in grado di stare da solo e avere ancora un senso.

  Un testo link breve e descrittivo aiuta le persone a navigare in modo efficiente.

  I collegamenti che puntano a luoghi diversi non dovrebbero avere lo stesso testo di collegamento. Rendili singolari, senza collegamenti "Leggi altro"!

  Evita di visualizzare URL di siti Web lunghi come testo di collegamento, poiché di solito sono meno utili come testo di collegamento per tutti i destinatari. 

  Crea pulsanti grandi e completamente cliccabili

  Per i link più importanti nella tua email, un bel grande invito all'azione può darti un piacevole aumento dei click-through sui link di testo.

  Avere un'area sufficientemente ampia per fare clic rende il pulsante più facile da colpire per tutti, specialmente molti utenti con disabilità fisiche.

  Tornasole ha una buona panoramica dei modi per codificare i pulsanti di posta elettronica. Per evitare difficoltà e frustrazione, scegline una in cui è possibile fare clic sull'intera superficie del pulsante.

  

  Detto questo, ho una preferenza personale per buttons.cm.

  Non rendere tutto un collegamento

  Per aumentare i click-through, si può essere tentati di trasformare ogni titolo, immagine e persino paragrafo, in un link alla pagina di destinazione. Ciò significa anche che le persone possono fare clic sul collegamento facilmente senza dover essere troppo precisi. Tuttavia, ci sono alcuni aspetti negativi da fare qualunque cosa un collegamento.

  Per le persone che leggono la tua email con uno screen reader, ogni link verrà letto, quindi ripetere lo stesso link per ogni elemento renderà la tua e-mail noiosa da navigare.

  Se ci sono elementi vicini tra loro che dovrebbero collegarsi allo stesso luogo, ad esempio un'icona con un'etichetta di testo, una buona soluzione è spesso racchiuderli entrambi nello stesso link, creando una singola area cliccabile.

  Se la maggior parte della tua e-mail è costituita da link, questo può anche rendere difficile la tua e-mail scorrere su cellulari e altri touchscreen. Soprattutto per le persone con tremori o altri problemi di controllo muscolare, farcela attraverso una e-mail senza accidentalmente cliccare su link inaspettati può essere una sfida.

  Tenere conto : hover e :messa a fuoco stili

  Dare collegamenti sottili : hover lo stile è un modo semplice per confermare alle persone che quello che stanno per cliccare è, di fatto, un link.

  Durante la navigazione attraverso i collegamenti in un'e-mail tramite tastiera, :messa a fuoco gli stili aiutano i tuoi lettori a tenere traccia del loro collegamento. La maggior parte dei client e-mail e dei browser aggiunge un profilo come predefinito :messa a fuoco stile per i collegamenti. In genere è meglio non rimuovere questo schema, ma se lo fai, dovresti assicurarti di sostituirlo con un altrettanto chiaro :messa a fuoco stile.

  Ogni volta che aggiungi un : hover stile, di solito è buono applicare lo stesso stile :messa a fuoco quindi le persone avranno un'esperienza simile sia che navighino con il mouse o la tastiera.

  Link ai contenuti accessibili

  Anche se non è qualcosa che puoi sempre controllare, quando ti colleghi alle pagine web è bene favorire i contenuti che sono anche accessibili.

  Se hai una scelta tra il collegamento a due articoli simili, dove uno è facile da leggere e l'altro ha un contrasto di colore scarso o una dimensione minuscola del font, a parità di tutti gli altri, vai con quello più accessibile se puoi.

  6. Non dimenticare di plain-text

  Include una versione di testo normale
  

  A causa dei problemi di accessibilità che potrebbero verificarsi con molte e-mail HTML, alcuni destinatari scelgono invece di utilizzare la versione di e-mail in solo testo.

  Poiché non è possibile utilizzare immagini, dimensioni, colori e così via, le opzioni di layout sono limitate. Quando componi la versione in testo normale, pensa a come presentare al meglio il tuo messaggio principale usando solo il testo e preoccupati di renderlo coerente con la versione HTML.

  Prestare particolare attenzione al modo in cui formatti i collegamenti, poiché solo l'URL del link sarà selezionabile. Un buon esempio è scrivere un'etichetta di

  Web design

  Una guida per principianti all'aggirare jQuery

  Una guida per principianti per disegnare un abito di base su un personaggio in Photoshop

  

  ×