Alt Metin Yazım Rehberi: Otomatik Testlerden Gerçek Erişilebilirliğe

🎯 Neden Bu Konu? Otomatik Kontrollerin Sahte Güveni

Merhaba! 👋

Hazırsan başlayalım. Bil bakalım, sen de mi "Alt metinler otomatik testlerden geçti, işimiz bitti" diyerek rahatladın hiç? 😅

Ne oluyor burada?

Bir e-ticaret sitesinde ürün görseli olduğunu hayal et. Otomatik testlerimize bakıyoruz:

✅ alt attribute var → Test geçti
✅ Boş değil → Test geçti
✅ Karakter sayısı uygun → Test geçti

Hepsi yeşil! 🎉

Ama... o alt metni şu olabilir: "ürün-görseli-123" veya "resim".

Ne kazandık? Hiçbir şey. 🤷‍♂️

Neden tehlikeli bu?

Otomatik Test	Gerçek Kullanıcı Deneyimi
`alt` var mı?	Ne anlatıyor bu görsel?
Boş değil mi?	Kullanıcı karar verebiliyor mu?
Uzunluk uygun mu?	Bağlamda anlamlı mı?

Sahte güven veriyorlar. "Geçti" yazıyor, biz de işimiz bitti sanıyoruz. Oysa erişilebilirlik sadece varlık değil, anlam demek. 🎯

Bu yazıda, alt metinlerin sadece 'varlık' değil 'anlam' kazandırmasını nasıl sağlayacağımızı keşfedeceğiz. Hadi başlayalım! 🚀

❗️ Sorun: Geçen Testler, Kalan Engeller

Otomatik araçlar (axe, Lighthouse, WAVE vb.) hızlı bir tarama yapar ve “test geçti” derler. Ama bu testler sadece kural tabanlı kontrolleri doğrular.

Neden yeterli değil? 🤔

Kural tabanlı: “alt özniteliği var mı?” sorar, “içerik doğru mu?” sormaz.
WCAG 1.1.1 – Metin Olmayan İçerik kriteri, anlamlı bir metin alternatifi ister. Araçlar bunu yüzeysel karşılar.
Sahte geçişler kullanıcıyı yanıltır, ekran okuyucu deneyimini bozar.

Tipik “geçen” ama kötü örnekler 🚩

Alt değeri	Neden sorunlu?
`alt="resim"`	Hiçbir bilgi vermiyor, sadece “resim” diyor.
`alt="grafik"`	Aynı durum, içerik ne?
`alt=" "` (boşluk)	Boşluk karakteri, boş alt gibi davranır → ekran okuyucu atlar.
`alt="Kırmızı elma"` (doğru görünse de)	Sayfa elma satış sayfasıysa bu alt metin bağlamsız; kullanıcı “satın al” butonunu ararken “kırmızı elma” duyar.

Kod örneği – yanlış ve “doğru ama bağlamsız” alt metinler 🛠

<!-- Yanlış: anlamlı değil -->
<img src="chart.png" alt="grafik">
<img src="photo.jpg" alt="resim">
<img src="icon.svg" alt=" ">

<!-- Doğru görünen ama bağlamdan yoksun -->
<img src="apple.jpg" alt="Kırmızı elma">

Ne oluyor burada?

İlk üç img öğesi otomatik testlerden geçer (alt özniteliği var).
Dördüncüsü de geçer, ama kullanıcıya “elma satın al” yerine “kırmızı elma” söyler.
Ekran okuyucu kullanıcıları içeriği kavrayamaz, navigasyon zorlaşır.

Özet ✅

Otomatik kontroller = “alt var mı?” (yüzeysel).
Gerçek erişilebilirlik = “alt anlamlı mı?” (bağlamsal).
Testlerin “geçti” demesi yeterli değil; manuel inceleme ve kullanıcı testleri şart.

Hadi bir sonraki adımda nasıl manuel doğrulama yaparız ona bakalım 🚀

🔁 Nasıl Çalışırlar? Otomatik Araçlar vs İnsan Değerlendirmesi

