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

Sıradaki ders: Özet - Responsive hero

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler