Acest ghid vă va îndruma printr-o listă de verificări de peste treizeci de îmbunătățiri pe care le puteți aduce la e-mailurile dvs. pentru a vă asigura că sunt cât mai accesibile posibil. Este, de asemenea, ambalat cu link-uri utile și tutoriale, așa că marcați această pagină și faceți-o ca resursă pentru accesul la e-mail.

Notă: acest tutorial face parte dintr-o săptămâna în valoare de conținut de e-mail pe Tuts + Web Design-a verifica ghidul HTML Mastering învățare e-mail pentru mai mult!

E-mail Profesioniști: Este timpul să prioritizeze accesibilitatea

Am depus multe eforturi în buletinele de știri, campaniile de marketing și alte e-mailuri pe care le trimitem. Noi construim cu atenție mesajul potrivit. Proiectăm cu diligență imaginile. Testăm triumfător în Outlook.

Și se plătește. E-mailul este totuși modul în care majoritatea oamenilor preferă să audă de la companii, iar ca canal de marketing are o rentabilitate medie a investiției de 32 la 1.

Dar, totuși, cei mai mulți dintre noi ar putea face chiar mai bine. E-mailurile HTML nu sunt în mod tradițional concepute și codificate în funcție de accesibilitate. Ca rezultat, mulți dintre destinatarii noștri se străduiesc să se alăture și ne răsturnăm o parte din audiența noastră.

Uneori îmbunătățirile sunt evidente. Dacă întreaga dvs. e-mail constă în tipărire fină, majoritatea dintre noi peste 25 de ani vor avea dificultăți în a le citi. Dar mai des, barierele pe care le punem între mesajul nostru și beneficiarii noștri sunt mai subtile. Recunosc că mi-a luat un moment pentru a observa problema în următoarea fotografie:

Ce e în neregulă cu această imagine? #accessfail pic.twitter.com/H7tAy5X5ud

- Elisha Vineri Wright (@MsFridayology) 24 noiembrie 2016

Odată ce devenim conștienți de aceste probleme, ele sunt deseori ușor de rezolvat. Citiți acest lucru, faceți deja un prim pas important spre a vă face mai accesibile e-mailurile pentru mai mulți oameni.

Dacă sunteți nou la codurile de e-mail, vă recomandăm citirea în primul rând a tutorialelor lui Nicole Merlin. Acestea vă vor învăța fundamentele e-mailurilor HTML și modul în care acestea diferă de paginile web.

Vom construi aceste abilități pe măsură ce învățăm cum să aplicăm considerentele de accesibilitate la e-mailurile noastre.

Ce înseamnă "accesibilitatea"?

În centrul său, accesibilitatea prin e-mail vizează trimiterea e-mailurilor la cât mai mulți destinatari, indiferent de circumstanțele lor. Considerăm, în general, că accesibilitatea este o contabilitate a diferitelor dizabilități, și asta este adevărat, dar este de fapt o definiție mai largă decât aceea, așa cum a subliniat Sami Keijonen:

"Suntem cu toții diferiți și nevoile noastre se pot schimba în timp." - Sami Keijonen

Dizabilitățile vin în multe forme și în severitate. Raportul mondial al OMS privind dizabilitatea estimează că 15% din populația lumii trăiește cu handicap. În funcție de situația lor, acești indivizi pot avea acces la tehnologii de asistență care ușurează sarcinile zilnice. Pentru ca e-mailurile noastre să fie mai accesibile, trebuie să evităm să punem bariere în fața oamenilor, precum și instrumentele pe care se bazează.

Începeți cu o experiență de bază

Alegeți un e-mail pe care l-ați trimis recent. Deschideți-l pe ecran sau imprimați-l pentru a putea lua note pe el.

Care este scopul e-mailului? Ce acțiuni ar trebui să le ia destinatarii după ce au citit-o sau ce informații ar fi trebuit să învețe?

La ce elemente se compune e-mailul? Cum contribuie fiecare persoana la atingerea scopului? E-mailul ar avea înțeles dacă unul dintre paragrafe, link-uri sau imagini a fost eliminat?

