Kısa yanıt
Alternatif metin (alt metin), bir görselin HTML alt özniteliğinde tutulan yazılı betimlemesidir. Ekran okuyucu görseli göstermek yerine bu metni duyurur; görsel yüklenemezse tarayıcı onu ekranda gösterir. Bir altyazı ya da etiket değil, metin karşılığıdır.
Alternatif metin nedir?
Alt metin var; çünkü görsel görme yoluyla iletişim kurar. Görseli göremeyen birinin aynı anlama başka bir yoldan ulaşması gerekir. Alt metin o başka yoldur — bir altyazı ya da etiket değil, metin karşılığıdır.
Alt metnin yalnızca içeriği değil anlamı betimlemesi gerekmesinin nedeni budur. Satış artışını gösteren bir grafiğin fotoğrafı için alt metin "yukarı giden bir çizgi" değil, satışların arttığını söylemelidir. Görsel bir olgu aktarır; alt metin de aynı olguyu aktarmak zorundadır.
alt özniteliği (alt="") nedir?
alt özniteliği, alternatif metni fiilen tutan HTML özelliğidir. Doğrudan görsel etiketinin üzerine şöyle yazılır:
<img src="ceyrek-rapor.png" alt="Gelirin çeyrekten çeyreğe %12 arttığını gösteren sütun grafiği">Öznitelik ile içindeki metin iki farklı şeydir. İnsanların terimi kullanırken genellikle kastettiği içerik "alt metin"dir; alt özniteliği ise onu taşıyan kaptır. Bu ayrım özellikle tek bir durumda önem kazanır: görsel tamamen dekoratifse doğru hamle özniteliği hiç yazmamak değil, içini boş bırakarak alt="" yazmaktır. Boş öznitelik ekran okuyucuya "bu görsel dekoratif, atla" der. Eksik öznitelik ise ekran okuyucuya hiçbir şey söylemez; bazı ekran okuyucular bu durumda dosya adını okumaya düşer.
Alternatif metin neden önemli?
Alternatif metin, görsel olmayan yoldan gezinen bir kullanıcı ile görselin anlamı arasındaki tek köprüdür. O olmadan anlam kişiye zayıflamış biçimde değil, hiç ulaşmaz.
Bu boşluk somut ve pratik biçimlerde ortaya çıkar. Alt metni olmayan bir ürün fotoğrafı, çevrim içi alışveriş yapan ekran okuyucu kullanıcısının ne satın almak üzere olduğunu anlayamaması demektir. Alt metni olmayan bir grafik, raporu okuyan görme engelli bir analistin verinin ne gösterdiğini bilememesi demektir. Alt metni olmayan bir simgeden kurulu "gönder" butonu, ekran okuyucunun ne işe yaradığını belirtmeden yalnızca "buton" demesi demektir — tek tıklık bir eylem tahmine dönüşür.
Alt metnin hukuki bir boyutu da var. WCAG'nin metin alternatifi gereksinimi, erişilebilirlik şikâyetlerinde ve davalarında en sık anılan ölçütlerden biridir; tam da eksik alt metnin kolay tespit edilip savunulmasının zor olması nedeniyle. Yine de bu hukuki risk bir sonuçtur; alt metnin asıl önemi, bir görselin anlamını göremeyen birine ulaştıran mekanizma olmasıdır.
Alternatif metinden kimler fayda görür?
Alt metin ekran okuyucu kullanıcıları için yazılır ama etkisi bu tek grubun ötesine geçer ve her grup farklı bir nedenle fayda görür.
Görme engelli ve az gören ekran okuyucu kullanıcıları
Birincil faydayı görür: görselin sözlü karşılığını, sayfada görselin durduğu noktada duyarlar.
Görselleri kapalı kullananlar
Yavaş ya da kotalı bağlantılarda yaygındır; alt metni, görselin yükleneceği yerde görünür yer tutucu metin olarak görürler.
Bilişsel ya da dikkatle ilgili engeli olan kullanıcılar
Ekranı görebilseler de bazen metinden konuşmaya araçlarına başvururlar; alt metin bu araçlara okunacak doğru bir şey verir, hiçbir şey vermemek yerine.
Arama motorları
Bir tarayıcı botu pikselleri insan gibi yorumlayamadığı için görselin ne gösterdiğini anlamak üzere alt metni kullanır — bu ikincil bir fayda, alt metnin amacı değil.
Geçici olarak her kullanıcı
Bir görsel yüklenemediğinde — bozuk bağlantı, yavaş sunucu, dosya yolunda yazım hatası — boş bir kutu yerine alt metin göründüğü için herkes fayda görür.
Ekran okuyucular alternatif metni nasıl kullanır?
Ekran okuyucu sayfayı görsel olarak işlenen hâliyle değil, erişilebilirlik ağacı üzerinden okur. Ekran okuyucu kullanıcısı bir görsele geldiğinde — bağlantı ya da butonsa sekme tuşuyla, değilse içerikte gezinerek — ekran okuyucu görselin yerine alt özniteliğinin değerini duyurur.
Ekran okuyucuların çoğu alt metni okumadan önce öğenin bir görsel olduğunu da duyurur; yani "sahilde gün batımı" yerine "görsel, sahilde gün batımı" der. İyi yazılmış alt metnin asla "görseli" ya da "fotoğrafı" diye başlamamasının nedeni budur; ekran okuyucu zaten "görsel" dedi, tekrar etmek duyuruyu hiçbir fayda sağlamadan ikiye katlar.
alt özniteliği boşsa (alt="") ekran okuyucuların çoğu görseli tamamen atlayıp bir sonraki içeriğe geçer ve onu dekoratif sayar. Öznitelik tamamen eksikse davranış daha tutarsızdır: bazı ekran okuyucular bunun yerine dosya adını duyurur; boş ya da betimleyici alt metnin önlemeyi amaçladığı kafa karıştırıcı ve anlamsız çıktı tam da budur.
İyi bir alternatif metin nasıl yazılır?
İyi alt metin tek bir soruyu yanıtlar: bu görsel, görsel olmayan yoldan gezinen bir kullanıcının aksi hâlde kaçıracağı neyi aktarıyor? Diğer her şey bundan türer.
Görünüşten değil işlevden başlayın
Bir ürün fotoğrafı yalnızca "kırmızı bir su ısıtıcısı" değildir; bağlama göre yararlı ayrıntı karedeki fiyat etiketi, gösterilen döküm ağzı tasarımı ya da sadece "kırmızı elektrikli su ısıtıcısı" olabilir.
Kısa tutun
Resmî bir karakter sınırı yok ama bazı ekran okuyucular tarihsel olarak çok uzun duyuruları kesmiştir. Bir iki cümle genellikle yeterlidir; daha ayrıntılı bilgi alt özniteliğine değil, yakındaki metne aittir.
Betimlemeyi görselin amacına uydurun
Aynı köprü fotoğrafı bir seyahat blogunda "gün batımında Golden Gate Köprüsü'nün kuş bakışı görüntüsü" gerektirebilir; küçük dekoratif bir başlık görseli olarak ise yalnızca "Golden Gate Köprüsü" ya da hiçbir şey yeterlidir.
Asla genel geçer bırakmayın
"Image123.jpg", "fotoğraf" ya da "grafik", kullanıcıya orada bir şey olduğunu söyler ama ne olduğunu söylemez; üzerine hareket edilecek bir şey olmadan dikkat harcattığı için çoğu zaman hiç alt metin olmamasından beterdir.
Hangi görsel türleri alternatif metin gerektirir?
Her görsel aynı tür alt metni gerektirmez; çünkü her görsel sayfada aynı amaca hizmet etmez. WCAG görselleri birkaç işlevsel kategoriye ayırır ve her biri "iyi" alt metnin neye benzediğini değiştirir.
Bilgilendirici görseller
Dekorasyonun ötesinde anlam katan belirli bir içerik aktarır — fotoğraf, illüstrasyon ya da ekran görüntüsü. Ayarlar menüsünün ekran görüntüsü, genel geçer "yazılım ekran görüntüsü" değil, ilgili menüyü ve ayarı adıyla belirten bir alt metin gerektirir.
İşlevsel görseller
Bir denetim işlevi görür — eylem tetikleyen buton, bağlantı ya da simge. Alt metin görünüşü değil eylemi ya da hedefi betimlemelidir: "büyüteç" değil "Ara".
Dekoratif görseller
Bilgi taşımadan görsel biçim katar. Betimleyici metin ya da eksik öznitelik yerine boş bir alt="" almalıdır; böylece ekran okuyucuya sessizce atlaması söylenir.
Karmaşık görseller
Bir çizelge, grafik ya da şema genellikle kısa bir alt özniteliğinin taşıyabileceğinden fazla bilgi içerir. Alt metinde kısa bir özet verin, tüm ayrıntıyı bir veri tablosuna ya da yakındaki paragrafa koyun.
İyi alternatif metin örnekleri nelerdir?
Aynı görselin iyi ve kötü ele alınışını görmek farkı somutlaştırır.
E-ticaret sayfasındaki bir ürün fotoğrafı
ZAYIF — alt="ayakkabi.jpg"
DAHA İYİ — alt="Erkek kahverengi deri oxford ayakkabı, yandan görünüm"
Zayıf sürüm ekran okuyucu kullanıcısına dosya adından başka bir şey vermez. İyi sürüm tam olarak ne göreceğini söyler.
Bir kalıcı penceredeki yalnızca simgeden oluşan "kapat" butonu
ZAYIF — alt="X simgesi"
DAHA İYİ — alt="İletişim kutusunu kapat"
Zayıf sürüm simgenin biçimini betimler. İyi sürüm basıldığında ne olduğunu betimler.
Blog bölümleri arasındaki dekoratif ayraç
ZAYIF — alt="yeşil dalgalı çizgi dekoratif ayraç"
DAHA İYİ — alt=""
Zayıf sürüm hiçbir bilgi taşımayan bir şeyin baştan sona dinlenmesine yol açar. İyi sürüm ekran okuyucunun onu tamamen atlamasını sağlar.
Aylara göre site trafiğini gösteren sütun grafiği
ZAYIF — alt="grafik"
DAHA İYİ — alt="Sütun grafiği: trafik Ocak'tan Haziran'a istikrarlı yükseldi, zirve Haziran'da"
İyi sürüm ana çıkarımı alt metne koyar ve tüm sayılar için yanındaki veri tablosuna yönlendirir.
Yaygın alt metin hataları neler?
alt özniteliğini tamamen yazmamak
Boş bırakmaktan daha kötüdür; çünkü eksik öznitelik bazı ekran okuyucuların sessiz kalmak yerine dosya adını duyurmasına yol açar.
"Görseli" ya da "fotoğrafı" diye başlamak
Ekran okuyucu alt metni okumadan önce öğenin bir görsel olduğunu zaten duyurur; bu, halihazırda duyulan bilgiyi tekrar eder.
SEO için alt metni anahtar kelimeyle doldurmak
Hizmet etmesi gereken ekran okuyucu kullanıcısına faydasızdır ve arama motorları bu kalıbı betimleme değil manipülasyon olarak tanımakta giderek ustalaştı.
Dekoratif görsellere betimleyici alt metin vermek
Arka plan dokusu ya da süs grafiği alt="" gerektirir; böylece ekran okuyucu okuma akışını kesmek yerine onu atlar.
Görünür altyazıyı alt özniteliğinde tekrarlamak
Altyazı görselin ne gösterdiğini zaten söylüyorsa, aynı alt metin ekran okuyucunun aynı cümleyi arka arkaya iki kez duyurmasına yol açar.
Alt metni asıl noktayı gömecek kadar uzun yazmak
Bir görsel genellikle bir paragrafa değil, kısaca aktarılmış tek bir net fikre ihtiyaç duyar; üstelik bazı ekran okuyucular çok uzun duyuruları kesebilir.
Alt metin, görsel betimlemesi ve altyazı
Bu üç terim sık sık birbirinin yerine kullanılır ama her biri farklı bir okura hitap eder, sayfada farklı bir yerde durur ve farklı bir iş yapar.
| Alt metin, görsel betimlemesi ve altyazı | Alt Metin | Görsel Betimlemesi | Altyazı |
|---|---|---|---|
| Kimin için | Ekran okuyucu kullanıcıları ve görselleri yüklenemeyen herkes | Görsel kısa bir alt özniteliğine sığmayacak kadar karmaşık olduğunda ekran okuyucu kullanıcıları | Gören ve görmeyen tüm okurlar |
| Nerede durur | HTML alt özniteliğinin içinde; gören kullanıcılara görünmez | Çevredeki metinde, bağlantı verilen bir sayfada ya da aria-describedby ile atıf yapılan yerde | Sayfada görünür biçimde, görselin hemen altında ya da yanında |
| Ne yapar | Görselin kendisinin yerini alır | alt özniteliğinin taşıyamayacağı kadar uzun ayrıntıyı açar | Görselin tek başına göstermediği bağlamı, kaynağı ya da yorumu ekler |
| Uzunluk | Genellikle bir cümle ya da daha kısa | İçeriğin gerektirdiği kadar | Değişir; ama tipik olarak görünür ve göz gezdirilebilir |
Örtüşme gerçek bir kafa karışıklığı yaratır; çünkü altyazı herkese görünür, ekran okuyucu kullanıcıları da ona normal metin olarak ulaşır — bu da bazen altyazının alt metni gereksiz kıldığı sanısına yol açar. Kılmaz. Ekran okuyucu alt özniteliğini görselin kendisinde, altyazıyı ise ayrı bir metin parçası olarak duyurur; altyazı var diye alt özniteliğini atlamak, okur biraz sonra altyazıya ulaşana kadar görselin hiçbir şeyle ya da bir dosya adıyla duyurulması demektir.
WCAG alternatif metni nasıl tanımlar?
WCAG alternatif metni doğrudan 1.1.1 Metin Dışı İçerik başarı ölçütünde, A düzeyinde ele alır — temel uyum düzeyi ve erişilebilirlik yasaları ile standartlarında en tutarlı biçimde atıf yapılan düzey. Ölçüt, tüm metin dışı içeriğin aynı amaca hizmet eden bir metin alternatifine sahip olmasını şart koşar; kısa bir istisna listesiyle birlikte: tamamen dekoratif içerik, CAPTCHA (alt metin değil, alternatif bir test yöntemi gerektirir) ve alt metnin testi geçersiz kılacağı içerikler.
WCAG'nin kendi ifadesi burada önemlidir; çünkü yalnızca "bir betimleme" istemez — eşdeğer bir amaca hizmet eden metin alternatifi ister. Bu, birebir görsel betimlemeden daha yüksek bir çıtadır. Sayfadaki asıl amacı bir müşteri görüşünü aktarmak olan bir fotoğraf için "gülümseyen bir kadın fotoğrafı"nın çoğu zaman yanlış alt metin olmasının nedeni budur; eşdeğer amaç, fotoğrafı betimlemekle değil, kimin konuştuğunu ve ne söylediğini adlandırmakla aktarılır.
WCAG bir teknik standarttır, tek başına yasa değildir. Yasal olarak zorunlu olup olmadığı hangi yasanın ya da düzenlemenin devrede olduğuna ve hangi yargı bölgesinin geçerli olduğuna bağlıdır; bazı yasalar doğrudan atıf yapar, bazılarıyla bağ ancak içtihat ya da satın alma politikası üzerinden kurulur. Neredeyse hepsinde ortak olan şey, 1.1.1'in metin alternatifi gereksiniminin temel bir beklenti olarak karşımıza çıkmasıdır; hiçbir yasa onu adıyla yazmasa bile pratik bir zorunluluk saymaya değer olmasının nedeni budur.
Sık sorulan sorular
Her görselin bir alt özniteliğine ihtiyacı vardır. İçine ne yazılacağı görsele bağlıdır: bilgilendirici ya da işlevsel görseller için betimleyici metin, tamamen dekoratif olanlar için boş değer (alt=""). Hiçbir durumda özniteliği hiç yazmamak doğru değildir.
Görselin anlamını aktaracak kadar uzun, göz gezdirilebilir kalacak kadar kısa — genellikle bir cümle ya da daha az. Bir görsel bundan fazla açıklama gerektiriyorsa ek ayrıntıyı alt özniteliğini uzatmak yerine yakındaki metne koyun.
Olabilir; çünkü arama motorları görsel içeriğini anlamak için onu kullanır. Ancak doğruluk yerine ağırlıklı olarak anahtar kelimeler için yazılan alt metin, hem hizmet etmesi gereken ekran okuyucu kullanıcılarına hem etkilemesi beklenen arama motorlarına kötü okunur.
Davranış ekran okuyucuya göre değişir ama eksik bir alt özniteliği çoğu zaman ekran okuyucunun dosya adını okumaya düşmesi ya da görseli hiçbir betimleme olmadan duyurması demektir; görsel olmayan yoldan gezinen kullanıcı neyle karşılaştığını bilemez.
Hayır. Altyazı, her okur için görselin yakınında gösterilen görünür metindir. Alt metin ise gören kullanıcılara görünmez ve özellikle görseli göremeyen biri için onun yerine geçmek üzere vardır. Bir görselde ikisi de olabilir ve çoğu zaman olmalıdır.
Hayır — özniteliği atlamak yerine boş değerle, alt="" biçiminde yazmalıdır. Ekran okuyucuya görseli atlamasını güvenilir biçimde söyleyen şey bu boş değerdir; eksik öznitelik aynı sonucu garanti etmez.
