Gerçekten İşe Yarayan Alt Metni Yazmak

1. image-alt hatası nedir?

axe-core'un image-alt kuralı, sayfadaki <img> öğelerinin alt öznitelikli olup olmadığını ve role="img" taşıyan öğelerin erişilebilir bir adı bulunup bulunmadığını kontrol eder. alt niteliği tamamen yoksa kural tetiklenir.

Burada önemli bir ayrım vardır: alt="" (boş alt) ile alt'ın hiç olmaması farklı şeylerdir. Boş alt, görsele “bu dekoratif” demektir; ekran okuyucu onu atlar. alt'ın olmaması ise “bilgi var ama söylemiyorum” demektir; ekran okuyucu bu durumda dosya adını okumaya kalkışır.

2. Neden önemli?

Görme engelli kullanıcı için alt, görselin sayfada ne yaptığını anlatan tek köprüdür. Bir e-ticaret sayfasındaki ürün kartında alt eksikse kullanıcı ürünün ne olduğunu yalnızca alt yazıdan tahmin etmek zorundadır. Bir blog yazısında gömülü diyagramın alt'ı yoksa argümanın yarısı kayboluyor demektir.

Konu sadece engellilerle de bitmiyor. Görseli yüklenmeyen — yavaş bağlantı, görsel engelleyici, eksik dosya — her ziyaretçi alt'ın ürettiği yedek metni görür. Arama motorları da görselleri büyük ölçüde alt'tan anlar; iyi yazılmış bir alt hem erişilebilirlik hem görsel arama trafiği kazandırır.

3. Hangi durumlarda tetiklenir?

1. alt niteliği tamamen yok: En yaygın hata. <img src="/banner.jpg"> şeklinde yazılmış her etiket bu kuralı ihlal eder.
2. Sadece boşluk içeren alt: alt=" " ekran okuyucu tarafından geçerli bir alt olarak kabul edilmez.
3. Anlamsız varsayılan alt: CMS'lerin otomatik ürettiği alt="image", alt="photo" gibi metinler kullanıcıya hiçbir bilgi vermez.
4. SVG'de erişilebilir ad eksikliği: Inline SVG'lerde alt niteliği çalışmaz; bunun yerine <title> elemanı veya aria-label gerekir.
5. role="img" taşıyan öğelerde ad eksikliği: Bir div background-image ile görsel oluşturuluyorsa rolü açıklamak yetmez, adı da gerekir.

4. Doğru çözümler

4.1 Bilgi taşıyan görseller

Ürün fotoğrafı, makale içi diyagram, kapak görseli — sayfanın anlamını etkileyen her görselde alt, görselin sayfa bağlamında ne anlattığını yansıtmalıdır. “Görselin ne olduğu”ndan çok “burada ne anlam taşıdığı” önemlidir.

<img src="/IMG_2435.jpg" alt="IMG_2435">

<img
  src="/IMG_2435.jpg"
  alt="Mavi yün kazak — gögüs ölçüsü 92 cm"
>

4.2 Dekoratif görseller

Yalnızca görsel zenginlik için kullanılan, sayfanın anlamına bilgi katmayan görseller dekoratif sayılır. Bunlarda alt="" kullanın — ekran okuyucu atlar, image-alt kuralı geçilmiş olur.

<img src="/divider.svg" alt="" aria-hidden="true">

4.3 İşlevsel görseller (buton/link içindeki)

Görsel bir butonun veya bağlantının tek içeriğiyse, alt metin görselin görünüşünü değil eylemi anlatmalıdır. “Büyüteç simgesi” değil, “Ara” yazın.

<button>
  <img src="/icons/search.svg" alt="Büyüteç">
</button>

<button>
  <img src="/icons/search.svg" alt="Ara">
</button>

4.4 Yazıyla aynı bilgiyi tekrar eden görsel

Görselin hemen yanında veya altında aynı bilgiyi taşıyan bir metin varsa alt boş bırakılmalıdır. Aksi halde ekran okuyucu aynı şeyi iki kere okur.

<a href="/">
  <img src="/logo.svg" alt="Keysonar">
  <span>Keysonar</span>
</a>

<a href="/">
  <img src="/logo.svg" alt="">
  <span>Keysonar</span>
</a>

4.5 Karmaşık görseller (grafik, infografik, harita)

Bir grafikte birden fazla veri noktası varsa alt bunu tek başına anlatamaz. Kısa bir özet alt'a koyun, tüm veriyi ise sayfanın bir yerinde erişilebilir bir tablo veya açıklama metni olarak da sunun.

<figure>
  <img
    src="/charts/visibility-2026q1.png"
    alt="2026 Ç1 görünürlük artışı: Gemini'de %42, GPT-4o'da %28"
  >
  <figcaption>
    <a href="#chart-data">Tüm veriyi tablo halinde gör</a>
  </figcaption>
