Resimler İçin Metin Alternatifleri

Resimlere metin alternatifleri sağlamak için alt özelliğini kullanma

Alice Boxhall

Dave Gash

Meggin Kearney

Resimler çoğu web sayfasının önemli bir bileşenidir ve elbette, az gören kullanıcılar için özellikle önemli bir noktadır. Ne tür bir metin alternatifine sahip olması gerektiğini anlamak için resmin sayfadaki rolünü dikkate almalıyız. Bu resme bir 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>

Çalışma, 10 kediden 9'unun uyurken sahiplerini sessizce yargıladığını gösteriyor

Sayfada, kedilerin yaygın yargılayıcı davranışlarıyla ilgili bir makaleyi gösteren bir kedi resmimiz var. Ekran okuyucu, bu resmi duyurmak için tam adını ("/160204193356-01-cat-500.jpg") kullanır. Bu cevap doğru, ancak hiç yararlı değil.

Bu resme alternatif olarak, kullanışlı bir metin sunmak için alt özelliğini kullanabilirsiniz. Örneğin, "Kötü bir şekilde uzaya bakan bir kedi."

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">

Daha sonra ekran okuyucu, görselin kısa ve öz bir açıklamasını (siyah VoiceOver çubuğunda gösterilir) duyurabilir ve kullanıcı makaleye geçip geçmeyeceğini seçebilir.

alt ile ilgili birkaç yorum:

• alt, resmin yüklenememesi, web tarama botu tarafından erişilmesi veya ekran okuyucunun karşılaştığı durumlar gibi resim kullanılamadığında kullanılacak basit bir dize belirtmenize olanak tanır.
• alt, yalnızca resim kullanılamadığında kullanıldığından title veya herhangi bir başlık türünden farklıdır.

Faydalı alternatif metin yazmak biraz sanat eseridir. Bir dizenin kullanılabilir bir metin alternatifi olması için, resimle aynı kavramı, aynı bağlamda iletmesi gerekir.

Yukarıda gösterilenlere benzer bir sayfanın masthead'inde bağlantılı logo resmini düşünün. Resmi "The Funion logosu" olarak oldukça doğru bir şekilde açıklayabiliriz.

<img class="logo" src="logo.jpg" alt="The Funion logo">

"Ana sayfa" veya "ana sayfa" yerine daha basit bir metin alternatifi sunmak cazip gelse de bu hem az gören hem de gören kullanıcılara zarar verir.

Ancak, sayfadaki masthead logosunu bulmak isteyen bir ekran okuyucu kullanıcısı düşünün. Buna "home" alternatif değeri vermek aslında daha kafa karıştırıcı bir deneyim oluşturur. Gören bir kullanıcı da ekran okuyucu kullanıcısı olarak aynı zorlukla, site logosunu tıklamanın ne işe yaradığını anlamayla karşılaşır.

Diğer yandan, bir resmi açıklamak her zaman yararlı olmaz. Örneğin, "Ara" metnini içeren bir arama düğmesinin içinde bir büyüteç görseli kullanabilirsiniz. Metin orada olmasaydı resme mutlaka bir "arama" alternatif değeri verirdiniz. Ancak görünür metne sahip olduğumuz için ekran okuyucu "ara" kelimesini alıp sesli okur. Bu nedenle, resimdeki alt değerinin aynı olması gereksizdir.

Ancak alt metnini dışarıda bırakırsak muhtemelen bunun yerine resim dosyası 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. Ekran okuyucu, resmi tamamen atlar.

<img src="magnifying-glass.jpg" alt="">

Özetlemek gerekirse tüm resimler bir alt özelliğine sahip olmalıdır ancak hepsinde metin olması gerekmez. Önemli resimlerde, resmin ne olduğunu kısa ve öz bir şekilde açıklayan açıklayıcı alternatif metinler yer almalı, dekoratif resimlerde ise boş alt özellikler (yani alt="") olmalıdır.