- Konu sahibi
- #1
İçeriği anlatan bir görsele alternatif metin eklemek için
Temel sözdizimi şöyledir:
Burada
Örneğin bir ürün sayfasında ürünün görünüşünü anlatan görsel için:
Bir haber görseli haberin içeriğini destekliyorsa, açıklama görselin sayfadaki işlevine göre yazılabilir:
Bu örnekte alternatif metin, dosya adını veya teknik ayrıntıları değil, okurun bilmesi gereken görsel içeriğini verir.
Alt metin genellikle kısa, açık ve bağlama uygun olmalıdır. Görselin sayfadaki amacını düşünerek yalnız gerekli bilgiyi yazın.
Alt metnin ayrıntı düzeyi bağlama göre değişebilir. Bir harita görseli yalnızca “Türkiye haritası” bilgisini vermek için kullanılıyorsa bu yeterli olabilir. Haritadaki şehirlerin konumu anlatılıyorsa alternatif metin de bu bilgiyi karşılamalı veya ayrıntılı açıklamanın bulunduğu bir metne yönlendirmelidir.
Görsel bilgi taşımıyor, yalnızca sayfanın görünümünü destekliyorsa boş alternatif metin kullanın:
Boş
Bir görsel bağlantının kendisi olarak kullanılıyorsa alt metin, görselin görünüşünü değil, bağlantının ne yaptığını anlatmalıdır:
Bu durumda
Doğru kullanım:
Burada erişilebilirlik açısından gerekli bilgi
Kodunuzu kaydedip sayfayı tarayıcıda açtığınızda görsel normal biçimde görünür;
Görsel yüklenemediğinde tarayıcı alternatif metni gösterebilir. Bu,
Görsel yalnızca süs amaçlıysa
img etiketine alt özniteliğini yazın. Örneğin <img src="kedi.jpg" alt="Pencere kenarında oturan turuncu kedi">. Görsel yüklenemediğinde veya ekran okuyucu görseli seslendirdiğinde bu metin kullanılır. Görsel yalnızca dekoratifse alt="" yazın; alt özniteliğini tamamen kaldırmayın.Görsele alternatif metin ekleme
Temel sözdizimi şöyledir:
HTML:
<img src="gorsel-dosyasi.jpg" alt="Görselin kısa ve amacına uygun açıklaması">Burada
src görsel dosyasının yolunu, alt ise görselin metinsel karşılığını belirtir. alt metni, görseli göremeyen kişinin sayfadaki bilgiyi mümkün olduğunca aynı amaçla anlayabilmesini sağlamalıdır.Örneğin bir ürün sayfasında ürünün görünüşünü anlatan görsel için:
HTML:
<img src="siyah-kosu-ayakkabisi.jpg" alt="Siyah bağcıklı koşu ayakkabısı">Bir haber görseli haberin içeriğini destekliyorsa, açıklama görselin sayfadaki işlevine göre yazılabilir:
HTML:
<img src="toplanti.jpg" alt="Toplantı masasında konuşan üç kişi">Bu örnekte alternatif metin, dosya adını veya teknik ayrıntıları değil, okurun bilmesi gereken görsel içeriğini verir.
İyi bir alt metin nasıl yazılır?
Alt metin genellikle kısa, açık ve bağlama uygun olmalıdır. Görselin sayfadaki amacını düşünerek yalnız gerekli bilgiyi yazın.
- Görseldeki önemli kişi, nesne veya eylemi belirtin.
- Görselde yazı varsa ve bu yazı anlam taşıyorsa metni alternatif metne aktarın.
- Aynı bilgi metnin hemen yanında zaten açıklanıyorsa alt metni gereksiz yere uzatmayın.
- “Görsel”, “resim” veya “fotoğraf” diye başlamayın; ekran okuyucu zaten bunun bir görsel olduğunu bildirebilir.
- Dosya adını, kamera bilgisini veya anahtar kelime listesini alt metin yerine kullanmayın.
alt="IMG_4821.jpg" dosya adını tekrar eder ancak görselin ne anlattığını açıklamaz. alt="İstanbul Boğazı'nda gün batımı" ise görselin içeriğini doğrudan aktarır.Alt metnin ayrıntı düzeyi bağlama göre değişebilir. Bir harita görseli yalnızca “Türkiye haritası” bilgisini vermek için kullanılıyorsa bu yeterli olabilir. Haritadaki şehirlerin konumu anlatılıyorsa alternatif metin de bu bilgiyi karşılamalı veya ayrıntılı açıklamanın bulunduğu bir metne yönlendirmelidir.
Dekoratif görsellerde ne yazılmalı?
Görsel bilgi taşımıyor, yalnızca sayfanın görünümünü destekliyorsa boş alternatif metin kullanın:
HTML:
<img src="ayirici-cizgi.svg" alt="">Boş
alt değeri, ekran okuyucuya bu görselin içerik olmadığını bildirir. Böylece kullanıcı gereksiz bir dosya adı veya anlamsız açıklama duymaz. Dekoratif bir görsele “dekoratif görsel” yazmak genellikle doğru değildir; bu ifade kullanıcıya faydalı bir içerik sunmaz.Bağlantı içindeki görsellerde alt metin
Bir görsel bağlantının kendisi olarak kullanılıyorsa alt metin, görselin görünüşünü değil, bağlantının ne yaptığını anlatmalıdır:
HTML:
<a href="/profil">
<img src="profil-simgesi.svg" alt="Profil sayfası">
</a>Bu durumda
alt="Kişi simgesi" yazmak simgenin şeklini anlatır; alt="Profil sayfası" ise bağlantının hedefini bildirir. Bağlantının yanında zaten “Profil” metni bulunuyorsa görseli tekrar okutmayı önlemek için görselin alt metni boş bırakılabilir:
HTML:
<a href="/profil">
<img src="profil-simgesi.svg" alt="">
Profil
</a>Alternatif metin ile title aynı şey değildir
alt, görselin metinsel karşılığını sağlar ve görsel kullanılamadığında içeriğin anlaşılmasına yardımcı olur. title ise bazı tarayıcılarda fare görselin üzerinde bekletildiğinde bilgi ipucu gösterebilir. Bu nedenle alternatif metin gereken yerde title eklemek yeterli değildir.Doğru kullanım:
HTML:
<img src="grafik.png" alt="2025 yılında aylara göre satış değişimi" title="Satış grafiği">Burada erişilebilirlik açısından gerekli bilgi
alt içindedir; title varsa yalnızca ek bilgi sağlar. alt özniteliği kaldırılırsa görsel yüklenmediğinde veya ekran okuyucu kullanıldığında temel açıklama kaybolur.Kodun sonucunu nasıl kontrol edebilirsiniz?
Kodunuzu kaydedip sayfayı tarayıcıda açtığınızda görsel normal biçimde görünür;
alt metni çoğu tarayıcıda görselin altında sürekli görünen bir yazı olarak gösterilmez. Görselin yüklenemediği durumu denemek için src içindeki dosya adını geçici olarak hatalı bir adla değiştirin:
HTML:
<img src="olmayan-dosya.jpg" alt="Pencere kenarında oturan turuncu kedi">Görsel yüklenemediğinde tarayıcı alternatif metni gösterebilir. Bu,
alt özniteliğinin yazıldığını gösterir; ancak tek başına metnin yeterince açıklayıcı olduğunu kanıtlamaz. Metni görselin sayfadaki amacıyla karşılaştırın ve gereksiz ayrıntıları çıkarın.Görsel yalnızca süs amaçlıysa
alt="" kullanın. Görsel bir bağlantıyı, düğmeyi, ürünü, grafiği veya metinsel bilgiyi temsil ediyorsa boş bırakmayın; kullanıcıya gereken eylemi veya bilgiyi anlatan bir alternatif metin yazın. Son kontrol, alt metnin görselin kendisini değil, sayfadaki işlevini doğru aktarıp aktarmadığıdır.