Hadi arka planda ne olup bittiğine göz atalım 👇

🤖 Otomatik araçlar ne yapıyor aslında?

Basit bir mantıkla çalışıyorlar:

DOM ağacını tarar — sayfadaki her <img> elementi tek tek ziyaret edilir
alt özniteliği var mı? — hasAttribute('alt') kontrolü yapılır
Uzunluk kontrolü — alt.length > 0 ve genellikle alt.length < 100 gibi kurallar uygulanır
Sonuç — "Geçti" veya "Başarısız" etiketi basılır ✅❌

Bu kadar. Bağlam, amaç, duygusal ton... Bunların hiçbiri yok.

🧠 İnsan değerlendirmesi ne kattı?

Otomatik Araç	İnsan Değerlendirmesi
`alt` var mı?	Bu görsel ne anlatıyor?
Uzunluk uygun mu?	Bağlamda ne işe yarıyor?
—	Duygusal ton var mı? (örn. "Mutlu bir aile" vs "Aile")
—	İşlevsel eşdeğerlik — görseli göremeyen kişi aynı bilgiyi alıyor mu?
—	Web semantikleri — Etiketin anlamı, etrafındaki metinle ve sayfa amacıyla nasıl ilişkilidir?

Web semantikleri tam da bu soruyu sorar: Bu alt metni, yanındaki başlıkla, paragrafıyla, butonla... Bütün sayfa hikayesiyle tutarlı mı? 🎯

🛠 Pratik örnek: Otomatik kural motoru vs İnsan soruları

// Otomatik kural motoru — basit ve dürüst
function otomatikAltKontrolu(imgElement) {
  const alt = imgElement.getAttribute('alt');
  
  if (alt === null) {
    return { gecti: false, sebep: 'alt özniteliği eksik' };
  }
  
  if (alt.trim().length === 0) {
    return { gecti: false, sebep: 'alt boş' };
  }
  
  if (alt.length > 100) {
    return { gecti: false, sebep: 'alt çok uzun (>100 karakter)' };
  }
  
  return { gecti: true, sebep: 'Temel kurallar sağlandı' };
}

// İnsanın sorduğu sorular — pseudo-kod olarak
function insanDegerlendirmesi(imgElement, sayfaBaglami) {
  // Bu görsel NE anlatıyor?
  const gorselAnlami = gorselAnaliziYap(imgElement.src); // "Kahve fincanı, yanında dizüstü bilgisayar"
  
  // Bağlamda NE İŞE YARIYOR?
  const baglamsalRol = belirle(imgElement, sayfaBaglami); 
  // Örn: "Makale başlığının ('Uzaktan Çalışma İpuçları') görsel özeti"
  
  // Duygusal TON var mı?
  const duygusalTon = tespitEt(gorselAnlami); // "Rahat, üretken, sıcak bir ortam hissiyatı"
  
  // İşlevsel EŞDEĞERLIK — görseli göremeyen kişi neyi kaçırıyor?
  const kacirilanBilgi = karsilastir(gorselAnlami, imgElement.alt);
  // alt: "Kahve" → KAÇIRILAN: "Dizüstü bilgisayar, çalışma ortamı, rahatsız edici detaylar yok"
  
  // Web semantikleri — etrafındaki metinle tutarlı mı?
  const semantikTutarlilik = dogrula(imgElement.alt, sayfaBaglami.metinler);
  
  return {
    onerilenAlt: olustur(gorselAnlami, baglamsalRol, duygusalTon),
    notlar: kacirilanBilgi
  };
}

💡 Ne anladık?


Otomatik araç	"Var mı? Uzunluğu uygun mu?" → Sözdizimi (syntax) kontrolü
İnsan	"Ne anlatıyor? Neden burada? Tutarlı mı?" → Anlam (semantik) kontrolü

Otomatik araç ilk kapıyı açar. Ama içeriye girip oturup kahve içen, "Bu alt gerçekten işe yarıyor mu?" diyen insandır ☕

