E-posta erişilebilirliği

Erişilebilir bir e-posta bülteni, ekran okuyucu kullanan birinin takip edebildiği, görseller kapalıyken de anlaşılan, 320 piksellik bir telefon ekranında ve karanlık modda okunur kalan bir e-postadır. Yeni bülten ve bildirim şablonları kuruyor, şu an gönderdiklerinizi düzeltiyorum. Yani: sunum amaçlı işaretlenmiş yerleşim tabloları, gerçek başlıklar, alternatif metinler, görselin içine gömülmüş yazı yerine canlı metin, okunur kontrast, nereye gittiğini söyleyen bağlantı metinleri, tanımlı dil, karanlık mod stilleri ve düz metin sürümü; hepsi Gmail’in mesajı kırptığı boyutun çok altında. Gönderim aracınıza aktaracağınız HTML’i, axe-core raporları ve denetimlerin neyi kapsamadığını açıkça yazan bir listeyle teslim ediyorum.

Aşağıdakilerden biri sizin durumunuzsa doğru yerdesiniz:

• AB’deki tüketicilere satış yapan bir marka ya da e-ihracatçısınız; bülten ve sipariş e-postalarınız da Avrupa Erişilebilirlik Yasası hazırlığınızın parçası.
• Bir e-ticaret siteniz var ve tasarımcınız her bülteni indirim oranı, kod ve son tarih içine yazılmış tek büyük bir görsel olarak hazırlıyor.
• Ajanssınız; müşterileriniz için Mailchimp, Klaviyo ya da Brevo’da şablon kuruyorsunuz ve bir müşteri ya da ihale WCAG AA istiyor.
• E-postalarınız telefonda yana kayıyor ya da karanlık modda okunmuyor; yeniden tasarıma para vermeden önce nedenini öğrenmek istiyorsunuz.

• Görseller kapalı: e-posta programınızda görsellerin otomatik yüklenmesini kapatın (Gmail’in web sürümünde: Ayarlar → Tüm ayarları görün → Genel → Resimler) ve son kampanyanızı açın. İndirimi, kodu ve son tarihi hâlâ okuyabiliyor musunuz?
• Bağlantı metinleri: yalnızca bağlantıları okuyun. “Buraya tıklayın” ve “Devamı”, bağlantıdan bağlantıya geçen bir ekran okuyucu kullanıcısına hiçbir şey söylemez.
• Telefon: yana kaydırmanız gerekiyorsa yerleşim sabit genişlikte kurulmuş demektir.
• Boyut: Gmail’de mesajın sonunda mesajın kırpıldığını söyleyen bir uyarı varsa HTML fazla büyüktür; sonrasındaki her şey, çoğu zaman abonelikten çıkma bağlantısı da, gizlenir.

Teknik ayrıntılar için okumaya devam edin. Aşağıda: bir HTML e-postayı neyin erişilebilir yaptığı, kurgusal bir mağaza bülteni üzerinde ölçülmüş bir öncesi–sonrası örneği (bütün dosyalar indirilebilir) ve AB’ye satış yapanları ilgilendiren kurallar. Doğrudan başlamak isterseniz bir bülteninizi bana iletin, neyin yanlış olduğunu söyleyeyim.

Erişilebilir bir e-posta, mesajını görsellerde ve süslemede değil, canlı ve yapılandırılmış HTML metinde taşır; çünkü e-posta programları görselleri engeller, CSS’i ayıklar ve mesajınızı kendi sayfalarının içine yerleştirir.

E-postalarda yerleşim hâlâ tablolarla kurulur; çünkü Windows’taki Outlook HTML’i Word motoruyla gösterir. role="presentation" taşımayan bir yerleşim tablosu, anlamsız satır ve sütunlarıyla bir veri tablosu gibi duyurulabilir; sunum amaçlı işaretlenince ızgara atlanır, yalnızca içerik okunur.

Başlık gibi görünecek şekilde biçimlendirilmiş bir tablo hücresine başlıklar arasında gezinerek ulaşılamaz. Gerçek h1–h3 öğeleri, okuyucunun bülteni web postasında da bölüm bölüm gezmesini sağlar. Telefonda sütunlar alt alta dizildiğinde kaynak koddaki sıra okuma sırası olur; bu yüzden kod, mesajın okunması gereken sırayla yazılır.

Birçok e-posta programı, okuyucu izin verene kadar görselleri göstermez. İndirim, kod ve tarih yalnızca bir görselin içindeyse okuyucu boş bir kutu görür, ekran okuyucu da işe yarar hiçbir şey duyurmaz. Bilgi taşıyan görsellerin ne gösterdiğini söyleyen bir alternatif metni olmalıdır (WCAG 2.2, 1.1.1); süs görsellerine alt="" verilir, böylece atlanırlar. Butonlar buton resmi değil, Outlook için VML yedeği olan biçimlendirilmiş bağlantılardır.

