Background ve img
Dekoratif görsellerde <img alt=""> kuralını öğrenirsin.
img mi, background-image mi?
Bir görseli sayfaya koymanın iki yolu vardır: HTML'de <img> ya da CSS'te background-image. Hangisini seçeceğin, görselin içerik mi yoksa süs mü olduğuna bağlıdır.
İçerik görselleri (haber fotoğrafı, ürün resmi, infografik) <img> ile konur; çünkü alt metni ister, ekran okuyucu tarafından okunur ve arama motorlarınca dizinlenir. Süs görselleri (arka plan dokusu, ayraç çizgisi) CSS ile konur; çünkü içeriğe anlam katmazlar ve ekran okuyucuda sessiz kalmaları gerekir.
Boş alt ile alt'siz arasındaki fark
Bazen bir görsel içerik taşır ama yine de süs sayılır. Örneğin bir <figure>'ün yanında yalnızca estetik için duran bir süs çizgisi. Bunu <img> ile koyacaksan alt="" (boş değer) yazmalısın.
Boş alt yazmak ile alt'siz bırakmak aynı şey değildir. alt="" yazınca ekran okuyucu bilerek atlar; alt yazmazsan ekran okuyucu görselin dosya adını okumak zorunda kalır. Yani boş da olsa alt her zaman yazılmalıdır.
Uygulama Figure, içerik img ve süs img yaz
Body içine bir <figure> ekle. İçine bir <img> koy; src özniteliği sanat-eseri.jpg, alt özniteliği Çiçekler olsun. Figure içine bir <figcaption> ekle ve metni Çiçek sergisi olsun. Figure'den sonra bir dekoratif <img> ekle; src özniteliği ayrac.png, alt özniteliği boş olsun.
Örnek çözümü göster
<body>
<figure>
<img src="sanat-eseri.jpg" alt="Çiçekler">
<figcaption>Çiçek sergisi</figcaption>
</figure>
<img src="ayrac.png" alt="">
</body>Kendini test et
-
Dekoratif bir arka plan süsü için en doğru yazım hangisidir?
- <img src="sus.png" alt="süs">
- <img src="sus.png" alt="Dekoratif süs">
- <img src="sus.png" alt="">
- <img src="sus.png" alt="Arka plan süsü">
Cevabı göster
<img src="sus.png" alt=""> — Doğru. Dekoratif görsellerde alt boş bırakılır; ekran okuyucu atlar.
-
Dekoratif img'ye boş alt yaz
<img src="ayrac.png" ____>Cevabı göster
<img src="ayrac.png" alt=""> -
Duruma doğru yöntemi eşleştir
- Haber fotoğrafı
- img + dolu alt
- Arka plan dokusu
- CSS background
- Süs ayraç
- img + boş alt
- Banner logosu
- img + logo metni