Accesibilitate în marketing prin e-mail: 7 trucuri simple pentru a vă face codul mai accesibil

Publicat: 2019-04-16

Accesibilitatea devine rapid la fel de mult un pilon al marketingului prin e-mail, cât este în experiența utilizatorului și design. Din ce în ce mai multe mărci se asigură că campaniile lor de e-mail pot fi bucurate de fiecare abonat, indiferent dacă au dizabilități fizice, vizuale sau cognitive – sau chiar dacă pur și simplu nu pot vedea imaginile în e-mailurile lor din cauza unui set corporativ.

În calitate de agenți de marketing prin e-mail, cu toții ne străduim să livrăm e-mailuri grozave în căsuțele de e-mail ale abonaților noștri. Efectuăm teste de spam și teste de e-mail pentru a ne asigura că designul nostru se redă perfect pe toate dispozitivele și clienții de e-mail. Dar, uneori, uităm să setăm etichete ALT pentru imaginile noastre, să folosim o combinație de culori care este greu de citit sau nu reușim să ne optimizăm e-mailurile pentru cititoarele de ecran - și asta îi înstrăinează pe unii dintre abonații noștri.

Dacă tocmai ați început să vă faceți codul de e-mail mai accesibil, lucrurile pot fi copleșitoare. Dar există câteva trucuri simple pe care le puteți implementa cu ușurință și au un impact mare asupra accesibilității e-mailului.

Iată cum să vă verificați e-mailul pentru accesibilitatea acestuia pentru toți abonații, secțiune cu secțiune.

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 →

Lista dvs. de verificare a accesibilității

1. Adăugați un cod de limbă la <HTML>

Nu toți abonații tăi îți vor citi e-mailurile pe laptopurile sau telefoanele lor – unii vor folosi cititoare de ecran pentru a-ți accesa e-mailul. Deoarece conținutul dvs. de e-mail va fi citit cu voce tare, ar trebui să fie în limba potrivită, astfel încât pronunțiile să fie corecte - nu ați dori ca e-mailul dvs. scris în franceză să fie pronunțat în engleză americană, nu-i așa?

Pentru a preveni acest lucru, va trebui să le informați cititorilor de ecran în ce limbă este scris e-mailul dvs. Dacă nu este specificat niciun cod de limbă în e-mailurile dvs., cititorii de ecran nu pot pronunța corect copia - și e-mailul dvs. elocvent poate apărea. suna complet gresit.

De aceea, este esențial să verificați <HTML> pentru un cod de limbă - acesta este un simplu fragment de cod care specifică limba e-mailului. Dacă nu este deja în codul dvs., adăugați lang=“xx” — înlocuiți xx cu codul de limbă adecvat pentru e-mailul dvs. O listă cu toate codurile de limbă și localitățile posibile, care vă permite să luați în considerare diferite accente, cum ar fi o diferențiere între engleza britanică și cea americană, poate fi găsită aici .

 Există câteva cazuri speciale de luat în considerare:

  • Dacă utilizați orice XML în eticheta <HTML>, va trebui să adăugați și xml:lang=“xx” .
  • Dacă includeți remedierea Outlook 120dpi în codul dvs. de e-mail, veți avea nevoie de această soluție pentru a specifica o limbă. Iată cum arată codul nostru cu această remediere:
     <html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">

Sfat profesionist: este posibil să populați codul de limbă în mod dinamic dacă ați configurat localizarea în ESP.

2. Includeți întotdeauna etichete ALT pentru imaginile dvs

Este important să rețineți că imaginile din e-mailurile dvs. s-ar putea să nu fie întotdeauna vizibile pentru abonații dvs. Poate că au imaginile dezactivate, sau au o conexiune proastă sau folosesc un cititor de ecran - și dacă includeți o mulțime de informații importante în imagini, mesajul respectiv se va pierde. Aici intervine textul ALT. Puteți seta text care să fie vizibil pentru abonații dvs. (sau citit de cititorul lor de ecran) astfel încât aceștia să primească în continuare aceleași mesaje ca și persoanele care vă pot vedea imaginile.

Oriunde aveți o etichetă <IMG> în codul de e-mail, asigurați-vă că setați eticheta ALT. Dacă ați completat deja etichetele ALT, verificați din nou pentru a vă asigura că textul se potrivește cu textul din imagine. Dacă aveți etichete ALT goale, asigurați-vă că nu există text pe imagine care trebuie completat pentru ca un cititor de ecran să poată vedea. Dacă nu există etichete ALT pe imaginile dvs. și nici text în imaginea în sine – sau niciun text necesar pentru sensul e-mailului - asigurați-vă că adăugați o etichetă ALT goală: alt="" . Dacă nu includeți acest lucru, cititorii de ecran vor citi adresa URL a imaginii și nimeni nu vrea să le citească o adresă URL lungă!

După ce ați setat toate etichetele ALT, goale sau nu, pentru imaginile din e-mail, adăugați stilul fontului în eticheta <IMG> pentru textul ALT cu stil . Acest stil vă permite să deveniți elegant cu textul ALT și vă permite să modificați aspectul fontului, culoarea, dimensiunea, stilul și greutatea.

3. Includeți atributul rol=”prezentare” pe toate elementele <TABLE>