Solicitarea unor astfel de întrebări vă ajută să definiți a experiența de bază-minimul care trebuie comunicat cu succes destinatarului. Acest lucru ar putea fi la fel de simplu ca un link și eticheta acestuia, sau ar putea fi mai multe de care trebuie să treci peste.

Mai presus de toate, experiența de bază trebuie să fie disponibilă pentru accesul și înțelegerea tuturor destinatarilor. Și orice altceva ar trebui să fie proiectat pentru a nu se împiedica. Acum pentru detalii ...

1. Faceți citirea textului

Evitați pereții de text

Cu cât este mai mult paragraful, cu atât este mai dificil de citit. Acest lucru se aplică tuturor, dar mai ales persoanelor cu dislexie sau altor dizabilități de învățare.

Iată câteva sfaturi pentru a vă face textul mai ușor de scanat:

• Împărțiți paragrafele lungi pe cele mai scurte. Fiecare paragraf ar trebui să aibă un singur focar. Citiți fiecare propoziție și vedeți dacă se concentrează asupra aceluiași lucru ca și ultimul. Dacă nu, începeți un nou paragraf.
• Paragrafele legate de grup sub titlurile descriptive. Dacă utilizați mai mult de un titlu, asigurați-vă că ierarhia are sens; de obicei veți folosi a 

  pentru titlul principal,

  s pentru fiecare secțiune,

  s pentru sub-secțiuni și așa mai departe. Folosirea elementelor de direcție semantice facilitează și navigarea prin e-mail cu ajutorul cititoarelor de ecran.

