Alt Metni Nasıl Yazılır: Geliştiriciler ve İçerik Ekipleri için Pratik Bir Rehber

WebAIM Million 2025 raporuna göre, eksik alternatif metin, analiz edilen tüm ana sayfaların %55.5’ini etkiliyor — ve bu hataların %44’ü bağlantılı görsellerle ilgili; bu da ekran okuyucu kullanıcıları için gezinmeyi tamamen bozuyor. Bu, niş bir sorun değil. Bu, web’in yarısının, hiçbir şey söylemeyen görsellerin önünde kör ve az gören kullanıcıları ortada bırakması demek. Ekibiniz görselleri, alt metni dikkatlice düşünmeden yayına alıyorsa, yalnızca bir uyumluluk kutusunu işaretlemekte başarısız olmuyorsunuz — kitlenizin önemli bir bölümüne deneyimlerinin önemli olmadığını söylemiş oluyorsunuz.

Alt Metnin Gerçekte Ne Olduğu (ve Neden Sadece Bir Etiket Olmadığı)

Alt metin, “alternative text”in kısaltmasıdır ve HTML <img> öğesinin alt özniteliğine gömülü yazılı bir açıklamadır. Bir ekran okuyucu bir görselle karşılaştığında, alt metni kullanıcıya yüksek sesle okur. Bir görsel yüklenemediğinde — yavaş bağlantı, bozuk URL veya içerik engelleyici nedeniyle — alt metin onun yerine görüntülenir. Aynı zamanda arama motorları tarafından indekslenir ve sessiz ama anlamlı bir SEO sinyali oluşturur.

Ancak birçok ekibin kaçırdığı nokta şu: alt metin sadece bir yedek güvenlik ağı değildir. Kör ve az gören kullanıcıların — dünya çapında yaklaşık 43.3 milyon kör ve 295 milyon orta ila şiddetli az gören insanın — web’de görsel içeriği deneyimlemesinin birincil yoludur. NVDA ve JAWS gibi ekran okuyucular (en yaygın kullanılan iki masaüstü ekran okuyucusu), odak bir görsele geldiği anda alt metni okur. Bu metin yoksa, anlamsızsa veya gereksizse, kullanıcı deneyimi anında bozulur.

Kör ve az gören kullanıcılar üzerine yapılan araştırmalar, pratikte neler olduğuna dair çarpıcı bir tablo çiziyor. Bazı kullanıcılar, deneyimlerinde alt metnin asla faydalı olmaması nedeniyle, web sitelerindeki görselleri tamamen görmezden geldiklerini bildiriyor. Diğerleri, e-ticaret sitelerindeki ürün görsellerini atlayıp bunun yerine kullanıcı yorumlarına güveniyor; çünkü “image001.jpg” veya “photo” gibi alt metinler onlara hiçbir şey söylemiyor. Bu bir ekran okuyucu sorunu değil — bu bir içerik sorunu ve ekibinizin çözebileceği bir sorun.

Alt metni bir içerik sorumluluğu olarak — sadece bir geliştirici görevi olarak değil — görmek, her ekibin yapması gereken ilk zihinsel değişimdir. Geliştirici özniteliği uygular; içerik ekibi bağlamı anlar. Doğru yapmak için ikisi de gereklidir.

Hukuki ve Uyumluluk Manzarası

Hukuki riskleri önemsiyorsanız alt metin isteğe bağlı değildir. WCAG Başarı Kriteri 1.1.1 (Metin Dışı İçerik), Seviye A gereksinimidir — uyumluluğun en düşük, en temel katmanı. Bunda başarısız olmak, herhangi bir resmi erişilebilirlik denetiminde başarısız olmak demektir. Amerika Birleşik Devletleri’nde ADA, binlerce davada web sitelerine uygulanmıştır; yalnızca 2024’te 4,605 ADA web sitesi davası açılmıştır. Eksik alt metin, tam da kolayca tespit edilebilir, nesnel olarak ölçülebilir ve temel içeriğe erişimi doğrudan engellediği için, ihtar mektuplarında en sık atıf yapılan ihlallerden biridir.

