WCAG 1.4.5: Metin Görüntüleri

Bu Kuralın Anlamı

WCAG 1.4.5 — Metin Görselleri (Seviye AA), aynı görsel sunum gerçek metin kullanılarak elde edilebiliyorsa, metin içeren bir görsel yerine gerçek metin kullanmanız gerektiğini belirtir. Bir metin görseli, metin karakterlerinin iletilen içeriğin ana unsuru olduğu her türlü görseldir — örneğin bir başlığın JPEG’i, slogan içeren bir PNG banner veya marka adını stilize bir yazı tipiyle yazan bir GIF logo.

Başarılı ve başarısız durum arasındaki ayrım nettir: Bilgi, HTML’de gerçek karakterleri işaretleyip CSS ile aynı görünümü elde edecek şekilde stillendirilerek iletilebiliyorsa, bunun yerine görsel kullanmak bir başarısızlıktır. Kural, sahnede tesadüfen metin içeren dekoratif görseller veya fotoğraflarla (örneğin bir fotoğraftaki sokak tabelesi) ilgili değildir. Hedefi, içeriğin bizzat metnin kendisi olduğu görsellerdir.

WCAG, metin görsellerine izin verilen iki resmi istisna tanımlar:

• Temel (essential) istisna: Belirli görsel sunum, iletilen bilginin ayrılmaz bir parçasıdır. Klasik örnek bir logotiptir — harf biçimlerinin belirli bir şekilde işlenişi marka kimliğinden ayrılamıyorsa. Stilize harf biçimlerinin bizzat markayı oluşturduğu bir şirket logosu görsel olarak kalabilir.
• Özelleştirilebilir istisna: Metin görseli, kullanıcının gereksinimlerine göre görsel olarak özelleştirilebilir. Bu, kullanıcının görseldeki metnin yazı tipini, boyutunu, rengini ve arka planını değiştirebilmesi anlamına gelir. Pratikte bu istisna gerçek uygulamalarda neredeyse hiç karşılanmaz, çünkü çoğu görsel kullanıcı tercihine göre dinamik olarak yeniden işlenemez.

Bu ölçütün NEYİ zorunlu kılmadığını vurgulamak önemlidir: metin içeren tüm görselleri yasaklamaz. Tarihi bir belgenin fotoğrafı, kanıt olarak kullanılan bir ekran görüntüsü veya eksen etiketlerinin veri görselleştirmenin parçası olduğu bir grafik görseli bu kuralın birincil hedefi değildir; ancak alternatif metin (WCAG 1.1.1) yine de içeriklerini tanımlamalıdır. Odak, tasarımcının yalnızca estetik nedenlerle, CSS ile aynı sonucun elde edilebileceği durumlarda, stillendirilmiş metni raster veya vektör görsel olarak sunmayı tercih ettiği örneklerdir.

Başarısızlıklarda en sık rol oynayan HTML öğeleri arasında başlıklar, banner’lar, harekete geçirici mesaj (call-to-action) butonları, gezinme etiketleri, referans alıntıları ve tanıtım metinleri için kullanılan <img> etiketleri bulunur. Metni <text> öğeleri yerine path olarak gömen SVG dosyaları da bir sorundur; çünkü bu karakterler tarayıcı tarafından seçilemez, yeniden boyutlandırılamaz veya yeniden akıtılamaz.

Neden Önemlidir

Metin bir raster görselin içine gömüldüğünde sabit bir bitmap’e dönüşür. Tarayıcı görseli büyütüp küçültebilir, ancak metni yeniden akıtamaz, yazı tipini değiştiremez, kalınlığını artıramaz veya piksel düzeyinde gömülü olanın ötesinde renk kontrastını değiştiremez. Bu durum, çeşitli engelli kullanıcı grupları için ciddi engeller yaratır.

