Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility

Una guida per principianti sull'accessibilità per l'email (checklist + risorse)

by
Difficulty:BeginnerLength:LongLanguages:

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Questa guida vi guiderà attraverso una lista di oltre trenta miglioramenti che potete effettuare alle vostre email per accertarvi che siano più accessibili possibile. È anche piena di tutorial e link utili, quindi aggiungete questa pagina ai preferiti e rendetela la vostra miglior risorsa per l'accessibilità per l'email.

feature image from Wax Seal Logo Mockup on Envato Market
Particolare dal WaxSeal Logo Mockup sull'Envato Market

Nota: questo tutorial è parte di un'intera settimana sul contenuto delle email su Tuts+ Web Design – date un'occhiata alla guida di apprendimento Padroneggiare l'HTML per l'email per saperne di più!

Email professionali: è il momento di dare priorità all'accessibilità

Mettiamo un sacco di fatica nelle newsletter, nelle campagne di marketing e altre email che inviamo. Creiamo con attenzione il messaggio giusto. Progettiamo diligentemente gli elementi visivi. Testiamo trionfalmente su Outlook.

E dà i suoi frutti. L'email è ancora come la maggior parte delle persone preferisce avere notizie dalle aziende, e come un canale di marketing, ha un rendimento medio dell'investimento di 32 a 1.

Ma ancora, la maggior parte di noi potrebbe fare ancora meglio. Le email in formato HTML non sono tradizionalmente progettate e programmate con l'accessibilità in mente. Di conseguenza, molti dei nostri destinatari lottano per partecipare, e stiamo girando le spalle a parte del nostro pubblico.

A volte i miglioramenti sono evidenti. Se la vostra intera email è composta con caratteri piccoli, la maggior parte di noi con più di 25 anni avrà difficoltà a leggerla. Ma più spesso, le barriere che abbiamo posto tra il nostro messaggio e nostri destinatari sono più sottili. Devo ammettere che mi ci è voluto un attimo per notare il problema nella foto seguente:

Una volta che veniamo a conoscenza di questi problemi, spesso sono facili da risolvere. Leggendo questo, state già assumendo un importante primo passo per rendere le vostre email accessibili a più persone.

 HTML Se siete nuovi alla programmazione di email, vi consiglio di leggere prima il tutorial di Nicole Merlin. Questi vi insegnerà i fondamenti dell'email in formato HTML, e come differiscono dalle pagine web.

Lavoreremo su quelle abilità man mano che impariamo come applicare le considerazioni di accessibilità alle nostre email.

Cosa intendiamo per "Accessibilità"?

Al suo interno, l'accessibilità per l'email tratta su come rendere disponibili le vostre email al maggior numero di destinatari possibile, nonostante le loro condizioni. Pensiamo generalmente all'accessibilità come rappresentante per le diverse disabilità, ed è vero, ma è in realtà una definizione più ampia di quella, come descritto da Sami Keijonen:

"Siamo tutti diversi e le nostre esigenze possono cambiare col tempo." – Sami Keijonen

Disabilità si manifestano in molte forme e livelli di gravità. Il rapporto mondiale sulla disabilità dell'OMS stima che il 15% della popolazione mondiale sta vivendo con una disabilità. A seconda della loro situazione, queste persone possono avere accesso alla tecnologia assistiva che semplifica le attività quotidiane. Per rendere più accessibili le nostre email, abbiamo bisogno di evitare di mettere le barriere davanti alle persone come pure gli strumenti da cui dipendono.

Iniziare con un'esperienza di base

Scegliete un email che avete inviato recentemente. Apritela sul vostro schermo, oppure stampatela in modo che sia possibile prendere appunti su di essa.

Qual è l'obiettivo dell'email? Quale azione dovrebbero intraprendere i destinatari dopo averla letta, o quali informazioni dovrebbero avere imparato?

Di quali elementi consiste l'email? Come ognuno di essi contribuisce all'obiettivo? L'email avrebbe ancora senso se uno dei paragrafi, dei collegamenti o delle immagini fosse rimosso?

