Resimler için metin alternatifleri sağlamak üzere alt özelliğini kullanma
Resimler, çoğu web sayfasının önemli bir bileşenidir ve az gören kullanıcılar için özel bir sabitlenme noktasıdır. 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 okuyucu, bu resmi gerçek adını ("/160204193356-01-cat-500.jpg") kullanarak duyurur. Bu doğru ancak hiç faydalı değil.
Bu resme alternatif olarak kullanışlı bir metin sağlamak için alt özelliğini kullanabilirsiniz. Örneğin, "Tehlikeli bir şekilde uzaya 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) okuyabilir ve kullanıcı makaleye geçip geçmeyeceğine karar verebilir.
alt hakkında birkaç yorum:
alt; resmin kullanılamadığında (ör. resim yüklenemediğinde, web tarama botu tarafından erişildiğinde veya bir ekran okuyucuyla karşılaştığında) 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 düşünün. Resmi "Funion logosu" olarak tanımlayabiliriz.
<img class="logo" src="logo.jpg" alt="The Funion logo">
Metin için "ana sayfa" veya "ana sayfa" yerine daha basit bir metin alternatifi sunmak cazip gelebilir, ancak bu, hem az gören hem de görme engelli kullanıcılara zarar verir.
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, bir arama düğmesinin içindeki "Ara" metnini içeren 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, yalnızca boş bir alt özelliği kullanabilirsiniz. Bu durumda 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="").