Ghidul suprem pentru e-mailuri accesibile

În calitate de agenți de marketing prin e-mail, ne străduim să oferim abonaților noștri experiența de e-mail perfectă. Ne asigurăm că e-mailurile noastre sunt trimise la momentul potrivit pe baza analizelor noastre și că sunt livrate în căsuța de e-mail prin monitorizarea livrabilității noastre și rulând teste de spam. Ne personalizăm conținutul pentru a fi mai relevant și adaptăm designul nostru pentru a ne asigura că e-mailurile noastre se redau perfect pe nenumărate dispozitive și în fiecare client de e-mail.

Aceștia sunt toți pașii recomandați pentru a vă asigura că e-mailurile dvs. duc la o conversie. Cu toate acestea, e-mailurile tale ar putea fi ratate de o parte semnificativă a abonaților tăi - persoane cu dizabilități vizuale, fizice sau cognitive și neurologice.

Este nevoie de doar câțiva pași mici pentru a vă face e-mailurile mai accesibile pentru toți abonații. În această postare, vom discuta care sunt acești pași și cum pot face e-mailul mai bun pentru toată lumea.

Este e-mailul dvs. accesibil? Verificările de accesibilitate din Lista de verificare Litmus facilitează testarea e-mailului dvs. în raport cu cele mai bune practici esențiale de accesibilitate, identificarea zonelor de îmbunătățire și face e-mailurile dvs. mai accesibile pentru toți abonații. Aflați mai multe →

Ce este accesibilitatea?

Accesibilitatea servește drept unul dintre pilonii de bază ai experienței utilizatorului și ai designului. Pentru e-mail, înseamnă să vă asigurați că toată lumea poate primi și înțelege mesajul dvs., indiferent de orice dizabilități sau dispozitive de asistență pe care le-ar putea folosi.

Vă puteți gândi la accesibilitatea în e-mail ca pe o extensie a confruntării cu clienții de e-mail cu suport slab. Incluzând soluții alternative și alternative asigură că fiecare abonat primește o experiență pozitivă.

În calitate de dezvoltatori de e-mail, petrecem ore întregi pentru ca un e-mail să arate perfect într-un client cu o cotă de piață mai mică de 1%, dar foarte puțini dintre noi vor petrece câteva minute pentru a face e-mailul accesibil.
– Mark Robbins, Rebelmail

Accesibilitate în designul e-mailului

Să începem prin a ne uita la aspectele vizuale ale e-mailului dvs. care pot afecta accesibilitatea și unde pot fi aduse îmbunătățiri.

Utilizați culoarea în mod inteligent

Este posibil ca abonații cu daltonism să nu poată face diferența între anumite culori din e-mailul dvs., așa că asigurați-vă că culoarea nu este singura modalitate de transmitere a informațiilor.

Contrastul culorilor poate pune probleme și abonaților cu dificultăți vizuale. Utilizați un contrast ridicat de culoare între diferitele elemente din e-mailul dvs., în special între culorile de copiere și de fundal. O modalitate de a face acest lucru este să utilizați Color Contrast Checker de la WebAim pentru a verifica raportul de contrast al culorilor din e-mailul dvs.

E-mailurile tale sunt accesibile? Vedeți cum arată e-mailurile dvs. pentru utilizatorii cu deficiențe de vedere folosind filtrul de daltonism din Litmus Email Previews. Încercați Litmus gratuit →

Nu creați conținut dăunător

Conținutul care clipește la anumite viteze sau în modele, cum ar fi GIF-urile animate, poate provoca convulsii fotosensibile la unele persoane. Evitați afișarea de conținut intermitent sau includerea de link-uri către videoclipuri care pot avea conținut similar.

Echilibrați textul și imaginile

În timp ce utilizatorii văzători pot scana vizual sau sări peste conținut nerelevant, utilizatorii nevăzători trebuie să asculte întregul conținut al e-mailului, câte un e-mail. Adaptați conținutul scris din e-mailul dvs. pentru a livra mesajul principal. De asemenea, luați în considerare cât de compatibil este designul dvs. cu cititoare de ecran populare, cum ar fi JAWS sau Window-Eyes.

Îmbunătățiți lizibilitatea e-mailului dvs

Utilizați dimensiuni de font mai mari

Orice lucru mai mic de 14 pixeli pe un ecran de desktop sau laptop necesită un efort de citit. Utilizatorii pot crește nivelul de zoom pe dispozitivele lor pentru a-i ajuta să-și citească ecranele, dar acest lucru poate avea un impact negativ asupra e-mailului dvs., care poate părea rupt sau întrerupt.

Textul poate apărea mai mic pe dispozitivele mobile, forțând utilizatorii să lucreze mai mult pentru a vă citi e-mailul. Utilizați interogări media pentru a crește dimensiunea minimă a fontului de la 14 la 16 pixeli pe dispozitive mai mici, pentru a ajuta utilizatorii să vă citească e-mailul:

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

Oferă spațiu de copiere pentru a respira

Pentru unii poate fi greu să citească paragrafele și blocurile de text în care liniile de copiere sunt distanțate aproape între ele. Setați o înălțime de linie adecvată pe text pentru a fi mai ușor de citit pentru toți. Vă recomandăm să alegeți o înălțime de linie care să fie cu 4 pixeli mai mult decât dimensiunea fontului.

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

Sfat: când măriți dimensiunea fontului pentru dispozitivele mobile, nu uitați să creșteți și înălțimea liniei.

Paragrafele din copie au nevoie, de asemenea, de spațiu pentru a respira pentru a facilita lizibilitatea. Când scanați un e-mail, ar trebui să fie ușor să identificați paragrafele și să vă puteți păstra locul. Creați suficient spațiu alb deasupra și dedesubtul paragrafelor.

Încă un pas pentru a face textul mai ușor de citit este mutarea acestuia de la marginile e-mailurilor. Adăugarea de umplutură la o celulă de tabel sau o etichetă de paragraf vă va ajuta să realizați acest lucru.

Evitați copierea justificată în e-mailul dvs

Copie „justificată” înseamnă că spația dintre litere și cuvinte este ajustată astfel încât textul să cadă la același nivel cu marginile din stânga și din dreapta. Deși este obișnuită în tipărire, spațierea inconsecventă dintre cuvinte poate face copia justificată greu de citit. S-a dovedit că textul aliniat la stânga este mai ușor de citit pentru toți.

Alegeți fontul potrivit

Utilizarea fonturilor web a crescut numărul de fonturi posibile care pot fi folosite în e-mail, dar înainte de a vă decide să utilizați Lobster ca font pentru corpul dvs., gândiți-vă cât de accesibil este. Când selectați tipul pentru e-mailul dvs., alegeți unul care este uniform distanțat și nu prea condensat. Aceasta este o idee bună nu doar pentru accesibilitate, ci și pentru utilizatorii de telefonie mobilă.

Utilizați elemente semantice

Includerea elementelor semantice oferă abonaților tăi care folosesc cititoare de ecran opțiunea de a „scana” printr-un e-mail după antet. Puteți face acest lucru folosind etichetele <p> și <h>. Acestea sunt acceptate de fiecare client, așa că este un loc bun pentru a începe să vă faceți e-mailul mai accesibil.

Din punct de vedere istoric, stilarea etichetelor <p> și <h> nu a fost ușoară, motiv pentru care este încă destul de neobișnuit să vezi că aceste etichete sunt folosite în e-mail. Marjele din jurul textului împachetat în oricare dintre aceste etichete a fost greu de gestionat, dar folosind un astfel de cod vei putea controla acel spațiu alb:

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

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

Sfat: Folosind mso-line-height-rule:exactly; în etichetele dvs. <h> vor menține regula de înălțime a liniei pe care o setați în clienții de e-mail Microsoft Outlook.

Urmărește acest clip de la Litmus Live 2017, în timp ce dezvoltatorul de e-mailuri Paul Airy explică de ce și cum folosește elementele HTML semantice în e-mailurile sale pentru a le face mai accesibile:

Trimiteți pe Twitter acest videoclip →

Învață de la experții de la Litmus Live Deveniți un agent de marketing prin e-mail mai bun, cu sfaturi din lumea reală, cele mai bune practici și informații practice atunci când vă alăturați-ne la conferința Litmus Live. Aflați mai multe →

Scrieți o copie care poate fi citită

Crearea unui e-mail mai accesibil și mai lizibil nu depinde doar de modul în care este codificat e-mailul, ci și de modul în care este scrisă copia. A face copierea e-mailului dvs. mai umană va ajuta la lizibilitatea acestuia și va ajuta la construirea unei comunicări 1:1 între dvs. și abonații dvs.