ADA’nın ötesinde, Avrupa Erişilebilirlik Yasası (EAA) 28 Haziran 2025’te uygulanabilir hale geldi. Kuruluşunuz AB’deki müşterilere hizmet veriyorsa, uyumsuzluk €100,000’a veya yıllık gelirin %4’üne kadar ceza getirebilir. WCAG 2.2 Seviye AA, EAA uyumluluğu için yaygın olarak ölçüt kabul edilir ve 1.1.1 kriteri kapsamındaki alt metin gereksinimleri önceki sürümlerden değişmemiştir — tüm bilgilendirici görsellerin programatik olarak belirlenebilir metin alternatifleri olmalıdır.

Kanada’da, Engelliler için Ontarians Erişilebilirlik Yasası (AODA), kamu ve özel sektör kuruluşları için benzer şekilde WCAG uyumunu zorunlu kılar. ABD federal bağlamında Section 508’in kendi paralel gereksinimleri vardır. Farklı yargı alanlarında çıkarılacak sonuç tutarlıdır: alt metin “olsa iyi olur” değil, ve düzenleyici ortam gevşemiyor, sıkılaşıyor.

WCAG 1.1.1 Seviye A’dır — en temel uyumluluk katmanı. Bunda başarısız olmak, her erişilebilirlik denetiminde başarısız olmak demektir ve bu, otomatik araçlar ve hukuk ekipleri için tespit edilmesi en kolay ihlaldir.

Karar Çerçevesi: Hangi Görsele Ne Gerekir

En yaygın yanlış kanılardan biri, her görselin bir metin açıklamasına ihtiyaç duyduğudur. Bu yanlıştır — ve süsleyici görsellere gereksiz alt metin eklemek, ekran okuyucu kullanıcıları için deneyimi aslında daha kötü hale getirir; çünkü hiçbir değer katmayan gürültüyü dinlemek zorunda kalırlar. Asıl beceri, her görselin hangi kategoriye girdiğini bilmektir. İşte pratik bir çerçeve:

• Bilgilendirici görseller — Çevreleyen metinde bulunmayan içerik veya anlam ileten fotoğraflar, illüstrasyonlar veya grafikler. Bunlar, görselin sağladığı aynı bilgiyi ileten açıklayıcı alt metin gerektirir.
• İşlevsel görseller — Düğme, bağlantı veya kontrol olarak kullanılan görseller (örneğin, aramayı gönderen büyüteç simgesi veya ana sayfaya bağlanan bir logo). Alt metin, görsel görünümü değil, işlevi tanımlamalıdır: alt='Ara', alt='Büyüteç simgesi' değil.
• Süsleyici görseller — Estetik değer katan ancak hiçbir anlam taşımayan görsel süslemeler: arka plan desenleri, ayırıcılar, tamamen dekoratif illüstrasyonlar. Bunların boş bir alt özniteliği (alt='') olmalıdır; bu da ekran okuyucuya görseli tamamen atlamasını söyler.
• Metin içeren görseller — Kelimeler içeren ekran görüntüleri veya grafikler. En iyi uygulama, bunlardan tamamen kaçınmak ve bunun yerine gerçek, stillendirilmiş metin kullanmaktır. Kaçınılmaz olduklarında, alt metin görseldeki metni birebir aktarmalıdır.
• Karmaşık görseller — Yoğun veri içeren grafikler, diyagramlar, haritalar ve infografikler. Kısa bir alt metin özeti gereklidir; buna ek olarak sayfa gövdesinde veya görselden bağlantılı daha uzun, yapılandırılmış bir açıklama gerekir.

Boş alt metnin (alt='') eksik alt özniteliğiyle aynı şey olmadığını unutmayın. Hiç alt özniteliği olmayan bir görsel, ekran okuyucunun görsel dosya adını veya URL’yi yüksek sesle okumasına neden olabilir — ki bu çoğu zaman sessizlikten daha kötüdür. Özniteliği, değeri bilerek boş olsa bile, her zaman ekleyin.

Gerçekten İşe Yarayan Alt Metin Yazmak: Pratik Kurallar

İyi alt metin yazmak göründüğünden daha zordur. İşte faydalı açıklamaları gürültüden ayıran somut kurallar:

• Kısa tutun. 125 karakterin altında kalmayı hedefleyin. JAWS ve NVDA gibi ekran okuyucular, daha uzun alt metinleri cümlenin ortasında kesebilir ve bu da vermek için uğraştığınız bilginin tam ortadan kesilmesine yol açar. Görsel daha fazlasını gerektirecek kadar karmaşıksa, bu, ek bir uzun açıklamaya ihtiyaç duyduğunuzun sinyalidir.
• "Image of" veya "Photo of" ile başlamayın. Ekran okuyucular, alt metni okumadan önce bir öğenin görsel olduğunu otomatik olarak belirtir. alt='Image of a smiling woman' yazmak, ekran okuyucunun “image, image of a smiling woman” demesine neden olur — bu da gereksizdir ve dinleyicinin zamanını boşa harcar.
• Sadece görünümü değil, anlamı betimleyin. Alt metin, görselin sağladığı bilgi veya işlevi iletmelidir. Q3 gelir artışını gösteren bir grafik sunuyorsanız, alt='Bar chart' yazmayın. Bunun yerine alt='Bar chart showing Q3 revenue up 22% year-over-year' gibi bir şey yazın ve tam veriyi çevreleyen metinde sağlayın.
• Bağlama uyum sağlayın. Aynı fotoğraf, kullanıldığı yere bağlı olarak farklı alt metin gerektirebilir. Bir “Ekibimizle Tanışın” bölümünde kullanılan masa üzerindeki bir dizüstü bilgisayar fotoğrafı, çalışma alanını betimleyen alt metne ihtiyaç duyabilir; bir ürün listesinde kullanıldığında ise dizüstü bilgisayarın özelliklerini ve görünümünü betimlemesi gerekir.
• Anahtar kelime doldurmayın. Alt metin arama motorları tarafından indekslenir, ancak anahtar kelime doldurmak hem kötü bir kullanıcı deneyimidir hem de WCAG’in amacını ihlal eder. Önce kullanıcı için yazın.
• Doğru dilbilgisi ve noktalama kullanın. Ekran okuyucular metni sese çevirir ve noktalama işaretleri ritmi ve netliği etkiler. Cümle kırıntıları, tamamlanmış bir düşünceye göre daha az doğal okunur.

Alt metnin soğuk, nesnel bir açıklama olması gerekmez. Kullanıcının içeriği deneyimlemesi açısından ilgili olduğunda, nüans, bağlam ve hatta duyguyu iletebilir — ve bazen iletmelidir.

Kod Örnekleri: Doğru ve Yanlış

Teori bir şeydir. Bu ilkelerin gerçek HTML’de nasıl uygulandığına bakalım.

Bilgilendirici görsel — kötü alt metin:

<img src='team-photo.jpg' alt='photo'>

Bilgilendirici görsel — iyi alt metin:

<img src='team-photo.jpg' alt='Accsible mühendislik ekibi, bir ürün sprint toplantısı sırasında beyaz tahtanın etrafında toplanmış'>

İşlevsel görsel (bağlantılı logo) — kötü alt metin:

<a href='/'>
  <img src='logo.svg' alt='logo'>
</a>

İşlevsel görsel (bağlantılı logo) — iyi alt metin:

<a href='/'>
  <img src='logo.svg' alt='Accsible — ana sayfaya dön'>
</a>

Süsleyici görsel — doğru uygulama:

<img src='decorative-wave-divider.svg' alt='' role='presentation'>

Karmaşık görsel (grafik) — bağlantılı uzun açıklamayla doğru yaklaşım:

<img
  src='q3-revenue-chart.png'
  alt='Bar chart: Q3 revenue up 22% YoY. Full data table below.'
  aria-describedby='chart-description'
>
<div id='chart-description'>
  <!-- Full tabular data or structured text description here -->
</div>

Görünür metin etiketi olmayan simge düğmeler için, düğmenin kendisinde aria-label kullanın ve çift duyurmayı önlemek için simge görselinde alt='' ayarlayın:

<button aria-label='Close dialog'>
  <img src='close-icon.svg' alt=''>
</button>

Belirli Görsel Türlerini Ele Alma

E-ticarette ürün görselleri: Bunlar, web’deki en kritik alt metin bağlamları arasındadır. Kör kullanıcılar, satın almayı düşündüklerini anlamak için tamamen alt metne güvenir. Yalnızca ürün adını betimlemek yetersizdir. Malzeme, renk, temel görsel özellikler ve görsel olarak ayırt edilebilir varyantları dahil edin. Örneğin: alt='Lacivert, altın düğmeli ve çentikli yakalı slim-fit yün blazer', alt='Blazer'dan çok daha kullanışlıdır.