Bir sonraki bölümde bu iki dünyayı nasıl birleştireceğimize — hibrit yaklaşıma — bakalım.

🎯 Çözüm: Etkili Alt Metnin 3 Piliği — Bağlam, Amaç, Kitle

Alt metin (alt text) yazmak "resmi tarif etmek" değil, görselin işlevini iletmektir. Hadi bu formülü üç basit pilere bölelim 👇

1️⃣ Bağlam — "Görsel nerede, hangi metinle çevrili?"

Görsel boşlukta yok; bir makale içinde, bir kartta, bir hero section'da duruyor. O çevre ne anlatıyorsa, alt metin ekstra bilgi vermeli, tekrar etmemeli.

Seviye	Örnek (Ürün sayfasında "Akıllı Saat X" başlığı altında saat fotoğrafı)
❌ Kötü	"Akıllı Saat X'in fotoğrafı" — Başlık zaten bunu söylüyor.
✅ İyi	"Siyah kemerli, yuvarlak ekranlı Akıllı Saat X, yan profil görünümü" — Görünen detayı katar.
🌟 Mükemmel	"Spor modunda kalp atışı sensörü vurgulanmış, yuvarlak ekranlı siyah Akıllı Saat X" — Bağlamdaki "spor modu" vurgusuyla birebir örtüşür.

İpucu: Bağlamı bulmak için kendine sor: "Bu görseli kaldırsam, kullanıcı neyi kaçıracak?" O cevap senin alt metnindir.

2️⃣ Amaç — "Görsel ne iş yapıyor?"

Her görsel bir işlev taşır. Dört ana kategori:

Amaç	Ne anlatmalı?
📊 Bilgi	Veri, trend, ilişki — özetle "ne gösteriyor?"
🎨 Dekorasyon	Hiçbir şey — `alt=""` (boş) bırak, ekran okuyucu atlasın.
🔘 Eylem	Buton/bağlantıysa nereye götürür? — "Arama yap", "Sepete ekle" gibi.
❤️ Duygusal etki	Hangi hissi uyandırıyor? — "Mutlu aile pikniğinde güneş ışığında kahkaha atan çocuklar"

Kötü / İyi / Mükemmel örneği (İkon butonu — arama):

Seviye	Alt metin
❌ Kötü	"Büyüteç ikonu"
✅ İyi	"Arama butonu"
🌟 Mükemmel	"Arama yap — site içinde ürün, makale veya sayfa ara"

3️⃣ Kitle — "Kim okuyacak, ne biliyor?"

Yeni başlayan kullanıcı: Jargon yok, net terminoloji.
Uzman/teknik kitle: Kısaltmalar, model numaraları, parametreler OK.
Genel kitle: Ortak payda, günlük dil.

Kural: Alt metni en az bilgili okuyucuya göre yaz. İleriye dönük detaylar aria-describedby veya yan metinde dursun.

🛠 Kapsayıcı Tasarım Bağlantısı

İçerik üreticisi olarak senin kararların, bir başkasına kapı aralayan rampayı dikiş dikiş döşemek gibidir.

Alt metni ihmal etmek = rampayı yarım bırakmak. Her eksik/yanlış alt metin, bir kullanıcıyı dışarıda bırakır. Mükemmel alt metin ise o rampayı kaymaz, pürüzsüz, güvenli hale getirir 🌈

🤖 AI Görüntü Açıklamaları — Not

AI şu an bağlamı tam kavrayamıyor.

Otomatik alt metin üreten modeller "ne görüyor" der ama "neden burada?" sorusunu cevaplayamaz. Bu yüzden insan denetimi şart. AI'ı taslak için kullan, son kararı sen ver.

📋 Pratik Şablon — Markdown Tablosu

