Erişilebilir E-postalar İçin En İyi Kılavuz

E-posta pazarlamacıları olarak, abonelerimize mükemmel e-posta deneyimini sunmaya çalışıyoruz. Analizlerimize dayanarak e-postalarımızın doğru zamanda gönderilmesini ve teslim edilebilirliğimizi izleyerek ve spam testleri çalıştırarak gelen kutusuna teslim edildiğinden emin oluruz. İçeriğimizi, e-postalarımızın sayısız cihazda ve her e-posta istemcisinde mükemmel bir şekilde görüntülendiğinden emin olmak için tasarımımızla daha alakalı ve incelikli olacak şekilde kişiselleştiriyoruz.

Bunların tümü, e-postalarınızın bir dönüşüme yol açmasını sağlamak için önerilen adımlardır. Ancak, abonelerinizin önemli bir kısmı (görsel, fiziksel veya bilişsel ve nörolojik engelleri olan kişiler) e-postalarınızı gözden kaçırabilir.

E-postalarınızı tüm aboneleriniz için daha erişilebilir hale getirmek için yalnızca birkaç küçük adım yeterlidir. Bu gönderide, bu adımların neler olduğunu ve e-postayı herkes için nasıl daha iyi hale getirebileceklerini tartışacağız.

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

Erişilebilirlik, kullanıcı deneyimi ve tasarımının temel direklerinden biri olarak hizmet eder. E-posta için, herhangi bir engel veya kullanıyor olabilecekleri yardımcı cihazlardan bağımsız olarak herkesin mesajınızı alıp anlayabildiğinden emin olmak anlamına gelir.

E-postadaki erişilebilirliği, zayıf desteğe sahip e-posta istemcileriyle uğraşmanın bir uzantısı olarak düşünebilirsiniz. Geçici çözümler ve geri dönüşler dahil, her abonenin olumlu bir deneyim yaşamasını sağlar.

E-posta geliştiricileri olarak, bir e-postanın %1'den daha az pazar payına sahip bir istemcide tam olarak görünmesi için saatler harcıyoruz, ancak çok azımız e-postayı erişilebilir kılmak için birkaç dakika harcayacağız.
– Mark Robbins, Rebelmail

E-posta Tasarımında Erişilebilirlik

E-postanızın erişilebilirliği etkileyebilecek görsel yönlerine ve nerede iyileştirmelerin yapılabileceğine bakarak başlayalım.

Rengi Akıllıca Kullanın

Renk körlüğü olan aboneler e-postanızdaki bazı renkleri ayırt edemeyebilir, bu nedenle bilgilerin iletilmesinin tek yolunun renk olmadığından emin olun.

Renk kontrastı, görsel güçlükleri olan aboneler için de sorun oluşturabilir. E-postanızdaki farklı öğeler arasında, özellikle de kopya ve arka plan renkleri arasında yüksek bir renk kontrastı kullanın. Bunu yapmanın bir yolu, e-postanızdaki renklerin kontrast oranını kontrol etmek için WebAim'in Renk Kontrast Denetleyicisini kullanmaktır.

E-postalarınıza erişilebilir mi? Litmus E-posta Önizlemelerinde renk körlüğü filtresini kullanarak görme engelli kullanıcılar için e-postalarınızın nasıl göründüğünü görün. Litmus'u ücretsiz deneyin →

Zararlı İçerik Oluşturmayın

Animasyonlu GIF'ler gibi belirli oranlarda veya desenlerde yanıp sönen içerik, bazı kişilerde ışığa duyarlı nöbetlere neden olabilir. İçeriği yanıp sönmekten veya benzer içeriğe sahip olabilecek videoların bağlantılarını eklemekten kaçının.

Metin ve Görüntüleri Dengeleyin

Gören kullanıcılar ilgili olmayan içeriği görsel olarak tarayabilir veya atlayabilirken, görme engelli kullanıcılar her seferinde bir e-posta olmak üzere e-postanın tüm içeriğini dinlemelidir. Ana mesajı iletmek için e-postanızdaki yazılı içeriği özelleştirin. Ayrıca tasarımınızın JAWS veya Window-Eyes gibi popüler ekran okuyucularla ne kadar uyumlu olduğunu düşünün.

E-postanızın Okunabilirliğini İyileştirin

Daha Büyük Yazı Tipi Boyutları Kullanın

Masaüstü veya dizüstü bilgisayar ekranındaki 14 pikselden küçük olan her şeyi okumak için biraz çaba gerekir. Kullanıcılar, ekranlarını okumalarına yardımcı olmak için cihazlarındaki yakınlaştırma düzeyini artırabilir, ancak bu, e-postanız üzerinde bozuk veya kesik görünebilecek olumsuz bir etkiye sahip olabilir.

