Bu kural ne anlama geliyor

WCAG 2.4.4, her bağlantının amacının bağlantı metninin kendisinden veya bağlantı metninin çevreleyen bağlamıyla — kapsayan paragraf, liste öğesi, tablo hücresi veya başlık gibi — birlikte anlaşılabilmesini gerektirir. Kullanıcılar bir bağlantıyı etkinleştirmeden önce nereye götüreceğini belirleyebilmelidir.

Bu, "buraya tıklayın", "devamını oku" veya "daha fazla bilgi" gibi bağlantı metinlerinin çevreleyen bağlam hedefi netleştirmediğinde başarısız olduğu anlamına gelir. Amaç ya yalnızca bağlantı metninden ya da programatik bağlamının yardımıyla açık olmalıdır.

Neden önemlidir

Ekran okuyucu kullanıcıları sayfadaki tüm bağlantıların listesini getirerek sık sık gezinir. Her bağlantı "buraya tıklayın" veya "devamını oku" dediğinde bu liste kullanışsız hale gelir — kullanıcı bağlantıları birbirinden ayırt edemez veya hangisini izleyeceğini belirleyemez. Bu onları her bir bağlantıya tek tek gezinmeye ve bağlam için çevreleyen metni okumaya zorlar ki bu son derece zaman alıcıdır.

Açıklayıcı bağlantı metni ayrıca sayfaları görsel olarak tarayan gören kullanıcılar, net ipuçlarına ihtiyaç duyan bilişsel engelli kullanıcılar ve bağlantı metnini sıralama sinyali olarak kullanan arama motorları için de fayda sağlar.

İlgili axe-core kuralları

link-name — Her bağlantının amacını tanımlayan ayırt edilebilir bir metne sahip olmasını doğrular.

Nasıl test edilir

Bir ekran okuyucu kullanarak bağlantı listesi oluşturun (örneğin NVDA: Insert+F7, VoiceOver: Rotor > Bağlantılar). Her bağlantının amacının bağlam dışında açık olup olmadığını inceleyin.
axe-core çalıştırın ve link-name ihlallerini (erişilebilir adı olmayan bağlantılar) kontrol edin.
Genel metne sahip tüm bağlantıları ("buraya tıklayın", "devamını oku", "burada", "daha fazla") manuel olarak inceleyin ve programatik bağlamın amaçlarını netleştirip netleştirmediğini kontrol edin.
Görsel bağlantıların bağlantı hedefini tanımlayan alt metnine sahip olup olmadığını kontrol edin.

aria-label veya aria-labelledby kullanan bağlantıların hedefi doğru şekilde tanımladığını doğrulayın.

Nasıl düzeltilir

Hedefi veya eylemi açıkça tanımlayan bağlantı metni yazın. Çevreleyen bağlam gerektiğinde, bunun programatik olarak ilişkilendirildiğinden emin olun.

Açıklayıcı bağlantı metni

<!-- Yanlış: Genel bağlantı metni -->
<p>Yıllık raporumuzu yayınladık. <a href="/rapor">Buraya tıklayın</a>.</p>
<p>Erişilebilirlik rehberimizi okuyun. <a href="/rehber">Devamını oku</a></p>

<!-- Doğru: Kendini tanımlayan bağlantı metni -->
<p><a href="/rapor">2025 yıllık raporunu indirin</a></p>
<p><a href="/rehber">Tam erişilebilirlik rehberimizi okuyun</a></p>

<!-- Doğru: Kapsayıcı öğeden bağlam -->
<li>
  <h3>Erişilebilirlik Denetim Hizmeti</h3>
  <p>Sitenizi WCAG 2.2 kriterlerine göre test ediyoruz.
    <a href="/hizmetler/denetim">Denetim hizmetimiz hakkında daha fazla bilgi edinin</a>
  </p>
</li>

Görsel bağlantılar

<!-- Yanlış: Alt metni olmayan görsel bağlantı -->
<a href="/anasayfa"><img src="logo.png"></a>

<!-- Yanlış: Alt görseli tanımlıyor, bağlantı amacını değil -->
<a href="/anasayfa"><img src="logo.png" alt="Şirket logosu"></a>

<!-- Doğru: Alt bağlantı hedefini tanımlıyor -->
<a href="/anasayfa"><img src="logo.png" alt="Inculva ana sayfa"></a>

Geliştirilmiş bağlam için aria-label kullanımı

<!-- Görsel tasarım "Devamını oku" gibi kısa metin gerektirdiğinde -->
<article>
  <h3>WCAG 2.4.4 Açıklaması</h3>
  <p>Bağlantı amacı gereksinimlerini anlama...</p>
  <a href="/makaleler/244" aria-label="WCAG 2.4.4 Açıklaması hakkında devamını oku">
    Devamını oku
  </a>
</article>

Sık yapılan hatalar

"Buraya tıklayın", "burada", "devamını oku", "daha fazla bilgi" veya "daha fazla" ifadelerini ek bağlam olmadan tek bağlantı metni olarak kullanmak.
Açıklayıcı bir etiket yerine ham URL'yi bağlantı metni olarak kullanmak (örneğin "https://www.example.com/rapor.pdf").
Aynı sayfada farklı hedeflere yönlendiren aynı metne sahip birden fazla bağlantı bulundurmak.
Bir paragrafın tamamını veya büyük bir metin blogunu <a> etiketiyle sarmak, bağlantı metnini aşırı uzun yapmak.
Görsel bağlantılarda alt metninin bağlantı hedefi yerine görseli tanımlaması.
Bağlantı amacını sağlamanın tek yolu olarak title niteliği kullanmak — title ipuçları dokunmatik cihazlarda erişilemez ve ekran okuyucular tarafından tutarlı şekilde okunmaz.

2.4.4 Bağlantı Amacı (Bağlamda)