Görsel türü	Bağlam	Amaç	Kitle	Önerilen alt metin
Ürün fotoğrafı	Ürün detay sayfası, başlık "Yün Kazak Krem"	Bilgi + Satış	Alışveriş yapan herkes	"Krem renkli, yün dokulu, yaka başı dik kazak, ön cep detaylı, model 175 cm beden M giyiyor"
İkon butonu	Header'da sağ üstte, "Sepetim" yazısının solunda	Eylem (sepete git)	Siteyi gezen herkes	"Sepeti görüntüle — 3 ürün, toplam ₺1.250"
Karmaşık infografik	Blog yazısı içinde "2024 E-ticart Trendlend" başlığı altında	Bilgi (veri özeti)	Veri meraklıları, karar vericiler	"2024 e-ticaret büyümesi %23, mobil alışveriş payı %68, sosyal ticaret %15 büyüdü — detaylar metinde"
Dekoratif arka plan	Hero section arka planında soyut geometrik şekiller	Dekorasyon	Hiçbiri (atlanmalı)	`alt=""` (boş bırak)

Özetle: Bağlam + Amaç + Kitle = Erişilebilir, kullanışlı, insanı anlayan alt metin. Hangi pil eksik kalırsa, deneyim çökers 🎯

🛠 Pratik: Adım Adım Alt Metin Yazma Çalışma Kitapçığı

Hazırsan 5 adımda güvenli ve erişilebilir bir alt metin üretelim. Her adımda benim kişisel ipucumu da ekliyorum — kendi akışına göre uyarlayabilirsin 🎯

1️⃣ Görseli kapat, sayfayı dinle

Ekran okuyucuya (NVDA, VoiceOver, Narrator…) başla ve görseli görmeden içeriği dinle.
Ne anlatıyor? ne hissettiriyor? not al.

Ben şöyle yapıyorum: Klavye kısayolu Ctrl + Shift + Space ile hızlıca okuyucuyu açıp, sadece o bölgeye odaklanırım.

2️⃣ Sor: “Bu görseli silseydim ne kaybolurdu?”

Eğer cevap “hiçbir şey” ise → dekorasyon → alt="" (boş alt metin).
Eğer bilgi, işlev veya karmaşık içeriyorsa → alt metin yazmamız gerekir.

Ben şöyle yapıyorum: Kağıda “Kaldırılırsa ne gider?” yazıp cevabı tek cümleyle özetlerim.

3️⃣ Görseli kategorilendir

Kategori	Ne Zaman Kullanılır?	Alt Metin Örneği
Bilgi	Grafik, tablo, infografik	“2023 satışları: Q1 120, Q2 150, Q3 130, Q4 170”
İşlev	Buton, ikon, link	“Arama yap” (lupa ikonu)
Dekorasyon	Sadece estetik	`alt=""`
Karmaşık	Harita, şema, karmaşık diyagram	Kısa özet + “Detaylar için uzun açıklama bağlantısı”

Ben şöyle yapıyorum: Her görseli bir etiket ile işaretlerim (ör. data-img-type="info"), sonra otomatik kontrol scripti çalıştırırım.

4️⃣ Taslak yaz — 125 karakter kuralı ama kısaltma sanatı yap

İlk cümlede ana mesaj olsun.
Gereksiz “resimde”, “görselde” ifadelerini at.
Eylem odaklı dil kullan: “İndir”, “Kaydet”, “Görüntüle”.

Ben şöyle yapıyorum: Taslağı Tweet yazar gibi kısaltırım, sonra 125 karakteri geçip geçmediğini sayarım (wc -m veya VS Code karakter sayacı).

5️⃣ Bir başkasına (veya sesli okuyarak) test et

Alt metni bir arkadaşa oku, “Anladın mı?” de.
Veya sesli okuyucu ile dinle — akıcılık ve netlik hissettiriyor mu?

Ben şöyle yapıyorum: npm run test:a11y komutuyla otomatik testleri çalıştırıp, hata varsa tekrar 4. adıma dönerim.

✅ Alt Metin Denetim Listesi (kopyala‑yapıştır)

Aşağıdaki JSON’ı projene ekleyip, CI/CD veya tarayıcı konsolunda console.table(altTextChecklist) diyerek hızlıca kontrol edebilirsin 🛠

