Bu Kural Ne Anlama Gelir

WCAG 1.4.9, 1.4.5'in AAA düzeyinde sıkılaştırılmış halidir. AA düzeyinde, metin görselleri özelleştirilebilir veya sunum zorunlu ise kabul edilir. AAA düzeyinde özelleştirme istisnası kaldırılır — metin görselleri yalnızca belirli görsel sunumun gerçekten zorunlu olduğu (belirli bir yazı tipini gösteren metin örneği gibi) veya salt dekorasyon durumlarında kullanılabilir.

Pratikte bu, sayfadaki neredeyse tüm metnin CSS ile stillendirilmiş HTML metin olarak oluşturulması gerektiği anlamına gelir. İzin verilen tek metin görselleri logotipler ve tam oluşturmanın bilginin kendisi olduğu durumlardır.

Neden Önemlidir

Bu ölçüt, webi tam metin esnekliğine doğru ilerletir. Tüm metin gerçek HTML metin olduğunda, kullanıcılar yeniden boyutlandırabilir, yeniden akıtabilir, yazı tiplerini değiştirebilir, renkleri ayarlayabilir, çevirebilir, arayabilir ve kopyalayabilir. Bunlar metin görsellerinin imkansız veya eksik hâle getirdiği temel etkileşimlerdir.

AAA uyumluluğunu hedefleyen kuruluşlar için metin görsellerini ortadan kaldırmak, mümkün olan en geniş kullanıcı uyumluluğunu sağlar.

İlgili axe-core Kuralları

1.4.9 için otomatik axe-core kuralı yoktur. 1.4.5 gibi, metin içeren görselleri tanımlamak ve metin sunumunun gerçekten zorunlu olup olmadığını belirlemek için manuel inceleme gerektirir.

Nasıl Test Edilir

Metin içeren görselleri tanımlamak için DevTools kullanarak sayfadaki tüm görselleri denetleyin.
Her metin görseli için sorun: Bu bir logotip mi? Evetse muaftır.
Logo olmayan metin görselleri için sorun: Belirli görsel sunum gerçek bilgi mi? Bir yazı tipinin nasıl göründüğünü gösteriyorsa muaftır. Başlık veya düğmeyse başarısızdır.
Hiçbir işlevsel metnin (başlıklar, düğmeler, gezinme, etiketler) görsel olarak oluşturulmadığını doğrulayın.

Nasıl Düzeltilir

Kalan tüm metin görsellerini HTML'ye dönüştürün. Karmaşık görsel efektler için modern CSS kullanın:

/* Görsel ihtiyaçını ortadan kaldıran metin efektleri */
.outlined-text {
  -webkit-text-stroke: 2px #333;
  color: transparent;
  font-size: 4rem;
  font-weight: 900;
}

.shadowed-text {
  text-shadow:
    3px 3px 0 #e0e0e0,
    6px 6px 0 #c0c0c0;
  font-size: 3rem;
}

.clipped-bg-text {
  background: url('/img/texture.jpg') center/cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 5rem;
  font-weight: 900;
}

Sık Yapılan Hatalar

Arka plan görselleri üzerinde HTML kaplama metni yerine tanıtım metinli görsel afişler kullanmak.
Web yazı tipi olarak mevcut olmayan belirli bir yazı tipi nedeniyle CTA düğmelerini görsel olarak oluşturmak.
Stillendirilmiş blok alıntılar yerine referanslar veya alıntılar için metnin ekran görüntülerini kullanmak.
HTML kaplamaları yerine görsele gömülen bilgi grafiği başlıkları ve etiketleri.
"Zorunlu" ile "tercih edilen" kavramlarını karıştırmak — görsel tabanlı başlık için tasarım tercihi zorunlu değildir.

1.4.9 Metin Görselleri (İstisna Yok)