Resimler için metin alternatifleri sağlamak üzere alt özelliğini kullanma
Resimler, çoğu web sayfasının önemli bir bileşenidir ve elbette az gören kullanıcılar için özellikle sorunlu bir konudur. Bir resmin sayfadaki rolünü göz önünde bulundurarak ne tür bir metin alternatifi kullanacağınızı belirlemeniz gerekir. Bu resme göz atın.
<article>
<h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
<img src="imgs/160204193356-01-cat-500.jpg">
</article>
Bir çalışma, 10 kediden 9'unun uyurken sahiplerini sessizce yargıladığını gösteriyor
Sayfada, kedilerin iyi bilinen yargılayıcı davranışıyla ilgili bir makaleyi gösteren bir kedi resmi var. Ekran okuyucular bu resmi, "/160204193356-01-cat-500.jpg"
olan gerçek adını kullanarak duyurur. Bu doğru ancak hiç faydalı değil.
Bu resme yararlı bir metin alternatifi sağlamak için alt
özelliğini kullanabilirsiniz. Örneğin, "Uzay boşluğuna tehditkar bir şekilde bakan bir kedi."
<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">
Ardından ekran okuyucu, resmin kısa bir açıklamasını (siyah VoiceOver çubuğunda gösterilir) duyurabilir ve kullanıcı makaleye geçip geçmeyeceğine karar verebilir.
alt
hakkında birkaç yorum:
alt
, resmin kullanılamadığı her durumda (ör. resim yüklenemezse, web'i tarayan bir bot tarafından erişilirse veya ekran okuyucu tarafından karşılaşılırsa) kullanılacak basit bir dize belirtmenize olanak tanır.alt
,title
'ten veya herhangi bir altyazı türünden farklı olarak yalnızca resim mevcut değilse kullanılır.
Faydalı alternatif metin yazmak biraz sanattır. Bir dizenin kullanılabilir bir alternatif metin olabilmesi için resimle aynı bağlamda aynı kavramı iletmesi gerekir.
Yukarıda gösterilenler gibi bir sayfanın masthead'inde bağlı bir logo resmi kullanabilirsiniz. Resmi "Funion logosu" olarak tanımlayabiliriz.
<img class="logo" src="logo.jpg" alt="The Funion logo">
"Ana sayfa" veya "ana sayfa" gibi daha basit bir metin alternatifi kullanmak cazip gelebilir ancak bu, hem az gören hem de gören kullanıcılara kötü bir hizmet sunar.
Ancak sayfadaki masthead logosunu bulmak isteyen bir ekran okuyucu kullanıcısını düşünün. Bu logoya "ana sayfa" alt değeri vermek aslında daha kafa karıştırıcı bir deneyim oluşturur. Görme engeli olmayan kullanıcılar da ekran okuyucu kullanıcıları gibi site logosunu tıklamanın ne anlama geldiğini öğrenmek gibi bir zorlukla karşılaşır.
Öte yandan, bir resmi açıklamak her zaman yararlı değildir. Örneğin, "Arama" metnini içeren bir arama düğmesinin içindeki büyüteç resmini düşünün. Metin yoksa bu resme kesinlikle "arama" değerini vermeniz gerekir. Ancak görünür metne sahip olduğumuz için ekran okuyucu "arama" kelimesini bulup sesli okur. Bu nedenle, resimde aynı alt
değeri gereksizdir.
Ancak alt
metnini çıkartırsak bunun yerine büyük olasılıkla resim dosyasının adını duyacağımızı biliyoruz. Bu hem işe yaramaz hem de kafa karıştırıcı olabilir. Bu durumda, boş bir alt
özelliği kullanmanız yeterlidir. Ekran okuyucu, resmi tamamen atlar.
<img src="magnifying-glass.jpg" alt="">
Özetlemek gerekirse tüm resimlerde alt
özelliği bulunmalıdır ancak tüm resimlerde metin bulunması gerekmez. Önemli resimlerin alternatif metinleri, resmin ne olduğunu kısaca açıklayan açıklayıcı metinler olmalıdır. Dekoratif resimlerin alternatif metinleri ise boş olmalıdır (alt=""
).