Gerçek metin ve metin görselleri: ADA

Gerçek metin, metin görselinden iyidir

Aynı görsel sonuç gerçek metinle elde edilebiliyorsa, metin görseli yerine gerçek metin kullanın. İki istisna vardır. Kullanıcı görseli ihtiyaçlarına göre özelleştirebiliyorsa (yazı tipi, boyut, renk, arka plan) ya da o sunum biçimi, bir logotip gibi, zorunluysa metin görseli kabul edilir.

Kelimelerin resmi, metin kadar güvenilir biçimde temiz bir şekilde büyütülemez, yüksek kontrast için yeniden renklendirilemez, dar ekranda yeniden akıtılamaz, çevrilemez, aranamaz ya da sesli okunamaz. Alternatif metin kelimeleri ekran okuyucuya iletebilir, ama daha büyük harflere ya da farklı renklere ihtiyaç duyan kişi için hiçbir şey yapmaz.

Görsel olarak kaydedilen duyurular, saatler ve menüler

Kamu siteleri, yayınlamanın en hızlı yolu olduğu için bir tasarım aracından ya da kelime işlemciden dışa aktarılmış görsellerle doludur: kapanış duyurusu, çalışma saatleri, ücret tablosu, kayıt son tarihi olan bir broşür. Yakınlaştıran vatandaş bulanık pikseller görür; özel renk düzeni kullanan ziyaretçi ise saydam zeminde siyah metin görür.

Taranmış duyurular ilgili bir durumdur. Vatandaşların ihtiyaç duyduğu bir duyurunun tek kopyası taranmış bir sayfaysa, içindeki metin fiilen resmin içine kilitlenmiştir. Bunun dosyalara nasıl uygulandığı için belgeler ve PDF sayfasına bakın.

Kapanış duyuruları ve çalışma saatleri

Aşağıdaki alternatif metin kelimeleri taşır, ama ziyaretçi onları büyütemez, yeniden renklendiremez ya da yeniden akıtamaz; uzun bir alternatif metin bloğu da kötü bir okuma deneyimidir. Gerçek işaretleme yapıyı korur.

<img src="kutuphane-saatleri.png"
     alt="Merkez Kütüphane: Pzt-Cum 9-20, Cmt 10-17, Pazar kapalı. Resmî tatillerde kapalıdır.">

<h2>Merkez Kütüphane çalışma saatleri</h2>
<ul class="saatler">
  <li>Pazartesi - Cuma: 09.00 - 20.00</li>
  <li>Cumartesi: 10.00 - 17.00</li>
  <li>Pazar: kapalı</li>
</ul>
<p>Resmî tatillerde kapalıdır.</p>

Görsellerden oluşan gezinme etiketleri

Görsel olan menü öğeleri etiketi tek bir boyuta ve renge kilitler ve ziyaretçinin metin ayarlarını izlemez.

<a href="/izinler"><img src="nav-izinler.png" alt="İzinler"></a>
<a href="/ruhsatlar"><img src="nav-ruhsatlar.png" alt="Ruhsatlar"></a>

<a class="nav-link" href="/izinler">İzinler</a>
<a class="nav-link" href="/ruhsatlar">Ruhsatlar</a>

Gerçek metni arka plan görselinin arkasına saklamak

Yaygın bir kısayol, metni gizleyip onun görselini göstermektir. Bu hâlâ bir metin görselidir ve görseller kapatılır kapatılmaz ya da renkler geçersiz kılınır kılınmaz çalışmaz. Bunun yerine gerçek metni biçimlendirin.

h2.izin-basligi {
  background: url("izin-baslik.png") no-repeat;
  height: 60px;
  text-indent: -9999px;
}

h2.izin-basligi {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2rem;
  letter-spacing: 0.01em;
}

İstisnaların geçerli olduğu yerler

Logolar ve marka adları muaftır; tam görünümün zorunlu olduğu görseller de, örneğin bir yazı tipi örneği ya da taranmış tarihî bir mektup. Onlara adı içeren kısa bir alternatif metin verin; örneğin alt="mühür" yerine alt="Riverton Belediyesi". Daha büyük bir resmin içindeki sokak tabelası fotoğrafı da sorun değildir, çünkü önemli ölçüde başka görsel içerik taşıyan bir görselin parçasıdır.

Uygulamalarda metin görselleri

Aynısı uygulama ekranları için de geçerlidir. Tek bir bitmap olarak dışa aktarılmış bir tanıtım afişi, sistem metin boyutuyla ölçeklenmez.

// SwiftUI
Image("kayit-afisi")
    .accessibilityLabel("Yaz kayıtları 1 Haziran'da başlıyor")

// SwiftUI
VStack(alignment: .leading) {
    Text("Yaz kayıtları").font(.title2).bold()
    Text("1 Haziran'da başlıyor")
}

// Jetpack Compose
Image(painterResource(R.drawable.kayit_afisi),
      contentDescription = "Yaz kayıtları 1 Haziran'da başlıyor")

// Jetpack Compose
Column {
    Text("Yaz kayıtları", style = MaterialTheme.typography.titleLarge)
    Text("1 Haziran'da başlıyor")
}

Nasıl test edilir

1. Sayfada kelime içeren resimleri arayın. Yüzde 300'e yakınlaştırın ve hangi harflerin bulanıklaştığına bakın; gerçek metin keskin kalır.
2. Metni fareyle seçip kopyalamayı deneyin. Yapamıyorsanız büyük olasılıkla bir görseldir.
3. Görselleri kapatın ya da yüksek kontrastlı bir tema uygulayın ve tüm bilginin yerinde olduğunu kontrol edin.
4. Süslemeyi kontrol edin. Üzerinde kelime olan bir arka plan görseli ancak kelime bilgi taşıyorsa önemlidir.

Sık yapılan hatalar ve yayın öncesi liste

• Bir metin görselini telafi etmek için uzun alternatif metin yapıştırmak.
• Süslü bir yazı tipini gerekçe göstermek; web yazı tipleri aynı görünümü gerçek metinle verir.
• Orijinal tasarımı tek kaynak olarak bırakmak, böylece her metin düzeltmesinin yeni bir resim anlamına gelmesi.
• "Bu logo sorun değil" düşüncesini her afiş için izin saymak.

Yayına almadan önce:

• Başlıklar, menüler, düğmeler ve duyurular gerçek metin.
• Metin görselleri yalnızca logolar ya da zorunlu sunumlar için var.
• Kalan her metin görselinin onunla eşleşen bir metin alternatifi var.
• Sayfa içeriği yakınlaştırmaya, özel renklere ve kapalı görsellere dayanıyor.

Kaynaklar

• Understanding SC 1.4.5: Images of Text (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.