[
  {
    "step": 1,
    "title": "Görseli kapat, sayfayı dinle",
    "action": "Ekran okuyucuyu başlat, görseli görmeden içeriği dinle",
    "personalTip": "Ctrl+Shift+Space ile hızlı başlatırım"
  },
  {
    "step": 2,
    "title": "Silinirse ne kaybolur?",
    "action": "Kendine sor: 'Bu görseli silseydim ne kaybolurdu?'",
    "personalTip": "Cevap 'hiçbir şey' ise alt='' bırakırım"
  },
  {
    "step": 3,
    "title": "Kategorilendir",
    "action": "Bilgi / İşlev / Dekorasyon / Karmaşık olarak etiketle",
    "personalTip": "data-img-type attribute eklerim"
  },
  {
    "step": 4,
    "title": "Taslak yaz (≤125 karakter)",
    "action": "Ana mesajı ilk cümlede ver, gereksiz kelimeleri at",
    "personalTip": "Tweet yazar gibi kısaltırım, karakter sayacı kullanırım"
  },
  {
    "step": 5,
    "title": "Test et",
    "action": "Başkasına oku / sesli okuyucu ile dinle",
    "personalTip": "npm run test:a11y ile otomatik test ederim"
  }
]

Bu listeyi VS Code’da bir alt-text-checklist.json dosyasına kaydedip, projenin scripts bölümüne test:a11y komutu ekleyerek süreci otomatikleştir. Artık her alt metin yazdığında bu 5 adımı mental checklist gibi hızlıca geçebilirsin 🚀

🔁 AI Görüntü Açıklamaları: Yardımcı mı, Tuzağ mı?

Tamamen açık konuşayım: Görüntü analizini hızlandırmak istediğinizde yapay zekâ modelleri (GPT‑4V, Gemini, alt metin eklentileri) devrim yaratıyor. 📈

Neler iyi yapıyorlar?

Nesne ve renk tanıma – malzemeleri, stilleri, sizin gördüğünüzü hemen görüyor.
Kompozisyon – sekansları, çerçevelemeleri, ana öğeleri tespit ediyor.
Hız – yüzlerce görselden dakikalar içinde açıklama çıkarabiliyor.

Nelerde zorlanıyorlar?

Bağlam – belirli bir markanın hikayesini anlamakta güçlük çekiyor.
Marka dili – logosunu tam olarak doğru tanımlayamıyor.
Hassas içerik – hassas/manyakça içeriği önemsemeyen açıklamalar üretebiliyor.
Kültürel nüans – bölgesel simgelerin anlamını kaçırıyor.

Sonuç: Bunlar güçlü araçlar, ama kontrolsüz bırakılınca kardeş tuzaklarına giriyoruz – “otomatik kontroller” (kopyalanan veya yanlış yorumlanan etiketler) ve saf “yapay zeka üretimi” (moderasyon edilmemiş açıklamalar).

İşe yarayan akış: İnsan in‑the‑loop

AI ilk tur – ham açıklama → visionApi.call()
İçerik uzmanı yapay zekâ bağlama görevi üstlenir – e-ticaret sayfası, marka tarzı, hedef kitle; metni yeniden yazar/rafine eder
Otomatik kontroller ve manuel test – önceki adıma güvenlik, tutarlılık, hassaslik kontrolleri yapılır

Sonuç: Modelin hızını insan tutarlılığı ile harmanlayarak hem hız hem kalite elde edilir.

Basit pipeline örneği

Aşağıda, görsel URL'sini alıp OpenAI Vision API'si üzerinden iki tur geçirerek açıklamayı rafine eden Node.js ve Python örneği yer alıyor. Şekli göstermek için sadə versiyonlar oluşturduk; gerçek API entegrasyonunuzla ilgili kod hali aynı kalır.

Node.js (pseudo‑import)

// dependencies (gerçek projede)
// const OpenAI = require('openai');
// const axios = require('axios');