Logolar: Logolar asla dekoratif değildir. Logo görselinde yer alan kuruluş adını ve anlamlı herhangi bir sloganı veya tanımlayıcıyı içeren alt metin gerektirirler. Logo aynı zamanda bir bağlantıysa, alt metin yukarıda tartışıldığı gibi hedefini tanımlamalıdır.

İnfografikler: Bunları iyi ele almak ünlü derecede zordur. Tek bir alt özniteliği, karmaşık bir infografiğin bilgi yükünü taşıyamaz. Doğru yaklaşım, kısa, özet düzeyinde bir alt metin (örneğin, alt='İnfografik, işe alım sürecimizin beş adımını özetliyor') ile sayfada görünür, yapılandırılmış bir metin sürümünü eşleştirmektir.

İnsan görselleri: İnsanların tanımlandığı durumlarda isimleri dahil etmek, özellikle editoryal veya haber bağlamlarında faydalıdır. Yalnızca fiziksel görünümlerini değil, kişinin ne yaptığını veya görselin neyi ilettiğini betimleyin. Bir kişiyi demografik özelliklerine indirgemeye çalışan betimlemelerden kaçının.

Arka plan ve CSS görselleri: CSS ile uygulanan background-image görsellerinin kullanılabilir bir alt özniteliği yoktur; bu nedenle yalnızca gerçekten dekoratif amaçlarla kullanılmalıdırlar. Bir görselin anlam iletmesi gerekiyorsa, HTML’de uygun alt metinle bir <img> öğesi olarak yer almalıdır.

Alt Metni İş Akışınıza Dahil Etmek

Alt metnin ölçekli olarak bozuk kalmasının nedenlerinden biri, son adımda akla gelen bir düşünce olarak ele alınmasıdır — yayına alındıktan sonra bir otomatik tarayıcının işaretlediği, aceleyle yamalanan bir şey. Çözüm, alt metni içerik ve geliştirme iş akışlarınızın daha erken aşamalarına taşımaktır.

İçerik ekipleri için bu, en yaygın görsel türlerinizi kapsayan bir alt metin stil rehberi oluşturmak anlamına gelir. Siteniz ürün görselleri, blog yazısı kapak görselleri, etkinlik fotoğrafları ve veri grafikleri yayımlıyorsa, her kategori iyi ve kötü açıklama örnekleriyle belgelenmiş bir standardı hak eder. Yazarlar ve editörler görsel yüklerken, alt metni de tıpkı başlıklar ve görsel seçimi gibi aynı anda düşünmelidir.

Geliştiriciler için bu, alt metin alanlarını CMS şablonlarına dahil etmek ve dekoratif olmayan görsel bileşenler için bunları isteğe bağlı değil — zorunlu — hale getirmek anlamına gelir. Bir bileşen bir görsel kabul ettiğinde, arayüz alt metin için istemde bulunmalı ve bilgilendirici ve dekoratif bağlamları ayırt etmelidir. Alt özniteliğini görsel dosya adı veya başlık metniyle otomatik doldurmaktan kaçının; bunlar farklı amaçlara hizmet eden farklı şeylerdir.

QA ve uyumluluk yöneticileri için, Accsible gibi erişilebilirlik katman çözümleri de dahil olmak üzere otomatik tarama araçları, eksik veya boş alt öznitelikli görselleri ölçekli olarak yakalayabilir ve bunları gerçek zamanlı olarak işaretleyebilir. Ancak otomatik araçlar, mevcut alt metnin gerçekten anlamlı olup olmadığını değerlendiremez — bu yargı, insan bir değerlendirici gerektirir. Erişilebilirlik denetim döngünüze manuel örnek kontroller ekleyin ve görseller içeren her yeni özellik kabul kriterine alt metin kalite incelemesini dahil edin.