Düşük görme yetisine sahip kullanıcılar genellikle tarayıcı yakınlaştırmasına, işletim sistemi metin ölçeklendirmesine veya özel büyütme yazılımlarına güvenir. Gerçek metin, herhangi bir yakınlaştırma düzeyinde net bir şekilde ölçeklenir; metin görseli ise bulanıklaşır ve pikselleşir, yüksek büyütmede okunamaz hale gelir. Dünya genelinde yaklaşık 2,2 milyar kişinin bir tür görme bozukluğu vardır ve bunların çoğu ekran okuyucu yerine birincil başa çıkma stratejisi olarak yakınlaştırma veya büyütme kullanır.

Disleksi veya diğer okuma güçlükleri olan kullanıcılar, yazı tiplerini değiştirmek, harf aralığını artırmak ve yüksek kontrastlı renk şemalarına geçmek için sıklıkla tarayıcı eklentileri veya yardımcı teknolojiler kullanır. Bu özelleştirmelerin hiçbiri metin görsellerinde işe yaramaz — pikseller değiştirilemez. OpenDyslexic veya geniş aralıklı bir sans-serif yazı tipine ihtiyaç duyan bir kullanıcı, PNG olarak sunulmuş bir başlığa bunu uygulayamaz.

Özel renk şemalarına ihtiyaç duyan kullanıcılar — fotofobi, migren bozuklukları veya kontrast hassasiyetleri olanlar dahil — işletim sistemlerini yüksek kontrastlı veya ters renk moduna ayarlayabilir. CSS metni bu sistem düzeyindeki geçersiz kılmalara yanıt verir; metin görselleri ise yanıt vermez ve renkler beklenmedik şekilde tersine çevrildiğinde okumak daha da zor hale gelebilir.

Somut bir senaryo düşünün: Bir Türk e-ticaret sitesi, marka stil rehberinde kullanılan özel display yazı tipini korumak için kampanya başlıklarını JPEG görseller olarak sunuyor. Düşük görme yetisine sahip bir kullanıcı tarayıcısını %200’e yakınlaştırıyor. Ürün görselleri kabul edilebilir şekilde büyürken, kampanya başlığı — bir görsel — bulanık bir piksel yığınına dönüşüyor. Kullanıcı promosyonu okuyamıyor ve indirimi kaçırıyor. Aynı yazı tipi @font-face ile sunulup gerçek bir <h2> öğesine uygulanmış olsaydı, vektör tabanlı yazı tipi işleme sonsuz ölçeklenebilir olduğundan metin herhangi bir yakınlaştırma düzeyinde net kalacaktı.

Erişilebilirliğin ötesinde, gerçek metin kullanmanın ölçülebilir SEO faydaları vardır. Arama motoru tarayıcıları metin düğümlerini doğrudan indeksler; görsellerin metin içeriğini OCR olmadan güvenilir şekilde çıkaramazlar. PNG içine gömülü bir başlık, Google’ın sıralama algoritması için görünmezdir. Gerçek metne geçmek, aynı içerik için anahtar kelime indekslemesini ve sayfa sıralamasını iyileştirebilir.

İlgili Axe-core Kuralları

WCAG 1.4.5 manuel test gerektirir. Aşağıda açıklanan nedenlerden dolayı, metin görsellerini güvenilir şekilde tespit eden tek bir otomatik axe-core kuralı yoktur.

