Bağlantı Metni: "Daha Fazla Bilgi" Neden Çalışmıyor
Bir sayfadaki bağlantıların yarısı "Daha Fazla Bilgi" diyorsa, o sayfa ekran okuyucu kullanan birine neredeyse hiçbir şey söylemiyor. Arama motoru da aynı boşluğu görüyor. İyi tarafı, düzeltmesi ucuz: bağlantı metnini hedef sayfanın konusuyla değiştirmek ortalama bir sitede yarım günlük iş, altyapıya dokunmaya gerek yok.
Önce bağlantıları listeleyip dinleyin
Teoriden önce şunu yapın: ekran okuyucuyu açıp sayfanın bağlantı listesini çağırın. NVDA'da NVDA+F7, VoiceOver'da VO+U. Bu listede bağlantılar çevresindeki paragraftan koparılmış halde, sadece kendi metinleriyle sıralanır.
İşte "Daha Fazla Bilgi" tam burada çöküyor. Görsel olarak bakan biri bağlantıyı üstündeki başlıkla birlikte görür, bağlam onu kurtarır. Listeye düşen kullanıcı ise yirmi tane aynı satır görür ve hangisinin hangi ürüne gittiğini bilemez.
Bir e-ticaret projesinde kategori kartlarının altındaki 40 küsur "Detay" bağlantısını bu listede üst üste görünce, kartların başlıklarını bağlantıya çevirip alttaki metni tamamen kaldırdık.
WCAG burada iki ayrı eşik koyuyor
Ayrımı bilmek işinizi kolaylaştırır, çünkü hangi düzeltmenin zorunlu hangisinin tercih olduğunu belirler:
- 2.4.4 Link Purpose (In Context), A seviyesi: bağlantının amacı metninden veya çevresindeki bağlamdan anlaşılabiliyorsa yeterli. Liste öğesi içindeki "Daha Fazla Bilgi" teknik olarak bu eşiği geçebilir.
- 2.4.9 Link Purpose (Link Only), AAA seviyesi: bağlantı metni tek başına yeterli olmak zorunda. Yukarıdaki bağlantı listesi senaryosu tam olarak bunu ölçer.
Yani "zorunlu değil" diye savunabileceğiniz bir alan var. Savunmayın. Bağlam bağımlılığı sadece ekran okuyucuda değil, arama sonucunda, site içi aramada, bookmark listesinde de kırılıyor. Kriterlerin tam metni W3C WCAG hızlı referansında duruyor.
Metni ne yapacaksınız
Hedef sayfanın konusunu bağlantıya taşıyın, cümleyi değil. Dört beş kelime fazlasıyla yeter.
| Yerine | Şunu yazın |
|---|---|
| Daha fazla bilgi | Teslimat süreleri |
| Devamını oku | Form doğrulama örnekleri |
| Buraya tıklayın | Fiyat listesini indir (PDF, 240 KB) |
| Detay | Kartın kendi başlığı, bağlantıya çevrilmiş |
Dosyaya giden bağlantılarda formatı ve boyutu metnin içine koyun. Kullanıcı yeni sekme mi açılacağını, indirme mi başlayacağını tıklamadan bilsin. Bu küçük parantez, destek kanalına düşen "link bozuk" mesajlarının bir kısmını baştan keser.
Başlık zaten bağlantıysa altına ikinci bağlantı koymayın
Kart tasarımlarında sık görülen hata: başlık bağlantı, görsel bağlantı, altta da bir "Devamı" bağlantısı. Üçü aynı yere gidiyor. Klavyeyle gezen biri aynı hedefe üç kez tab basar. Birini bırakın, tercihen başlığı.
"Anahtar kelimeyi başa al" tavsiyesinin ters çalıştığı yer
Bağlantı metnine anahtar kelimeyi öne almak SEO tarafında mantıklı, ama tek başına uygulanınca kendi çözdüğü sorunu geri getiriyor. Sayfadaki her bağlantı aynı kelimeyle başlarsa ("SEO dostu bağlantı yazımı", "SEO dostu URL yapısı", "SEO dostu başlık kuralları") bağlantı listesi yine ayırt edilemez hale gelir; ekran okuyucu kullanıcıları o listede ilk harfleri yazarak filtreler, ortak önek filtrelemeyi işlevsiz bırakır.
Pratik kural: ayırt edici kelime başta olsun, ortak kelime değil. Yukarıdaki üçlü "Bağlantı yazımı", "URL yapısı", "Başlık kuralları" olarak yazılırsa hem listede ayrışır hem de zaten SEO bağlamını sayfanın kendisinden alır.
aria-label ile üstünü kapatmaya çalışmak
Tasarım "Daha Fazla Bilgi" yazmasını istiyor diye geliştiricinin ilk uzandığı yer burası:
<a href="/teslimat" aria-label="Teslimat süreleri hakkında daha fazla bilgi">Daha Fazla Bilgi</a>Bu yarım çözüm, bazı durumlarda ise yeni bir hata. aria-label görünen metni genişletmez, tamamen değiştirir. Sesle komut veren kullanıcı ekranda okuduğunu söyler ("daha fazla bilgi'ye tıkla"), erişilebilir ad ise onunla başlamadığı için eşleşme tutmaz. WCAG 2.5.3 Label in Name tam bu durumu yasaklar.
Kullanacaksanız kuralı basit: görünen metin, erişilebilir adın başında birebir geçsin. "Teslimat süreleri" yazıp aria-label'ı "Teslimat süreleri ve kargo ücretleri" yapmak geçerli. Tersi değil. Çoğu durumda görünen metni düzeltmek, iki katmanı senkron tutmaktan daha az maliyetli.
Mevcut siteyi ölçmek
Nereden başlayacağınızı bilmek için denetim aracı kurmanız gerekmiyor. Konsolda şu üç satır, sayfadaki tekrar eden bağlantı metinlerini verir:
const m = [...document.querySelectorAll('a[href]')] .map(a => (a.innerText || '').trim().toLowerCase()); const tekrar = m.filter((x, i) => x && m.indexOf(x) !== i); console.log([...new Set(tekrar)]);Çıkan listenin başındaki iki üç ifade, işin yüzde sekseni demektir. Şablonlarda bunları düzeltin, geri kalanı zamanla toparlanır.