E-posta Pazarlamasında Erişilebilirlik: Kodunuzu Daha Erişilebilir Hale Getirecek 7 Basit Püf Nokta

Yayınlanan: 2019-04-16

Erişilebilirlik, kullanıcı deneyimi ve tasarımında olduğu kadar hızla e-posta pazarlamasının da bir ayağı haline geliyor. Gittikçe daha fazla marka, e-posta kampanyalarının, fiziksel, görsel veya bilişsel engelleri olsun ya da kurumsal bir ortam nedeniyle e-postalarındaki resimleri görüntüleyemeseler bile her abonenin keyfini çıkarmasını sağlıyor.

E-posta pazarlamacıları olarak hepimiz, abonelerimizin gelen kutularına harika e-postalar ulaştırmaya çalışıyoruz. Tasarımımızın tüm cihazlarda ve e-posta istemcilerinde mükemmel bir şekilde işlenmesini sağlamak için spam testleri ve e-posta testleri yapıyoruz. Ancak bazen resimlerimiz için ALT etiketleri ayarlamayı unutuyoruz, okunması zor bir renk kombinasyonu kullanıyoruz veya e-postalarımızı ekran okuyucular için optimize etmekte başarısız oluyoruz ve bu da bazı abonelerimizi yabancılaştırıyor.

E-posta kodunuzu daha erişilebilir hale getirmeye yeni başlıyorsanız, işler bunaltıcı olabilir. Ancak kolayca uygulayabileceğiniz ve e-posta erişilebilirliği üzerinde büyük etkisi olan birkaç basit numara vardır.

E-postanızın tüm aboneleriniz tarafından erişilebilir olup olmadığını bölüm bölüm nasıl kontrol edeceğiniz aşağıda açıklanmıştır .

E-postanıza erişilebilir mi?

Litmus Kontrol Listesindeki erişilebilirlik kontrolleri, e-postanızı temel erişilebilirlik en iyi uygulamalarına karşı test etmeyi, iyileştirme alanlarını belirlemeyi ve e-postalarınızı tüm aboneleriniz için daha erişilebilir hale getirmeyi kolaylaştırır.

Daha fazla bilgi edinin →

Erişilebilirlik Kontrol Listeniz

1. <HTML> dosyanıza bir dil kodu ekleyin

Abonelerinizin tümü e-postanızı dizüstü bilgisayarlarında veya telefonlarında okumayacaktır; bazıları e-postanıza erişmek için ekran okuyucuları kullanır. E-posta içeriğiniz yüksek sesle okunacağından, telaffuzların doğru olması için doğru dilde olmalıdır—Fransızca yazılmış e-postanızın Amerikan İngilizcesinde telaffuz edilmesini istemezsiniz, değil mi?

Bunun olmasını önlemek için, ekran okuyucuların e-postanızın hangi dilde yazıldığını bilmesini sağlamalısınız . E-postalarınızda dil kodu belirtilmemişse, ekran okuyucular kopyayı doğru telaffuz edemez ve anlamlı e-postanız ortaya çıkabilir. kulağa tamamen yanlış geliyor.

Bu nedenle, <HTML> kodunuzu bir dil kodu için kontrol etmeniz önemlidir; bu, e-postanızın dilini belirten basit bir kod parçacığıdır. O kodunuzda zaten değilse, lang eklemek = E-postanız için uygun dil koduyla -replace xx “xx”. İngiliz ve Amerikan İngilizcesi arasındaki fark gibi farklı aksanları hesaba katmanıza olanak tanıyan tüm olası dil kodlarının ve yerelliklerin bir listesi burada bulunabilir .

 Dikkate alınması gereken birkaç özel durum vardır:

  • <HTML> etiketinizde herhangi bir XML kullanıyorsanız, ayrıca xml:lang=“xx” eklemeniz gerekir .
  • E-posta kodunuza Outlook 120dpi düzeltmesini ekliyorsanız, bir dil belirtmek için bu çözüme ihtiyacınız olacaktır. Kodumuz bu düzeltmeyle şöyle görünür:
     <html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">

Profesyonel ipucu: ESP'nizde yerelleştirme ayarladıysanız, dil kodunu dinamik olarak doldurmak mümkündür.

