Bu kural ne anlama geliyor

WCAG 1.1.1, kullanıcıya sunulan her metin dışı içeriğin — görseller, simgeler, grafikler, ses ve video dosyaları, CAPTCHA ve dekoratif öğeler — aynı bilgiyi veya işlevi taşıyan bir metin alternatifine sahip olmasını gerektirir. Ekran okuyucular, braille ekranlar ve arama motorları görsel içeriği anlamak için bu metin alternatiflerine başvurur.

Metin alternatifi, metin dışı içeriğin sunduğu amacın ayrısını karşılamalıdır. Bilgi veren bir fotoğraf için görselin ilettiği mesaj betimlenmeli, işlevsel bir düğme için düğmenin gerçekleştirdiği eylem belirtilmeli, tamamen dekoratif öğeler için ise yardımcı teknolojinin bunları atlayabilmesi sağlanmalıdır.

Neden önemlidir

Dünya genelinde yaklaşık 2,2 milyar kişinin bir tür görme bozukluğu bulunmaktadır. Bir ekran okuyucu alt metni olmayan bir görselle karşılaştığında genellikle dosya adını okur — örneğin "DSC_0042.jpg" — ve bu kullanıcıya hiçbir faydalı bilgi sağlamaz. Metinden sese, braille çıkışa veya yalnızca metin tabanlı tarayıcılara dayanan kullanıcılar, görseller aracılığıyla iletilen anlamdan tamamen mahrum kalır.

Erişilebilirliğin ötesinde, metin alternatifleri arama motoru optimizasyonunu iyileştirir, yavaş bağlantılarda görselleri devre dışı bırakan kullanıcıları destekler ve görseller yüklenemediğinde yedek içerik sağlar. Doğru alt metni, yapabileceğiniz en etkili ve en az efor gerektiren erişilebilirlik iyileştirmelerinden biridir.

İlgili axe-core kuralları

image-alt — <img> öğelerinin metin alternatifine sahip olmasını doğrular.
input-image-alt — <input type="image"> öğelerinin metin alternatifine sahip olmasını doğrular.
area-alt — Görsel haritası içindeki <area> öğelerinin metin alternatifine sahip olmasını doğrular.
object-alt — <object> öğelerinin metin alternatifine sahip olmasını doğrular.
svg-img-alt — img rolune sahip SVG öğelerinin erişilebilir bir ada sahip olmasını doğrular.
role-img-alt — role="img" atanmis öğelerin metin alternatifine sahip olmasını doğrular.
image-redundant-alt — Alt metninin bitişik metin içeriğiyle aynı olmamasını doğrular.

Nasıl test edilir

Oncelikle axe-core veya Lighthouse ile otomatik bir tarama yapın. Bu araçlar eksik alt niteliklerini güvenilir biçimde yakalar. Ancak otomatik araçlar alt metninin doğru veya anlamlı olup olmadığını değerlendiremez — bu, elle inceleme gerektirir.

Chrome DevTools içinde axe DevTools veya Lighthouse çalıştırın ve image-alt bulgularini inceleyin.
Web Developer Toolbar ile görselleri alt metinleriyle değiştirin ve sayfanın hala anlamlı olup olmadığını doğrulayın.
Sayfada bir ekran okuyucu (NVDA, VoiceOver veya JAWS) ile gezinin ve her görselin faydalı bilgiyle duyuruldugundan emin olun.
Dekoratif gorsellerin alt="" veya role="presentation" ile yardımcı teknolojiden gizlendiğini kontrol edin.
SVG, <object> öğeleri ve görsel haritalarini inceleyin — bunlar otomatik kontrollerde sıklıkla gözden kaçar.

Nasıl düzeltilir

Aşağıda en yaygın metin dışı içerik kalıpları için doğru ve yanlış uygulamalar yer almaktadır.

Görseller — yanlış uygulama

<!-- alt niteliği tamamen eksik -->
<img src="takım-fotografi.jpg">

<!-- Bilgilendirici gorselde boş alt -->
<img src="çeyrek-grafiği.png" alt="">

<!-- Dosya adı veya genel metin alt olarak kullanılmış -->
<img src="hero.jpg" alt="hero.jpg">
<img src="banner.png" alt="görsel">

Görseller — doğru uygulama

<!-- Açıklayıcı alt metni olan bilgilendirici görsel -->
<img src="takım-fotografi.jpg" alt="Inculva mühendislik ekibi 2025 erişilebilirlik zirvesinde">

<!-- Anlamlı açıklama içeren grafik -->
<img src="çeyrek-grafiği.png" alt="3. çeyrek geliri 2. çeyreğe göre %18 artarak 4,2 milyon dolara ulaştı">

<!-- Dekoratif görsel doğru şekilde gizlenmiş -->
<img src="dekoratif-spiral.svg" alt="" role="presentation">

SVG öğeleri

<!-- Yanlış: Erişilebilir adı olmayan SVG -->
<svg viewBox="0 0 24 24">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10..."/>
</svg>

<!-- Doğru: role ve aria-label ile SVG -->
<svg role="img" aria-label="Basariyi gösteren onay işareti simgesi" viewBox="0 0 24 24">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10..."/>
</svg>

<!-- Doğru: Dekoratif SVG yardımcı teknolojiden gizlenmiş -->
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10..."/>
</svg>

input type="image" ve görsel haritaları

<!-- Yanlış: alt olmadan input image -->
<input type="image" src="arama-simgesi.png">

<!-- Doğru: açıklayıcı alt ile input image -->
<input type="image" src="arama-simgesi.png" alt="Ara">

<!-- Yanlış: alt olmadan area -->
<map name="gezinme">
  <area shape="rect" coords="0,0,100,50" href="/hakkımızda">
</map>

<!-- Doğru: alt metni olan area -->
<map name="gezinme">
  <area shape="rect" coords="0,0,100,50" href="/hakkımızda" alt="Hakkımızda">
</map>

Object ve embed öğeleri

<!-- Yanlış: metin alternatifi olmayan object -->
<object data="animasyon.swf" type="application/x-shockwave-flash"></object>

<!-- Doğru: yedek metin içeren object -->
<object data="animasyon.swf" type="application/x-shockwave-flash">
  <p>Ödeme akışını gösteren animasyonlu tanıtım: sepet inceleme, ödeme ve onay olmak üzere üç adım içerir.</p>
</object>

Sık yapılan hatalar

Dosya adını alt metni olarak kullanmak (örneğin alt="IMG_3021.jpg").
Alt metninde "görseli" veya "resmi" ifadelerini kullanmak — ekran okuyucular öğeyi zaten görsel olarak duyurur.
Dekoratif gorsellere açıklayıcı alt metni eklemek, bu da ekran okuyucu kullanıcıları için gereksiz gürültü oluşturur.
Grafik, diyagram veya ürün fotoğrafları gibi bilgilendirici görsellerde alt metnini boş bırakmak.
Bitisikteki görünen metni alt niteliği içinde tekrarlamak, bu da ekran okuyucuların aynı içeriği iki kez okumasına neden olur.
Görsel haritaları içindeki <area> öğelerinde alt metnini unutmak — bunlar etkileşimli ogelerdir ve etiket gerektirir.
Anlamlı içerik için CSS arka plan görselleri kullanıp DOM içinde metin alternatifi sağlamamak.
Aşırı uzun alt metni yazmak (150+ kelime) — bunun yerine kısa bir alt ile birlikte aria-describedby veya bağlantılı bir açıklama sayfası kullanılmalıdır.

1.1.1 Metin Dışı İçerik