WCAG 1.1.1: Metin Dışı İçerik

Bu Kuralın Anlamı

WCAG Başarı Kriteri 1.1.1 Metin Dışı İçerik, Algılanabilir ilkesinin altında Seviye A gereksinimidir. Kullanıcıya sunulan tüm metin dışı içeriğin, eşdeğer amaca hizmet eden bir metin alternatifine sahip olması gerektiğini belirtir. "Metin dışı içerik" geniş bir şekilde tanımlanır: raster görüntüleri (JPEG, PNG, GIF, WebP), vektör grafikleri (SVG), görüntü tabanlı butonlar ve form girdileri, resim haritaları, canvas öğeleri, ses klipleri, video, animasyonlar, CAPTCHA’lar ve dekoratif süslemeleri kapsar.

Metin alternatifi, öğe türüne bağlı olarak çeşitli biçimler alabilir: bir <img> öğesi üzerindeki alt özniteliği, bir SVG veya rol taşıyan öğe üzerindeki aria-label veya aria-labelledby, bir <object> içindeki title öğesi ya da bir figürle ilişkilendirilmiş <figcaption>. Temel gereksinim, alternatif metnin görsel içeriğin kendisiyle aynı bilgi veya işlevi iletmesidir — yalnızca bir dosya adı veya genel bir yer tutucu değildir.

Kriter, yeterli bir metin alternatifinin nasıl görünmesi gerektiğini belirleyen birkaç özel durumu tanımlar:

• Kontroller ve girdiler: Metin dışı içerik bir kontrolse veya kullanıcı girdisi kabul ediyorsa (örneğin bir resim butonu veya bağlantı olarak kullanılan bir resim), metin alternatifi yalnızca görünümünü değil, amacını veya işlevini tanımlamalıdır.
• Zamana bağlı ortamlar: Bağımsız bir sunum olarak kullanılan yalnız ses veya yalnız video içerik, en azından onu tanımlayan açıklayıcı bir etiket gerektirir; tam dökümler ve altyazılar daha sonraki kriterlerde (1.2.x) ele alınır.
• Testler ve duyusal deneyimler: İçerik, amacını bozmadan metinle sunulamayacak bir test veya alıştırmaysa (örneğin görsel bir bulmaca), metin alternatifi yalnızca metin dışı içeriği tanımlayıp açıklamalıdır.
• CAPTCHA’lar: Metin alternatifleri CAPTCHA’nın amacını tanımlamalı ve farklı bir duyusal modalite kullanan alternatif bir CAPTCHA biçimi sağlanmalıdır.
• Dekorasyon, biçimlendirme ve görünmez içerik: Bir resim tamamen dekoratifse, boşluk için kullanılıyorsa veya kullanıcılara sunulmuyorsa, yardımcı teknolojiler tarafından yok sayılabilecek şekilde uygulanmalıdır — tipik olarak boş bir alt="" özniteliği veya role="presentation" aracılığıyla.

Başarılı sayılmak için, anlamlı her metin dışı öğe ya amacını eşdeğer şekilde ileten programatik bir metin alternatifi sunmalı ya da yardımcı teknolojilerin onu atlayabilmesi için açıkça dekoratif olarak işaretlenmelidir. Başarısızlık, bir resmin hiç alt özniteliğine sahip olmaması, alt değerinin dosya adı olması (örneğin alt="img_header_logo_v2.png"), anlamlı içerik olarak kullanılan bir SVG’nin ne bir <title> öğesine ne de erişilebilir bir etikete sahip olması ya da dekoratif bir resmin ekran okuyucu kullanıcıları için gürültü ekleyen açıklayıcı alt metne yanlış şekilde sahip olması durumunda ortaya çıkar.

Neden Önemlidir

Dünya Sağlık Örgütü’ne göre, dünya genelinde yaklaşık 2,2 milyar kişinin bir tür görme bozukluğu veya körlüğü vardır. Dijital içeriği tüketmek için sentezlenmiş konuşma veya yenilenebilir Braille ekranlara güvenen ekran okuyucu kullanıcıları, resimleri, simgeleri, grafiksel kontrolleri ve grafikleri anlamak için tamamen metin alternatiflerine bağımlıdır. Doğru alt metin olmadan, bir e-ticaret sitesindeki ürün sayfası görsel bağlam olmadan yalnızca fiyat listesinden ibaret kalır; logolarla dolu bir banka navigasyonu etiketlenmemiş butonlar sırasına dönüşür; bir hastanenin semptom denetleyici diyagramı, kendi kendine ön değerlendirme yapmaya çalışan kullanıcı için görünmez olur.

