E-posta Erişilebilirlik Yönergeleri: Standartlar ve En İyi Uygulamalar

Etrafına bir bak, neler olduğunu dinle. Tam renkli modda her şeyi net görüyor musunuz? Ve sesleri ve sesleri iyi duyuyor musun? Tebrikler, kesinlikle şanslı bir insansınız. Ayrıca, aslında gerçekten mutlu birisin. Görme ve işitme duyun var!

Bu yeteneklerin yaygın olduğunu ve varsayılan olarak herkese verildiğini düşünebilirsiniz? Kişi listenizdeki alıcıların %4,5'inin renk körlüğünden muzdarip olduğunu ve bu nedenle e-posta içeriğinizi okumalarının veya anlamalarının zor olduğunu söylersem ne olur?

Renk körlüğü tek yaygın hastalık olmasa da. Sadece basit bir gerçek: Dünya çapında 285 milyon insan, kontakt lensler veya gözlüklerle bile görmeyi sorun haline getiren ciddi görme bozukluklarından muzdarip.

Ve dünya nüfusunun %5'i işitme engelli. Diğer bir deyişle, 360 milyonun üzerinde.

Bu düşünülmesi gereken bir şey. Bütün bu insanları görmezden gelemeyiz. Onlara dost olmak ve hayatlarını daha iyi hale getirmek için elimizden gelenin en iyisini yapmalıyız. Erişilebilirlik bununla ilgili.

Şimdi kendinize bir fincan çay veya kahve yapın ve detaylara geçelim.

E-posta erişilebilirliği ne anlama geliyor?

Şiddetli görme bozukluklarından ve hatta tamamen körlükten muzdarip insanlar var. Gelen kutusu e-postalarını seslendirmek için ekran okuma yazılımı kullanıyorlar - VoiceOver, Microsoft Narrator ve diğer benzer araçlar. Bu nedenle görevimiz içeriğimizi bu yardımcılara göre ayarlamaktır.

Protanopiadan (insanlar belirli renkleri ayırt edemediğinde) tek renkliliğe kadar renk körlüğü söz konusu olduğunda, bu koşullara sahip insanlara yardımcı olacak hiçbir araç yoktur. Bu yüzden e-posta görüntülerini kendimiz optimize etmeliyiz.

Diğerleri işitme bozukluklarından, disleksiden vb. muzdariptir. Sonuç olarak, her tür bozukluk için erişilebilirlik kuralları vardır. Böylece başlıktaki bir sorunun cevabına geldik.

Özetle, e-postaları her türlü özel gereksinimi olan kişiler için okunabilir kılan standartlara bağlı kalmak anlamına gelir. Neyse ki, modern HTML e-posta şablonu oluşturucuları ve diğer pazarlama yazılımları, bu standartları oldukça kolay bir şekilde ve özel beceriler olmadan uygulamak için bize gelişmiş araçlar sağlar.

Bu standartları ve erişilebilir e-postalar oluşturmaya yardımcı olacak bazı uygulamaları aşağıda paylaşacağım.

Erişilebilirlik standartları

O halde sevgili dostlar, her türlü görsel, işitme ve algı bozukluğu olan alıcılara kolay okunabilecek “evrensel” e-postalar göndermek için uymamız gereken bu önerileri tek tek incelemenin zamanı geldi.

1. Renk körlüğü

Renk körlüğü türlerinin bir listesi vardır. İşte buradalar:

Protanopia , kırmızı rengin geçersiz algılanması anlamına gelir. Protanopiye sahip okuyucular, yani kırmızı kör insanlar, siyah rengi kırmızının tüm tonlarıyla karıştırma eğilimindedir. Ayrıca koyu kahverengiyi koyu yeşilden ayırt edemezler ve mavi renk ile kırmızının orta diyapazonu arasında hiçbir fark görmezler. Uber'den gelen bu e-postaya bir göz atın:

Protanopiye sahip alıcılar bunu şöyle görüyor:

Deuteranopia , azaltılmış bir yeşil algısıdır. Bu insanlar ayrıca orta kırmızı/yeşil diyapazon, parlak yeşil/sarı ve açık mavi/lila renklerini birbirine karıştırma eğilimindedir. Yine aynı e-postaya bir göz atın: soldaki orijinal ve sağdaki deuteranopia versiyonu.