• Manuel test gerekli — özel bir otomatik kural yok: Otomatik araçlar bir <img> öğesinin var olduğunu ve bir alt özniteliğine sahip olduğunu tespit edebilir, ancak bu görselin görsel içeriğinin ağırlıklı olarak metin olup olmadığını belirleyemez. Bunu yapmak, sayfadaki her görsel için görüntü tanıma / OCR gerektirir; bu da hesaplama açısından maliyetli ve bağlama bağımlıdır. Bir sayfayı tarayan bir araç, sahnede tesadüfen kelimeler içeren bir tabelenin fotoğrafı ile kasıtlı olarak oluşturulmuş bir başlık görselini ayırt edemez. Bir görselin, CSS ile stillendirilebilecek gerçek HTML metni yerine stilize metin sunmak amacıyla var olup olmadığını değerlendirmek için insan yargısı gereklidir.
• Renk kontrastı kurallarından kısmi sinyal: color-contrast gibi axe-core kuralları, DOM metin düğümleri ve hesaplanmış CSS renk değerleri üzerinde çalıştıkları için, metin görsellerinin içindeki metinde tetiklenmez. Bir metin görselinin kontrastı yetersizse, otomatik kontrast kontrolü bunu sessizce gözden kaçırır. Bu, metin görsellerinin hem 1.4.5 hem de 1.4.3 (Asgari Kontrast) kriterlerini aynı anda otomatik bir uyarı olmadan ihlal edebileceği anlamına gelir — kapsamlı manuel denetimler yapmanın güçlü bir nedenidir.
• SVG’de path olarak metin: Bir SVG, metni <text> öğeleri yerine kontur path’leri (<path> öğeleri) olarak dışa aktardığında, axe-core bu path’lerin kelime oluşturduğunu bilemez. Metnin konturlara dönüştürülüp dönüştürülmediğini ve bunun yerine web yazı tipi uygulanmış gerçek bir <text> öğesi olması gerekip gerekmediğini belirlemek için SVG kaynak kodunun manuel incelenmesi gerekir.

Nasıl Test Edilir

1. Temel olarak otomatik bir tarama çalıştırın. Sayfadaki işaretlenmiş sorunları belirlemek için axe DevTools (tarayıcı eklentisi) veya Chrome DevTools içindeki Lighthouse’u kullanın. Her iki araçta da 1.4.5’e özel bir kural olmasa da, tarama çıktısı görsellerde eksik alt metni veya metin düğümlerinde başarısız renk kontrastı gibi ilgili sorunları ortaya çıkarabilir. İşaretlenen görselleri not edin — bunlar manuel inceleme adaylarıdır.
2. Sayfadaki tüm görselleri görsel olarak inceleyin. Sayfayı bir tarayıcıda açın ve sistematik olarak her <img> öğesine, her satır içi SVG’ye, her CSS arka plan görseline ve her canvas öğesine bakın. Her biri için şu soruyu sorun: Bu görselin birincil amacı metin göstermek mi? Cevap evetse, bir sonraki adıma geçin.
3. CSS’in aynı sonucu sağlayıp sağlayamayacağını kontrol edin. 2. adımda belirlenen her görsel için şu soruyu sorun: Bir web yazı tipi (@font-face) ile CSS özellikleri (renk, metin gölgesi, harf aralığı, gradyan arka plan) bir araya getirilerek görsel olarak eşdeğer bir sonuç üretilebilir mi? Cevap evetse, logotip istisnası geçerli olmadığı sürece metin görseli bir başarısızlıktır.
4. Logotip istisnalarını doğrulayın. Bir site logotip istisnası iddia ediyorsa, görselin gerçekten harf biçimi tasarımının marka kimliğinden ayrılamadığı bir marka logosu olduğundan, yalnızca marka yazı tipinde ayarlanmış bir başlık olmadığından emin olun.
5. Tarayıcı yakınlaştırmasıyla test edin. Tarayıcıyı %200 ve %400’e yakınlaştırın (Ctrl/Cmd + veya tarayıcı ayarlarını kullanarak). Sayfadaki metnin net kalıp kalmadığını gözlemleyin. Metin görselleri bulanıklaşır veya pikselleşir; gerçek metin net kalır. Bu test, aynı anda hem 1.4.5 ihlallerini hem de ilgili yeniden akış (reflow) sorunlarını (WCAG 1.4.4 ve 1.4.10) kontrol eder.
6. SVG kaynak kodunu inceleyin. Herhangi bir SVG’ye sağ tıklayın ve “Kaynağı Görüntüle”yi seçin veya tarayıcı DevTools’u kullanarak SVG DOM’unu inceleyin. Metin içeriğinin, harf konturlarını çizen <path> öğeleri yerine <text> öğeleri kullandığını doğrulayın. Tüm metin path’lere dönüştürülmüşse, SVG metin görseliyle aynı soruna sahiptir.
7. Bileşik etkiyi anlamak için bir ekran okuyucu ile test edin. Firefox ile NVDA, macOS/iOS’ta Safari ile VoiceOver veya Chrome ile JAWS kullanın. Metin görsellerine gidin ve alt özniteliğinin metin içeriğini doğru şekilde ilettiğini doğrulayın. Anlamlı bir alt özniteliği WCAG 1.1.1’i (Metin Dışı İçerik) karşılasa da 1.4.5 başarısızlığını çözmez — metin hâlâ kullanıcı tarafından özelleştirilebilir değildir. Her iki sorunu da ayrı ayrı belgeleyin.
8. Özel bir kullanıcı stil sayfası veya tarayıcı eklentisi uygulayın. Yazı tiplerini geçersiz kılmak ve yazı tipi boyutunu küresel olarak artırmak için Stylus gibi bir tarayıcı eklentisi yükleyin veya Firefox’un yerleşik kullanıcı stil sayfası özelliğini kullanın. Gerçek metin değişir; metin görselleri değişmez. Bu, okuma güçlüğü olan kullanıcıların tercih ettikleri yazı tiplerini uyguladıklarında yaşadıklarını doğrudan simüle eder.