Metnin zeminine karşı kontrastı en az 4,5:1, büyük metinde 3:1 olmalıdır (WCAG 2.2, 1.4.3); bültenlerin en göze batan şekilde kaldığı yer 9–10 piksellik açık gri altbilgilerdir. Bağlantı metinleri nereye gittiğini söyler: “Seramik kupayı inceleyin”, “Abonelikten çıkın” gibi. Böylece bağlantı listesi tek başına da anlamlı olur (WCAG 2.2, 2.4.4).

lang ve dir bilgisini <html> öğesine ve ayrıca mesajı saran kapsayıcıya yazıyorum; çünkü web postası programları <html> öğesini çoğu zaman atar. Dili tanımsız Türkçe bir bülten, ekran okuyucunun varsayılan diliyle, çoğu zaman İngilizce kurallarla okunur. <title> ve ön izleme metni mesaja bir ad ve bir ön izleme satırı verir. Karanlık modun kendi paleti olmalıdır: bazı uygulamalar prefers-color-scheme stillerine uyar, bazıları renkleri kendi başına tersine çevirir. multipart/alternative bir mesajdaki düz metin bölümü HTML göstermeyen okuyuculara ve programlara hizmet eder; tek tıkla çıkışı destekleyen bir List-Unsubscribe başlığı (RFC 8058) e-posta programının kendi “abonelikten çık” düğmesini göstermesini sağlar. Gmail, HTML’i yaklaşık 102 KB’ı aşan mesajları kırpar.

Bu, kurgusal bir bülten üzerinde yapılmış, ölçülmüş bir örnek çalışmadır; bir müşteri işi değildir. Görsel ağırlıklı, tipik bir kampanya e-postası kurdum, ölçtüm, erişilebilir olarak yeniden kurdum ve başsız (headless) Chromium’da yeniden ölçtüm. Gerçek bir e-posta programı ya da ekran okuyucu kullanılmadı; sınırlar aşağıda. Bütün dosyalar indirilebilir.

• İçerik: her şey kurgusal. Bülten, “Örnek Mağaza — Ekim kampanyası” adlı uydurma bir mağazaya ait. Mağaza, adresi, ürünleri, fiyatları, EKIM40 kodu ve ayrılmış, çözümlenemeyen ornek-magaza.example alan adı gerçek değildir. İki sürümün altbilgisi de bunu söylüyor; .eml dosyası ayrıca bir X-Example-Notice başlığı taşıyor.
• Görseller: bu örnek için çizdiğim basit şekiller; sosyal medya simgeleri marka logosu değil, harfli genel dairelerdir. Üçüncü taraf içerik kullanılmadı; dosyalar örnek olarak yeniden kullanılabilir.
• Araçlar: axe-core 4.13.0; wcag2a, wcag2aa, wcag21a, wcag21aa, wcag22a ve wcag22aa etiketleriyle, Chromium 141.0.7390.37 içinde (başsız, Playwright 1.56.0 ile). Yanında renk çiftleri, yazı boyutları, alternatif metinler, bağlantılar, tablolar, görseller kapalı görünüm, 320 piksellik görüntü alanı ve taklit edilmiş karanlık mod için kendi denetim betiğim.

Bülten metni Türkçedir; raporlar ve kanıt görselleri İngilizcedir.

Öncesinde axe ayrıca elle incelenmesi gereken bir madde listeledi (bypass); sonrasında hiç yok. WCAG gereği olmayan “iyi uygulama” kurallarından landmark-one-main ve region yeniden kurulumdan sonra da görünüyor. Bunları bilerek bıraktım: e-posta programı mesajı kendi sayfasına ve kendi yer işaretlerine sarar; e-postanın içine konan bir <main> öğesi işe yaramaz. Yeni sürüm bunun yerine aria-label ile birlikte role="article" kullanıyor.

Her renk çiftiyle birlikte açık ve karanlık mod için tam kontrast tabloları, ZIP içindeki axe özetinde.