2. Resimleriniz için her zaman ALT etiketleri ekleyin

E-postalarınızdaki resimlerin aboneleriniz için her zaman görünmeyebileceğini akılda tutmak önemlidir. Belki resimleri kapalıdır veya bağlantıları kötüdür ya da bir ekran okuyucu kullanıyorlardır ve resimlerinize çok sayıda önemli bilgi ekliyorsanız, bu mesajlar kaybolacaktır. ALT metni içinde devreye girer. Eğer abonelere de görebileceği metni ayarlamak (veya ekran okuyucu tarafından okunan) onlar hala görüntülerinizi görebilirsiniz insanlarla aynı mesajlaşma olsun böylece edebilirsiniz.

E-posta kodunuzda <IMG> etiketi varsa, ALT etiketini ayarladığınızdan emin olun. ALT etiketlerini zaten doldurduysanız, metnin resimdeki metinle eşleştiğinden emin olmak için iki kez kontrol edin. Boş ALT etiketleriniz varsa, görüntüde bir ekran okuyucunun görmesi için doldurulması gereken herhangi bir metin olmadığından emin olun. Alt = “”: resimlerinizin üzerinde hiçbir ALT etiketleri ve görüntünün kendi-veya anlamı için gerekli hiçbir metin metin olmamasını yoksa boş ALT etiketi eklemek için emin email-be. Bunu eklemezseniz, ekran okuyucular resmin URL'sini okur ve kimse uzun bir URL'nin kendilerine okunmasını istemez!

E-postanızdaki resimler için tüm ALT etiketlerinizi (boş olsun veya olmasın) ayarladıktan sonra, stillendirilmiş ALT metni için <IMG> etiketine yazı tipi stili ekleyin . Bu stil, ALT metninizle süslü olmanızı sağlar ve yazı tipi, renk, boyut, stil ve ağırlığın görünümünü değiştirmenize olanak tanır.

3. Tüm <TABLE> öğelerine role=”presentation” niteliğini dahil edin

Çoğu e-posta pazarlamacısı, e-posta düzenini yapılandırmak için tablolara güvenir, ancak bunlar ekran okuyucular için ciddi sorunlara neden olabilir. Bir ekran okuyucu, e-posta kodunuzdaki bir tabloyu tanımlarsa, bir tablo gibi yüksek sesle okuyacaktır. Kelimenin tam anlamıyla size kaç satır ve sütun olduğunu söyleyebilir, size her sütunun konumunu ve içeriğini söyleyerek mesajınızı anlamanızı imkansız hale getirebilir.

Bu nedenle, ekran okuyucuya tabloyu yalnızca yerleşim amacıyla kullandığınızı söylemeniz önemlidir. Bunu, e-postanızdaki her tabloya role=“presentation” ekleyerek yapabilirsiniz . Bu rol, ekran okuyuculara tablolardan herhangi bir anlamsal anlamı kaldırmasını söyler; bu nedenle satır ve sütun numaralarını okumak yerine içeriğe odaklanır.

Kendi e-postalarımızdan birindeki bu gerçekten basit e-posta başlığına bakalım:

Erişilebilirlik için optimize etmeden önce kodumuz şöyle görünüyordu:

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

ALT özniteliklerinin eksik olduğunu ve tabloların role=”presentation” olarak ayarlanmadığını fark ettiniz mi?

Bu küçük hataların erişilebilirlik üzerinde büyük etkisi vardır. Bir ekran okuyucunun yukarıdaki kodu nasıl yorumladığı aşağıda açıklanmıştır:

Ekran okuyucu: Erişilemeyen e-posta başlığı

Ekran okuyucu dostu olması için <TABLE> etiketlerine ALT=”” özniteliği ve role=”presentation” eklenerek yeniden düzenlenen kodun aynısı burada :

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

Ekran okuyucu: Erişilebilir e-posta başlığı

Duyduğun gibi, oldukça fark var!

4. İçeriğinizi yapılandırmak için anlamsal öğeler kullanın

