Bu kural ne anlama geliyor

WCAG 2.4.9, 2.4.4'un (Bağlantı Amacı — Bağlamda) geliştirilmiş versiyonudur. 2.4.4 bağlantı amacının çevreleyen bağlamdan belirlenmesine izin verirken, bu AAA kriteri her bağlantının amacının yalnızca bağlantı metninden — çevreleyen paragraf, başlık veya liste öğesine dayanmadan — belirlenebilmesini gerektirir.

Bu, çevreleyen bağlam hedefi netlestirse bile "Devamını oku" gibi bağlantı metninin bu kriter altında asla kabul edilebilir olmadığını belirtir. Her bağlantı kendini tanımlamalıdır. Tek istisna, bağlantının amacının yalnızca yardımcı teknoloji kullanıcılarına değil tüm kullanıcılar için belirsiz olacağı durumlarda geçerlidir.

Neden önemlidir

Ekran okuyucu kullanıcıları yaygın olarak bağlantılar listesi kullanarak gezinir — sayfadaki tüm bağlantıları baglamlarindan ayrılmış olarak gösteren bir iletişim kutusu. Bağlantı metni kendini tanimladiginda kullanıcılar bu listeyi tarayabilir ve ihtiyaç duydukları baglantini hemen bulabilir. Bu, sayfadaki her baglanina gidip bağlam için çevreleyen içeriklere guvenmekten önemli ölçüde daha hızlı ve verimlidir.

Kendini tanımlayan bağlantılar ayrıca bağlantıları görünür metinlerini söyleyerek etkinlestiren ses kontrolü yazılımı kullanan kullanıcılar ve bağlantı metni ile çevreleyen bağlam arasındaki ilişkiyi takip edemeyen bilişsel engelli kullanıcılar için de fayda sağlar.

İlgili axe-core kuralları

identical-links-same-purpose — Aynı erişilebilir ada sahip bağlantıların aynı amaca hizmet etmesini doğrular.

Nasıl test edilir

Sayfadaki tüm bağlantıların listesini oluşturun (ekran okuyucu bağlantı listesi veya tarayıcı eklentisi).
Her bağlantıyı izole olarak inceleyin — çevreleyen bağlam olmadan nereye götürdüğünü belirleyebiliyor musunuz?
axe-core çalıştırarak identical-links-same-purpose ihlallerini tespit edin.
Hiçbir bağlantının bağımsız bağlantı metni olarak "buraya tıklayın", "devamını oku", "daha fazla bilgi" veya "burada" gibi genel metin kullanmadığını kontrol edin.

Görsel bağlantıların bağlantı hedefini tam olarak tanımlayan alt metnine sahip olduğundan emin olun.

Nasıl düzeltilir

Tüm genel bağlantı metinlerini kendini tanımlayan metinle değiştirin veya açıklayıcı erişilebilir adlar sağlamak için aria-label kullanın.

Kendini tanımlayan bağlantı metni

<!-- 2.4.9'u geçemiyor: Anlamak için bağlam gerektiriyor -->
<article>
  <h3>Erişilebilirlik Denetim Hizmeti</h3>
  <p>Sitenizi uyumluluk için test ediyoruz. <a href="/hizmetler/denetim">Devamını oku</a></p>
</article>

<!-- 2.4.9'u geçiyor: Bağlantı metni kendini tanımlayan -->
<article>
  <h3>Erişilebilirlik Denetim Hizmeti</h3>
  <p>Sitenizi uyumluluk için test ediyoruz.
    <a href="/hizmetler/denetim">Erişilebilirlik denetim hizmetimiz hakkında bilgi edinin</a>
  </p>
</article>

Kendini tanımlayan bağlantılı kartlar

<!-- Başarısız: Aynı sayfada birden fazla "Ayrıntıları gör" bağlantısı -->
<div class="kart">
  <h3>Aylık Rapor</h3>
  <a href="/raporlar/aylık">Ayrıntıları gör</a>
</div>
<div class="kart">
  <h3>Yıllık Özet</h3>
  <a href="/raporlar/yıllık">Ayrıntıları gör</a>
</div>

<!-- Başarılı: Her bağlantı benzersiz şekilde açıklayıcı -->
<div class="kart">
  <h3>Aylık Rapor</h3>
  <a href="/raporlar/aylık">Aylık rapor ayrıntılarını gör</a>
</div>
<div class="kart">
  <h3>Yıllık Özet</h3>
  <a href="/raporlar/yıllık">Yıllık özet ayrıntılarını gör</a>
</div>

Görsel metin kısa olmalı ise aria-label kullanımı

<!-- Görsel tasarım "Devamını oku" gerektiriyor ama a11y için ayrıntı lazım -->
<a href="/blog/wcag-rehberi"
   aria-label="Tam WCAG uyumluluk rehberi hakkında devamını oku">
  Devamını oku
</a>

Sık yapılan hatalar

"Buraya tıklayın", "devamını oku", "daha fazla bilgi", "burada" veya "daha fazla" ifadelerinin bağlantı metni olarak herhangi bir kullanımı — çevreleyen bağlamla bile.
Farklı hedeflere işaret eden aynı metne sahip birden fazla bağlantı (örneğin birden fazla "İndir" bağlantısı).
Bağlantı amacı için aria-describedby kullanmak — bu bir açıklama ekler ancak erişilebilir adı değiştirmez.
Alt metnin bağlantı hedefini tanımlamak yerine "simge" veya "görsel" dediği görsel bağlantılar.
Bir görsel ve metni birleştiren ancak ekran okuyucularda tekrarlanan duyurulara neden olan bağlantılar.

2.4.9 Bağlantı Amacı (Yalnızca Bağlantı)