Nasıl Düzeltilir

Dekoratif banner başlığı — Hatalı

<!-- Hata: Pazarlama başlığı, özel bir yazı tipini korumak için JPEG olarak sunuluyor -->
<div class='hero'>
  <img src='summer-sale-heading.jpg' alt='Summer Sale — Up to 50% Off' />
</div>

Dekoratif banner başlığı — Doğru

<!-- Düzeltildi: Aynı özel yazı tipi @font-face ile sunulup gerçek bir başlığa uygulanıyor.
     Metin artık seçilebilir, ölçeklenebilir ve kullanıcı tarafından özelleştirilebilir. -->
<style>
  @font-face {
    font-family: 'BrandDisplay';
    src: url('/fonts/brand-display.woff2') format('woff2');
    font-display: swap;
  }
  .hero-heading {
    font-family: 'BrandDisplay', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    color: #c0392b;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  }
</style>

<div class='hero'>
  <h1 class='hero-heading'>Summer Sale — Up to 50% Off</h1>
</div>

Konturlu metin içeren SVG — Hatalı

<!-- Hata: Metin, SVG dışa aktarımında path'lere dönüştürülmüş,
     karakterleri metin olarak erişilemez ve metin gibi ölçeklenemez hale getiriyor -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'>
  <!-- 'Accsible' kelimesinin harflerini çizen onlarca <path> öğesi -->
  <path d='M10 60 L20 20 L30 60 ...' fill='#003087' />
</svg>

Konturlu metin içeren SVG — Doğru

<!-- Düzeltildi: SVG, web yazı tipi referanslı gerçek bir <text> öğesi kullanıyor.
     Metin artık indekslenebilir, seçilebilir ve ölçeklenebilir. -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'
     role='img' aria-label='Accsible'>
  <defs>
    <style>
      .svg-label {
        font-family: 'BrandDisplay', sans-serif;
        font-size: 48px;
        fill: #003087;
      }
    </style>
  </defs>
  <text class='svg-label' x='10' y='60'>Accsible</text>
</svg>

Metin içeren CSS arka plan görseli — Hatalı

<!-- Hata: Buton etiketi, gerçek bir metin düğümü değil,
     arka plan görselinin parçası -->
<a href='/shop' class='cta-button'></a>

<style>
  .cta-button {
    display: block;
    width: 200px;
    height: 60px;
    background: url('shop-now-button.png') no-repeat center;
    background-size: cover;
  }
</style>

Metin bindirmeli CSS arka plan görseli — Doğru

<!-- Düzeltildi: Buton, CSS ile stillendirilmiş gerçek bir metin düğümü kullanıyor.
     Arka plan görseli tamamen dekoratif (gradyan veya doku). -->
<a href='/shop' class='cta-button'>Shop Now</a>

<style>
  .cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #ffffff;
    font-family: 'BrandDisplay', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
  }