• Kampanya bilgisi: yalnızca 600×300’lük, alternatif metni olmayan bir görselin içindeydi. Şimdi düz #7c2d12 zemin üzerinde canlı metin; üstündeki kapak görseli süs amaçlı (alt="").
• Buton ve görseller: görsel buton, sunum tablosu içinde biçimlendirilmiş bir bağlantı oldu; Outlook için VML v:roundrect yedeğiyle. Logo bağlantısı “Örnek Mağaza ana sayfa” diye okunuyor, ürünlerin açıklayıcı alternatif metinleri var, sosyal medya simgeleri görünür bağlantı metninin yanında süs olarak işaretli.
• Bağlantılar: “Buraya tıklayın” ve “Devamı”; “Seramik kupayı inceleyin”, “Abonelikten çıkın” gibi metinlere dönüştü.
• Renk, boyut ve yapı: #1f2937, #4b5563 ve #9a3412 renkli 16 px gövde metni; h1–h3; lang="tr" dir="ltr", başlık (title) ve ön izleme metni; en fazla 600 px genişlikte esnek bir kapsayıcı, sütunlar 620 px ve altında alt alta.
• Karanlık mod ve mesajın kendisi: color-scheme meta etiketleri, bir prefers-color-scheme: dark paleti, [data-ogsc] kuralları ve logonun arkasında beyaz bir zemin; List-Unsubscribe ve tek tıkla çıkış başlıklı bir multipart/alternative .eml içinde düz metin bölümü.

Ekran okuyucu kullanılmadı (NVDA, JAWS, VoiceOver, TalkBack); axe kodu denetler, bir ekran okuyucunun web postası içinde ne duyurduğunu değil. Hiçbir otomatik denetim alternatif metnin iyi olup olmadığını, okuma sırasının anlamlı olup olmadığını ya da dilin sade olup olmadığını değerlendiremez; bunları elle inceledim. Kontrast betiğim görselin içindeki ya da üzerindeki metni ölçemez. Boyut ham dosyanın boyutudur; gönderim araçları izleme kodu ekler, Gmail sınırına kalan pay gerçekte daha küçüktür. Teslim edilebilirlik, kimlik doğrulama ve hukuki denetim bu örneğin parçası değildi.

HTML, .eml, düz metin ve JSON dosyaları yalnızca ZIP içinde. Raporlar İngilizcedir.

Aktarmaya hazır bir HTML şablonu, onun düz metin sürümünü ve neyin ölçülüp neyin ölçülmediğini gösteren raporları teslim ediyorum.

• Erişilebilir HTML şablon; mevcut sürümünüzdeki birleştirme etiketleri (merge tag) ve şablon değişkenleri yerinde kalır.
• Onayınıza sunulan düz metin sürümü ve ön izleme metni.
• Öncesi–sonrası axe-core raporları, açık ve karanlık mod için kontrast tabloları; masaüstü genişliğinde, 320 px’te, görseller kapalıyken ve taklit edilmiş karanlık modda ekran görüntüleri.
• Bilerek bırakılanları ve denetimlerin göremediklerini de içeren bulgu raporu; ayrıca sonraki kampanyaları hazırlayacak kişi için tek sayfalık bir not.

Mailchimp, Klaviyo ve Brevo kendi HTML’inizi özel şablon olarak kabul eder; Shopify bildirimleri mağaza yönetim panelinde kod olarak, WooCommerce e-postaları ise temanızdaki şablon geçersiz kılmalarıyla (template override) düzenlenir. HTML’i siz ya da geliştiriciniz aktarır ve kendinize bir test gönderirsiniz; ters giden bir şey olursa düzeltirim. Litmus ya da Email on Acid gibi bir e-posta test aracında hesabınız varsa, onun programlardan aldığı ekran görüntülerini isteğe bağlı bir adım olarak incelerim; yoksa rapor bunu bir sınır olarak belirtir.

Önce gerçek bir e-posta gönderirsiniz; fiyat, iş başlamadan sabitlenir.

1. Bir bülten iletin ya da HTML dışa aktarımını gönderin: sizi en çok düşündüren kampanya ya da sipariş e-postası. Neyin gerçekten yanlış olduğunu, düzeltmeye değmeyecek kısımlar dahil söylerim.
2. Kapsamı ve sabit fiyatı alırsınız; o şablon ya da setin tamamı için.
3. İşi yaparım. Önizleme olduğu belirtilmiş bir sürüm, axe-core raporu, ekran görüntüleri ve onayınıza sunulan renk ya da metin değişikliklerinin listesi size gelir.
4. Onayınızla son dosyalar teslim edilir: HTML, düz metin sürümü ve bulgu raporu.

Her işi malzemeyi gördükten sonra fiyatlandırıyorum. E-posta sayısı tek başına emeği belirlemez: bütün kampanyalarınızın kullandığı modüler bir ana şablon, görsellerden kurulmuş üç ayrı bültenden daha kısa sürebilir. İş başlamadan set için sabit fiyat alırsınız; saat ölçen bir sayaç yok. Kampanyalarınız aynı şablondan çıkıyorsa o şablonu düzeltmek genellikle daha ucuz yoldur; öyleyse söylerim.

28 Haziran 2025’ten beri AB’deki tüketicilere sunulan e-ticaret hizmetleri Avrupa Erişilebilirlik Yasası kapsamında. Bunun bülten ve sipariş e-postalarınıza ne ölçüde uzandığı hukuki bir sorudur.