Majoritatea agenților de marketing prin e-mail se bazează pe tabele pentru a-și structura aspectul e-mailului, dar acestea pot cauza probleme grave cititorilor de ecran. Dacă un cititor de ecran identifică un tabel în codul de e-mail, acesta va citi cu voce tare ca unul. S-ar putea să vă spună literalmente câte rânduri și coloane există, spunându-vă poziția și conținutul fiecărei coloane, făcând imposibilă înțelegerea mesajului dvs.

De aceea, este esențial să spuneți cititorului de ecran că utilizați tabelul numai în scopuri de aspect. Puteți face asta adăugând rol=„prezentare” la fiecare tabel din e-mailul dvs. Acest rol le spune cititorilor de ecran să elimine orice semnificație semantică din tabele, astfel încât, în loc să citească numerele de rând și coloane, se concentrează în schimb pe conținut.

Să ne uităm la acest antet de e-mail foarte simplu de la unul dintre e-mailurile noastre:

Înainte de a ne optimiza pentru accesibilitate, codul nostru arăta astfel:

 <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

Ați observat că îi lipsesc atributele ALT și tabelele nu sunt setate la rol=”prezentare” ?

Aceste mici neglijeri au un impact mare asupra accesibilității. Iată cum interpretează un cititor de ecran codul de mai sus:

Cititor de ecran: antet de e-mail inaccesibil

Și iată același cod care a fost refactorizat prin adăugarea atributului ALT=”” și rol=”prezentare” la etichetele <TABLE> pentru a fi ușor de citit:

 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

Cititor de ecran: antet de e-mail accesibil

După cum puteți auzi, este o mare diferență!

4. Utilizați elemente semantice pentru a vă structura conținutul

Elementele semantice facilitează evidențierea ierarhiei conținutului, arătând abonaților (și cititorilor de ecran) ce este un titlu și ce este o copie a paragrafului. Includerea elementelor semantice oferă abonaților tăi care folosesc cititoare de ecran opțiunea de a „scana” mai ușor printr-un e-mail.

Când verificați copia dvs., asigurați-vă că orice copie demnă de titlu este inclusă într-o etichetă <H> : <H1> , <H2> , <H3> și așa mai departe. În mod similar, asigurați-vă că orice copie a corpului este găzduită într-o etichetă <P> . Când parcurg e-mailul dvs., cititorii de ecran pun accent pe antete specifice, iar configurarea acestor etichete <H> și <P> va face mai ușor navigarea prin e-mail.

5. Aliniați-vă copia la stânga, dacă este posibil

Când vine vorba de textul corpului, poate fi tentant să aliniați la centru. Cu toate acestea, când vine vorba de accesibilitate, acesta este un mare lucru care nu face !

Când vă centrați textul, marginea de început se schimbă pentru fiecare rând, ceea ce îi obligă pe abonații să muncească mai mult pentru a găsi începutul fiecărei rânduri – și aceasta este o provocare pentru persoanele cu dislexie și alte tulburări de citire. Dacă aveți o copie mai lungă de două linii, aliniați-o la stânga. Acest lucru este deosebit de important pentru mobil, deoarece lățimea îngustă produce adesea mai multe linii de text decât vă puteți da seama. Poate fi necesar să aliniați textul la stânga în mod receptiv pe mobil.

6. Verificați contrastul copiei dvs

Verificați raportul de contrast al culorilor textului față de culorile de fundal ale e-mailului. Este posibil să aveți abonați care au deficit de culoare și, dacă culorile dvs. nu oferă suficient contrast pentru ei, este posibil să nu vă poată citi e-mailul. Există două moduri prin care puteți verifica raportul de contrast:

  • Dacă puteți găzdui codul HTML și puteți produce o adresă URL de utilizat, acesta este modul meu preferat de a-mi verifica culorile: http://www.checkmycolours.com/
  • Dacă trebuie să introduceți manual codurile de culoare, consultați https://contrast-ratio.com/

7. Adăugați efecte de hover pentru CTA, linkuri și imagini

La Litmus, folosim efecte de hover pe CTA, linkuri și imagini pentru a indica posibilitatea de a face clic. Efectele de trecere cu mouse-ul sunt un element interactiv simplu care vă poate face e-mailurile mai atractive și vă poate îmbunătăți experiența abonaților. Deși efectele hover sunt acceptate numai în AOL, Apple Mail, Gmail și Yahoo! Mail, sunt un efect popular și merită implementate în codul de e-mail. Puteți estompa o imagine, puteți schimba culoarea butonului CTA, puteți adăuga o filă pop-up și multe altele.
Efectele de trecere cu mouse-ul vă pot ajuta să vă faceți e-mailul mai accesibil, ca în acest exemplu, în care butonul își schimbă culoarea la trecerea cu mouse-ul.

Vedeți e-mailul complet în Litmus Builder →

Doriți mai multe sfaturi pentru e-mail?

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ă →


Obțineți cele mai bune sfaturi de marketing și design prin e-mail, statistici și resurse direct în căsuța dvs. de e-mail și rămâneți în fruntea inovației prin e-mail atunci când vă înscrieți la Litmus News.

Rămâneți la curent →