Farvi questo tipo di domande vi aiuta a definire un'esperienza di base– il minimo che deve essere comunicato correttamente al destinatario. Questo potrebbe essere tanto semplice come un collegamento e la relativa etichetta, o potrebbe essere necessario ottenere di più.

Soprattutto, l'esperienza di base deve essere disponibile per tutti i destinatari per accedere e comprendere. E tutto il resto dovrebbe essere progettato per non ostacolarla. Ora per le specifiche...

1. Rendere il testo leggibile

Evitare muri nel 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 testo più scorrevole:

  • Dividete i paragrafi lunghi in più brevi. Ogni paragrafo dovrebbe avere un singolo obiettivo. Leggete ogni frase e vedete se si concentra sulla stessa cosa come l'ultima. In caso contrario, iniziate un nuovo paragrafo.
  • Raggruppate paragrafi correlati con titoli descrittivi. Se utilizzate più di un livello del titolo, assicuratevi che la gerarchia abbia un senso; in genere utilizzerete un <h1> per il titolo principale, <h2> per ogni sezione, <h3> per le sotto-sezioni e così via. Utilizzare gli elementi semantici per le intestazioni rende anche la vostra email più facile da navigare con i lettori di schermo.
  • Utilizzate il corsivo o il grassetto per dare enfasi, ma usateli con parsimonia. Se voi enfatizzate tutto, non spicca niente.
  • Presentate i gruppi di punti come elenchi puntati (<ul>) o numerati (<ol>) per renderli facilmente assimilabili.
  • Includete la grafica per visualizzare e supportare il contenuto del testo.

Usate parole semplici

Se siete un designer o uno sviluppatore, la scrittura potrebbe non essere parte del vostro lavoro. In tal caso, considerate di condividere questo tutorial con il vostro collega o cliente. Quando si lavora per rendere accessibile la nostra email, il linguaggio che usiamo è almeno tanto critico quanto gli aspetti più visivi o tecnici.

Ricordate che le persone leggono con diversi livelli di lettura, per molte ragioni. Potreste avere dei destinatari con dislessia. Potreste scrivere nella loro seconda lingua. O forse non hanno familiarità con il gergo dell'argomento.

Se state scrivendo a un gruppo di persone su di un argomento, sarete spesso più esperti della materia di loro. Più cose sappiamo su qualcosa, più ci dimentichiamo cosa vuol dire non sapere. Questo fenomeno è noto come la "maledizione della conoscenza".

Se non siete sicuri se le persone con meno familiarità sull'argomento possano capire il vostro scritto, trovate qualcuno a cui chiedere un feedback. Anche i vostri colleghi possono essere affetti dalla maledizione della conoscenza. Forse potete ottenere aiuto da un amico, un familiare o uno dei vostri abbonati?

Quando ho firmato per scrivere per Tuts+, mi hanno mandato loro guida di stile che ha alcuni esempi di scelta di parole semplici:

Utilizzate "comprare", non "acquistare". Utilizzate "aiutare", non "assistere". Utilizzare "circa", non "approssimativamente".

Potreste sostituire una qualsiasi delle parole nelle vostre email con altre più semplici? Che ne dite di tenere un elenco di termini confusi che utilizzate comunemente e parole da usare al loro posto?

Ci sono anche diverse formule per misurare la leggibilità del testo.

Se copiate e incollate il contenuto in Word o Outlook, potete ottenere la sua leggibilità stimata usando 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 a quale livello di voti scolastico statunitense, qualcuno avrebbe in genere capito il testo.

Questi test guardano 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ù esaurienti, provate readable.io. Questo strumento online consente di eseguire i vostri contenuti attraverso dei test di leggibilità multipli. I loro piani a pagamento offrono anche uno strumento specifico per le email: inoltra l'email a un indirizzo email specifico, e risponde con un rapporto di leggibilità automatizzato.

Utilizzate la dimensione del font a 14px o più grande

Aumentare la dimensione del carattere non è solo un trucco stupido per far sembrare il vostro scritto più lungo.

È anche un modo semplice per rendere la vostra email più facile da leggere. 14px è il minimo assoluto per il testo. Il testo qui su Tuts+ ha una dimensione del carattere di 18px, e che non sembra neanche troppo grande.