Hukuki not: Bu sayfa işin teknik tarafını anlatır. Yasanın mağazanız ve hangi e-postalarınız için geçerli olduğunu hukuk danışmanınızla netleştirin.

• Avrupa Erişilebilirlik Yasası, (AB) 2019/882 sayılı Direktif, e-ticaret hizmetlerini kapsıyor; üye devletler kendi ulusal yasalarını 28 Haziran 2025’ten beri uyguluyor. Almanya’daki Barrierefreiheitsstärkungsgesetz (BFSG), § 1(3) 5. bentte “Dienstleistungen im elektronischen Geschäftsverkehr”i (elektronik ticaret hizmetleri) sayıyor. Direktif bu hizmetleri web siteleri ve mobil uygulamalar üzerinden tarif ediyor; e-postayı ayrı bir kanal olarak saymıyor.
• Direktifin 4(5). maddesi hizmet sunan mikro işletmeleri muaf tutuyor. Bunun sizin için geçerli olup olmadığına hukuk danışmanınız karar verir.
• Türkiye: “Web Siteleri ve Mobil Uygulamaların Erişilebilirliği” konulu Cumhurbaşkanlığı Genelgesi, elektronik ticaret hizmet sağlayıcıları dahil pek çok kuruluşa web siteleri ve mobil uygulamalarını erişilebilir hâle getirme talimatı veriyor. Genelge web siteleri ve mobil uygulamalar üzerine; bunun e-posta bültenlerinize nasıl yansıyacağını hukuk danışmanınızla değerlendirin.
• Uygulamada teknik ölçüt WCAG 2.2, AA düzeyidir. Web içeriği için yazılmıştır; HTML e-posta da aynı teknolojilerle kurulur.

Türkiye’de kurulu bir mağaza AB kurallarıyla AB’deki tüketicilere yaptığı satışlar üzerinden karşılaşır. Yasa olmasa da hesap aynı: görseller kapalıyken, telefonda ya da karanlık modda okuyucunun göremediği bir kampanya satmaz.

Bu araçlar özel HTML şablonu kabul eder; HTML’i buna göre yazarım. Belirli platformlara aktarımı test etmedim; aktarımı siz ya da geliştiriciniz yapar ve bir test gönderirsiniz. Birleştirme etiketlerinizi korur, aktarımın bozduğunu düzeltirim.

Örnek çalışmada hayır: ölçümler yalnızca başsız Chromium’da yapıldı ve bunu açıkça söylüyorum. Bir e-posta test aracında hesabınız varsa, onun programlardan aldığı ekran görüntülerini isteğe bağlı bir adım olarak incelerim. Yoksa gerçek programlardaki görünüm raporda belirtilen bir sınır olarak kalır.

Hayır ve aksini iddia etmiyorum. Bulgularım koddan, standartlardan, axe-core’dan ve elle incelemeden gelir. Yardımcı teknoloji kullanan kişilerle test ayrıca yaptırılmalıdır.

Bırakılması gereken asıl alışkanlık bu. Örnekte görselleri kapalı bir okuyucu, kampanyanın altı bilgisinden öncesinde 0’ını, sonrasında 6’sını okuyabiliyordu. Görseller süs ya da ürün fotoğrafı olarak kalabilir; kampanyanın kendisi canlı metinde olmalıdır.

Erişilebilir kod biraz ağırlık ekler, ama çok değil. Örnekte HTML 5.543 bayttan 12.137 bayta çıktı; Gmail’in yaklaşık 102 KB’lık kırpma sınırının çok altında. Gönderim araçları izleme kodu eklediği için gerçek dışa aktarımınızın boyutunu da ölçerim.

Bu hukuki bir soru; karar hukuk danışmanınızındır. Direktif e-ticaret hizmetlerini kapsıyor ve onları web siteleri ve uygulamalar üzerinden tarif ediyor, e-postayı ayrıca saymıyor. Ben her durumda WCAG 2.2 AA’ya göre kurar, neyin denetlendiğini belgelerim.

• Erişilebilir PDF (PDF/UA)
• Alt metin ve görsel betimleme
• Erişilebilir renk paleti
• Erişilebilir Word ve PowerPoint
• Erişilebilir grafik ve infografik
• Kolay okunur metin
• VPAT erişilebilirlik uyum raporu
• Gmail’de kurumsal alan adlı e-posta

Tek bir e-posta: sizi en çok düşündüren kampanya, sipariş onayı ya da şablon. Size geldiği hâliyle bana iletin. Neyin yanlış olduğunu, düzeltmeye değmeyecek kısımlar dahil açıkça yazarım.

Ali Karabüyük · Tekirdağ, Türkiye · dünyanın her yerindeki müşterilerle uzaktan çalışıyor · 2004’ten beri belge ve görsel üretimi, 2008’den beri profesyonel olarak.