Metin, mobil cihazlarda daha küçük görünebilir ve kullanıcıları e-postanızı okumak için daha fazla çalışmaya zorlayabilir. Kullanıcıların e-postanızı okumasına yardımcı olmak için daha küçük cihazlarda minimum yazı tipi boyutunu 14'ten 16 piksele çıkarmak için medya sorgularını kullanın:

 @media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

Kopya Alanınıza Nefes Alın

Bazıları için, kopya satırlarının birbirine yakın aralıklarla yerleştirildiği paragrafları ve metin bloklarını okumak zor olabilir. Herkes için okumayı kolaylaştırmak için metin üzerinde uygun bir satır yüksekliği ayarlayın. Yazı tipi boyutunuzdan 4 piksel daha fazla olan bir satır yüksekliği seçmenizi öneririz.

 <p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

İpucu: Mobil cihazlar için yazı tipi boyutunu artırırken satır yüksekliğini de artırmayı unutmayın.

Metnin paragrafları ayrıca okunabilirliğe yardımcı olmak için nefes alacak alana ihtiyaç duyar. Bir e-postayı tararken paragrafları belirlemek kolay olmalı ve yerinizi koruyabilmelidir. Paragrafların üstünde ve altında yeterli beyaz boşluk oluşturun.

Metnin daha kolay okunmasını sağlamanın bir diğer adımı, metni e-postalarınızın kenarlarından uzaklaştırmaktır. Bir tablo hücresine veya paragraf etiketine dolgu eklemek, bunu başarmanıza yardımcı olacaktır.

E-postanızda Gerekçeli Kopyadan Kaçının

"Yaslanmış" kopyalama, harf ve sözcük aralığının, metnin hem sol hem de sağ kenar boşluklarıyla aynı hizada olacak şekilde ayarlanması anlamına gelir. Baskıda yaygın olsa da, tutarsız sözcük aralığı, iki yana yaslanmış kopyanın okunmasını zorlaştırabilir. Sola hizalanmış metnin herkes için daha kolay okunduğu kanıtlanmıştır.

Doğru Yazı Tipini Seçin

Web yazı tiplerinin kullanımı, e-postada kullanılabilecek olası yazı tipleri havuzunu artırdı, ancak vücut yazı tipiniz olarak Lobster'ı kullanmaya karar vermeden önce, bunun ne kadar erişilebilir olduğunu düşünün. E-postanız için yazı tipini seçerken, eşit aralıklı ve çok yoğun olmayan bir yazı tipi seçin. Bu, yalnızca erişilebilirlik için değil, mobil kullanıcılar için de iyi bir fikirdir.

Semantik Öğeleri Kullan

Anlamsal öğeleri dahil etmek, ekran okuyucu kullanan abonelerinize bir e-postayı başlığa göre "tarama" seçeneği sunar. Bunu <p> ve <h> etiketlerini kullanarak yapabilirsiniz. Bunlar her istemcide desteklenir, bu nedenle e-postanızı daha erişilebilir hale getirmeye başlamak için iyi bir yerdir.

Tarihsel olarak, <p> ve <h> etiketlerini biçimlendirmek kolay olmadı, bu nedenle bu etiketlerin e-postada kullanıldığını görmek hala oldukça nadirdir. Bu etiketlerden herhangi birine sarılmış metnin etrafındaki kenar boşluklarını yönetmek zordu, ancak bunun gibi bir kod kullanarak bu boşlukları kontrol edebileceksiniz:

 <h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

 <p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

İpucu: mso-line-height-rule:tam olarak; <h> etiketlerinizde, Microsoft Outlook e-posta istemcilerinde ayarladığınız satır yüksekliği kuralı korunur.

E-posta geliştiricisi Paul Airy, e-postalarında anlamsal HTML öğelerini daha erişilebilir kılmak için neden ve nasıl kullandığını açıklarken, Litmus Live 2017'den bu klibi izleyin:

Bu videoyu tweetle →

Litmus Live'daki uzmanlardan öğrenin Litmus Live konferansı için bize katıldığınızda, gerçek dünyadan tavsiyeler, en iyi uygulamalar ve pratik çıkarımlarla daha iyi bir e-posta pazarlamacısı olun. Daha fazla bilgi edinin →

Okunabilir Kopya Yaz

Daha erişilebilir ve okunabilir bir e-posta oluşturmak, yalnızca e-postanın nasıl kodlandığına değil, aynı zamanda kopyanın nasıl yazıldığına da bağlıdır. E-posta kopyanızı daha insancıl hale getirmek, okunabilirliğine yardımcı olacak ve siz ve aboneleriniz arasında 1:1 iletişim kurulmasına yardımcı olacaktır.