Tritanopia , mavi renk ve tonlarına karşı körlük anlamına gelir. Bu nedenle, bu bozukluğu yaşayanlar genellikle açık mavi/gri ve koyu mor/siyah renklerini karıştırırlar. Aynı e-posta örneği, ancak sağda tritanopia algısını görebilirsiniz:

Tek renklilik, toplam renk körlüğü içindir. Bu insanlar sadece siyah, beyaz ve grinin farklı tonlarında boyanmış gerçeği görebilirler. Başka renk yok. Sadece dünyayı çok eski bir TV setinin ekranında hayal edin. Tek renklilik böyle görünüyor. Cidden, tüylerimi diken diken ediyor.

Ne yapmalıyız?

• E-posta kopyalama için en az 14 piksel yazı tipi boyutunu seçin. Ancak, alıcılara erişilebilir e-posta tasarımı sağlamak için 16px'i öneririm;
• Renk körü müşterilerin ayırt edemeyeceği renklere dayalı kontrast çözümlerinden kaçının. Örneğin, kopyanızı kırmızı veya leylak arka plan üzerine yeşil veya mavi metinle yazmayın. Aşağıdaki mesaja bakın. Tam bir renk algısı diyapazonuna sahip insanlar için sorun değil… ama protanopi veya monokromatik görme durumunda bu kadar iyi mi? Öyle düşünmüyorum…

(Orijinal mesaj)

(protanopili müşteriler bunu böyle görecektir)

(monokromatların bu mesajı görme şekli)

Favori takımlarının maçı kazanıp kazanmadığını nasıl anlamalılar?

• Kırmızı resimlerin üzerine yeşil düğmeler ekleme fikrini unutun veya tam tersi. Aynısı yukarıda bahsedilen tüm “riskli” renk kombinasyonları için de geçerlidir. Fikir gerçekten kötü — renk algılama bozukluğu olan kişiler düğmeyi hiç fark etmeyebilirler;
• Her zaman ürünün rengini parantez içinde belirtin - müşteriler örneğin kırmızı rengi ayırt edemeyebilirler ancak kırmızı gömleklerin veya elbiselerin görselleriyle mükemmel bir şekilde eşleştiğini bilirler;
• E-postalarınızdaki bağlantıları kalın yapın.

Evet, bağlantılar metni için normal mavi renk yeterli değil. Ve sadece renk körü alıcılar yüzünden değil. Güneş akıllı telefon ekranına acımasızca parlarken sokakta hiç e-posta okudunuz mu? O zaman ne demek istediğimi anlıyorsunuz - renkleri ayırt etmek hiç de zor değil. Bu yüzden bağlantıları kalın yapın ve altını çizmeyin. Niye ya? Çünkü altını çizmek disleksi olan kişilerin dikkatini dağıtabilir. Disleksi hakkında biraz sonra ayrıntılı olarak konuşacağız.

Bu e-postada menü öğeleri de kalındır. Bu basit fikir, müşterilerin haber bülteni içinde gezinmesini optimize eder - istedikleri daire kategorisini kolayca bulabilirler.

Oklu "Ayrıntıyı görüntüle" bağlantısına dikkat edin. Tıklayarak daha fazla ayrıntı görebileceğinizi söylüyor;

Kampanyanıza etkileşim öğeleri ekler veya testler yaparsanız, doğru yanıtları vurgulamak için yeşil/koyu kırmızı/açık mavi renkleri seçin. Ve sırasıyla yanlış için sırasıyla kırmızı/siyah/gri. Evet/hayır yanıtlarını metinle kopyaladığınızdan emin olun.

E-postanın renk eksikliğinden muzdarip kişilerin gereksinimlerine uyup uymadığını kontrol etmek gerçekten çok önemlidir. Size kolaylık olması açısından bu tabloyu yazımıza eklemek istiyorum. Eşleşen renkleri bulmak ve karışıklığı önlemek için kaydedin:

Resimlerinizi renk körü alıcıların nasıl algılayacağını gösteren ücretsiz bir renk körlüğü simülatörü aracı da vardır.

Gördüğümüz gibi, renk testi çok karmaşık değil - sadece göz ardı etmeyin. Tüm abonelere gösterdiğiniz özeni gösterin. İyi ol.

2. Körlük ve ciddi görme bozuklukları