async function describeImage(imgUrl) {
  // 1️⃣ İlk tur: ham açıklama
  const firstResponse = await openai.chat.completions.create({
    model: "gpt-4-vision-preview",
    messages: [
      { role: "system", content: "Görsele dair kısa ve açık bir açıklama ver." },
      { role: "user", content: [
        { type: "text", text: "Şimdi görseli tara." },
        { type: "image_url", image_url: { url: imgUrl } }
      ]}
    ]
  });

  const rawDesc = firstResponse.choices[0].message.content;

  // 2️⃣ İkinci tur: bağlama yönelik refinements
  const refinedResponse = await openai.chat.completions.create({
    model: "gpt-4-vision-preview",
    messages: [
      { role: "system", content: "Bu bir e-ticaret ürün sayfasındadır, odak: malzeme ve detay." },
      { role: "user", content: [
        { type: "text", text: `Şu açıklamayı e-ticaret yönergelerine uygun hale getir: ${rawDesc}` },
        { type: "image_url", image_url: { url: imgUrl } }
      ]}
    ]
  });

  return refinedResponse.choices[0].message.content;
}

// kullanım
// describeImage('https://example.com/product.jpg')
//   .then(console.log)
//   .catch(console.error);

Python (pseudo‑import)

# dependencies (gerçek projede)
# import openai
# import requests

def describe_image(img_url):
    # 1️⃣ İlk tur: ham açıklama
    first = openai.ChatCompletion.create(
        model="gpt-4-vision-preview",
        messages=[
            {"role": "system", "content": "Görsele dair kısa ve açık bir açıklama ver."},
            {"role": "user", "content": [
                {"type": "text", "text": "Şimdi görseli tara."},
                {"type": "image_url", "image_url": {"url": img_url}}
            ]}
        ]
    )
    raw_desc = first["choices"][0]["message"]["content"]

    # 2️⃣ İkinci tur: bağlama yönelik refinements
    refined = openai.ChatCompletion.create(
        model="gpt-4-vision-preview",
        messages=[
            {"role": "system", "content": "Bu bir e-ticaret ürün sayfasındadır, odak: malzeme ve detay."},
            {"role": "user", "content": [
                {"type": "text", "text": f"Şu açıklamayı e-ticaret yönergelerine uygun hale getir: {raw_desc}"},
                {"type": "image_url", "image_url": {"url": img_url}}
            ]}
        ]
    )
    return refined["choices"][0]["message"]["content"]

# kullanım
# print(describe_image('https://example.com/product.jpg'))

Bu sayede ne oluyor? İki aşamalı pipeline hızı korurken tutarlı bir marka tonunu garanti eder ve AI tarafından oluşturulan ham açıklamayı insan (veya kurallar) tarafından filtreler, böylece hem hızlı hem güvenli bir işlem olur.

Sizin için öneri

Yapay zekânın hızını insan denetiminin bağlama yönelik kalitesi ile birleştirin. hızlı AI → bağlama yönelik refine → otomatik kontroller. Böylece tuzaklardan kaçınır, gerçekten yardımcı bir açıklama sistemi oluşturursunuz. 🚀

🛠 Gerçek Kullanıcılarla Test: Kapsayıcı Tasarımın Kalbi

Otomatik testler ve AI tabanlı denetimler güzel bir başlangıç, ama son durağın daima gerçek kullanıcılar olduğunu unutma 🎯.
Ekran okuyucu kullanan birini yanına alırsan, 5 dakikada 3 görevle ne kadar çok şey öğreneceğine inanamazsın.

⚡ Hızlı Kullanıcı Testi Şablonu – “5 dk, 3 Görev, Düşünerek Konuş”