• Utilizare cursiv sau îndrăzneţ pentru accentuare, dar folosiți-le cu meticulozitate. Dacă subliniezi totul, nimic nu iese în evidență.
• Grupuri actuale de puncte cu marcator (
  ) sau numerotate (
  ) Pentru a le face ușor digerabile.
  1. Includeți grafică pentru a vizualiza și a susține conținutul textului.

  Utilizați cuvinte simple

  Dacă sunteți un designer sau un dezvoltator, scrierea poate să nu facă parte din munca dvs. În acest caz, vă recomandăm să partajați acest tutorial cu colegul sau clientul dvs. Când lucrăm pentru a face ca e-mailurile noastre să fie accesibile, limbajul pe care îl folosim este cel puțin la fel de critic ca și aspectele mai vizuale sau tehnice.

  Amintiți-vă că oamenii citesc la niveluri diferite de citire, din mai multe motive. Este posibil să aveți destinatari cu dislexie. Ai putea să scrii în a doua limbă. Sau poate că nu sunt familiarizați cu jargonul subiectului.

  Dacă scrieți la un grup de persoane despre un subiect, veți fi adesea mai familiarizat cu subiectul decât cu ei. Cu cât știm mai mult despre ceva, cu atât mai mult uităm cum este să nu știm. Acest fenomen este cunoscut ca "blestemul cunoașterii".

  Dacă nu sunteți sigur dacă persoanele mai puțin familiarizate cu subiectul pot înțelege scrisul dvs., găsiți pe cineva care să solicite feedback. Colegii dvs. pot suferi și de blestemul cunoașterii. Poate puteți obține ajutor din partea unui prieten, a unui membru al familiei sau a unui abonat?

  Când am semnat pentru a scrie pentru Tuts +, mi-au trimis ghidul de stil care are câteva exemple de alegeri clare în engleză:

  Utilizați "cumpăra", nu "cumpărare". Utilizați "ajutor", nu "asistați". Utilizați "aproximativ", nu "aproximativ".

  Puteți înlocui oricare dintre cuvintele din e-mailurile dvs. cu cele mai simple? Ce părere aveți despre păstrarea unei liste de termeni confuzi pe care îi folosiți în mod obișnuit și despre cuvinte pe care să le utilizați în schimb?

  Există, de asemenea, mai multe formule pentru a măsura cât de ușor de citit este textul. 
  

  Dacă copiați și inserați conținutul în Word sau Outlook, puteți obține o citire a acestuia prin două încercări: testul Flesch Reading Ease, care scade ușurința citirii de la 0 la 100 și testul Flesch-Kincaid Grade Level, care estimează la ceea ce nivelul elevilor din clasa americană ar înțelege, de obicei, textul.

  Aceste teste privesc numărul mediu de cuvinte pe propoziție și numărul mediu de silabe pe cuvânt, ca indicatori ai ușurării citirii textului.

  Pentru teste mai cuprinzătoare, încercați să citiți. Acest instrument online vă permite să difuzați conținutul prin teste multiple de citire. Planurile lor plătite oferă chiar și un instrument special pentru e-mailuri: trimiteți e-mailul la o anumită adresă de e-mail și răspund cu un raport automatizat de citire.

  Utilizați dimensiunile fontului de 14px sau mai mare

  Creșterea dimensiunii fontului nu este doar un truc stupid pentru a face eseuul să pară mai lung.

  Este, de asemenea, o modalitate simplă de a vă face e-mailurile mai ușor de citit. 14px este minimul absolut absolut pentru copia corporală. Textul de pe Tuts + are o dimensiune a fontului de 18 pixeli, care nu se simte prea mare.

  Titlurile ar trebui să fie suficient de mari pentru a putea ieși cu ușurință din copia de pe corp. Scalarea tipului este un instrument util pentru calcularea și previzualizarea dimensiunilor potrivite ale caracterelor. Aflați mai multe despre scara și ierarhia din aceste tutoriale:

  Asigurați-vă că utilizați culori contrastante
  

  Ca regulă generală, textul întunecat, pe o culoare de fond deschis, este cel mai ușor de citit pentru majoritatea oamenilor.

  Dacă utilizați o combinație de culori cu contrast scăzut, cum ar fi textul de culoare gri deschis, pe un fundal alb, poate fi greu de citit pentru persoanele cu vedere redusă sau cu orbire colorată. Contrastul scăzut face ca textul să fie mai greu de citit în condiții de iluminare slabă, cum ar fi lumina directă a soarelui.

  Textul ușor pe fundal închis poate funcționa bine, mai ales pentru persoanele cu sensibilitate la lumină sau atunci când utilizați un ecran luminos în împrejurimi întunecate. Dar pentru persoanele cu presbiopie (viziune încețoșată), textul deschis pe fundalul întunecat creează un fel de halo sau efect de strălucire. Toți în cele din urmă se confruntă într-o oarecare măsură cu prezbiopia. Capacitatea ochilor noștri de a se focaliza se reduce odată cu vârsta, de obicei începând de la un an la altul.

  Există multe instrumente pentru a verifica dacă contrastul dvs. de culoare este suficient de ridicat:

  • contrast-ratio.com este un instrument util, cu un nume de domeniu memorabil. Când introduceți o combinație de culori, aceasta previzualizează instantaneu contrastul și modifică bara de adrese într-o legătură directă, astfel încât să puteți partaja combinația de culori.
  • De asemenea, îmi place foarte mult cautătorul de contrast pentru tanaguru, care sugerează alte opțiuni de culoare dacă contrastul tău este prea mic.

  
  

  Așa e, PapayaWhip și DarkSlateGrey, frumoase

  Evitați greutățile subțiri ale fontului

  Fonturile ultra-ușoare au fost cunoscute de designeri de câțiva ani, dar sunt mai puțin populare pentru persoanele cu viziune redusă.

  Contrast bun, greutatea fontului săraci

  Atunci când sunt combinate cu contrast redus de culoare și ecrane mai vechi, aceste greutăți ale fontului sunt deosebit de greu de citit. Pentru o experiență mai bună de citire, utilizați greutăți de la 500 (normală) și până în sus.

  Aliniați-vă corpul, copiați, nu justificați sau centrați

  Limbile citite de la stânga la dreapta, cum ar fi limba engleză, sunt mai ușor de citit când sunt aliniate la stânga. Pentru scripturi de la dreapta la stânga, cum ar fi cele utilizate în arabă, persană și ebraică, aliniați textul la dreapta.

  Chiar dacă preferați aspectul textului centrat, ar trebui să îl evitați dacă puteți. Textul este mai ușor pentru toată lumea să citească când fiecare linie începe imediat sub cea anterioară. Acest lucru este valabil chiar și pentru titluri, dar este deosebit de important pentru copia corporală.

  În cele din urmă, nu ar trebui să utilizați niciodată o aliniere justificată, unde textul este aranjat astfel încât să aibă marginile chiar pe ambele părți. Textul justificat este mai greu de citit, în general, și mai ales în browserele web și clienții de e-mail, care nu se ocupă bine de justificare.

  Utilizați înălțimea mare a liniei mari

  Cuvintele trebuie să respire.

  Dacă liniile de text sunt prea apropiate împreună, ele pot fi dificil de separat. Devine prea ușor să sari accidental la linia greșită. Dacă sunt prea îndepărtate, ele încep să pară ca niște paragrafe separate.

  Cea mai bună înălțime a liniei de utilizat depinde de dimensiunea fontului și de lungimea liniei. Dar dacă doriți o regulă generală rapidă, nu puteți merge prea rău cu o înălțime a liniei de 1,5 ori mai mare decât dimensiunea fontului. De exemplu, o dimensiune a fontului de 16 pixeli ar fi confortabil de citit cu o înălțime a liniei de 24 pixeli.

  Suport clienți de e-mail pentru inaltimea liniei proprietatea este în mare parte solidă, cu excepția unor comportamente ciudate în Outlook. Utilizare px valori în loc de em, procent sau valorile "unitless" pentru rezultate mai consecvente.

  Asigurați-vă că lungimea liniei ("măsura") poate fi citită

  Cu cât mergeți mai departe de o linie de text, cu atât este mai dificil să vă găsiți calea înapoi de unde ați început.

  Dacă textul dvs. este prea lărgit, ochiul trebuie să se miște foarte mult și este dificil să continuați să citiți de la o linie la alta.

  Pentru o lizibilitate optimă, urmăriți o lungime de linie de aproximativ 45-75 de caractere.

  Dimensiunea fontului, înălțimea liniei și lungimea liniei se influențează reciproc. Există multe abordări pentru a decide proporțiile. Unii oameni preferă să utilizeze raportul de aur (chiar dacă proprietățile sale magice nu sunt neapărat o rețetă garantată pentru succes). Folosind calculatorul tipografiei Golden Ratio, puteți obține rapid recomandări privind înălțimea liniei și puteți calcula lungimea liniei aproximative (CPL sau caractere pe linie) în funcție de dimensiunea fontului și lățimea coloanei.

  Utilizați marcajul semantic

  În mod tradițional, dezvoltatorii de e-mail au codificat fiecare parte a e-mailurilor ca marcaj de tabel, inclusiv rânduri separate de tabel pentru fiecare titlu și paragraf. Acest lucru se datorează parțial faptului că unii clienți de e-mail au folosit pentru a schimba stilurile elementelor semantice, dar și pentru că oamenii ar fi atât de familiarizați cu modul în care tabelele HTML au funcționat încât au ajuns să le utilizeze în mod implicit.

  Așa cum se spune: dacă tot ce ai este un ciocan, totul arată ca un cui.

  Dar, deoarece clienții de e-mail și-au îmbunătățit randarea, iar noi ca dezvoltatori de e-mail am îmbunătățit colectiv practicile noastre de codificare, mulți au descoperit că există mai multe dezavantaje decât avantajele stilului de codare bazat pe tabel.

  Dacă codificați în schimb paragrafele, listele și titlurile dvs. ca

  ,

  ,
  ,

  ,

  , etc, atunci utilizatorii care utilizează cititoare de ecran și alte tehnologii de asistență vor naviga mai ușor și vor înțelege conținutul dvs..

  Totuși, veți avea același nivel de control asupra felului în care arată conținutul dvs. prin styling-ul cu CSS și va fi mai accesibil, cu un număr mai mic de cod. Veți dori să aplicați marginile pe care le doriți pentru fiecare element, în timp ce stiluri precum dimensiunea și culoarea caracterelor corporale pot fi setate pe un element parent și moștenite de toate paragrafele.

  Iată un exemplu de bază:

   
  Prektig arvelige bankaker
   
  Grundigere vitende enkelstående bevares duer sum lengste, påfallende opplevet hukommelse dunstkrets, kant observaasjon drakt besynderlig tillatt tent.
   
  Hyss gjeldsbevis luftdraget broderi, intitulat hvorledes ringeaktende begriper.
   

  Folosește lang Atribut

  Cele mai multe computere și smartphone-uri vin cu software-ul de citire a ecranului, care citește textul ca discurs. Pentru a pronunța corect cuvintele și nu ca un cascador italian, cititorii de ecran trebuie să știe în ce limbă este scris textul tău.

  Pentru a specifica limba conținutului, noi folosim lang atribut. Iată un exemplu rapid de sunete despre o frază franceză cu și fără limbajul specificat (video de la Léonie Watson):

  lang atributul funcționează cu orice element HTML. Dacă utilizați diferite elemente în același e-mail, specificați limba corectă pentru fiecare parte.
  

  Limba principală ar trebui să fie stabilită pentru element. Dar deoarece unii clienți de e-mail vor elimina acest element la afișarea e-mailului, este mai sigur să repetați atributul pe un element de înfășurare în interiorul , cum ar fi a

  în jurul conținutului întregului e-mail.

  Pentru a găsi valoarea potrivită pentru a utiliza limba dvs., vă puteți referi la Registrul de subtaguri lingvistic IANA, care este un fișier text lung de limbi și valorile corespunzătoare subtagurilor. Sau utilizați căutarea subtagică mai prietenoasă, care vă permite să căutați aceleași informații.

  Iată fraza franceză de mai înainte, cu limba corect setată:

  Eau monte au fur și mesure de fonte des neiges.

  2. Utilizați culoarea considerabil

  Nu comunicați numai cu culoarea

  Utilizarea cu grijă a culorilor poate ajuta la susținerea mesajului sau la transmiterea unei dispoziții. Dar dacă vă bazați doar pe culori pentru a comunica anumite informații, acestea pot fi ratate de destinatarii care sunt orbi, culoare orb sau dintr-o cultură în care aceste culori au un înțeles diferit.

  De exemplu, în loc să utilizați un punct roșu sau verde pentru a indica dacă un produs este în stoc, utilizați text ca "stoc în stoc" și "vândut" și utilizați numai culoarea pentru al susține.

  Luați Blindness Culoare în cont

  Există diferite tipuri de orbire coloră care determină ca oamenii să aibă dificultăți în a distinge culorile. Cel mai comun tip este orbirea roșu-verde, ceea ce face dificilă distingerea nuanțelor roșii și verzi. Blindia totală, care face totul alb și negru, este rară.

  Când alegeți culori pentru text, grafică și elemente de aspect, aveți grijă de combinațiile de culori din gama roșu-portocaliu-galben-verde, plasate aproape împreună. Mai ales dacă culorile sunt similare în luminozitate și saturație.

  Există, de asemenea, alte combinații de culori care pot fi incomode pentru persoanele cu diferite tipuri de orbire de culoare pentru a le distinge. Puteți folosi un simulator de orbire color pentru a captura orice probleme în e-mailurile dvs. Sunt mulți de ales. 

  • Cu Filtrul de pagini Web Colorblind de la Toptal, puteți introduce adresa URL în versiunea web a e-mailului. 
  • Litmus are un filtru de orbire color încorporat în testele sale de e-mail. 
  • Culorile Oracle (Mac, Windows și Linux) și Sim Daltonism (Mac și iOS) sunt instrumente de simulator open source.

  Nu suprasolicitați culorile luminoase și saturate

  Pentru persoanele cu sensibilitate la lumină și migrene, privirile la ecranele cu iluminare din spate pot provoca tulpina ochilor și pot acționa ca un declanșator al migrenei. Acest lucru poate fi agravat de culori luminoase, în special în nuanțe albastre și roșii.

  Pentru suprafețe mari, cum ar fi culorile de fundal, utilizați mai multe culori dezactivate atunci când este posibil.

  Evitați textul subliniat sau colorat, fără text (mai ales albastru)

  Nu toate link-urile sunt albastre și subliniate, dar toate subliniate și textul albastru este legat. Cel puțin așa vor aștepta cititorii.

  Pentru a evita confuzia și frustrarea, nu folosiți sublinierea și culorile pentru accentuare.

  3. Verificați dacă imaginile dvs. sunt accesibile

  Evitați textul în imagini

  Mulți expeditori încă proiectează e-mailuri cu text în imagini în loc de text HTML live. Dacă angajatorul sau clientul dvs. solicită randarea perfectă a pixelilor, este ușor să vedeți cum ar părea o soluție bună. Dar dezavantajele de a prinde textul în fișierele imagine depășesc avantajele.

  • Cititorii de ecran nu pot citi textul în imagini.
  • Dacă blocarea imaginii este activată în clientul de e-mail sau dacă e-mailul este citit offline, imaginile se sparg.
  • Nu puteți selecta, copia și lipi textul.
  • Software-ul de traducere nu poate interpreta conținutul.
  • Textul nu poate fi modificat corespunzător sau refăcut pentru a se potrivi diferitelor dimensiuni ale ecranului sau nivelurilor de zoom.

  Unele dintre aceste probleme pot fi parțial rezolvate prin setarea conținutului ca text alternativ al imaginii și prin modelarea cu CSS. Dar, din păcate, clienții de e-mail nu împărtășesc un mod consistent de manipulare a blocării imaginilor și a unui text alternativ. Orice ierarhie, cum ar fi titlurile, s-ar pierde în versiunea text alternativă a conținutului.

  Dacă designul dvs. solicită introducerea de text peste o imagine, backgrounds.cm vă ajută să codificați acest lucru într-un mod care să funcționeze în majoritatea clienților principali de e-mail.

  În cele din urmă, în situațiile în care nu puteți evita utilizarea imaginilor pentru text, adăugați rol = "text" la imagine, astfel încât cititorii de ecran vor trata valoarea sa alternativă de text ca text obișnuit.

  Utilizați textul alternativ util

  Folosim imagini pentru multe scopuri diferite. Unele conțin informații importante, altele sunt ilustrații sau parte a planului.

  Toate imaginile trebuie să aibă un Alt , dar atributul nu ar trebui să aibă întotdeauna o valoare. În cazurile în care nu este necesar un text alternativ, utilizați un spațiu gol Alt atribut pentru a împiedica cititorii de ecran să ortografieze numele fișierului imagine sau adresa URL a link-ului. Consultați acest exemplu de la Rémi Parmentier:

  
  

  Dacă imaginea are un conținut valoros, descrie-l în textul alternativ. Sau dacă imaginea este o legătură, adăugați un text alternativ pentru a descrie unde indică linkurile.

  W3C are un arbore de decizie la îndemână pentru textul alternativ. Acesta acoperă majoritatea utilizărilor comune pentru imagini și cum se utilizează Alt în fiecare caz.

  Utilizați GIF-urile cu responsabilitate

  Opțiunea noastră principală pentru includerea animațiilor în e-mailurile noastre care vor funcționa în majoritatea clienților de e-mail este utilizarea GIF-urilor. Am văzut multe exemple minunate de GIF-uri în e-mail. Ele pot fi minunate pentru a explica ideile mai eficient decât puteai cu o imagine statică sau pentru a adăuga interes vizual. Timpii de numărătoare inversă și previzualizările video sunt alte utilizări populare.

  Din păcate, GIF-urile pot provoca probleme pentru anumiți destinatari.

  În exemple extreme, animațiile intense pot declanșa convulsii pentru persoanele cu epilepsie fotosensibilă. Dacă aveți GIF-uri cu culori intermitente sau intermitente sau modele cu caractere aldine cu un contrast ridicat, merită să le testați utilizând Instrumentul de analiză a epilepsiei gratuite Photoshop (The Trace Center) (numai pentru Windows). Acest instrument captează animații de pe ecran și identifică riscurile potențiale de confiscare.

  Deși mai puțin dramatice, animațiile subtile pot provoca și probleme. GIF-urile care se leagă pentru totdeauna pot distrage atenția de la conținutul dvs., în special pentru persoanele cu tulburare de hiperactivitate cu deficit de atenție (ADHD) sau autism. E-mail pe Acid oferă câteva bune practici de animație pentru abonații cu ADHD.

  4. Acordați atenție aspectului și tabelelor

  Evitați tabelele inutile

  Deși tabelele HTML sunt necesare pentru a se afișa corect anumite layout-uri în clienții de e-mail, în special în Outlook, dezvoltatorii de e-mail tind să le exceseze.

  Aș recomanda căutarea prin codul dvs. de șablon pentru fiecare instanță de  și evaluarea necesității acestui tabel. Am întâlnit adesea

   tag-uri care ar putea fi ușor înlocuite cu un accesibil și mai ușor

  , sau chiar eliminate complet, fără a afecta modul în care e-mail-ul render.

  Utilizare rol = „prezentare“ pe tabelele Layout

  În tabelele rămase, adăugați rol = „prezentare“ atribut. Cititorii de ecran anunță, de obicei, fiecare celulă de tabel pe care o întâlnesc, ceea ce poate face e-mailurile foarte dificil de citit.

  Prin adăugarea rol = „prezentare“, îi spuneți cititorului de ecran să trateze tabelul ca un element de text obișnuit și să nu îl navigheze ca un tabel de date. Consultați exemplele privind accesibilitatea în e-mail: partea a II-a de Mark Robbins.

  Dacă e-mailurile conțin tabele care conțin date tabulare reale, nu utilizați rol atribuiți acestor persoane.

  Utilizare arie-ascuns = "true" pe Elementele Spacer

  Întrucât marginea și padding-ul au un suport oarecum inconsecvent în rândul clienților de e-mail, nu este neobișnuit să folosiți elemente separate, cum ar fi

  sau chiar imagini vechi de la distanță pentru a adăuga spațiu la un design de e-mail.

  Astfel de elemente de distanțare nu adaugă nicio valoare persoanelor care citesc mesajele de e-mail cu un cititor de ecran. Pentru ca cititorii de ecran să ignore un spacer, adăugați arie-ascuns = "true" atribui elementului.

  5. Design Link-uri clare și faceți clic pe țintă

  Faceți legături evidente, dincolo de culoare

  Legăturile sunt adesea cea mai importantă parte dintr-un e-mail, deoarece acestea sunt modul în care destinatarii dvs. fac următorul pas. Oferindu-le o culoare diferită de restul conținutului le va face mai ușor de găsit. Textul albastru are cea mai bună șansă de a fi recunoscut ca un link, dar puteți utiliza și alte culori atâta timp cât acestea se remarcă, chiar și pentru utilizatorii de culoare orb.

  Evitați să folosiți culoarea linkului pentru textul care nu poate fi cusut, pentru a preveni confuzia.

  Sublinierea textului ajută de asemenea să sugereze că este clicabil. Unii preferă să-și îndrepte legăturile în schimb, din motive estetice, dar ar putea fi în valoare de rezervarea unui text îndrăzneț pentru accentuare.

  În general, este bine să evitați "butoanele Ghost", un stil comun de butoane cu o culoare contur, dar un fundal transparent. Acestea pot fi dificil pentru destinatari să recunoască că sunt clickabile, mai ales atunci când sunt plasate pe partea de sus a unei imagini de fundal. Butoanele stiluri cu o culoare de fundal contrastanta sunt mai usor de descoperit.

  Utilizați Text de legătură util

  Oamenii care vă citesc e-mailurile cu ajutorul unui cititor de ecran pot trece de la link către link fără a citi conținutul dintre ele. Vizitatorii cu vizibilitate redusă pot citi adresa de e-mail mărită, lipsind contextul legat de legături. Pentru ca link-urile să fie accesibile acestora, textul legăturii ar trebui să poată sta singur și încă mai are sens.

  Un text de legătură scurt și descriptiv îi ajută pe oameni să navigheze eficient.

  Linkurile care indică locuri diferite nu trebuie să aibă același text de legătură. Faceți-le fiecăruia unic - fără link-uri "Citiți mai multe"!

  Evitați afișarea URL-urilor lungi ale site-urilor ca text de legătură, deoarece acestea sunt, de obicei, mai puțin folositoare ca text de legătură pentru toți destinatarii. 

  Faceți butoanele mari și complet clicuite

  Pentru cele mai importante linkuri din e-mail, un buton de apel de acțiune frumos mare vă poate oferi o creștere bună a numărului de clicuri peste legăturile text.

  Având o suprafață suficient de mare pentru a face clic face butonul mai ușor pentru toată lumea să lovească, în special mulți utilizatori cu handicap fizic.

  Litmus are o imagine de ansamblu bună a modalităților de a codifica butoanele de e-mail. Pentru a preveni dificultățile și frustrarea, alegeți una unde se poate face clic pe întreaga suprafață a butonului.

  

  Spunând asta, am o preferință personală pentru butoanele.

  Nu faceți totul un link

  Pentru a crește numărul de clicuri, poate fi tentant să transformați fiecare poziție, imagine și chiar paragraf într-un link către pagina dvs. de destinație. Acest lucru înseamnă, de asemenea, că oamenii pot face clic ușor pe link, fără a fi prea exacți. Cu toate acestea, există unele dezavantaje pentru a face Tot o legătură.

  Pentru persoanele care vă citesc mesajele de e-mail cu un cititor de ecran, fiecare link va fi citit, astfel încât repetarea aceluiași link pentru fiecare element va face e-mailul tare pentru a naviga.

  Dacă aveți elemente aproape unul de celălalt, care ar trebui să facă legătura cu același loc, de exemplu, o pictogramă cu o etichetă de text, o soluție bună este de a le împacheta în același link, creând o zonă singură.

  Dacă majoritatea e-mail-urilor dvs. constă în linkuri, acest lucru poate face ca email-ul dvs. să fie dificil de derulat pe telefoane mobile și pe alte touchscreen-uri. Mai ales pentru persoanele cu tremurături sau alte probleme de control al mușchilor, trecerea printr-un e-mail fără a face clic accidental link-uri neașteptate poate fi o provocare.

  Considera :planare și : focus stiluri

  Acordarea de linkuri subtile :planare stilul este o modalitate simplă de a confirma oamenilor că ceea ce urmează să facă clic este, de fapt, un link.

  Când navigați prin link-uri într-un e-mail de la tastatură, : focus stiluri ajuta cititorii să urmărească legăturile la care se află. Majoritatea clienților de e-mail și a browserelor adaugă o schiță ca implicită : focus stil pentru link-uri. În general, este bine să nu eliminați această schiță, dar dacă o faceți, ar trebui să vă asigurați că o înlocuiți cu aceeași claritate : focus stil.

  Ori de câte ori adăugați a :planare stil, de obicei este bine să aplicați același stil : focus astfel încât oamenii vor avea o experiență similară dacă navighează cu mouse-ul sau tastatura.

  Conectați-vă la conținutul accesibil

  Deși nu este ceva ce puteți controla întotdeauna, atunci când faceți legătura cu paginile web, este bine să favorizați conținut care este, de asemenea, accesibil.

  Dacă aveți posibilitatea de a alege între conectarea la două articole similare, în cazul în care unul este ușor de citit și celălalt are contrast redus de culoare sau o dimensiune minusculă a fontului - toate celelalte fiind egale, mergeți cu cel mai accesibil dacă puteți.

  6. Nu uita de textul simplu

  Includeți o versiune simplificată
  

  Datorită problemelor de accesibilitate pe care le pot întâmpina cu multe e-mailuri HTML, unii destinatari aleg să folosească în schimb versiunea de text simplu a mesajelor e-mail.

  Deoarece nu puteți utiliza imagini, dimensiuni ale fontului, culori și așa mai departe, opțiunile de aspect sunt limitate. Când compuneți versiunea text simplu, gândiți-vă cât de bine să prezentați mesajul dvs. de bază folosind doar text și vă faceți griji mai puțin despre a face compatibil cu versiunea HTML.

  Acordați o atenție deosebită modului în care formatați link-urile, deoarece doar clic pe URL-ul link-ului. Un model bun este să scrieți o etichetă descriptivă link urmată de un colon pe o linie și apoi adresa URL a link-ului de pe linia următoare.

  ... Găsiți mai multe sfaturi de formatare a textului simplu aici: https://www.campaignmonitor.com/blog/email-marketing/2015/01/plain-text-emails-conversion/... 

  Mulți furnizori

  Web design

  Ghidul începătorului pentru a încorpora jQuery

  Ghidul începătorului pentru a desena un outfit de bază pentru un caracter din Photoshop

  

  ×