Somut bir senaryo düşünün: Kör bir kullanıcı, bir ceket satın almak için Türk bir e-ticaret platformunu ziyaret ediyor. Ürün karuseli, ceketin farklı açılardan ve renk varyantlarından altı görüntü içeriyor. Bu görüntülerin hiçbirinde anlamlı alt metin yoksa, kullanıcının ekran okuyucusu yalnızca “image, image, image” — altı kez — anons eder. Hangi varyantın lacivert hangisinin siyah olduğunu, hangi görüntünün arka cebi gösterdiğini belirleyemez ve satın alma işlemini tamamen bırakabilir. Aynı ürün bağlantısına sahip gören bir meslektaşı ise satın alma işlemini iki dakikadan kısa sürede tamamlar. Bu fark hem bir erişilebilirlik başarısızlığı hem de bir iş kaybıdır.

Körlüğün ötesinde, bu kriter aynı zamanda okuma sürecini desteklemek için metin okuma araçlarına güvenen bilişsel engelli kullanıcılar, klavye ve sesle gezinip etkileşimli kontrollerde net etiketlere ihtiyaç duyan motor engelli kullanıcılar ve görüntülerin yüklenemeyebildiği düşük bant genişliğine sahip kullanıcılar için de fayda sağlar — bu durumlarda alt metin işlevsel bir yedek görevi görür. Ek olarak, iyi hazırlanmış alt metin, arama motoru indekslemesini iyileştirir çünkü tarayıcılar resim alt özniteliklerini ilgili metinsel sinyaller olarak değerlendirir ve doğrudan SEO sonuçlarını destekler.

İlgili Axe-core Kuralları

axe-core erişilebilirlik motoru, WCAG 1.1.1’i yedi ayrı otomatik kuralla uygular. Her kuralın neyi kontrol ettiğini — ve sınırlarının nerede olduğunu — anlamak, eksiksiz bir test stratejisi için kritik önemdedir.

• image-alt: Her <img> öğesinin bir alt özniteliğine (dekoratif resimler için boş olabilir) veya aria-label, aria-labelledby ya da title aracılığıyla sağlanan erişilebilir bir adına sahip olduğunu kontrol eder. Hiç alt özniteliği olmayan resimleri işaretler, çünkü bu durumda tarayıcı dosya yolunu erişilebilir ad olarak ortaya çıkarır.
• input-image-alt: <input type="image"> öğelerinin boş olmayan bir alt özniteliğine sahip olduğunu kontrol eder. Görüntü girdileri gönder butonu gibi davranır ve yalnızca görsel görünümlerini değil, işlevlerini iletmelidir. Bir görüntü girdisinde eksik veya boş alt, butonu ekran okuyucu ile fiilen kullanılamaz hale getirir.
• area-alt: Bir resim haritası içindeki her <area> öğesinin alt, aria-label veya aria-labelledby aracılığıyla boş olmayan bir metin alternatifine sahip olduğunu kontrol eder. Resim haritaları, bazı kurumsal uygulamalarda ve kamu sektörü portallarında hâlâ kullanılan eski bir kalıptır ve her sıcak nokta, bağlantı hedefini veya işlevini bağımsız olarak tanımlamalıdır.
• object-alt: <object> öğelerinin erişilebilir bir adına sahip olduğunu kontrol eder. <object> öğesi tarihsel olarak Flash içeriği, PDF’ler veya diğer ortamları gömmek için kullanılır; bir etiket olmadan ekran okuyucular gömülü içeriği tanımlamanın bir yoluna sahip değildir.
• svg-img-alt: role="img" özniteliğine sahip satır içi <svg> öğelerinin erişilebilir bir adına sahip olduğunu kontrol eder; bu genellikle bir alt <title> öğesi (eşleşen bir aria-labelledby ile) veya SVG kökünde bir aria-label özniteliği ile sağlanır. Modern kullanıcı arayüzleri simgeler ve illüstrasyonlar için yoğun şekilde SVG kullanır; bu kural, anlam taşıyan etiketlenmemiş SVG’leri yakalar.
• role-img-alt: role="img" özniteliğine sahip herhangi bir öğenin — yerel resim öğesi kullanılmadığında resim konteyneri olarak kullanılan <div> veya <span> gibi SVG olmayan öğelere de uygulanabilir — erişilebilir bir adına sahip olduğunu kontrol eder. Bu kalıp, yerel resim öğesinin kullanılmadığı özel ikon sistemlerinde ve CSS arka plan resmi uygulamalarında yaygındır.
• image-redundant-alt: Bir resmin alt metninin, genellikle bir bağlantı içinde metin etiketiyle birlikte göründüğünde, bitişik görünür metni yinelediği durumları işaretler. Bu kesin bir başarısızlık olmasa da, yinelenen alt metin ekran okuyucuların aynı bilgiyi iki kez anons etmesine neden olur ve dinleme deneyimini kötüleştirir. Bu kuralın doğru şekilde çözümlenmesi için insan yargısı gerekir, çünkü gerçek bir fazlalık mı yoksa kasıtlı bir ekleme mi olduğunu yalnızca bir kişi belirleyebilir.

