Ghid de accesibilitate prin e-mail: standarde și bune practici

Aruncă o privire în jur, ascultă ce se întâmplă. Vedeți totul clar, în modul plin de culoare? Și auziți bine zgomotele și vocile? Felicitări, cu siguranță ești o persoană norocoasă. În plus, ești cu adevărat fericit. Ai vedere si auz!

Poate credeți că aceste abilități sunt comune și oferite în mod implicit tuturor? Ce se întâmplă dacă îți spun că 4,5% dintre destinatarii din lista ta de contacte suferă de daltonism, așa că le este dificil să citească sau să înțeleagă conținutul tău de e-mail?

Deși daltonismul nu este singura tulburare răspândită. Doar un fapt simplu: 285 de milioane de oameni din întreaga lume suferă de deficiențe de vedere severe care fac ca vederea să fie o problemă chiar și cu lentile de contact sau ochelari.

Și 5% din populația Pământului are deficiențe de auz. În alți termeni, peste 360 ​​de milioane.

E ceva la care să te gândești. Nu putem ignora toți acești oameni. Trebuie să facem tot posibilul să fim prietenoși cu ei și să le facem viața mai bună. Despre asta este accesibilitatea.

Acum, pregătește-ți o ceașcă de ceai sau cafea și hai să ne afundăm în detalii.

Ce înseamnă accesibilitatea e-mailului?

Sunt persoane care suferă de tulburări de vedere severe sau chiar de orbire completă. Ei folosesc software de citire a ecranului pentru a vocaliza e-mailurile primite – VoiceOver, Microsoft Narrator și alte instrumente similare. Prin urmare, datoria noastră este să ne adaptăm conținutul la acești asistenți.

Când vine vorba de daltonism, de la protanopie (când oamenii nu pot distinge anumite culori) până la monocromie – nu există instrumente care să ajute oamenii cu aceste afecțiuni. Așa că trebuie să optimizăm noi înșine imaginile de e-mail.

Alții suferă de deficiențe de auz, dislexie etc. În consecință, există seturi de reguli de accesibilitate pentru fiecare tip de tulburare. Astfel am ajuns la răspunsul la o întrebare din titlu.

Pe scurt, înseamnă să respectați standardele care fac e-mailurile lizibile pentru persoanele cu toate tipurile de cerințe speciale. Din fericire, generatorii moderni de șabloane de e-mail HTML și alte software-uri de marketing ne oferă instrumente avansate pentru a implementa aceste standarde destul de ușor și fără abilități speciale.

Voi împărtăși mai jos aceste standarde, precum și câteva practici care vor fi utile pentru a crea e-mailuri accesibile.

Standarde de accesibilitate

Așadar, dragi prieteni, este timpul să explorăm unul câte unul aceste seturi de recomandări pe care trebuie să le urmăm pentru a trimite e-mailuri „universale” care vor fi ușor de citit pentru destinatarii cu toate tipurile de disfuncționalități vizuale, auditive și de percepție.

1. Daltonismul

Există o listă de tipuri de daltonism. Aici sunt ei:

Protanopia înseamnă percepția defunctă a culorii roșii. Cititorii cu protanopie, aka roșu-orbi, tind să confunde culoarea neagră cu toate nuanțele de roșu. De asemenea, ei nu pot distinge maro închis de verde închis și nu văd nicio diferență între culoarea albastră și diapasonul mijlociu de roșu. Aruncă o privire la acest e-mail de la Uber:

Și așa văd pacientii cu protanopie:

Deuteranopia este o percepție redusă a verdelui. Acești oameni tind, de asemenea, să confunde culorile roșu mediu/verde, verde/galben strălucitor și albastru deschis/liliac. Din nou, aruncați o privire la același e-mail: original în stânga și versiunea deuteranopia în dreapta.

Tritanopia înseamnă orbire față de culoarea albastră și nuanțele sale. Acesta este motivul pentru care cei care suferă de această deficiență confundă de obicei albastru deschis/gri și violet închis/negru. Același eșantion de e-mail, dar puteți vedea percepția tritanopiei în partea dreaptă:

Monocromația este pentru daltonismul total. Acești oameni pot vedea realitatea pictată doar în negru, alb și diferite nuanțe de gri. Fara alte culori. Imaginează-ți lumea pe ecranul unui televizor foarte vechi. Așa arată monocromia. Serios, îmi face pielea de găină.

Ce ar trebui sa facem?

• Alegeți dimensiunea fontului pentru copierea e-mailului nu mai puțin de 14 px. Cu toate acestea, recomand 16px pentru a oferi destinatarilor un design accesibil pentru e-mail;
• Evitați soluțiile de contrast bazate pe culori pe care clienții daltoni nu le pot distinge. De exemplu, nu scrieți copia cu text verde sau albastru pe un fundal roșu sau liliac. Uită-te la mesajul de mai jos. Este în regulă pentru persoanele cu diapazon complet de percepție a culorilor... dar este la fel de bine în cazul protanopiei sau vederii monocromatice? Eu nu cred acest lucru…

(mesaj original)

(așa o vor vedea clienții cu protanopie)

(modul în care monocroații văd acest mesaj)

Cum ar trebui să înțeleagă dacă echipa lor favorită a câștigat sau a pierdut meciul?

• Uitați de ideea de a adăuga butoane verzi peste pozele roșii sau invers. Același lucru este valabil și pentru toate combinațiile de culori „riscante” menționate mai sus. Ideea este cu adevărat proastă – persoanele cu disfuncționalități de percepție a culorilor s-ar putea să nu observe butonul deloc;
• Specificați întotdeauna culoarea produsului între paranteze — este posibil ca clienții să nu distingă, de exemplu, culoarea roșie, dar știu că cămășile sau rochiile roșii se potrivesc perfect cu imaginea lor;
• Faceți linkurile în e-mailurile dvs. îndrăznețe.

Da, culoarea albastră obișnuită pentru textul link-urilor nu este suficientă. Și nu numai din cauza destinatarilor daltonişti. Ați citit vreodată e-mailuri pe stradă când soarele strălucește fără milă chiar pe ecranul smartphone-ului? Atunci știi ce vreau să spun - este greu să disting culorile. Așa că faceți link-urile îndrăznețe și nu le subliniați. De ce? Deoarece sublinierea poate distrage atenția persoanelor cu dislexie. Despre dislexie vom vorbi în detaliu puțin mai târziu.

În acest e-mail, elementele de meniu sunt și ele aldine. Această idee simplă optimizează navigarea clienților în cadrul newsletter-ului — aceștia vor găsi cu ușurință categoria de apartamente dorită.

Observați linkul „Vizualizare detalii” cu o săgeată. Acesta spune că este posibil să vedeți mai multe detalii făcând clic pe el;

Dacă adăugați elemente de interactivitate sau desfășurați teste în campania dvs., alegeți culorile verde/roșu intens/albastru deschis pentru a evidenția răspunsurile corecte. Și roșu/negru/gri respectiv pentru greșit. Asigurați-vă că duplicați răspunsurile da/nu cu text.

Este cu adevărat esențial să verifici dacă e-mailul se potrivește cerințelor persoanelor care suferă de o deficiență de culoare. Pentru confortul dvs., aș dori să adaug acest tabel la postarea noastră. Salvați-l pentru a găsi culorile potrivite și pentru a evita confuzia:

Există, de asemenea, un instrument gratuit de simulare a daltonismului, care vă arată fotografiile așa cum le vor percepe destinatarii daltonici.

După cum putem vedea, testarea culorilor nu este prea complexă - doar nu o ignorați. Arată-ți grija pentru toți abonații. Fii bun.

2. Orbire și deficiențe de vedere severe