Le intestazioni dovrebbero essere abbastanza grandi per distinguersi facilmente dal testo. Type Scale è un pratico strumento per calcolare e visualizzare in anteprima le dimensioni dei caratteri adatti. Ulteriori informazioni su ridimensionamento e gerarchia in questi tutorial:

Assicurarsi di utilizzare colori con alto contrasto

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

Se utilizzate una combinazione di colori con basso contrasto, ad esempio testo grigio chiaro su uno sfondo bianco, può essere difficile da leggere per persone ipovedenti o daltoniche. Il basso contrasto rende anche il testo più difficile da leggere in condizioni di scarsa illuminazione come la luce diretta del sole.

Il testo chiaro su sfondo scuro può anche funzionare bene, soprattutto per le persone con sensibilità alla luce, o quando si utilizza uno schermo luminoso in un ambiente buio. Ma per le persone con la presbiopia (visione offuscata), il testo chiaro su sfondo scuro crea una sorta di effetto alone o bagliore. Chiunque alla fine sperimenta la presbiopia in una certa misura. La capacità dei nostri occhi di messa a fuoco si riduce con l'età, in genere a partire da qualche tempo dopo i 40.

Ci sono molti strumenti per controllare se il contrasto di colore è abbastanza alto:

  • contrast-ratio.com è uno strumento utile con un nome di dominio memorabile. Quando si immette una combinazione di colori, istantaneamente mostra l'anteprima del contrasto e modifica la barra degli indirizzi con un collegamento diretto, così potete condividere la combinazione di colori.
  • Mi piace molto anche tanaguru contrast finder, che suggerisce altre opzioni di colore se il contrasto è troppo basso.


color contrast tool
Perfetto, PapayaWhip e DarkSlateGrey, bello

Evitate i Font con spessore sottile

I font ultra-sottili sono stati popolari tra i designer per alcuni anni, ma sono meno popolari tra le persone con problemi di vista.

Contrast good font weight bad
Buon contrasto, spessore del font scarso

Quando sono combinati con i colori a basso contrasto e gli schermi più vecchi, questi spessori di font sono particolarmente difficili da leggere. Per una migliore esperienza di lettura, utilizzate spessori da 500 (normale) in su.

Allineate il vostro testo, non giustificate o centrate

I linguaggi che vengono letti da sinistra a destra, come l'inglese, sono più facili da leggere quando sono allineati a sinistra. Per i testi da destra a sinistra come quelli utilizzati in arabo, persiano ed ebraico, allineate il testo a destra.

Anche se si preferite l'aspetto del testo centrato, dovreste evitarlo se possibile. Il testo è più facile da leggere per tutti quando ogni riga inizia appena sotto la precedente. Questo vale anche per le intestazioni, ma è particolarmente importante per il testo.

Infine, non dovreste mai usare l'allineamento giustificato, dove il testo è organizzato in modo da avere bordi anche su entrambi i lati. Il testo giustificato è più difficile da leggere in generale, e soprattutto sul browser e sui client di posta elettronica, che non gestiscono bene la giustificazione.

Utilizzate l'interlinea larga a sufficienza

Le parole hanno bisogno di spazio per respirare.

Se le linee di testo sono troppo vicine tra loro, può essere difficile per l'occhio separarle. Diventa troppo facile passare accidentalmente alla riga sbagliata. Se sono troppo distanti tra loro, iniziano a sembrare come paragrafi separati.

La migliore interlinea da utilizzare dipende dalla dimensione del font e dalla lunghezza della linea. Ma se volete una regola generale, rapida, non potete sbagliare di tanto con un'interlinea di 1,5 volte la dimensione del carattere. Per esempio, una dimensione del font di 16px sarebbe comoda da leggere con un'interlinea di 24px.

Il supporto dei client di posta elettronica per la proprietà line-height è per lo più solido, fatta eccezione per qualche strano comportamento in Outlook. Utilizzate valori in px invece di em, percentuali o valori "senza unità" per ottenere risultati più coerenti.

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

Più procedete lungo una riga di testo, tanto più difficile è tornare indietro da dove avete iniziato.

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

Per una leggibilità ottimale, mirate a una lunghezza della linea intorno ai 45-75 caratteri.