axe-core dahil olmak üzere otomatik araçların alt metnin kalitesini değil, yalnızca varlığını ve temel yapısını değerlendirebildiğini unutmamak önemlidir. Bir kural, alt="photo" veya alt="decorative border" olan bir resim için, her ikisi de anlamlı olmasa bile, geçer not verebilir. Bu nedenle, alt metnin her resmin içeriğini ve amacını doğru şekilde tanımladığını doğrulamak için otomatik taramaya her zaman manuel inceleme eşlik etmelidir.

Nasıl Test Edilir

1. axe DevTools veya Lighthouse ile otomatik tarama: axe DevTools tarayıcı uzantısını (Chrome ve Firefox için mevcut) yükleyin. Test edilecek sayfayı açın, uzantıyı etkinleştirin ve tam sayfa analizi çalıştırın. Sonuçları yukarıda listelenen kural kimliklerine göre filtreleyin: image-alt, input-image-alt, area-alt, object-alt, svg-img-alt, role-img-alt ve image-redundant-alt. İşaretlenen her öğe için araç, DOM’daki sorunlu düğümü vurgular ve ihlali açıklar. Lighthouse (Chrome DevTools içindeki Accessibility denetimi altında yerleşik) da öğe düzeyinde ayrıntıyla image-alt ihlallerini gösterir. Tüm ihlalleri, öğe seçicileri ve çevresel bağlamlarıyla birlikte geliştiriciye devretmek üzere kaydedin.
2. Manuel DOM incelemesi: Tarayıcı DevTools’un Elements panelini açın ve tüm <img>, <input type="image">, <area>, <object> ve <svg> etiketlerini arayın. Her biri için uygun bir alt özniteliği veya ARIA etiketinin mevcut olduğunu ve değerinin bağlam içinde anlamlı olduğunu doğrulayın. Özellikle React veya Vue gibi JavaScript çerçeveleri aracılığıyla dinamik olarak yüklenen ve statik bir HTML anlık görüntüsünde görünmeyebilen resimlere dikkat edin.
3. NVDA ve Firefox ile ekran okuyucu testi: NVDA’yı (ücretsiz, Windows) başlatın ve sayfayı Firefox’ta açın. Grafikler arasında atlamak için G tuşunu kullanarak gezin. NVDA her resmin erişilebilir adını anons eder; dosya yolları, “image” veya boş anonslar duyarsanız bunların tümü bir başarısızlığa işaret eder. Resim butonları ve bağlantılar için, her kontrole ulaşmak üzere Tab tuşunu kullanın ve konuşulan etiketin kontrolün gerçekleştirdiği eylemi ilettiğini doğrulayın.
4. VoiceOver ve Safari (macOS/iOS) ile ekran okuyucu testi: VoiceOver’ı etkinleştirin (macOS’ta Command+F5). İçerikte öğe öğe ilerlemek için VO+Sağ Ok kullanın veya Öğe Seçici’yi (VO+U) açın ve rotor üzerinden Images’ı seçerek tüm resimlerin ve etiketlerinin bir listesini tek seferde görün. iOS’ta, sayfa boyunca sağa kaydırın ve her resmin nasıl anons edildiğini dinleyin.
5. JAWS ve Chrome ile ekran okuyucu testi: JAWS’ta grafikler arasında gezinmek için G tuşuna basın. Her resim net, anlamlı bir açıklama üretmelidir. Herhangi bir öğenin hesaplanmış erişilebilir adını ve rolünü görmek için JAWS sanal görüntüleyicisini (Insert+F1) kullanın.
6. Dekoratif resimlerin muamelesini doğrulayın: Dekoratif olduğuna inandığınız resimler için, alt="" ve onları yeniden ortaya çıkaracak herhangi bir title özniteliği veya ARIA etiketi olmadığını doğrulayın. Bir ekran okuyucu ile bu öğelere gidin ve okuma sıralamasında tamamen atlandıklarından emin olun.