Cel mai popular test, cunoscut sub numele de testul Flesch-Kincaid Reading Ease, poate fi găsit în Microsoft Word și calculează cât de ușor este de citit conținutul tău pe o scară de la 0 la 100. Asta inseamna:

• Un scor de 90-100 va fi ușor de înțeles de un elev de 11 ani
• Un scor de 60-70 va fi ușor de înțeles de către elevii cu vârsta între 13 și 15 ani
• Un scor de 30-50 va fi înțeles de studenți
• Un scor de 0-30 va fi mai bine înțeles de absolvenții universitari

A face ceva mai „lizibil” nu ar trebui să însemne că te ferești de subiecte dificile sau subiecte grele. În loc să vă amuțiți scrisul, se referă la accesibilitatea textului. Punctul tău favorabil este undeva între 60 și 70 pentru a capta un public general. Desigur, dacă publicul tău este foarte educat, atunci nu-ți fie teamă să folosești un limbaj mai complex.

De asemenea, puteți îmbunătăți lizibilitatea prin editarea copiei pentru a fi directă și la obiect.

Creați conținut accesibil

Faceți clic pe linkuri/atingeți

Asigurarea că dimensiunea butoanelor dumneavoastră antiglonț este suficient de mare pentru a fi utilizate de degetele mari și degetele pe dispozitivele mobile, vă va ajuta și la accesibilitatea e-mailului dvs. Un buton mai mare va fi benefic pentru cei care nu pot controla un mouse cu precizie.

Îmi plac nasturii mari și nu pot să mint.
– Justine Jordan, Turnesol

În timp ce Ghidurile pentru interfața umană iPhone de la Apple recomandă o lățime și înălțime minimă de 44 de pixeli pentru butoane, acest număr variază în funcție de furnizorul de dispozitive mobile. O regulă de bază alternativă ar fi utilizarea unei lățimi și înălțimi minime de 72 de pixeli, deoarece aceasta este lățimea medie a pixelilor unui deget mare.

Eliminați „Click Here” Link Copy

Evitați să folosiți „click aici” ca copie pentru link-urile dvs. Utilizatorii cititorului de ecran parcurg adesea conținut, sărind peste el ca o modalitate de a scana un e-mail. Oferirea contextului linkurilor dvs. va ajuta acești utilizatori să decidă dacă doresc să facă clic sau nu.

De exemplu, dacă aveți un link care duce la o listă de produse de pantofi, folosirea unei copii a linkului, cum ar fi „Vedeți mai mulți pantofi”, reduce ambiguitatea linkului pentru utilizatorii cititorului de ecran. Reducerea ambiguității legăturilor este benefică pentru toți abonații, deoarece nu necesită ca aceștia să citească contextul care înconjoară linkul - bun pentru cei care scanează în mod obișnuit e-mailurile fără a le prelua pe toate.

Nu este doar pentru accesibilitate, excluderea linkurilor „dați clic aici” va muta conținutul dvs. de e-mail pentru a fi mai independent de dispozitiv. În timp ce „dați clic aici” poate avea sens pentru un abonat care folosește un laptop sau desktop, dar nu pentru cineva care folosește un dispozitiv mobil sau o tabletă unde atingerea este acțiunea necesară.

Utilizați corect atributul ALT

Atributul ALT a fost cea mai bună practică pentru e-mail încă de la începutul e-mailurilor HTML, datorită faptului că clienții de e-mail blochează imaginile în mod implicit. Textul folosit într-un atribut ALT atașat unei imagini se afișează atunci când imaginea nu se încarcă. Acest lucru îl ajută pe abonat să „vadă” e-mailul dacă are imaginile dezactivate în mod implicit în clientul de e-mail sau dacă folosește un cititor de ecran pentru a citi e-mailul.

Pentru a utiliza corect atributul ALT, contextul imaginii trebuie să fie pe deplin înțeles în raport cu conținutul din jurul acesteia. În primul rând, trebuie să decideți dacă imaginea este funcțională, ilustrativă sau decorativă.

Toate imaginile necesită atribute ALT, astfel încât un atribut ALT nul ar trebui utilizat pentru imaginile care nu trebuie citite de cititoarele de ecran sau care reprezintă ceva vital pentru abonat.

