Erişilebilir Görsel Kullanımı: WCAG Standartları ve Pratik Kontrol Listesi

Alt metin zorunluluğu: hangi görsellerde, nasıl yazılır

WCAG kriteri 1.1.1 "Metin Dışı İçerik" başlığıyla tüm anlamlı görsellerin metin alternatifi taşımasını zorunlu kılar. Kriter Seviye A'dadır; yani erişilebilirlik talebinin en temel katmanıdır. Buna rağmen gerçek projelerde en sık atlanan noktaların başında gelir.

Alt metnin görevi görseli betimlemek değil, görselin işlevini aktarmaktır. Sayfada bir ürün fotoğrafı varsa kullanıcı o fotoğraftan ne öğrenmeli? "Ahşap kolu olan siyah şemsiye, açık konumda" demek ile yalnızca "şemsiye" demek arasındaki fark, ziyaretçinin ürünü anlayıp anlamaması arasındaki farktır.

Bir ölçüt yardımcı olur: görseli kaldırın, metni bırakın. Sayfanın anlamı kayıyor mu? Kaybolan bilgiyi alt metin dolduruyor mu? Evet ise alt metin doğrudur. Hayır ise ya eksik ya da gereksiz bir şey yazılmıştır.

Alt metin en çok şu durumlarda değer taşır: ürün fotoğrafları ve illüstrasyonlar, kişi ya da ekip fotoğrafları, grafik içinde veri barındıran öğeler ve bir adımı gösteren ekran görüntüleri. En az değer taşıdığı durumsa aynı bilginin hem görselin altındaki başlıkta hem de alt metinde tekrar edildiği yerdir. Ekran okuyucu ikisini üst üste okur; aşina kullanıcılarda dinleme yorgunluğu yaratır. Bilgi zaten yakınında metinle sunuluyorsa alt metin kısa ve öz tutulmalı, hatta tamamen boş bırakılabilir.

Dekoratif görselleri işaretlemek

Dekoratif görsel, içerik bütününe bilgi eklemeyen, yalnızca görsel düzene katkıda bulunan öğedir. Arka plan dokuları, soyut bölücü çizgiler, yazı tipiyle birlikte verilen süslemeli ikonlar bu kategoriye girer. Bunları atlayan ekran okuyucu, kullanıcıya gereksiz yük bindirmemiş olur.

<img src="divider.png" alt="">

alt="" (boş string) standart çözümdür. Ekran okuyucu bu görseli tamamen atlar. alt niteliğini hiç yazmamak farklı bir durumdur: bazı ekran okuyucular nitelik yoksa dosya adını okur. Bu da "divider-2x.png" gibi işe yaramaz bir çıktı üretir. İkisi tek bir fark gibi görünse de kullanıcı deneyiminde belirgin ayrım yaratır.

CSS arka plan görseli olarak eklenen öğeler HTML alternatif metninden muaftır; DOM'da img etiketi yoktur. Dekoratif görseli mümkünse CSS'e taşımak, erişilebilirlik açısından daha temiz bir çözümdür.

Karar kısadır. Görseli kaldırsanız sayfanın anlamı değişir mi? Değişirse anlamlı görseldir; alt metin yazın. Değişmezse dekoratif görseldir; alt="" kullanın, niteliği asla atlamayın.

Görsel içindeki metin ve kontrast gereksinimleri

WCAG kriteri 1.4.3, metin ile arka plan arasında en az 4,5:1 kontrast oranı ister; büyük metin için bu oran 3:1'dir. Kural yalnızca HTML metni için değil, görsel içine gömülü metin için de geçerlidir. Bir promosyon banner'ı üzerinde beyaz yazı kullanıyorsanız, arka planla kontrast hesaplanmalıdır.

Kontrast hesabı HSL veya RGB renk değerleriyle yapılır; göz kararı güvenilir değildir. Açık sarı üzerine beyaz yazı subjektif olarak okunabilir görünse de matematiksel oran çoğu durumda yetersiz çıkar. Renk körü ziyaretçiler için oran daha da kritik hale gelir.

Görsel içi metin iki ek sorun daha doğurur. Birincisi: görsel içindeki metin ekran okuyucu tarafından okunamaz; dolayısıyla aynı bilgi alt metinde ya da görsel yakınında metin olarak bulunmalıdır. İkincisi: görsel boyutu küçülünce metin de küçülür; responsive tasarımda piksel boyutu değişken olduğu için kontrast yeterli olsa bile pratik okunabilirlik düşer.

WCAG 1.4.5, görselde metin kullanmaktan kaçınılmasını tavsiye eder. Metin kaçınılmazsa, gradyan arka plan yerine düz renk tercih edilmeli; metin boyutu en küçük breakpoint'te okunabilir kalacak şekilde ayarlanmalıdır. Logolar ve marka öğeleri bu kuralın kapsamı dışındadır.

Bağlantı ve düğme içindeki görseller

Bir <a> etiketi yalnızca <img> içerdiğinde, yani metin yok ve yalnızca görsel var, ekran okuyucu ne okuyacak? Alt metin yoksa yalnızca "bağlantı" der ve geçer. Kullanıcı nereye gideceğini bilemez. Erişilebilirlik ihlalleri arasında en sık karşılaşılan ve en kolay giderilen hatalardan biridir.

<!-- Hatalı -->
<a href="/iletisim">
  <img src="mail-icon.svg" alt="">
</a>

<!-- Doğru -->
<a href="/iletisim">
  <img src="mail-icon.svg" alt="İletişim sayfasına git">
</a>

İkon ile görünür metin birlikte verildiğinde ikon dekoratif sayılır ve alt metin boş bırakılmalıdır. Aksi takdirde ekran okuyucu hem metni hem alt metni üst üste okur.