Anlamsal öğeler, abonelere (ve ekran okuyuculara) neyin başlık ve neyin paragraf metni olduğunu göstererek içerik hiyerarşisini vurgulamayı kolaylaştırır. Anlamsal öğeleri dahil etmek, ekran okuyucu kullanan abonelerinize bir e-postayı daha kolay "tarama" seçeneği sunar.

Kopyanızı iki kez kontrol ederken, başlığa değer herhangi bir kopyanın bir <H> etiketi içine alındığından emin olun : <H1> , <H2> , <H3> , vb. Benzer şekilde, herhangi bir gövde kopyasının bir <P> etiketi içinde barındırıldığından emin olun . E-postanızı incelerken ekran okuyucular belirli başlıklara vurgu yapar ve bu <H> ve <P> etiketlerini ayarlamak e-postanızda gezinmeyi kolaylaştırır.

5. Mümkünse kopyanızı sola hizalayın

Gövde metniniz söz konusu olduğunda, ortaya hizalamak cazip gelebilir. Ancak, erişilebilirlik söz konusu olduğunda, bu büyük bir yapılmaz !

Metninizi ortaladığınızda, her satır için başlangıç ​​kenarı değişir, bu da abonelerinizi her satırın başlangıcını bulmak için daha fazla çalışmaya zorlar ve bu, disleksi ve diğer okuma bozuklukları olan kişiler için bir zorluktur. İki satırdan uzun bir kopyanız varsa, o kopyayı sola hizalayın. Bu, özellikle mobil için önemlidir, çünkü dar genişlik genellikle fark edebileceğinizden daha fazla metin satırı üretir. Metninizi mobil cihazlarda duyarlı bir şekilde sola hizalamanız gerekebilir.

6. Kopyanızın kontrastını kontrol edin

E-postanızın arka plan renkleriyle metin renklerinizin kontrast oranını kontrol edin. Renk kusurları olan aboneleriniz olabilir ve renkleriniz onlar için yeterli kontrast sağlamıyorsa e-postanızı okuyamayabilirler. Kontrast oranınızı kontrol etmenin iki yolu vardır:

  • HTML'nizi barındırabilir ve kullanmak için bir URL üretebilirseniz, renklerimi kontrol etmenin en sevdiğim yolu budur: http://www.checkmycolours.com/
  • Renk kodlarınızı manuel olarak girmeniz gerekiyorsa, https://contrast-ratio.com/ adresini ziyaret edin.

7. CTA'lar, bağlantılar ve resimler için fareyle üzerine gelme efektleri ekleyin

Litmus anda, Clickability göstermek için bizim CTA'ları bağlantılar ve resimler üzerinde vurgu efektleri kullanın. Fareyle üzerine gelme efektleri, e-postalarınızı daha ilgi çekici hale getirebilen ve abonelerinizin deneyimini iyileştirebilen basit bir etkileşimli öğedir. Fareyle üzerine gelme efektleri yalnızca AOL, Apple Mail, Gmail ve Yahoo!'da destekleniyor olsa da! Posta, popüler bir efekttir ve e-posta kodunuza uygulanmaya değerdir. Bir görüntüyü soldurabilir, CTA düğmenizin rengini değiştirebilir, bir açılır sekme ekleyebilir ve daha fazlasını yapabilirsiniz.
Fareyle üzerine gelme efektleri, e-postanızın üzerine gelindiğinde düğmenin rengini değiştirdiği bu örnekte olduğu gibi, e-postanızı daha erişilebilir hale getirmenize yardımcı olabilir.

Litmus Builder'da tam e-postaya bakın →

Daha fazla e-posta ipucu ister misiniz?

E-posta Erişilebilirliği İçin Nihai Kılavuz

Bu kılavuz, yetenekleri ne olursa olsun herkesin yararlanabileceği e-postalar yazmak, tasarlamak ve kodlamak için ihtiyaç duyduğunuz bilgileri ve adım adım tavsiyeleri içerir.

E-kitabı indirin →


En iyi e-posta pazarlama ve tasarım ipuçlarını, istatistikleri ve kaynakları doğrudan gelen kutunuza alın ve Litmus News'e kaydolduğunuzda e-posta inovasyonunun ön saflarında kalın.

Bilgide kalın →