Nasıl Düzeltilir

Bilgi veren resimde eksik alt — Hatalı

<!-- Image conveys product information but has no alt attribute -->
<img src='jacket-navy-front.jpg'>

Bilgi veren resimde eksik alt — Doğru

<!-- alt text describes the visual content and its purpose in context -->
<img src='jacket-navy-front.jpg' alt='Navy blue wool jacket, front view, with double-breasted buttons'>

Dekoratif resmin yanlış etiketlenmesi — Hatalı

<!-- Decorative divider image exposes a descriptive alt that adds noise -->
<img src='divider-ornament.png' alt='Decorative ornamental divider with scrollwork pattern'>

Dekoratif resmin yardımcı teknolojiden doğru şekilde gizlenmesi — Doğru

<!-- Empty alt tells screen readers to skip this image entirely -->
<img src='divider-ornament.png' alt=''>

Erişilebilir adı olmayan SVG simge — Hatalı

<!-- SVG used as a meaningful icon has role="img" but no label -->
<svg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

Erişilebilir ada sahip SVG simge — Doğru

<!-- title element provides the accessible name; aria-labelledby associates it -->
<svg role='img' aria-labelledby='icon-account-title' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <title id='icon-account-title'>My Account</title>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

Alt’ı eksik resim girdi butonu — Hatalı

<!-- Image submit button has no alt; screen reader announces only "image" -->
<input type='image' src='btn-search.png'>

Açıklayıcı alt’a sahip resim girdi butonu — Doğru

<!-- alt describes the button's function, not its appearance -->
<input type='image' src='btn-search.png' alt='Search'>

Yaygın Hatalar

• Dosya adını alt metin olarak kullanmak: alt="hero_banner_v3_final.jpg" yazmak, ekran okuyuculara anlamlı hiçbir içerik sunmadan dosya yolunu ortaya çıkarır. Her zaman resmin ne gösterdiğini veya hangi amaca hizmet ettiğini tanımlayan alt metin yazın.
• Alt metni "image" veya "photo" olarak ayarlamak: alt="image" veya alt="photo" gibi genel değerler, boş olmadıkları için otomatik kontrollerden geçer, ancak hiçbir bilgi iletmezler. Ekran okuyucular zaten öğe rolünü “image” olarak anons eder, bu nedenle bu kelimeyi tekrarlamak kullanıcının zamanını boşa harcar.
• Dinamik olarak eklenen resimlerde alt’ı unutmak: JavaScript (örneğin React ile oluşturulmuş bir ürün karuseli) aracılığıyla DOM’a eklenen resimler, başlangıçtaki HTML’de alt özniteliklerinden yoksun olabilir. JavaScript bileşeninin src’yi oluşturduğu anda alt özniteliğini de oluşturduğundan emin olun.
• Anlamlı resimlere role="presentation" uygulamak: İçerik taşıyan resimlerde role="presentation" veya role="none" kullanmak, onları erişilebilirlik ağacından tamamen kaldırır. Bu yalnızca tamamen dekoratif resimler için uygundur; bilgi veren resimlerde kullanılması, ekran okuyucu kullanıcıları için içeriğin tamamen kaybolmasına neden olur.
• role="img" kullanan CSS arka plan resimlerinde alt özniteliğini tamamen atlamak: Bir <div> arka plan resmiyle stillendirildiğinde ve role="img" verildiğinde, geliştiriciler bazen aria-label eklemeyi unuturlar. Bir etiket olmadan, öğe erişilebilirlik ağacında adı olmayan bir resim olarak yer alır — alt’ın eksik olması kadar kötü.
• Görünümü değil anlamı tanımlayan alt metin yazmamak: Bir grafik için alt="A blue bar chart" yazmak, görsel stili tanımlar ancak veriyi tanımlamaz. Alt metin, alt="Bar chart showing Q3 revenue grew 18% year-over-year" gibi temel içgörüyü iletmelidir.
• Bir setteki birden çok resim için yinelenen alt metin kullanmak: Bir ürün listesi aynı öğenin altı küçük resmini gösterdiğinde, hepsine alt="Running shoe" gibi aynı alt metni atamak, aralarındaki farkı ortaya koyamaz. Bir setteki her resim, benzersiz içeriğini veya açısını tanımlamalıdır.
• Resim haritalarındaki <area> öğelerinde alt’ı eksik bırakmak: Resim haritası kullanan geliştiriciler, genellikle üst <img> öğesine alt metin ekler, ancak her <area> sıcak noktasının da kendi bağlantı hedefini tanımlayan alt özniteliğine ihtiyaç duyduğunu unuturlar.
• Araç ipucu metnini alt metnin yerine kullanmak: title özniteliği görsel bir araç ipucu üretir ve bazı ekran okuyucular tarafından okunur, ancak tarayıcı desteği tutarsızdır ve tüm erişilebilirlik bağlamlarında ortaya çıkarılmaz. Uygun bir alt özniteliğinin yerine değil, onu tamamlayıcı olarak kullanılmalıdır.
• Sprite sheet’ler veya <use> öğeleriyle sunulan SVG simgeleri test etmemek: <use href="#icon-id"> aracılığıyla başvurulan SVG sprite’lar, gölge DOM sınırları nedeniyle iç <title> öğelerini tüm ekran okuyuculara ortaya çıkarmayabilir. Sprite tabanlı simgeleri her zaman gerçek ekran okuyucularla test edin ve gerektiğinde dış <svg> öğesi üzerinde aria-label ile destekleyin.