<!-- Hem ikon hem metin -->
<a href="/iletisim">
  <img src="mail-icon.svg" alt=""> İletişim
</a>

Düğmelerde aynı kural geçerlidir. <button> içindeki SVG ikonların aria-label veya görünür bir metin alanıyla desteklenmesi gerekir. "Kapat", "Ara", "Gönder" gibi işlevsel düğmelerde ikon tek başına yeterli değildir; kullanıcı arayüzünde görünse de ekran okuyucuya bilgi aktarmaz.

Karmaşık görseller: grafik, tablo ve harita

Veri grafikleri, akış şemaları ve karmaşık illüstrasyonlar için kısa alt metin yeterli değildir. WCAG bu tür içeriklerde uzun açıklama sağlanmasını önerir. "2025 satış grafiği" yazmak kriteri teknik olarak karşılayabilir; ancak kullanıcı grafikten elde edebileceği bilgiye erişemez.

En temiz çözüm, grafiğin hemen altına görünür metin açıklama eklemektir. Hem ekran okuyucu hem de içeriği kopyalamak isteyen kullanıcılar yararlanır. Alternatif olarak aria-describedby ile sayfanın başka bir bölümündeki açıklamaya bağlantı kurulabilir.

<img
  src="satis-grafigi-2025.png"
  alt="2025 yılı aylık satış grafiği"
  aria-describedby="grafik-aciklama"
>
<p id="grafik-aciklama">
  Ocak 2025'te 1.200 adet ile başlayan satışlar Haziran'da 2.800 adete ulaştı.
  En düşük nokta Şubat'ta 980 adet olarak gerçekleşti.
</p>

Haritalar için kritik bilgiyi metin olarak da sunmak şarttır. Bir etkinlik konumu haritayla gösteriliyorsa adres metni zorunludur; harita yalnızca ek görsel bağlam işlevi görür. Akış şemalarında ise adımların metin olarak da erişilebilir olması hem ekran okuyucu hem de SEO tarama botları açısından avantaj sağlar.

WCAG 2.1 kontrol listesi

Aşağıdaki maddeler geliştirici incelemesine yönelik hazırlandı. Her madde, denetim sırasında "geçti / geçmedi / uygulanamaz" şeklinde değerlendirilebilir. Maddeleri kendi projenizin yapısına göre uyarlayabilirsiniz.

Temel alt metin kontrolleri (1.1.1 - Seviye A)

• Anlamlı tüm <img> öğelerinde alt niteliği mevcut ve içerik taşıyor.
• Dekoratif görsellerde alt="" (boş string) kullanılmış; nitelik atlanmamış.
• Bağlantı veya düğme içindeki tek görsel öğe, amacı açıklayan alt metin taşıyor.
• CSS arka plan görseli olarak eklenen dekoratif öğeler DOM'da img etiketi içermiyor.
• SVG ikonlarda role="img" ve title ya da çevreleyen aria-label tanımlı.
• Alt metin dosya adı veya "resim", "görsel", "fotoğraf" gibi jenerik kelime içermiyor.

Metin ve kontrast kontrolleri (1.4.3, 1.4.5 - Seviye AA)

• Görsel içi metin ile arka plan arasında en az 4,5:1 kontrast oranı sağlanmış.
• Büyük metin (18pt veya 14pt kalın) için oran en az 3:1.
• Görsel içindeki kritik bilgi, görsel yakınında metin olarak da sunuluyor.
• Logolar bu maddeden muaf tutulmuş; diğer görsel metinler değerlendirmeye alındı.

Karmaşık görseller (1.1.1 uzun açıklama - Seviye A)

• Veri grafikleri için sayfa üzerinde görünür metin açıklama ya da aria-describedby bağlantısı var.
• Akış şemalarında adımlar metin olarak da erişilebilir.
• Harita ve konum görselleri için adres veya metin yol tarifi mevcut.

Adaptif ve responsive görseller

• srcset ile sunulan tüm varyantlar aynı alt metnini paylaşıyor.
• <picture> öğesinin içindeki <img> alt metin taşıyor; <source> etiketleri alt metin almıyor.
• JavaScript ile dinamik olarak eklenen görseller de alt niteliği içeriyor.

Özel durumlar

• CAPTCHA görsel çözüm gerektiriyorsa sesli alternatif sunuluyor.
• Avatar ve profil fotoğraflarında kişi adı ya da bağlamsal açıklama var.
• Galeri veya slider öğelerinde her görsel ayrı alt metin taşıyor; "Görsel 1, 2, 3..." gibi sıralı numaralama yok.

Kontrol listesini projenize uyarlarken öncelik sırasına dikkat edin. Seviye A maddeleri kapanmadan AA maddelerine geçmek, denetimde temel eksikleri açık bırakmak anlamına gelir. Küçük projeler için önce tüm <img> etiketlerini taramak, ardından bağlantı ve düğmelerdeki görsel öğeleri kontrol etmek yeterli bir başlangıç noktası oluşturur.

Otomatik araçlar bu maddelerin yalnızca bir kısmını yakalar. alt niteliğinin varlığını tespit edebilirler; içeriğinin doğru olup olmadığını değerlendiremezler. Manuel inceleme kaçınılmazdır; özellikle alt metin kalitesi ve karmaşık görsel açıklamaları için ekran okuyucuyla gerçek bir dolaşım yapılması önerilir.

Erişilebilir görsel uygulaması tek seferlik bir iş değildir. İçerik güncellendiğinde, yeni görseller eklendiğinde veya şablon değiştiğinde kontroller yenilenmeli; pazarlama ekiplerinin eklediği banner ve kampanya görselleri düzenli denetim kapsamında tutulmalıdır.