Sonraki bölüm, kör ve kısmen gören kişiler için erişilebilirlik standartlarına ayrılmıştır. Bu kurallar da tamamen görme bozuklukları ile ilgilidir, ancak buradaki ilkeler ve çözümler tamamen farklıdır. Bu durumda hiçbir renk şeması veya kontrast kombinasyonu yardımcı olamaz. Erişilebilirlik biliminin bu yönü, ekran okuma yazılımının kullanılmasına dayanmaktadır.

Sonuç olarak, görevimiz e-postalarımızı bu araçlara göre ayarlamaktır. Başka bir deyişle, bu araçlar için e-postaları okunaklı hale getirmeliyiz.

Burada nelere özellikle dikkat edilmelidir?

E-posta konu

Tipik olarak, ekran okuyucular konusundan bir e-posta okumaya başlar.

Bu nedenle, yaygın olarak kabul edilen kural basit ama etkilidir: konu satırınızı kısa ve açıklayıcı yapın. İyi bir konu, mesajın özünü açıklamalıdır.

Dil ayarları

E-posta kopyasında dil ayarlarını yapılandırmak gerçekten önemlidir. Bu görev biraz çaba gerektirir ve e-posta kopyasıyla çalışır ancak buna değer. Mesele şu ki, bu ayarları görmezden gelirseniz, ekran okuyucular tarafından seslendirilen e-posta metni korkutucu gelebilir. Yüzüklerin Efendisi'ndeki orkların konuşmaları gibi bir şey

Bunu önlemek için e-posta kodunda (varsa) ilgili dili belirtin.

Mantıksal düzen

Ekran okuyucular, e-postaların nasıl seslendirileceği konusunda katı bir düzene sahiptir. Konteynerleri ve blokları soldan sağa okurlar ve ardından bir sonraki satıra geçerler.

Erişilebilirlik sağlamak için HTML kodunda <h1> , <h2> , <p> vb. başlık etiketlerini belirtin. Bu etiketler normal metne göre öncelik ekleyecektir, bu nedenle bu öğeler önce seslendirilir.

Ayrıca, etiketlerin belirtildiğinde yazı tipi boyutunun önemi yoktur. Yukarıdaki örnekte, başlık 2 yazı tipi boyutu 24 pikseldir ve normal kopya yazı tipi daha büyüktür - 27 piksel. Ancak ekran okuyucular önce 2. başlığı seslendirecektir.

alternatif metin

AI teknolojileri bugün istikrarlı bir şekilde gelişiyor. Ancak ekran okuyucu araçları hala e-postadaki resimlere "bakacak" ve onları tanımlayacak kadar akıllı değil. Belki yakın bir gelecekte… Günümüzde bu araçlar sadece alternatif metin, yani resimlere eklediğimiz Alt metin okuyabiliyor.

Alternatif metni erişilebilirlik standartlarına nasıl ayarlayabilirim? Doğru tahmin ettiniz, oldukça açık: bu metni kısa, açıklayıcı ve bilgilendirici yapın. Yararlı bir not: Bu metinde “resim” kelimesinden kaçının. Resim etiketi zaten bunu belirtiyor, bu nedenle yinelenen “resim resmi…”ni duymak biraz garip olacak.

Bağlantılar, CTA öğeleri, sosyal simgeler

Bağlantılar mümkün olduğunca kısa ve bilgilendirici olmalıdır. Onlara net metin ekleyin ve ekran okuyucuların bu metni sese dönüştüreceğini unutmayın! Alıcıların onlara ne sunduğunuzu ve bir tıklama ile nereye gideceklerini bilmelerini sağlayın.

Sadece şu bağlantılara bakın:

İlk bağlantı… uh… cidden, kulağa ne kadar ürkütücü geleceğini hayal bile edemiyorum. İkincisi, web sitesini, yayın tarihini ve yazı başlığını açıkça belirtir.

Aynısı CTA düğmeleri ve sosyal medya simgeleri için de geçerlidir. Aslında, bu öğeler de sadece estetik açıdan çekici bir görsel şekle sarılmış köprülerdir. Her yetenekli e-posta pazarlamacısı, onlara en yakın ilgiyi gösterir, tasarım ve efektler üzerinde çalışır, tıklama oluşturmak için mükemmel renk çözümlerini seçer…

Ancak, kör kişiler için ekran okuyucular ve erişilebilirlik söz konusu olduğunda, burada önemli olan tek şey metindir. Görevini tamamlayacak kadar akılda kalıcı hale getirin — aboneleri düğmeyi tıklamaya zorlayın.