Flesch-Kincaid Okuma Kolaylığı testi olarak bilinen en popüler test Microsoft Word'de bulunabilir ve içeriğinizin 0-100 arasında ne kadar kolay okunabileceğini hesaplar. Bunun anlamı:

• 90-100 arası bir puan, 11 yaşındaki bir öğrenci tarafından kolaylıkla anlaşılacaktır.
• 60-70 arası bir puan 13-15 yaşındaki öğrenciler tarafından kolayca anlaşılacaktır.
• 30-50 puan üniversite öğrencileri tarafından anlaşılır
• 0-30 puan üniversite mezunları tarafından daha iyi anlaşılacaktır.

Bir şeyi daha "okunabilir" hale getirmek, zor konulardan veya ağır konulardan çekindiğiniz anlamına gelmemelidir. Yazınızı basitleştirmek yerine, metnin erişilebilirliğine atıfta bulunur. Genel bir izleyici kitlesini yakalamak için en iyi noktanız 60 ile 70 arasında bir yerde. Tabii ki, hedef kitleniz yüksek eğitimliyse, daha karmaşık bir dil kullanmaktan korkmayın.

Ayrıca, kopyanızı doğrudan ve konuya uygun olacak şekilde düzenleyerek okunabilirliği artırabilirsiniz.

Erişilebilir İçerik Oluşturun

Bağlantıları Tıklanabilir/Dokunabilir Yapın

Kurşun geçirmez düğmelerin boyutunun mobil cihazlarda başparmak ve parmaklar tarafından kullanılabilecek kadar büyük olmasını sağlamak, e-postanızın erişilebilirliğine de yardımcı olacaktır. Fareyi hassas bir şekilde kontrol edemeyen kişiler için daha büyük bir düğme faydalı olacaktır.

Büyük düğmeleri severim ve yalan söyleyemem.
- Justine Jordan, Litmus

Apple'ın iPhone İnsan Arayüzü Yönergeleri, düğmeler için minimum 44 piksel genişlik ve yükseklik önerirken, bu sayı mobil cihaz satıcısına göre değişir. Alternatif bir temel kural, bir başparmağın ortalama piksel genişliği olduğu için minimum genişlik ve yükseklik 72 piksel kullanmak olacaktır.

“Burayı Tıklayın” Bağlantı Kopyasını Yasaklayın

Bağlantılarınız için kopya olarak “buraya tıklayın”ı kullanmaktan kaçının. Ekran okuyucu kullanıcıları, genellikle bir e-postayı taramanın bir yolu olarak içeriği atlayarak içeriği tarar. Bağlantılarınızın bağlamını vermek, bu kullanıcıların tıklamak isteyip istemediklerine karar vermelerine yardımcı olacaktır.

Örneğin, bir ayakkabı ürün listesine giden bir bağlantınız varsa, "Daha fazla ayakkabı görün" gibi bir bağlantı kopyası kullanmak, ekran okuyucu kullanıcıları için bağlantının belirsizliğini azaltır. Bağlantıların belirsizliğini azaltmak, bağlantıyı çevreleyen bağlamı okumalarını gerektirmediği için tüm aboneler için faydalıdır - e-postaları hepsini almadan rutin olarak tarayanlar için iyidir.

Bu sadece erişilebilirlik için değil, "buraya tıklayın" bağlantılarını yasaklamak, e-posta içeriğinizi cihazdan daha bağımsız hale getirecektir. "Buraya tıklayın", dizüstü veya masaüstü bilgisayar kullanan bir abone için anlamlı olabilirken, dokunmanın gerekli olduğu mobil cihaz veya tablet kullanan biri için mantıklı olmayabilir.

ALT Özelliğini Doğru Kullanın

ALT özelliği, varsayılan olarak görüntüleri engelleyen e-posta istemcileri nedeniyle HTML e-postalarının başlangıcından bu yana en iyi e-posta uygulaması olmuştur. Bir resme eklenen ALT özniteliğinde kullanılan metin, resim yüklenmediğinde görüntülenir. Bu, e-posta istemcilerinde varsayılan olarak kapalı resimler varsa veya e-postayı okumak için bir ekran okuyucu kullanıyorsa abonenin e-postayı "görmesine" yardımcı olur.

ALT niteliğini doğru bir şekilde kullanmak için görüntünün bağlamı, onu çevreleyen içerikle ilişkili olarak tam olarak anlaşılmalıdır. İlk olarak, görüntünün işlevsel mi, açıklayıcı mı yoksa dekoratif mi olduğuna karar vermeniz gerekir.

Tüm görüntüler ALT öznitelikleri gerektirir, bu nedenle ekran okuyucular tarafından okunması gerekmeyen veya abone için hayati önem taşıyan herhangi bir şeyi temsil etmeyen görüntüler için boş bir ALT özniteliği kullanılmalıdır.