Adım	Ne Yapılır?	Neden?
1️⃣ Hazırlık	NVDA / VoiceOver / JAWS açık, sayfa yüklendi.	Gerçek ortamı simüle et.
2️⃣ Görev 1 – “Ana resmi bul ve ne anlattığını söyle”	Kullanıcı `Tab`/`Shift+Tab` ile gezer, `Enter` ile odaklanır.	Alt metin kalitesini hisset.
3️⃣ Görev 2 – “Başlıklar arasında dolaş, hiyerarşi doğru mu?”	`H` tuşu (NVDA) / `VO+Cmd+H` (VoiceOver) ile heading'ler listelenir.	Heading yapısı & landmark uyumu.
4️⃣ Görev 3 – “Formu doldur, hata mesajını duy”	`Tab` ile form alanları, `Enter` ile gönder.	`aria-describedby` / `role="alert"` testi.
5️⃣ Düşünerek Konuş	Kullanıcı her adımda “Ne duyduğumu, ne hissettiğimi, ne beklediğimi” anlatır.	Bilinçli bilişsel yükü ortaya çıkar.

İpucu: Ses kaydı al, sonra ekipte “Alt Metin Kalite Skoru” hesaplarken bu notları kullan.

📊 Erişilebilirlik Denetim Raporu'na Alt Metin Kalite Skoru Ekleme

Her görsel için 0‑5 arası puanla
- 0 = alt yok
- 1 = “resim” / “image” gibi anlamsız
- 2 = AI üretilmiş, genel ama yanlış detaylar
- 3 = AI + insan incelemesi, küçük eksikler
- 4 = İnsan yazımı, bağlam uygun, kısa
- 5 = Mükemmel: bağlam, işlev, duygusal ton tam
Ortalama al → “Alt Metin Kalite Skoru”
- Raporun Özet kısmına “Alt Metin Kalite Skoru: 3.7 / 5” yaz.
- Detay tablosunda her görselin puanı ve kullanıcı yorumu yer alsın.
Eşik belirle
- ≥ 4 → “Yayına hazır” ✅
- 2‑3 → “Revizyon gerekli” ⚠️
- < 2 → “Engelli erişimi riskli” ⛔

🧩 Web Semantikleri ile Uyum: Alt Metin, Heading & Landmark

Bileşen	Ne Olmalı?	Neden?
Alt Metin	`alt="..."` veya `role="img" aria-label="..."`	Ekran okuyucuya anlam verir.
Heading Yapısı	`<h1>` → `<h2>` → `<h3>` … sıralı, atlama yok.	Kullanıcı hiyerarşiyi hızla tarar.
Landmark'lar	`<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>` + `role="region" aria-labelledby="…"`	Bölge atlaması (NVDA `D`, VoiceOver `VO+U`) sağlar.
Tutarlılık	Alt metin, heading metni ve landmark etiketleri aynı dilde, aynı terminoloji.	Bilişsel yükü azaltır, güven artar.

Kural: Bir görsel bir landmark içindeyse, alt metni o landmark’ın amacını desteklemeli. Örn. <main> içindeki ürün resmi → “Ürün X’in ön yüzü, mavi renkli” gibi.

📝 Pratik Alt Metin Kalite Ölçekli Anketi (5‑li Likert)

Soru	1 – Kesinlikle Katılmıyorum	2	3	4	5 – Kesinlikle Katılıyorum
1. Alt metin görselin içeriğini tam açıklıyor mu?
2. Alt metin bağlamı (sayfa amacı) ile uyumlu mu?
3. Alt metin gereksiz detay (dosya adı, boyut) içeriyor mu? (ters skor)
4. Alt metin duygusal/tonal uygunluğu sağlıyor mu?
5. Kullanıcı testinde bu görsel için anlamlı bir geri bildirim alındı mı?

Puanlama: Her satır 1‑5, toplam 5‑25 arası.
Değerlendirme:
- ≥ 20 → Mükemmel ✅
- 15‑19 → İyi, küçük iyileştirmeler ⚙️
- 10‑14 → Orta, yeniden yazım 🔁
- < 10 → Kötü, acil müdahale ⛔

Anketi Google Forms / Microsoft Forms’ta 2 dk dağıt, kullanıcı testinden hemen sonra doldur. Verileri raporuna grafik olarak ekle → stakeholder’lar anında görselleşir.