</style>

Logotip — Kabul edilebilir istisna

<!-- Kabul edilebilir: Belirli harf biçimi tasarımının
     bizzat marka kimliği olduğu bir logotip. Alt metin, metin içeriğini doğru şekilde iletir.
     CSS, el çizimi harf biçimlerini çoğaltamaz. -->
<a href='/' aria-label='Accsible — Home'>
  <img src='accsible-logo.svg'
       alt='Accsible'
       width='160'
       height='48' />
</a>

Yaygın Hatalar

• Tasarım taslağında Google Fonts’ta bulunmayan bir yazı tipi kullanıldığı için sayfa başlıkları için JPEG veya PNG kullanmak — doğru çözüm, başlığı bir görsele gömmek değil, yazı tipini @font-face kullanarak WOFF2 dosyası olarak kendi sunucunuzda barındırmaktır.
• Figma veya Photoshop gibi tasarım araçlarından tüm hero bölümlerini tek bir düz görsel olarak dışa aktarmak; bu, tüm metinleri, butonları ve etiketleri tek bir raster dosyaya gömer. Her metin öğesi ayrı bir HTML düğümü olmalıdır.
• Sunucu tarafındaki yazı tipi yükleme bağımlılıklarından kaçınmak için SVG metnini dışa aktarım sırasında path’lere dönüştürmek. Bu, metnin erişilebilirliğini ve aranabilirliğini ortadan kaldırır. Bunun yerine CSS yazı tipi referanslı <text> öğeleri kullanın.
• Tanıtım veya yasal metni (örneğin şartlar ve koşullar, fiyatlandırma veya yarışma kuralları) tam yerleşim kontrolünü korumak için bir görselin içine yerleştirmek. Kullanıcıların okuması gereken her metin gerçek HTML metni olmalıdır.
• Her marka metni için logotip istisnasını iddia etmek — istisna yalnızca gerçek logo işareti için geçerlidir, markanın yazı tipinde ayarlanmış herhangi bir başlık veya etiket için değil. Helvetica Neue ile yazılmış bir başlık logotip değildir.
• Doğru bir alt özniteliği sağlayıp bunun 1.4.5 başarısızlığını çözdüğünü varsaymak — çözmez. Alt metin, WCAG 1.1.1’i (Metin Dışı İçerik) karşılar ancak metin görselini kullanıcı tarafından özelleştirilebilir hale getirmez; bu da 1.4.5’in ayrı bir gerekliliğidir.
• Görsel efekt için stillendirilmiş metni HTML5 <canvas> öğelerinde render etmek ve DOM’da gerçek metin alternatifi sunmamak. Canvas üzerinde render edilen metin, metin görselleriyle aynı dezavantajlara sahiptir.
• Metni Open Graph veya sosyal paylaşım önizleme görsellerine gömmek ve bu görsellerin sayfada da göründüğünü unutmak (örneğin bir blog yazısında öne çıkan görsel olarak). Öne çıkan görsel dekoratif bağlam ise bu kabul edilebilir olabilir — ancak makalenin birincil başlığıysa, bu bir başarısızlıktır.
• E-posta bülteni şablonlarını göz ardı etmek — e-posta istemcileri tarayıcı WCAG kapsamı dışında olsa da, birçok kuruluş bültenlerini web sayfası olarak yayımlar. Web içeriği olarak gömülen e-posta başlık görsellerindeki metin, 1.4.5’i yine de tetikler.
• Yüksek çözünürlüklü Retina görsellerin sorunu çözdüğünü varsaymak — 2× veya 3× çözünürlüklü bir metin görseli, 1× görselden daha keskin olsa da, metin hâlâ özelleştirilemez, yeniden akıtılamaz ve arama motorları ile yardımcı teknolojiler için görünmez olduğundan 1.4.5’i yine de karşılamaz.