Aynı görsel birden fazla sayfa veya bağlamda yeniden kullanıldığında, uygun alt metnin değişebileceğini unutmayın. Bir şirket merkezinin fotoğrafı, “Bize Ulaşın” sayfasında ve “Kültürümüz Hakkında” sayfasında kullanıldığında, her sayfanın iletmeye çalıştığı mesaja bağlı olarak farklı açıklamalar gerektirebilir. WordPress gibi CMS platformları, tam da bu nedenle gönderi düzeyinde alt metin geçersiz kılmalarına izin verir.

Kaçınılması Gereken Yaygın Hatalar

Alt metni ciddiye alan ekipler bile tekrarlayan hatalar yapar. Aktif olarak dikkat edilmesi gereken kalıplar şunlardır:

• Dosya adını alt metin olarak kullanmak. IMG_4521.jpg veya hero-banner-v3-final.png gibi bir alt metin, işe yaramaz olmaktan da kötü — ekran okuyucu kullanıcılarına kimsenin onları düşünmediğini aktif olarak gösterir.
• Alt metni bitişik başlıkla aynı yapmak. Başlıklar ve alt metin, farklı kitlelere ve farklı amaçlara hizmet eder. Başlık, gören kullanıcılar için tamamlayıcı bağlamdır; alt metin, görseli göremeyen kullanıcılar için görselin yerini alır. Örtüşebilirler, ancak birbirlerinin yerine kopyalanmamalıdır.
• Her görsele gelişigüzel alt metin eklemek. Süsleyici görsellere açıklayıcı alt metin vermek, ekran okuyucu kullanıcılarını ilgisiz içerik içinde yol almaya zorlar. “Bu görselin bir açıklamaya ihtiyacı var mı, varsa ne tür?” sorusunu sorma disiplini, yazımın kendisi kadar önemlidir.
• Belirsiz, bağlamdan kopuk açıklamalar yazmak. CEO’nuzun bir ürün lansmanı sırasında çekilmiş fotoğrafı için alt='man smiling' gibi bir alt metin, kullanıcıya görselin neden orada olduğu veya bağlamda ne anlama geldiği hakkında neredeyse hiçbir şey söylemez.
• SVG’lerde alt metni yok saymak. Satır içi SVG’lerin de erişilebilir isimlere ihtiyacı vardır; genellikle <svg> öğesinde aria-label aracılığıyla veya ilk çocuk olarak bir <title> öğesi ve role='img' ile birlikte.

<!-- Erişilebilir isme sahip SVG -->
<svg role='img' aria-labelledby='svg-title'>
  <title id='svg-title'>Quarterly revenue growth, Q1 to Q4 2024</title>
  <!-- SVG paths -->
</svg>

Temel Çıkarımlar

• Her görselin metin açıklamasına ihtiyacı yoktur. Süsleyici görseller, ekran okuyuculara onları atlamasını söylemek için alt='' kullanmalıdır — ancak alt özniteliğini asla tamamen atlamayın; yoksa ekran okuyucu dosya adını duyurabilir.
• Bilgilendirici görseller için alt metni 125 karakterin altında tutun; ekran okuyucular daha uzun dizeleri kesebilir ve kısalık dinleme anlaşılırlığını artırır. Karmaşık görseller için, kısa bir alt özetini sayfa gövdesinde tam metin açıklamasıyla eşleştirin.
• Yalnızca biçimi değil, işlevi betimleyin. Bağlantılı ve işlevsel görseller için alt metin, kullanıcının ne olacağını veya nereye gideceğini söylemelidir — görselin nasıl göründüğünü değil. Bilgilendirici görseller için, yalnızca görsel içeriği değil, anlamı iletin.
• Alt metni iş akışınıza en baştan dahil edin, yayından sonra düzeltilecek bir şey olarak değil. CMS’nizde zorunlu alan yapın, içerik stil rehberlerine ekleyin ve QA sürecinize kalite incelemesi ekleyin — otomatik araçlar eksik alt metni yakalar, ancak mevcut metnin anlamlı olup olmadığını insanlar değerlendirmelidir.
• Hukuki ve düzenleyici riskler gerçek ve artıyor. Eksik alt metne atıfta bulunan ADA davaları 2024’te binlerle ifade edildi ve AB’nin Erişilebilirlik Yasası artık yürürlükte. Alt metni sonradan akla gelen bir düşünce olarak ele almak, uygulanabilir bir uyumluluk stratejisi değildir.