Următorul capitol este dedicat standardelor de accesibilitate pentru persoanele nevăzătoare și cu probleme de vedere. Aceste reguli se referă și la tulburări de vedere, dar principiile și soluțiile de aici sunt total diferite. Nicio schemă de culori sau combinație de contrast nu poate ajuta în acest caz. Acest aspect al științei accesibilității se bazează pe utilizarea software-ului de citire a ecranului.

În consecință, misiunea noastră este să ne adaptăm e-mailurile la aceste instrumente. În alți termeni, trebuie să facem e-mailurile lizibile pentru aceste instrumente.

Ce ar trebui să i se acorde o atenție specială aici?

Subiectul emailului

De obicei, cititorii de ecran încep să citească un e-mail din subiectul său.

Deci regula general acceptată este simplă, dar eficientă: faceți subiectul scurt și descriptiv. Un subiect bun ar trebui să explice esența de bază a mesajului.

Setările de limbă

Este foarte important să configurați setările de limbă în copia de e-mail. Această sarcină necesită ceva efort și lucru cu copierea e-mailului, dar merită. Problema este că textul de e-mail vocalizat de cititoarele de ecran poate suna terifiant dacă ignori aceste setări. Ceva de genul conversațiilor cu orci din Stăpânul Inelelor

Pentru a evita acest lucru, specificați limba respectivă în codul de e-mail (dacă este disponibil).

Ordine logică

Cititoarele de ecran au o ordine strictă cu privire la modul de a vocaliza e-mailurile. Ei citesc containere și blocuri de la stânga la dreapta și apoi continuă cu următoarea linie.

Pentru a oferi accesibilitate, specificați etichete de antet precum <h1> , <h2> , <p> etc. în codul HTML. Aceste etichete vor adăuga prioritate față de textul obișnuit, astfel încât aceste elemente sunt vocalizate mai întâi.

De asemenea, dimensiunea fontului nu contează când sunt specificate etichetele. În exemplul de mai sus, dimensiunea fontului titlul 2 este de 24 px, iar fontul normal de copiere este mai mare - 27 px. Dar cititoarele de ecran vor vocaliza mai întâi titlul 2.

Alt text

Tehnologiile AI se dezvoltă în mod constant astăzi. Dar instrumentele de citire a ecranului nu sunt încă suficient de inteligente pentru a „privi” imaginile din e-mail și a le descrie. Poate în viitorul apropiat... Ca și în zilele noastre, aceste utilitare pot citi doar text alternativ și text alternativ pe care îl adăugăm imaginilor.

Cum se ajustează textul alternativ la standardele de accesibilitate? Ai ghicit bine, este destul de evident: fă acest text concis, descriptiv și informativ. O notă utilă: evitați cuvântul „imagine” din acest text. Eticheta de imagine o specifică deja, așa că va fi cam ciudat să auzi „imaginea imaginii...” duplicat

Link-uri, articole CTA, pictograme sociale

Link-urile trebuie să fie cât mai concise și informative posibil. Adăugați-le text clar și amintiți-vă că cititoarele de ecran vor transforma acest text în voce! Spuneți destinatarilor ce le oferiți și unde vor merge prin clic.

Uită-te la aceste link-uri:

Primul link... uh... serios, mi-e teamă să-mi imaginez cât de înfiorător va suna. În timp ce al doilea specifică în mod clar site-ul web, data publicării și titlul postării.

Același lucru este valabil și pentru butoanele CTA și pictogramele rețelelor sociale. De fapt, aceste articole sunt și ele hyperlinkuri, doar învelite într-o formă vizuală atrăgătoare din punct de vedere estetic. Fiecare expert în marketing prin e-mail le acordă cea mai mare atenție, lucrează la design și efecte, alege soluții de culoare perfecte pentru a genera clicuri...

Dar când vine vorba de cititoare de ecran și de accesibilitate pentru nevăzători, singurul lucru important aici este textul. Fă-l suficient de atractiv pentru a-și îndeplini misiunea - obligă abonații să facă clic pe butonul.

Iată cum vedem butonul CTA în e-mail:

Dar instrumentele de citire a ecranului nu dau o rață zburătoare despre toate trucurile noastre de designer și efectele minunate de hover. Tot ceea ce vede software-ul este textul gol. Nimic altceva. Așa că asigură-te că textul tău funcționează singur.

În ceea ce privește pictogramele rețelelor sociale, este posibil ca unii abonați care „ascultă” e-mailurile primite în inbox să nu înțeleagă abrevierile pe care le aplicăm acestor pictograme. Deci, scrieți text alternativ descriptiv pentru aceste elemente.

Asta e tot despre orbire. Încă o notă importantă: cititoarele de ecran sunt utilizate pe scară largă astăzi nu numai de persoanele cu tulburări vizuale severe. Milioane de destinatari își ascultă e-mailurile în căsuța de e-mail atunci când sunt ocupați, în stradă, în mașină etc. Așa că acest aspect al accesibilității este chiar mai vital decât ne-am putea imagina.

3. Dislexie

Persoanele care suferă de dislexie tind să confunde ordinea literelor din text, în ciuda nivelului normal de IQ.

Iată practici de accesibilitate pentru destinatarii dislexici bazate pe postarea publicată de cel Asociația Britanică a Dislexiei.

• Evitați sublinierea linkurilor. După cum am menționat deja puțin mai sus, faceți linkurile îndrăznețe în loc să le subliniați;
• Nu începe o nouă propoziție la sfârșitul unui rând. Noua propoziție ar trebui să fie, respectiv, o nouă linie;
• Fără BLOCARE MAJUSCULE dacă trebuie să evidențiați/subliniați o anumită idee — utilizați în schimb fontul mai mare;
• Uitați de alinierea la centru — numai în partea stângă a ecranului;
• Fundalul alb poate distrage atenția destinatarilor dislexici, culorile crem sunt mai moi și nu creează dificultăți;
• Încheiați toate propozițiile cu un punct (.), ar trebui să utilizați și punct și virgulă atunci când există puncte marcante în copia de e-mail.

4. Surditate și auz parțial

Pentru persoanele cu deficiențe de auz, există un singur standard. Toate videoclipurile încorporate în e-mailurile dvs. ar trebui să fie echipate cu subtitrări sau descrieri text.

Nu vă bazați pe subtitrările automate oferite de Youtube și alte găzduiri video. Sunt adesea, eh eh... pentru a spune ușor, departe de a fi ideali. Și în unele ocazii sunt chiar în pragul schizofaziei.

Sfaturi de top pentru accesibilitatea e-mailului

Voi încheia cu revizuirea noastră a celor mai bune practici de accesibilitate astăzi. După cum putem vedea, acest aspect al muncii agenților de marketing prin e-mail este cu adevărat esențial. În consecință, nu săriți niciodată testul de accesibilitate înainte de a face clic pe butonul „Trimite”! Verificați-vă campaniile cu simulatorul de daltonism menționat mai sus, trimiteți e-mailul de testare la toate dispozitivele disponibile și ascultați-le cu diferite cititoare de ecran.

Acum să recapitulăm pe scurt punctele cheie ale acestei postări. Cum se asigură accesibilitatea?

• Alegeți culori diferite pentru a crea o schemă de contrast pentru a preveni confuzia;
• Scrieți subiecte clare și descriptive;
• Nu uita niciodată de textul alternativ, adaugă-l la toate imaginile;
• Dacă animația GIF are un rol educativ, oferiți cititorilor o descriere detaliată;
• Nu folosiți limbi diferite într-un singur e-mail, deoarece cititoarele de ecran pot funcționa doar cu o singură limbă la un moment dat;
• Verificați semnificația linkurilor dvs.;
• Aliniați textul în partea stângă;
• Creați-vă buletinele informative și e-mailurile declanșate cu dragoste adevărată. Îți pasă de toți abonații tăi.

Iti doresc din tot sufletul toate cele bune. Răspândiți grijă și bunătate peste tot!