Türkiye’nin Erişilebilirlik Mevzuatıyla İlişkisi

21 Haziran 2025’te 32933 sayılı Resmî Gazete’de yayımlanan Türkiye Cumhurbaşkanlığı Genelgesi 2025/10, Türkiye’de faaliyet gösteren geniş bir kamu ve özel sektör kuruluşu için zorunlu dijital erişilebilirlik gereksinimleri getirir. Genelge, teknik standart olarak WCAG 2.2’ye atıfta bulunur ve tüm Seviye A başarı kriterlerini — WCAG 1.1.1 Metin Dışı İçerik dahil — en iyi uygulama önerileri olmaktan çıkarıp yasal olarak bağlayıcı yükümlülükler haline getirir.

Kapsam dahilindeki kuruluşlar şunlardır: tüm kamu kurum ve kuruluşları, bankalar ve finans kuruluşları, hastaneler ve sağlık hizmeti sağlayıcıları, 200.000 veya daha fazla abonesi olan telekomünikasyon şirketleri, e-ticaret platformları, seyahat acenteleri, özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MoNE) tarafından yetkilendirilmiş özel okullar. Kamu kurumları için uyum, genelgenin yürürlük tarihinden itibaren bir yıl içinde sağlanmalıdır. Özel sektör kuruluşlarına ise iki yıllık bir uygulama süresi tanınmıştır.

WCAG 1.1.1, Türk dijital ortamında özellikle önemlidir çünkü genelge kapsamındaki birçok yüksek trafikli sektör — e-ticaret pazar yerleri, bankacılık portalları ve kamu hizmeti platformları dahil — yoğun şekilde resim odaklıdır. E-ticaret sitelerindeki ürün fotoğrafları, kamu portallarındaki infografik tabanlı duyurular, bankacılık uygulamalarındaki grafik ağırlıklı finansal panolar ve hastane hasta portallarındaki form tabanlı arayüzler, bu kriterin kapsamına doğrudan girer.

Genelge kapsamındaki Seviye A gereksinimlerine uyulmaması, kuruluşları düzenleyici incelemeye ve olası yaptırımlara maruz bırakır. WCAG 1.1.1, hem en sık ihlal edilen hem de en kolay test edilen kriterlerden biri olduğundan — hem otomatik araçlarla hem de temel ekran okuyucu gezintileriyle tespit edilebilir — uyum denetimlerinde öne çıkması muhtemeldir. Genelgeye tabi kuruluşlar, tüm image-alt ihlallerinin giderilmesini ertelenmiş bir iyileştirme değil, derhal ele alınması gereken yüksek öncelikli bir eylem maddesi olarak görmelidir. Accsible gibi bir erişilebilirlik overlay SDK’sının devreye alınması, eksik metin alternatiflerini gerçek zamanlı olarak ortaya çıkarmaya ve kısmen gidermeye yardımcı olabilir, ancak kaynak kod düzeyinde tam bir iyileştirme, uyuma giden en sağlam ve kalıcı yol olmaya devam eder.