La dimensione del carattere, l'interlinea e la lunghezza della linea si influenzano a vicenda. Ci sono molti approcci per decidere le proporzioni. Alcune persone preferiscono utilizzare la sezione aurea (anche se le sue proprietà magiche non sono necessariamente una ricetta garantita per il successo). Utilizzando la Calcolatrice tipografica per la Golden Ratio, si potete ottenere rapidamente consigli per l'interlinea e calcolare la lunghezza di linea approssimativa (CPL o caratteri per linea) basata sulla dimensione del font e la larghezza della colonna.

Utilizzate il Markup semantico

Tradizionalmente, gli sviluppatori di email hanno programamto ogni parte delle loro email con il markup delle tabelle, incluse le righe di tabella separata per ogni intestazione e paragrafo. Questo in parte perché alcuni client di posta elettronica erano soliti modificare gli stili degli elementi semantici, ma anche perché le persone sarebbero state familiari a come le tabelle HTML funzionano che hanno finito per utilizzarle per impostazione predefinita.

Come dice il proverbio va: se tutto quello che avete è un martello, tutto vi sembrerà un chiodo.

Ma poiché i client di posta elettronica hanno migliorato la loro resa, e poiché gli sviluppatori di email collettivamente abbiano migliorato le nostre procedure di programmazione, molti hanno trovato che ci sono più svantaggi che vantaggi con uno stile di codifica basato sulle tabelle.

Se invece programmate i vostri paragrafi, gli elenchi e le intestazioni, come <p>, <ul>, <ol>, <h1>, <h2>, ecc, poi le persone che utilizzano i lettori di schermo e altre tecnologie assistive potranno navigare più facilmente e dare un senso ai vostri contenuti.

Avrete ancora lo stesso livello di controllo su come il contenuto appare applicando lo stile con i CSS, e sarà più accessibile, con meno codice. Vorrete applicare i margini desiderati per ogni elemento, mentre gli stili come la dimensione del carattere del testo e il colore può essere impostato su un elemento genitore ed ereditato da tutti i paragrafi.

Ecco un esempio di base:

Utilizzate l'attributo lang

La maggior parte dei computer e degli smartphone sono dotati di software per i lettori di schermo che leggono il testo come ad alta voce. Al fine di pronunciare le parole correttamente e non come un stuntman italiano, i lettori di schermo hanno la necessità di sapere in quale lingua il testo è scritto.

Per specificare la lingua del contenuto, utilizziamo l'attributo lang. Ecco un rapido esempio di come una frase francese suona con e senza la lingua specificata (video di Léonie Watson):

L'attributo lang funziona con qualsiasi elemento HTML. Se si utilizzano diversi elementi all'interno dell'email stessa, specificate la lingua corretta per ogni parte.

La lingua principale deve essere impostata per l'elemento <html>. Ma perché alcuni client di posta elettronica elimineranno questo elemento quando si visualizza la posta elettronica, è più sicuro anche ripetere l'attributo su un elemento wrapper all'interno del <body>, come un <div>intorno al contenuto dell'intera email.

Per trovare il giusto valore da utilizzare per la propria lingua, è possibile fare riferimento al Registro IANA per i sottotag della lingua, che è un file di testo lungo di lingue e i loro corrispondenti valori di sottotag. Oppure utilizzate la ricerca di sottoetichetta per la lingua più amichevoli che vi permettono di cercare le stesse informazioni.

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

2. Utilizzate il colore con attenzione

Non comunicate esclusivamente con il colore

Un uso riflessivo del colore può aiutarvi a sostenere il vostro messaggio o trasmettere uno stato d'animo. Ma se fate affidamento sul colore da solo per comunicare talune informazioni, possono essere saltate da parte dei destinatari che sono ciechi, daltonici, o di una cultura dove quei colori hanno un significato diverso.

Per esempio, invece di utilizzare un punto rosso o verde per indicare se un prodotto è in magazzino, utilizzare il testo come "in magazzino" e "esaurito" e usate il colore solo per sostenerlo.

Prendete in considerazione il daltonismo