Vizualizați e-mailul cu toate imaginile dezactivate pentru a vă ajuta să decideți ce imagini necesită atributul ALT și care pot avea un atribut nul.

Pentru o scufundare mai profundă în înțelegerea modului în care contextul informează utilizarea atributului ALT pentru imaginile dvs., vizitați pagina WebAim despre atributul ALT.

Utilizați rol=”prezentare” pe toate mesele dvs. de prezentare

În proiectarea e-mailului, tabelele sunt folosite pentru a păstra conținutul, precum și pentru a structura designul e-mailului. Mesele nu au fost niciodată destinate a fi folosite pentru proiectare; totuși, din cauza restricțiilor din clienții de e-mail, cum ar fi Outlook, designerii de e-mail au fost forțați să folosească elementul <table> ca element de design.

Pentru a ajuta cititorii de ecran să înțeleagă diferența dintre elementele <tabelului> care conțin conținut și cele care sunt exclusiv pentru design, utilizați add role=”prezentare” pe fiecare tabel care conține conținut pe care abonatul trebuie să-l citească. Trebuie doar să-l adăugați la fiecare element <table>, nu la fiecare <td>. Acest lucru evită forțarea unui cititor de ecran să citească fiecare celulă a tabelelor pe rând și îl ajută pe abonat să ajungă direct la conținutul important.

Pe lângă rol=”prezentare”, aria-hidden=”true” este un alt atribut HTML care poate fi adăugat elementelor din HTML care sunt pentru conținut vizual și ar trebui să fie ascunse de cititoarele de ecran:

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

rol=”prezentare” poate fi folosit și pe imagini. Dezvoltatorul de e-mailuri Remi Parmienter a descoperit un comportament neobișnuit în Chrome pentru utilizatorii VoiceOver — o aplicație de citire de ecran pentru MacOS. VoiceOver a început să citească numele fișierelor pentru imagini, chiar dacă atributul ALT este prezent, dar este gol. Este recomandat să utilizați atributul HTML rol=”prezentare” pe orice imagine cu un atribut ALT gol pentru a evita citirea numelui imaginii.

E-mailuri accesibile în acțiune

Putem implementa un nivel de accesibilitate dacă privim dincolo de provocări. Concentrează-te pe ceea ce poți face, nu pe ceea ce nu poți face.
– Paul Airy, Dincolo de plic

Membrii comunității Litmus au participat la un concurs comunitar pentru a crea un e-mail accesibil. Trimiterile au ilustrat pașii mici care pot fi făcuți pentru a deschide e-mailul către un nou public.

Abonații acestui e-mail vor putea crește dimensiunea textului prin browser-ul lor cu până la 200% fără a rupe designul e-mailului. Și are un GIF animat care se oprește după trei cicluri (în cinci secunde) pentru cei care suferă de convulsii fotosensibile.

Eyal Bitton a creat un e-mail care folosește copie pentru link-uri care au sens în afara contextului, iar Eyal semnalează sfârșitul e-mailului abonaților orbi folosind un text ascuns.

Buletinul informativ de tip E folosește o îmbunătățire progresivă interactivă pentru a permite abonatului să aleagă dintre dimensiunea textului standard sau mare. Dezvoltatorul de e-mailuri Paul Airy a inclus, de asemenea, o opțiune, condusă de un opt-in, în care abonatul poate alege să afișeze e-mailul cu fundal colorat dacă suferă de anumite dizabilități.

Aceste e-mailuri ilustrează faptul că este nevoie de doar câțiva pași mici pentru ca e-mailurile să fie mai accesibile și să ajungă potențial la un public mai larg. Mulți dintre acești pași nu numai că ajută la accesibilitate, dar ajută și la îmbunătățirea e-mailurilor pentru toată lumea.

PREvizualizează-ți E-MAIL-urile CU IMAGINI PORNITE ȘI DEZACTIVATE

Doriți să vedeți cum arată e-mailurile dvs. în peste 60 de clienți desktop, mobile și webmail, inclusiv vizualizările cu imagini oprite? Încercați Litmus, gratuit!

Începeți testarea acum →

Ghid suprem pentru accesibilitatea prin e-mail Acest ghid conține informațiile și sfaturile pas cu pas de care aveți nevoie pentru a scrie, proiecta și codifica e-mailuri care pot fi bucurate de oricine, indiferent de capacitatea lor. Descărcați cartea electronică →