ADA Kapsamında Görseller, Simgeler ve Grafikler için Alt Metin

Alt metin olmadığında ekran okuyucu ne söyler?

Görme engelli bir sakin, ilçe belediyesinin ruhsat portalını açıyor. Ekran okuyucu, düğme olması gereken yerde "bağlantı, artı nokta png" diyor, ardından şantiye planının yerinde dört kez "grafik" okuyor. Sayfa yüklenmemiş değil; kendini anlatmamış.

WCAG 1.1.1 (A seviyesi), kullanıcıya sunulan tüm metinsel olmayan içeriğin eşdeğer amaca hizmet eden bir metin alternatifi olmasını ister. Metin, duyular arasında geçişen biçimdir: sesli okunabilir, braille ile gösterilebilir, büyütülebilir, çevrilebilir ve aranabilir. Burada önemli olan "birebir tarif" değil, eşdeğer amaçtır.

Ölçüt birkaç durumu ayrı ayrı sayar:

• Denetimler ve girdiler: metin alternatifi denetimin adıdır; etkinleştirince ne olacağını söyler.
• Zamana bağlı ortam: en azından sesin veya videonun ne olduğunu belirten metin. Altyazı ve betimleme 1.2 ölçütlerinin konusudur.
• Testler ve alıştırmalar: içerik metne çevrilince geçersiz olacaksa amacını tarif edin.
• Duyusal deneyimler: yalnızca yaşanmak için var olan müzik veya sanat eseri için betimleyici bir etiket.
• CAPTCHA: amacını anlatan metin ve farklı bir duyuya hitap eden ikinci bir biçim.
• Süs, biçimlendirme, görünmez içerik: yardımcı teknolojinin atlayacağı şekilde hazırlayın.

Alt metni seçmek için telefon testi

Sayfayı bir arkadaşınıza telefonda sesli okuduğunuzu düşünün. Bu görsele geldiğinizde ne söylerdiniz? Cevap alt metindir. Dürüst cevap "hiçbir şey, sadece süs" ise görsel dekoratiftir ve alt metni boş olmalıdır.

• Bilgi katan fotoğraf: sayfanın bağlamında önemli olanı, genellikle tek cümleyle yazın. "Bize ulaşın" sayfasındaki yeni kütüphane girişi: "Doğu girişteki rampa ve otomatik kapılar".
• Bağlantı veya düğme olan görsel: resmi değil hedefi ya da eylemi anlatın. "Mavi damla simgesi" değil, "Su faturanızı ödeyin".
• Grafik veya harita: alt metinde kısa bir ad, yakınında ise veriyi ya da güzergâhı tablo veya liste olarak verin.
• Dekoratif görsel: alt="" ya da CSS arka planı kullanın; böylece atlanır.
• İçinde yazı olan görsel: alt metin yazıyı aynen tekrarlar (görselin hiç var olması gerekip gerekmediği için 1.4.5 ölçütüne bakın).

"Görseli", "resmi" gibi sözcüklerle başlamayın; ekran okuyucu rolü zaten duyurur.

Kamu sitelerinde en sık nerede aksıyor?

Alt metin eksikliği, ABD Adalet Bakanlığı'nın (DOJ) yaygın web erişilebilirlik engelleri listesinde yer alır ve nedeni anlaşılır. Kamu siteleri yıllarca elle yüklenen görsellerle şişer: meclis fotoğrafları, resim olarak yapıştırılmış taranmış duyurular, sandık yeri haritaları, PNG olarak dışa aktarılmış bütçe grafikleri ve tedarikçilerin yaptığı portallardaki simge düğmeleri.

En çok zarar veren örnekler bir görevi tıkayanlardır. Adı olmayan "Yenile" simgesi, erişilebilir alanların yalnızca üzerinde gösterildiği bir kamp alanı haritası ya da kamuya açık bir oturumun saat ve yerini taşıyan bir afiş görseli, kişiyi bilgisiz veya eylemsiz bırakır. Title II, WCAG 2.1 A ve AA seviyelerini işaret ettiğinden, bir şehrin veya ilçenin sunduğu sayfadaki eksik metin alternatifi doğrudan 1.1.1'e aykırıdır. Bunun öteki yaygın sorunlarla ilişkisi için yaygın engeller sayfasına da bakabilirsiniz.

Web kalıpları: dosya adlarından anlamlı adlara

Önce denetimlerden başlayın; çünkü adsız denetim en çok aksatan durumdur. Ad, eylemi anlatmalıdır.