🧪 Test Sayfası Şablonu – Alt Metin Stratejilerini Yan Yana Deneme

Aşağıdaki HTML’i test-alt.html olarak kaydet, tarayıcıda aç ve ekran okuyucuyla gezin.
Dört farklı strateji yan yana görülecek; role="img" + aria-label kombinasyonları da test edilebilir.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Alt Metin Stratejileri Test Sayfası</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    .card { border: 1px solid #ccc; padding: 1rem; text-align: center; }
    img { max-width: 100%; height: auto; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  </style>
</head>
<body>
  <header>
    <h1>Alt Metin Kalite Karşılaştırması</h1>
  </header>

  <main>
    <section aria-labelledby="strategy-heading">
      <h2 id="strategy-heading">Stratejiler</h2>
      <div class="grid">
        <!-- 1️⃣ Alt yok -->
        <article class="card">
          <h3>1️⃣ Alt Yok</h3>
          <img src="sample.jpg" alt="">
          <p class="sr-only">Alt metin boş</p>
        </article>

        <!-- 2️⃣ Kötü alt -->
        <article class="card">
          <h3>2️⃣ Kötü Alt</h3>
          <img src="sample.jpg" alt="resim">
          <p class="sr-only">Alt: “resim”</p>
        </article>

        <!-- 3️⃣ AI üretilmiş -->
        <article class="card">
          <h3>3️⃣ AI Üretilmiş</h3>
          <img src="sample.jpg" alt="Bir köpek bahçede top oynuyor.">
          <p class="sr-only">AI alt: “Bir köpek bahçede top oynuyor.”</p>
        </article>

        <!-- 4️⃣ İnsan yazımı + role="img" + aria-label -->
        <article class="card">
          <h3>4️⃣ İnsan + ARIA</h3>
          <div role="img" aria-label="Mutlu bir Golden Retriever, yeşil çimdeki parlak mavi topu ağızında tutarak kameraya bakıyor.">
            <img src="sample.jpg" alt="Mutlu bir Golden Retriever, yeşil çimdeki parlak mavi topu ağızında tutarak kameraya bakıyor.">
          </div>
          <p class="sr-only">İnsan alt + role=img aria-label</p>
        </article>
      </div>
    </section>
  </main>

  <footer>
    <p>Test için NVDA / VoiceOver / JAWS ile gezin, her kartın alt metnini dinle.</p>
  </footer>
</body>
</html>

Ne oldu?

1️⃣ → Ekran okuyucu “grafik” der, bilgi kaybeder.
2️⃣ → “resim” denir, hiçbir bağlam yok.
3️⃣ → AI genel bir cümle kurar, bazen yanlış detay ekler.
4️⃣ → Hem alt hem aria-label ile çift güvenlik; kullanıcı “Mutlu bir Golden Retriever…” duyar → en yüksek kalite.

Bu sayfayı CI/CD’ye ekle, her PR’de otomatik açılsın ve ekibin “5 dk, 3 Görev” testini bu şablonla yap. Böylece gerçek kullanıcı geri bildirimi sürekli döngüye girer 🚀.

🎯 Bonus Tavsiye: Alışkanlık Yap, Kontrol Etmeyi Bırakma

Otomatik yeşil tik başlangıçtır, bitiş değil ✅

Mikro alışkanlık ekle:

📸 Her görsel eklediğinde 10 saniye dur
❓ Kendine sor: “Bu ne anlatıyor?”
✍️ Anlamlı bir alt metin yaz

Kapsayıcı tasarım bir hedef değil, günlük bir pratik 🛠

Küçük adımlar birikir, büyük fark yaratır
Her gün bir alışkanlık, erişilebilirliği doğal hale getirir

🎉 Son Söz

Senin yazdığın her anlamlı alt metin, dijital dünyayı bir adım daha erişilebilir kılıyor. Devam et! 🚀

Bu içerik tamamen yapay zeka destekli otomasyon sistemi ile üretilmiştir.