</figure>

4.6 Inline SVG

Inline <svg> öğelerinde alt niteliği yok sayılır. Bunun yerine SVG içindeki <title> elemanını veya doğrudan aria-label'ı kullanın. SVG dekoratifse role="img"'i kaldırın ve aria-hidden="true" ekleyin.

<svg role="img" aria-label="Yıldız puanı 4.6 / 5">
  <use href="#star-rating-icon" />
</svg>

<svg aria-hidden="true" focusable="false">
  <use href="#decorative-flourish" />
</svg>

5. İyi alt nasıl yazılır?

• Bağlamı önceleyin: Aynı görsel, hangi sayfada olduğuna göre farklı alt almalıdır. Gülen bir kadın fotoğrafı, ana sayfada “mutlu müşteri portresi” iken ürün sayfasında “X kremini kullanan müşteri yorumu” olmalıdır.
• Kısa tutun: Çoğu durumda 125 karakter yeterlidir. Ekran okuyucular uzun alt metinleri tek nefeste okur, sayısal değerlerle dolu uzun alt'lar yorucu olur.
• Sayfa diliyle aynı dilde yazın: Türkçe sayfada İngilizce alt, Türkçe konuşan ekran okuyucu motoruyla okunduğunda tamamen anlaşılmaz hale gelir.
• Yapay zeka önerilerini denetleyin: Otomatik üreticiler genellikle görselin yüzeyini tarif eder (“mavi gökyüzü altında bina”), sayfadaki anlamını değil. Yayına çıkmadan önce gözden geçirin.

6. Gözden kaçan durumlar

• CSS background-image: Erişilebilirlik ağacında görünmez; image-alt kuralı bunları yakalamaz. Görsel anlam taşıyorsa CSS yerine HTML img'e geçin.
• CMS yüklemelerinde unutulan alt: WordPress, Shopify ve benzeri CMS'leralt'ı opsiyonel bırakır. İçerik editörlerinin bu alanı boş geçmemesi için kontrol akışına alt zorunluluğu eklenmelidir.
• Aynı görselin farklı sayfalarda tekrar etmesi: Tek bir alt metni tüm kullanım bağlamlarına uymayabilir. Görsel yöneticisinde tek alt yerine sayfa başına override imkanı bulundurun.
• Rich text editörde sürükle-bırak: Editörler genellikle yapıştırılan görseli alt'sız ekler. Editör seviyesinde “alt boş bırakılamaz” kontrolü olmalıdır.
• Avatar görselleri: Kullanıcı adının zaten yazıldığı bir yerde avatarın alt="Mehmet Ali" olması tekrar yaratır. Avatar yanında isim varsa alt boş kalmalıdır.

7. Nasıl test edilir?

1. axe DevTools: Tarayıcı eklentisi sayfadaki tüm img'leri tek seferde denetler. image-alt ihlali olan tüm öğeleri vurgular.
2. Görselleri kapatma testi: Tarayıcı ayarlarından görselleri devre dışı bırakın. Geriye kalan metin, sayfanın anlatmak istediği şeyi anlatabiliyor mu?
3. Keysonar SEO Tools: Sitenin tamamını otomatik tarar, hangi sayfada kaç img'in alt'sız olduğunu listeler ve AI tabanlı alt önerileri üretir. Toplu temizlik için en pratik yol.
4. Ekran okuyucu ile sayfa gezintisi: NVDA veya VoiceOver açıkken sayfayı gezdiğinizde “graphic” sözcüğü duyulduğunda hemen ardından gelen metnin anlam taşıyıp taşımadığını dinleyin.

8. Hızlı kontrol listesi

• ✓Tüm <img> öğelerinde alt niteliği yer alıyor (boş bile olsa).
• ✓Bilgi taşıyan görsellerde alt, görselin sayfadaki anlamını yansıtıyor.
• ✓Dekoratif görsellerde alt='' ve aria-hidden='true' kullanıldı.
• ✓Buton/link içindeki görsellerde alt, görünüşü değil eylemi tarif ediyor.
• ✓Aynı bilgiyi taşıyan ek metin varsa görselin alt'ı boş bırakıldı.
• ✓Karmaşık grafikler için alt'a özet, sayfada ayrıntılı tablo eklendi.
• ✓Inline SVG'ler için <title> veya aria-label kullanıldı; dekoratif olanlara aria-hidden eklendi.
• ✓Alt metni sayfanın diliyle aynı dilde yazıldı.
• ✓Otomatik üretilen 'image', 'IMG_1234' gibi anlamsız alt'lar elendi.

9. Referanslar

• WCAG 2.1 SC 1.1.1 — Non-text Content — Level A
• HTML Living Standard — Requirements for providing text to act as an alternative for images
• W3C: An alt Decision Tree
• WAI-ARIA Authoring Practices: img role