Ci sono diversi tipi di daltonismo che causano alle persone difficoltà a distinguere i colori. Il tipo più comune è l'impossibilità di distinguere il verde dal rosso, che lo rende difficile determinare separatamente le tonalità di rosso e di verde. Il daltonismo totale, che fa sembrare tutto bianco e nero, è raro.

Quando si scelgono colori per il testo, la grafica e gli elementi di layout, siate consapevoli delle combinazioni di colori nella gamma rosso-arancione-giallo-verde, posizionati vicini tra loro. Soprattutto se i colori sono simili in luminosità e saturazione.

Ci sono anche altre combinazioni di colore che possono essere scomode per persone con tipi di daltonismo diverso da distinguere. Potete utilizzare un simulatore di daltonismo per cogliere eventuali problemi nelle vostre email. Ce ne sono molti tra cui scegliere.

Non eccedete nell'uso di colori brillanti e saturi

Per le persone con sensibilità alla luce ed emicranie, fissare gli schermi retroilluminati può causare affaticamento degli occhi e agire come un innesco per l'emicrania. Ciò può peggiorare con colori brillanti, soprattutto con le tonalità del blu e del rosso.

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

Evitate il testo che non sia un link sottolineato o colorato (soprattutto il blu)

Non tutti i link sono blu e sottolineati, ma tutto il testo blu e sottolineato è un link. Almeno questo è ciò che i lettori si aspettano.

Per evitare confusione e frustrazione, non utilizzate la sottolineatura e i colori per dare enfasi.

3. Controllate che le immagini siano accessibili

Evitate il testo nelle immagini

Molti mittenti ancora progettano le email con il testo nelle immagini anziché testo nello stesso HTML. Se il vostro datore di lavoro o il cliente esige un'esecuzione perfetta al pixel, è facile vedere come ciò potrebbe sembrare una buona soluzione. Ma i lati negativi di intrappolare il testo nei file di immagine superano i vantaggi.

  • I lettori di schermo non possono leggere il testo nelle immagini.
  • Se è attivato il blocco immagine nel client di posta elettronica, o se l'email è letta offline, le immagini non si vedono.
  • Non potete selezionare, copiare e incollare il testo.
  • I software di traduzione non possono interpretare il contenuto.
  • Il testo non può essere ridimensionato o adattato correttamente alle varie dimensioni dello schermo o dei livelli di zoom.

Alcuni di questi problemi possono essere parzialmente risolti impostando il contenuto come testo alternativo dell'immagine e aggiungendo lo stile con i CSS. Ma purtroppo, i client di posta elettronica non condividono un modo coerente di gestione del testo alternativo e del blocco dell'immagine. E qualsiasi gerarchia, ad esempio le intestazioni, andrebbero perse nella versione del testo alternativo del contenuto.

Se il vostro design richiede del testo sopra un'immagine, backgrounds.cm vi aiuta a programmarlo in un modo che funziona nella maggior parte dei principali client di posta elettronica.

Infine, in situazioni dove non potete evitare di utilizzare immagini per il testo, aggiungete il role="text" all'immagine in modo che i lettori di schermo tratteranno il valore del testo alternativo come testo normale.

Utilizzate un testo alternativo utile

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

Tutte le immagini devono avere un attributo alt, ma l'attributo non dovrebbe sempre avere un valore. Nei casi in cui il testo alternativo non è necessario, utilizzate un attributo alt vuoto per impedire ai lettori di schermo di sillabare il nome del file di immagine o di un collegamento URL. Guardate questo esempio di Rémi Parmentier:


Se l'immagine ha un contenuto di valore, descrivetelo nel testo alternativo. O se l'immagine è un link, aggiungete un testo alternativo per descrivere dove punta il collegamento.

Il W3C ha un pratico albero di decisione per il testo alternativo. Copre la maggior parte degli usi comuni per le immagini e come utilizzare in ciascun caso l'attributo alt.

Utilizzate responsabilmente le GIF

La nostra opzione principale per includere le animazioni nelle nostre email che funzioni nella maggior parte dei client di posta elettronica consiste nell'utilizzare le gif. Abbiamo visto molti esempi di gif nelle email. Possono essere fantastiche per spiegare le idee in modo più efficace di quanto si potrebbe fare con un'immagine statica, o per aggiungere un interesse visivo. I timer e le anteprime video sono altri usi popolari.

Purtroppo, le gif possono causare problemi ad alcuni destinatari.

In esempi estremi, le animazioni intense possono innescare crisi alle persone con epilessia fotosensibile. Se avete delle gif che presentano colori intermittenti o lampeggianti, o modelli in grassetto con contrasto elevato, vale la pena di provarli utilizzando lo strumento gratuito di analisi dell'epilessia fotosensibile di The Trace Center (solo Windows). Questo strumento acquisisce le animazioni dal vostro schermo e identifica i potenziali rischi di crisi.

Anche se meno drammatiche, anche le animazioni tenui possono causare problemi. Le gif a ciclo continuo possono distrarre da altri contenuti, soprattutto per le persone con deficit di attenzione e iperattività (ADHD) o autismo. Email on Acid offre le migliori prassi per le animazioni per gli abbonati con ADHD.

4. Prestate attenzione al layout e alle tabelle

Evitate tabelle inutili

Anche se le tabelle HTML sono necessarie per ottenere che alcuni layout si visualizzino correttamente nei client di posta elettronica, soprattutto in Outlook, gli sviluppatori di email tendono ad abusarne.

Vorrei raccomandare la ricerca attraverso il codice del modello di ogni istanza di <table e valutare se quella tabella è necessari. Spesso mi imbatto in tag <table> che potrebbero facilmente essere sostituiti con un più accessibile e leggero <div>, o addirittura essere rimossi completamente, senza influenzare l'esecuzione dell'email.

Utilizzate role="presentation" nelle tabelle del layout

Nelle tabelle rimanenti, aggiungete l'attributo role="presentation". I lettori di schermo in genere annunciano ogni cella di tabella che incontrano, che può rendere la lettura delle email molto noiosa.

Con l'aggiunta di role="presentation", indicate al lettore di schermo di trattare la tabella come un elemento di testo normale e di non navigarla come una tabella di dati. Scopri gli esempi sull'Accessibilità nell'email: Parte II di Mark Robbins.

Se le vostre email hanno tabelle che contengono dati tabulari effettivi, non utilizzate l'attributo role su di loro.

Usate aria-hidden="true" sugli elementi separatori

Poiché margin e padding hanno un supporto un po' incoerente nei client di posta elettronica, non è raro utilizzare elementi separati come <div> o anche le immagini vuote vecchia scuola per aggiungere spazio al design dell'email.

Tali elementi distanziatori non aggiungono alcun valore alle persone che leggono la vostra email con un lettore di schermo. Per far ignorare un distanziatore ai lettori di schermo, aggiungete l'attributo aria-hidden="true" all'elemento.

5. Progettate collegamenti chiari e obiettivi da cliccare

Rendete i collegamenti evidenti, oltre al colore

I collegamenti sono spesso la parte più importante di un'email, dato che sono il modo con il quale i destinatari fanno il passo successivo. Dando loro un colore diverso rispetto al resto del contenuto li renderà più facili da trovare. Il testo blu ha le migliori possibilità di essere riconosciuto come un collegamento, ma potete utilizzare altri colori, purché spicchino, anche per gli utenti daltonici.

Evitate di utilizzare il colore del collegamento per il testo non cliccabile, per evitare confusione.

Sottolineare il testo aiuta anche a suggerire che è cliccabile. Alcuni preferiscono i loro link in grassetto invece, per ragioni estetiche, ma potrebbe valere la pena riservare un testo in grassetto per dare enfasi.

È in genere preferibile evitare i "pulsanti fantasma", uno stile comune dei pulsanti con un colore di contorno ma con uno sfondo trasparente. Questi possono essere difficili da riconoscere dai destinatari come cliccabili, soprattutto quando sono posizionati sopra un'immagine di sfondo. Gli stili del pulsante con un colore di sfondo con contrasto sono più facili da scoprire.

Utilizzate un testo per i collegamenti utile

Le persone che leggono la vostra email con un lettore di schermo potrebbero saltare da un collegamento all'altro senza leggerne il contenuto. E i destinatari ipovedenti possono leggere che la vostra email ingrandita, mancando il contesto attorno al vostro collegamento. Per rendergli accessibili i collegamenti, il testo del link dovrebbe essere in grado di stare da solo e avere ancora un senso.

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