Türkiye’nin Erişilebilirlik Mevzuatıyla İlişkisi

Türkiye’nin 21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete’de yayımlanan 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, Türkiye’de faaliyet gösteren geniş bir yelpazedeki kuruluş için web ve mobil erişilebilirlik standartlarını zorunlu kılar. Genelge, normatif teknik standart olarak WCAG 2.2’ye açıkça atıfta bulunur ve Seviye AA uyumu — WCAG 1.4.5 dahil — Aile ve Sosyal Hizmetler Bakanlığı tarafından verilen Erişilebilirlik Logosuna (Erişilebilirlik Logosu) hak kazanmak için gereklidir. Bu logo, bir dijital ürünün genelgede tanımlanan erişilebilirlik gerekliliklerini karşıladığını gösteren resmi bir sertifikasyon işareti işlevi görür.

Genelge kapsamındaki kuruluşlar, Türkiye’nin dijital ekonomisinin geniş bir kesimini kapsar. Tüm düzeylerdeki kamu kurum ve kuruluşları uyum sağlamak zorundadır; BDDK (Bankacılık Düzenleme ve Denetleme Kurumu) tarafından düzenlenen bankalar ve finans kuruluşları da bu kapsamdadır. Hem kamu hem özel hastaneler ve sağlık hizmeti sağlayıcıları kapsam dahilindedir. Özel sektörde ise e-ticaret platformları, 200.000 veya daha fazla abonesi olan telekomünikasyon operatörleri, seyahat acenteleri, özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MoNE / Milli Eğitim Bakanlığı) tarafından yetkilendirilmiş özel okullar ve eğitim kurumları genelge kapsamına girer.

Bu kuruluşlar için WCAG 1.4.5’in doğrudan ve pratik sonuçları vardır. Birçok Türk e-ticaret ve kurumsal web sitesi, metni raster görseller olarak gömen tanıtım görselleri, özel yazı tipli banner’lar ve kampanya başlıkları kullanır — bu, görsel tasarım araçlarından kaynaklanan web tasarım iş akışlarında yaygın bir uygulamadır. Cumhurbaşkanlığı Genelgesi uyarınca, bu tür uygulamalar Seviye AA uyumsuzluğu oluşturur ve sitenin Erişilebilirlik Logosu’nu elde etmesini veya sürdürmesini engeller. Faiz oranı tablolarını görsel olarak sunan bankalar, bölüm adlarını PNG banner’larda listeleyen hastaneler veya promosyon tarifelerini düz görsel dosyalar halinde sunan telekom operatörleri, bu kritere aykırı olacaktır.

Uyum sağlamak isteyen kuruluşlar, web varlıklarındaki tüm görselleri gömülü metin içeriği açısından denetlemeli, önce yüksek trafik alan sayfaları (ana sayfalar, ürün sayfaları, hizmet açılış sayfaları) dönüştürmeyi önceliklendirmeli ve metin içeriğinin görsel dosyalar içinde teslim edilmesini yasaklayan bir tasarım–geliştirme iş akışı oluşturmalıdır. @font-face ile WOFF2 formatını ve uygun font-display değerlerini kullanan bir web yazı tipi stratejisine yatırım yapmak, tasarımcıların marka yönergelerinin gerektirdiği aynı tipografik zenginliği elde ederken hem WCAG 2.2 Seviye AA’ya hem de Türkiye’nin 2025 erişilebilirlik yükümlülüğüne tam uyumlu kalmalarını sağlayacaktır.