<a href="/ruhsat/yeni">
  <img src="/img/arti-daire.png">
</a>

<a href="/ruhsat/yeni">
  <img src="/img/arti-daire.png"
       alt="Yapı ruhsatı başvurusu başlat">
</a>

Karmaşık görsellerin iki katmanı olur: özellikte kısa bir ad, okuyucunun ulaşabileceği metin olarak da asıl içerik.

<img src="cam-ormani-harita.png" alt="harita">

<figure>
  <img src="cam-ormani-harita.png"
       alt="Çam Ormanı kamp alanı haritası, A-C halkaları">
  <figcaption>
    Erişilebilir alanlar: A4, A9, B2 ve C1.
    <a href="/parklar/cam-ormani/alanlar">Tüm alan listesi</a>
  </figcaption>
</figure>

Süs sessiz olmalıdır. Boş alt bilinçli bir bildirimdir, unutulmuş bir eksik değil.

<img src="dalga-ayirici.png"
     alt="dekoratif dalga ayırıcı görsel">

<img src="dalga-ayirici.png" alt="">

<!-- ya da, daha iyisi, CSS içinde tutun -->
.bolum-ayirici { background: url(dalga-ayirici.png) repeat-x; }

Ulaşım ve hizmet uygulamaları için mobil kalıplar

Yerel uygulamaların da aynı yükümlülüğü vardır. SwiftUI'da yalnızca simge içeren düğmeye açık bir etiket gerekir; salt dekoratif görseller de öyle işaretlenmelidir.

Button(action: varislariYenile) {
    Image("yenile-oklari")
}

Button(action: varislariYenile) {
    Image(decorative: "yenile-oklari")
}
.accessibilityLabel("Otobüs varışlarını yenile")

Jetpack Compose'da düğme içindeki simgeye contentDescription = null vermek, denetimin tek adını silmek demektir. Açıklamayı kullanıcının işlettiği denetime koyun.

IconButton(onClick = { varislariYenile() }) {
    Icon(Icons.Default.Refresh, contentDescription = null)
}

IconButton(onClick = { varislariYenile() }) {
    Icon(
        Icons.Default.Refresh,
        contentDescription = "Otobüs varışlarını yenile"
    )
}

Test: önce dinleyin, sonra denetleyiciyi çalıştırın

1. Sayfayı bir ekran okuyucuyla (NVDA, JAWS, VoiceOver veya TalkBack) açın. Tüm bağlantı ve düğmelerde Tab ile gezin; her biri dosya adı veya "etiketsiz" değil, bir amaç duyurmalı.
2. Grafiklere göre gezin. Duyurulan her görsel, gören ziyaretçinin öğrendiğini size de anlatıyor mu? Dekoratif görseller atlanıyor mu?
3. Tarayıcıda görselleri kapatın veya geliştirici araçlarının erişilebilirlik ağacında her görselin üzerine gelin. Görünen metin, alt metnin yerini tutması gereken şeydir.
4. Ancak sonra otomatik denetleyici çalıştırın. Eksik özelliği bulur; ama "grafik"in yararlı bir tanım olup olmadığına karar veremez. Temiz bir rapor sayfanın erişilebilir olduğu anlamına gelmez.

Denetimlerde tekrar eden hatalar

• Alt metin olarak dosya adı: alt="IMG_4471.jpg".
• Bir galerinin tüm görsellerine aynı açıklamanın yapıştırılması.
• Simge düğmesinin eylemi yerine görünüşünün anlatılması.
• Görünür metin açıklamanın olması gereken yere özelliğe uzun paragraf yazmak.
• Dekoratif görsellerde özelliği hiç koymamak; bazı araçlar dosya yolunu okur.
• Çevresindeki metin "büyük ölçüde" anlatıyor diye anlamlı bir görseli dekoratif işaretlemek.

Şu durumda yayına alın

• Her img, svg, görsel düğme ve görüntü haritası alanının bilinçli bir metin alternatifi var ya da bilinçli olarak boş.
• Denetimler eylemleriyle adlandırılmış.
• Grafik ve haritaların verisi aynı sayfada metin olarak da sunuluyor.
• Ana görev akışında yapılan ekran okuyucu turunda "grafik" veya dosya adı olarak duyurulan hiçbir şey yok.

Kaynaklar

• Understanding SC 1.1.1: Non-text Content (W3C), İngilizce, yeni sekmede açılır
• H37: Using alt attributes on img elements (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.