Alcuni collegamenti che rimandano a luoghi diversi non dovrebbero avere lo stesso testo. Rendete ciascuno di essi unico — mai più collegamenti "Leggi tutto"!

Evitate di mostrare gli URL lunghi dei siti Web come testo del collegamento, poiché sono solitamente meno utili come testo del collegamento per tutti i destinatari.

Fate pulsanti grandi e completamente cliccabili

Per i collegamenti più importanti nella vostra email, un bel pulsante call-to-action grande può dare un bell'aumento dei clic sui collegamenti di testo.

Avendo una area abbastanza grande da cliccare rende il pulsante più facile da raggiungere a tutti, soprattutto a molti utenti con disabilità fisiche.

Litmus ha una buona panoramica di modi per programmare i pulsanti dell'email. Per evitare difficoltà e frustrazione, scegliete quello in cui l'intera superficie del pulsante è cliccabile.

Litmus button

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

Non rendete tutto un collegamento

Per aumentare i clic, si può essere tentati di trasformare ogni titolo, immagine e anche paragrafo, in un collegamento alla pagina di destinazione. Questo significa anche che le persone possono cliccare sul collegamento facilmente senza dover essere troppo precisi. Tuttavia, ci sono alcuni aspetti negativi di rendere tutto un collegamento.

Per le persone che leggono la vostra email con un lettore di schermo, ogni collegamento sarà letto ad alta voce, quindi ripetendo lo stesso collegamento per ogni elemento renderà la vostra email noioso da navigare.

Se disponete di elementi vicini che dovrebbero collegarsi allo stesso posto, ad esempio, un'icona con un'etichetta di testo, una buona soluzione è spesso di avvolgere entrambi nello stesso collegamento, creando una singola area cliccabile.

Se la maggior parte delle vostre email è costituita da collegamenti, anche questo può rendere la vostra email difficile da scorrere sui cellulari e altri touchscreen. Soprattutto per le persone con tremori o altri problemi di controllo muscolare, farlo in un'email senza accidentalmente cliccare collegamenti imprevisti può essere una sfida.

Prendete in considerazione gli stili :hover e :focus

Dare uno stile sottile a :hover è un modo semplice per confermare alle persone che ciò che stanno per cliccare è, di fatto, un collegamento.

Durante la navigazione da tastiera attraverso i collegamenti di un'email, gli stili di :focus aiutano i vostri lettori a tenere traccia su quale link si trovano. La maggior parte dei browser e client di posta elettronica possono aggiungere un contorno come stile predefinito di :focus ai collegamenti. Generalmente si consiglia di non rimuovere questo contorno, ma se lo fate, assicuratevi di sostituire con uno stile altrettanto chiaro :focus.

Ogni volta che aggiungete uno stile :hover, è buona norma applicare lo stesso stile a :focus così le persone avranno un'esperienza simile, sia che navighino con il mouse o con la tastiera.

Collegamenti a contenuti accessibili

Anche se non è qualcosa che potete sempre controllare, quando ci si collega alle pagine web è buona cosa favorire il contenuto che è anche accessibile.

Se avete una scelta tra collegare due articoli simili, dove uno è facile da leggere e l'altro ha contrasto di colore scarso o una dimensione di carattere minuscola — a parità del resto, proseguite su quello più accessibile se potete.

6. Non dimenticate il testo non formattato

Includete una versione di testo non formattato

A causa dei problemi di accessibilità che possono verificarsi con molte email HTML, alcuni destinatari scelgono invece di utilizzare la versione testuale dell'email.

Poiché non potete utilizzare le immagini, le dimensioni del font, i colori e così via, le opzioni del layout sono limitate. Durante la composizione della versione testuale, pensate al modo migliore per presentare il vostro messaggio principale utilizzando solo il testo e preoccupatevi meno di renderlo coerente con la versione HTML.

Prestate particolare attenzione a come formattate i collegamenti, poiché solo il collegamento dell'URL sarà cliccabile. Un buon modello è quello di scrivere un'etichetta descrittiva del collegamento seguita da due punti su una sola riga e quindi l'URL del collegamento nella riga successiva.

