Bu Kural Ne Anlama Gelir

WCAG 1.4.5, aynı görsel sonuç stillendirilmiş HTML metniyle elde edilebiliyorsa metin görüntülemek için görsel kullanımını engeller. Metin görselleri bozulmadan yeniden boyutlandırılamaz, yeniden akıtılamaz, kullanıcı stil sayfalarıyla ayarlanamaz ve alt metin olmadan ekran okuyucular tarafından doğrudan erişilemez. Ölçüt, logotipler ve metnin belirli görsel sunumunun aktarılan bilgi için zorunlu olduğu durumlar için istisna tanır.

Modern CSS kapsamlı tipografik kontrol sağlar — @font-face ile özel yazı tipleri, metin gölgeleri, metin üzerinde gradyanlar, harf aralığı ve daha fazlası — metin görselleri kullanmanın çoğu nedenini ortadan kaldırır. Gerçek metin kullanıldığında, tarayıcı oluşturmanın tüm avantajlarını devralır: ölçekleme, yeniden akış, çeviri, arama ve kopyala-yapıştır.

Neden Önemlidir

Metin görselleri birden fazla engel oluşturur. Yakınlaştırıldığında bulanıklaşır, okunabilirlik için belirli yazı tiplerine veya renklere ihtiyaç duyan kullanıcılar tarafından özelleştirilemez ve görüntü alanı değiştiğinde yeniden akıtılmaz. Yazı tiplerini geçersiz kılması gereken disleksili kullanıcılar veya belirli renk kombinasyonlarına ihtiyaç duyan az gören kullanıcılar için metin görselleri aşılmaz engellerdir.

Metin görselleri ayrıca SEO'yu olumsuz etkiler, sayfa yükleme süresini artırır ve her metin değişikliği yeni bir görsel oluşturmayı gerektirdiğinden içerik güncellemelerini zorlaştırır.

İlgili axe-core Kuralları

1.4.5 için otomatik axe-core kuralı yoktur çünkü metin görsellerini tespit etmek, metnin HTML olarak oluşturulup oluşturulamayacağını belirlemek için insan değerlendirmesi gerektirir. Bu, manuel denetim ölçütüdür.

Nasıl Test Edilir

Sayfayı görsel olarak tarayarak görsel olarak oluşturulmuş metin içeriğini arayın — afiş metinleri, başlıklar, düğmeler, gezinme öğeleri.
Bulunan her metin görseli için aynı görsel sunumun CSS ile stillendirilmiş HTML metniyle elde edilip edilemeyeceğini belirleyin.
Metin görselinin aynı bilgiyi aktaran uygun alt metne sahip olup olmadığını kontrol edin.
Logo ve marka adlarının (muaf olan) kalan tek metin görselleri olduğunu doğrulayın.

Nasıl Düzeltilir

Metin görsellerini stillendirilmiş HTML ile değiştirin. Modern CSS neredeyse her metin efektini kopyalayabilir:

/* Dekoratif başlık için görsel yerine */
.fancy-heading {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* Stillendirilmiş düğme için görsel yerine */
.styled-button {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid currentColor;
  border-radius: 4px;
  padding: 0.75em 1.5em;
}

Görsel tabanlı başlıklar yerine özel tipografi için @font-face kullanın:

<style>
  @font-face {
    font-family: 'BrandFont';
    src: url('/fonts/brand.woff2') format('woff2');
    font-display: swap;
  }

  .brand-heading {
    font-family: 'BrandFont', serif;
    font-size: 2.5rem;
  }
</style>

<h1 class="brand-heading">Hizmetimize Hoş Geldiniz</h1>

Sık Yapılan Hatalar

CSS ile aynı efekt elde edilebilirken stillendirilmiş başlıklar veya afiş metinleri için görsel dosyaları kullanmak.
Stillendirilmiş HTML düğmeleri yerine görsel olarak oluşturulan düğmeler veya harekete geçirici çağrı öğeleri.
CSS stilli HTML metin yerine görsel haritalar olarak oluşturulan gezinme öğeleri.
Canlı metin yerine görsel olarak oluşturulan sosyal medya paylaşım sayıları veya rozetler.
Gövde metninin HTML metin olarak yerleştirilmek yerine görsele gömüldüğü bilgi grafikleri.

1.4.5 Metin Görselleri