Hangi resimlerin ALT özniteliği gerektirdiğine ve hangilerinin boş özniteliğe sahip olabileceğine karar vermenize yardımcı olması için tüm resimler kapalıyken e-postanızı görüntüleyin.

Bağlamın resimleriniz için ALT özniteliğinin kullanımını nasıl bilgilendirdiğini anlamak için daha derin bir dalış için, WebAim'in ALT özniteliği sayfasını ziyaret edin.

Tüm Sunum Tablolarınızda role=”presentation” kullanın

E-posta tasarımında, e-posta tasarımını yapılandırmanın yanı sıra içeriği tutmak için tablolar kullanılır. Tabloların asla tasarım için kullanılması amaçlanmamıştır; ancak, Outlook gibi e-posta istemcilerindeki kısıtlamalar nedeniyle, e-posta tasarımcıları <table> öğesini bir tasarım öğesi olarak kullanmak zorunda kaldılar.

Ekran okuyucularının içeriği tutan <table> öğeleri ile yalnızca tasarım amaçlı olanlar arasındaki farkı anlamasına yardımcı olmak için abonenin okuması gereken içeriği tutan her tabloda add role=”presentation” öğesini kullanın. Her <td> öğesine değil, yalnızca her <table> öğesine eklemeniz gerekir. Bu, bir ekran okuyucunun tablolarınızın her hücresini birer birer okumaya zorlamasını önler ve abonenin doğrudan önemli içeriğe ulaşmasına yardımcı olur.

role=”presentation”a ek olarak, aria-hidden=”true”, HTML'nizdeki görsel içerik için olan ve ekran okuyuculardan gizlenmesi gereken öğelere eklenebilecek başka bir HTML özelliğidir:

 <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>

role=”presentation” görsellerde de kullanılabilir. E-posta geliştiricisi Remi Parmienter, MacOS için bir ekran okuyucu uygulaması olan VoiceOver kullanıcıları için Chrome'da bazı olağandışı davranışlar keşfetti. VoiceOver, ALT özniteliği mevcut ancak boş olsa bile, görüntüler için dosya adlarını okumaya başladı. Okunmakta olan görüntünün adından kaçınmak için boş bir ALT özniteliği olan herhangi bir görüntüde HTML niteliği role=”presentation” kullanılması önerilir.

Erişilebilir E-postalar İş Başında

Zorlukların ötesine bakarsak bir erişilebilirlik düzeyi uygulayabiliriz. Yapamadıklarınıza değil yapabileceklerinize odaklanın.
– Paul Airy, Zarfın Ötesinde

Litmus Topluluğu üyeleri, erişilebilir bir e-posta oluşturmak için bir Topluluk Yarışmasına katıldı. Gönderiler, e-postayı yeni bir hedef kitleye açmak için atılabilecek küçük adımları gösterdi.

Bu e-postanın aboneleri, e-postanın tasarımını bozmadan tarayıcıları aracılığıyla metin boyutunu %200'e kadar artırabilecekler. Ve ışığa duyarlı nöbetlerden muzdarip olanlar için üç döngüden sonra (beş saniye içinde) duran animasyonlu bir GIF'e sahiptir.

Eyal Bitton, bağlam dışında anlam ifade eden bağlantılar için kopya kullanan bir e-posta oluşturdu ve Eyal, bazı gizli metinleri kullanarak kör abonelere e-postanın sonunu işaret ediyor.

Type E'nin haber bülteni, abonenin standart veya büyük metin boyutu arasından seçim yapmasını sağlamak için etkileşimli aşamalı bir geliştirme kullanır. E-posta geliştiricisi Paul Airy ayrıca, abonenin belirli engellerden muzdarip olması durumunda e-postayı renkli arka planlarla görüntülemeyi seçebileceği, katılımla yönlendirilen bir seçenek de içeriyor.

Bu e-postalar, e-postaların daha erişilebilir olması ve potansiyel olarak daha geniş bir kitleye ulaşması için yalnızca birkaç küçük adım gerektiğini göstermektedir. Bu adımların çoğu yalnızca erişilebilirliğe yardımcı olmakla kalmaz, aynı zamanda e-postalarınızı herkes için iyileştirmeye de yardımcı olur.

E-POSTALARINIZI GÖRÜNTÜLER AÇIK VE KAPALI OLARAK ÖNİZLEYİN

E-postalarınızın 60'tan fazla masaüstü, mobil ve web posta istemcisinde, kapalı görseller de dahil olmak üzere nasıl göründüğünü görmek ister misiniz? Litmus'u ücretsiz deneyin!

Şimdi test etmeye başlayın →

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 →