Molti ESP (Email Service Provider) genereranno automaticamente una versione testuale per voi, ma se gli date una lettura, solitamente troverete piccoli modi per renderlo più leggibile.

7. Familiarizzate con i test e gli strumenti

Utilizzate questi strumenti specifici per l'email

Ci sono molti modi per testare la vostra email, sia per aiutare a trovare problemi di accessibilità sia per controllare che le correzioni funzionino come previsto.

Un buon punto di partenza è accessible-email.org, che offre un rapporto di accessibilità sulla vostra email. Controlla che tutte le immagini abbiano un attributo alt, che i livelli delle intestazioni seguano una giusta gerarchia e molti altri punti che abbiamo trattato qui.

thorough report from httpwwwaccessible-emailorg
Un'accurata relazione tipica di accessible-email.org

Se questa è la prima volta che state valutando l'accessibilità delle vostre email, le probabilità sono che otterrete una lista ordinata di miglioramenti che potete fare. Quando tornate a verificare nuovamente il codice aggiornato dell'email, potete guardare con soddisfazione le croci rosse che si trasformano in segni di spunta verdi.

Con il suo popolare gruppo di strumenti di test per le email, Litmus vi permette di controllare molti aspetti dell'accessibilità della vostra email, come la versione testuale, la vista senza immagini e diverse simulazioni di daltonismo del vostro design dell'email.

Testate con i lettori di schermo

Un buon modo per sperimentare la vostra email come fanno alcuni dei vostri destinatari è tentare di leggerlo utilizzando tecnologie assistive come i lettori di schermo. La maggior parte dei sistemi operativi hanno un lettore di schermo incorporato con cui è possibile testarle:

Potete anche considerare dei test con lettori di schermo di terze parti. I lettori di schermo più comunemente usati sono JAWS (commerciale) e NVDA (open source), entrambi funzionano su Windows. Per JAWS, è disponibile una licenza di 90 giorni, che aiuta a ridurre il costo del test.

Installate gli strumenti e i plugin sul vostro browser preferito 

Tutti i principali web browser hanno strumenti di sviluppo integrati per controllare l'accessibilità. Anche se questi non sono specifici per l'email, la maggior parte delle preoccupazioni si applicano allo stesso modo.

Uno che uso spesso è la scheda Audit negli strumenti per sviluppatori di Chrome, che dà un punteggio alla pagina e dà una panoramica pratica dei problemi da risolvere.

Inoltre, ci sono diversi plugin di terze parti che consentono di ottenere una prospettiva leggermente diversa soprattutto sugli stessi punti. Qui ci sono alcuni che vi consiglio:

  • tota11y si presenta come un bookmarklet e un'estensione di Chrome che è possibile utilizzare nel browser per verificare la vostra email. I controlli comprendono il contrasto di colore del testo e i punti di riferimento ARIA. Inoltre vi mostra come i lettori di schermo vedono i diversi elementi nella vostra email.
  • Web Developer è un estensione per i browser Chrome, Firefox e Opera, che rende facile testare la disattivazione delle immagini e il CSS incorporato, tra le altre cose.
  • L'estensione Chrome Funkify è costituita da un insieme di "simulatori di disabilità". Ogni metodo altera la pagina in modi che rappresentano le diverse sfide, come la dislessia e le mani tremanti, per consentire di valutare quanto regge bene il vostro design. Funkify viene inoltre fornito con tota11y incluso come uno dei suoi metodi.

Comprendete l'importanza di testare l'utente

Nessuno strumento o simulatore può sostituire il parlare con persone con disabilità e apprendere come interagiscono con la vostra email. InVision ha un articolo molto utile su come iniziare con il test di accessibilità per l'utente.

Conclusione

Dopo aver letto questo articolo, la cosa migliore da fare è trovare un rapido miglioramento che potete fare ad una delle vostre email e farlo.

Ogni passo che fate verso la creazione di email più accessibili vi aiuterà a includere più persone, cosa che aumenta il vostro pubblico. E quando correggete i problemi che rendono difficile la lettura delle email a persone con disabilità, le probabilità sono che potrete anche fare le cose migliori per tutti.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.