E-postada CTA düğmesini şu şekilde görüyoruz:

Ancak ekran okuma araçları, tüm tasarımcı hilelerimiz ve harika vurgulu efektlerimiz hakkında uçan bir ördek vermez. Yazılımın gördüğü tek şey çıplak metindir. Başka hiçbir şey. Bu nedenle, metninizin kendi başına çalıştığından emin olun.

Sosyal medya simgeleriyle ilgili olarak, gelen kutusu e-postalarını "dinleyen" bazı aboneler, bu simgelere uyguladığımız kısaltmaları anlamayabilir. Bu nedenle, bu öğeler için açıklayıcı alternatif metin yazın.

Bu tamamen körlükle ilgili. Bir önemli not daha: ekran okuyucular günümüzde yalnızca ciddi görme bozukluğu olan kişiler tarafından yaygın olarak kullanılmamaktadır. Milyonlarca alıcı meşgul olduklarında, sokakta, arabada vs. gelen kutularındaki e-postaları dinliyor. Dolayısıyla, erişilebilirliğin bu yönü, hayal edebileceğinden çok daha hayati.

3. Disleksi

Disleksiden muzdarip insanlar, normal IQ seviyelerine rağmen metindeki harflerin sırasını karıştırma eğilimindedir.

Tarafından yayınlanan gönderiye dayalı olarak disleksik alıcılar için erişilebilirlik uygulamaları şunlardır: en İngiliz Disleksi Derneği.

• Bağlantıların altını çizmekten kaçının. Yukarıda biraz bahsettiğim gibi, bağlantılarınızı altını çizmek yerine kalın yapın;
• Yeni bir cümleye satırın sonunda başlamayın. Yeni cümle sırasıyla yeni bir satır olmalıdır;
• Belirli bir fikri vurgulamanız/vurgulamanız gerekirse CAPS LOCK yok — bunun yerine daha büyük yazı tipini kullanın;
• Ortaya hizalamayı unutun — yalnızca ekranın sol tarafında;
• Beyaz arka plan disleksik hastaların dikkatini dağıtabilir, krem ​​renkler daha yumuşaktır ve zorluk çıkarmaz;
• Tüm cümleleri nokta (.) ile bitirin, e-posta kopyasında madde işareti olduğunda da noktalı virgül kullanmalısınız.

4. Sağırlık ve kısmi işitme

İşitme engelli kişiler için tek bir standart vardır. E-postalarınıza gömülü tüm videolar, altyazı veya metin açıklamalarıyla donatılmalıdır.

Youtube ve diğer video barındırma şirketleri tarafından sağlanan otomatik altyazılara güvenmeyin. Genellikle, eh eh… hafifçe söylemek gerekirse, ideal olmaktan uzaktırlar. Ve bazı durumlarda şizofazinin eşiğinde bile.

E-posta erişilebilirliğiyle ilgili en iyi ipuçları

Bugünkü en iyi erişilebilirlik uygulamalarına ilişkin incelememizi bitireceğim. Gördüğümüz gibi, e-posta pazarlamacılarının çalışmalarının bu yönü gerçekten çok önemlidir. Sonuç olarak, "Gönder" düğmesini tıklamadan önce erişilebilirlik testini asla atlamayın! Kampanyalarınızı yukarıda belirtilen renk körlüğü simülatörü ile kontrol edin, test e-postasını mevcut tüm cihazlara gönderin ve farklı ekran okuyucularla dinleyin.

Şimdi bu yazının kilit noktalarını kısaca özetleyelim. Erişilebilirlik nasıl sağlanır?

• Karışıklığı önlemek için bir kontrast şeması oluşturmak için farklı renkler seçin;
• Açık ve açıklayıcı konu satırları yazın;
• Alternatif metni asla unutmayın, tüm görüntülere ekleyin;
• GIF animasyonunun eğitici bir rolü varsa, okuyuculara ayrıntılı bir açıklama sağlayın;
• Tek bir e-postada farklı diller kullanmayın çünkü ekran okuyucular aynı anda yalnızca tek bir dille çalışabilir;
• Bağlantılarınızın anlamlılığını kontrol edin;
• Metni sol tarafa hizalayın;
• Bültenlerinizi ve tetiklenen e-postalarınızı gerçek aşkla oluşturun. Tüm abonelerinizi önemseyin.

Size içtenlikle en iyisini diliyorum. Etrafınıza özen ve nezaket yayın!