WCAG 2.4.4: Bağlantının Amacı (Bağlam İçinde)

Bu Kuralın Anlamı

WCAG 2.4.4 — Bağlantı Amacı (Bağlam İçinde) — Kullanılabilirlik ilkesinin altında Seviye A başarı ölçütüdür. Her bağlantının amacının yalnızca bağlantı metninden ya da bağlantı metni ile onun programatik olarak belirlenmiş bağlantı bağlamının birleşiminden anlaşılabilir olmasını şart koşar. Eğer ikisi de yeterli değilse, bağlantı bu ölçütü karşılamaz.

"Programatik olarak belirlenmiş bağlantı bağlamı" ifadesi WCAG tarafından dikkatle tanımlanmıştır. Bu, bağlantıyla aynı cümleden, paragraftan, liste öğesinden veya tablo hücresinden ya da bağlantıyı içeren bölümden önce gelen başlıktan türetilebilen bilgiyi ifade eder. Ayrıca aria-labelledby veya aria-describedby gibi ARIA ilişkileriyle açığa çıkarılan bağlamı da kapsar. Kritik olan, bu bağlamın programatik olarak erişilebilir olmasıdır — yani yardımcı teknolojilerin bunu otomatik olarak okuyabilmesi gerekir — yalnızca gören kullanıcılar için görsel olarak ima edilmiş olması yeterli değildir.

Pratikte, aşağıdaki HTML öğeleri ve öznitelikleri bu ölçütten doğrudan etkilenir: <a href> bağlantı (anchor) öğeleri, resim haritalarındaki <area> öğeleri, gezinmeyi tetikleyen <button> öğeleri, role='link' gibi ARIA rolleri kullanılarak bağlantı gibi davranacak şekilde stillenen veya betiklenen öğeler ve SVG <a> öğeleri. Bağlantının erişilebilir adı — iç metninden, aria-label, aria-labelledby özniteliklerinden veya alt öğe resim üzerindeki bir alt özniteliğinden hesaplanan ad — amacın iletilmesi için birincil araçtır.

Geçer sayılan durumlar: Bir kullanıcı, ek bağlama ihtiyaç duymadan bağlantının hedefini veya işlevini belirleyebiliyorsa (örneğin, "2024 Faaliyet Raporunu PDF olarak indir"), ya da çevresindeki programatik bağlam bağlantının amacını açık hale getiriyorsa (örneğin, makale başlığıyla başlayan bir <li> içindeki "Devamını oku" bağlantısı), bağlantı geçer. Bağlantı metninin sayfanın tamamında küresel olarak benzersiz olması gerekmez; yalnızca kendi bağlamı içinde belirsiz olmaması yeterlidir.

Kalır sayılan durumlar: "buraya tıklayın", "devamını oku", "buraya", "daha fazla" veya "bağlantı" gibi genel bağlantı metinleri, çevresindeki programatik bağlam hedefi netleştirmediğinde başarısız olur. alt özniteliği eksik veya boş olan bir resim bağlantısı da erişilebilir ad tamamen yok olduğu için başarısızdır.

Resmî istisna: WCAG tek bir istisna tanır. Bağlantı amacının kasıtlı olarak belirsiz olduğu — yani amacın önceden bilinmesinin bağlantının veya çevresindeki içeriğin faydasını ortadan kaldıracağı — durumlarda bu ölçüt uygulanmaz. Bu istisna son derece dardır ve gerçek dünyadaki senaryolarda nadiren geçerlidir.

Neden Önemlidir

Dünya Sağlık Örgütü’ne göre dünya genelinde yaklaşık 2,2 milyar kişinin bir tür görme bozukluğu vardır. Bunlar arasında, ekran okuyuculara güvenen kör kullanıcılar belirsiz bağlantı metninden en çok etkilenen gruptur. NVDA, JAWS ve VoiceOver gibi ekran okuyucu yazılımları, bağlamlarından çıkarılan tüm bağlantıların bir listesini oluşturarak kullanıcıların sayfada gezinmesine olanak tanır. Bu liste onlarca "devamını oku" veya "buraya tıklayın" girdisi içerdiğinde, kör kullanıcılar her bir bağlantının nereye götürdüğünü, her birine geri dönüp çevresindeki içeriği okumadan belirleyemez — bu da zaman alıcı ve yönünü şaşırtan bir süreçtir.

Yalnızca klavye girdisi, anahtar (switch) kontrolleri veya göz takibi cihazlarıyla gezinmek zorunda olan motor engelli kullanıcılar da büyük ölçüde fayda sağlar. Bu kullanıcılar genellikle etkileşimli öğeler arasında sırasıyla sekme (tab) yapar ve hangisini etkinleştireceklerine karar vermek için odaklanılan öğenin etiketine güvenirler. Belirsiz bağlantı metni, yorgunluğu ve hata oranlarını artıran ek gezinme adımlarını zorunlu kılar.

Dikkat eksikliği bozuklukları, hafıza bozuklukları veya düşük okuryazarlık dahil bilişsel engeli olan kullanıcılar, sayfanın yapısını anlamak için gereken bilişsel yükü azalttığı için açık, açıklayıcı bağlantı metninden fayda sağlar. Bağlantıları tararken bağlamsal bilgiyi çalışma belleğinde tutmak zorunda kalmazlar.

Somut bir gerçek dünya senaryosu: Her birinde aynı şekilde sunulan bir "Şimdi Satın Al" düğmesi ve bir "Daha Fazla Bilgi" bağlantısı bulunan on ürün gösteren bir e-ticaret ürün listeleme sayfasını düşünün. Bağlantı listesinde gezinmekte olan kör bir kullanıcı, her biri hangi ürüne ait olduğu belirtilmeden art arda on kez "Daha Fazla Bilgi" ifadesini duyar. Doğru ürünü satın almak için her bağlantının çevresindeki tüm bağlamı okuması gerekir — bu süreç saniyeler yerine dakikalar sürebilir. "Sony WH-1000XM5 Kulaklık hakkında daha fazla bilgi edinin" gibi açıklayıcı bağlantı metniyle aynı görev tek bir gezinme hareketiyle tamamlanır.

Erişilebilirliğin ötesinde, açıklayıcı bağlantı metni ölçülebilir SEO faydaları sağlar. Arama motoru tarayıcıları, bağlantı verilen sayfanın içeriğini anlamak için bağlantı metnini bir sinyal olarak kullanır. Açıklayıcı, anahtar kelime açısından zengin bağlantı metni, bağlantılı kaynakların taranabilirliğini ve dizinlenebilirliğini iyileştirerek arama sıralamalarına olumlu katkıda bulunur. Ayrıca, net bağlantı metni, kullanıcılar gezinmeden önce doğru beklentilere sahip olduğundan hemen çıkma oranlarını ve destek taleplerini azaltır.

İlgili Axe-core Kuralları

• link-name: Bu kural, href özniteliğine sahip her <a> öğesinin, role='link' özniteliğine sahip her öğenin ve her <area> öğesinin boş olmayan bir erişilebilir ada sahip olduğunu kontrol eder. Erişilebilir ad, standart ARIA erişilebilir ad hesaplamasıyla belirlenir: iç metin içeriği, aria-label, aria-labelledby veya alt <img> öğesinin alt özniteliği. Axe, hesaplanan erişilebilir ad boş, yalnızca boşluklardan oluşuyorsa veya tamamen yoksa ihlal işaretler. Bu kural, 2.4.4’ün en ağır ihlal biçimini — tamamen isimsiz bağlantıları — yakalar, ancak adı teknik olarak mevcut olsa da anlamsal olarak anlamsız olan bağlantıları (örneğin, "buraya tıklayın" veya "devamını oku") tespit edemez; çünkü otomatik araçlar genel ifadelerden niyeti çıkaramaz.
• duplicate-id-aria: Bu kural, sayfadaki hiçbir iki öğenin, aria-labelledby veya aria-describedby gibi bir ARIA özniteliği tarafından referans verilen aynı id özniteliğini paylaşmadığını kontrol eder. ARIA ilişkilerinde kullanılan yinelenen ID’ler, tarayıcının referansı öngörülemez şekilde çözmesine — genellikle DOM sırasındaki ilk eşleşen öğeye — neden olur; bu da bir bağlantının erişilebilir adının tamamen yanlış bir öğeden hesaplanmasına yol açabilir. Örneğin, iki bağlantı da aria-labelledby='product-title' kullanıyorsa ve iki öğe bu ID’yi paylaşıyorsa, ekran okuyucular bir veya her iki bağlantı için yanlış ürün adını okuyabilir; bu da doğrudan 2.4.4’ü ihlal eder. Axe, ortaya çıkan erişilebilir ad güvenilir olmadığından bunu kritik bir sorun olarak işaretler.

Bu ölçüt için otomatik testin sınırlarını anlamak önemlidir. axe-core gibi araçlar bir bağlantının bir erişilebilir ada sahip olduğunu doğrulayabilir, ancak bu adın anlamlı olduğunu doğrulayamaz. "burada" olarak adlandırılan bir bağlantı, dize boş olmadığı için link-name kuralını otomatik olarak geçer. Genel bağlantı metninin 2.4.4’ü ihlal edip etmediğini değerlendirmek için insan yargısı gereklidir. Bu da manuel testleri, bu ölçüt için otomatik taramaya vazgeçilmez bir tamamlayıcı yapar.

Nasıl Test Edilir

1. axe DevTools veya Lighthouse ile otomatik tarama: axe DevTools tarayıcı uzantısını (Chrome veya Firefox) yükleyin veya Chrome DevTools içinde bir Lighthouse erişilebilirlik denetimi çalıştırın. Tam sayfa taraması başlatın ve sonuçları link-name ve duplicate-id-aria kuralları için filtreleyin. İşaretlenen her öğeyi inceleyin: link-name ihlalleri için hesaplanan erişilebilir adın eksik veya boş olduğunu doğrulayın ve duplicate-id-aria ihlalleri için yinelenen ID’lerin ARIA etiket referanslarını bozduğunu teyit edin. Bu otomatik kontrollerin geçilmesinin tam 2.4.4 uyumluluğunu garanti etmediğini unutmayın — manuel adımlara devam edin.
2. Manuel bağlantı listesi incelemesi: Firefox ile NVDA’da, Öğeler Listesi iletişim kutusunu açmak için Insert+F7 tuş kombinasyonuna basın ve "Links"i seçin. Her girdiyi görsel bağlam olmadan, tek başına inceleyin. Şunu sorun: Her bağlantının nereye götürdüğünü yalnızca metninden anlayabiliyor musunuz? Chrome ile JAWS’ta bağlantı listesini açmak için Insert+F7 kullanarak tekrarlayın. macOS’ta Safari ile VoiceOver’da, Web Öğe Rotorunu açmak için Control+Option+U tuşlarına basın ve "Links"i seçin. Amacı tek başına belirsiz olan her bağlantı, programatik bağlamına göre incelenmelidir.
3. Klavye ile gezinme testi: Yalnızca Tab tuşunu kullanarak sayfadaki tüm etkileşimli öğeler arasında gezinin. Odak her bağlantıya geldiğinde, yalnızca duyurulan metni (çevresindeki görsel içeriği değil) dinleyin. Duyurulanlardan bağlantının hedefini belirleyemiyorsanız, bağlantı muhtemelen 2.4.4’ü karşılamıyordur. Yalnızca simgeden oluşan bağlantılara (sosyal medya simgeleri, ok düğmeleri) ve resim bağlantılarına özellikle dikkat edin.
4. Bağlam doğrulaması: Çevresindeki bağlama dayanan bağlantılar için (örneğin, bir liste öğesi içindeki "Devamını oku"), bağlamsal metnin bağlantıyla aynı cümlede, paragrafta, liste öğesinde veya tablo hücresinde olduğunu doğrulamak için DOM’u inceleyin. Yalnızca görsel olarak bitişik olup programatik olarak ilişkilendirilmemiş bağlam bu ölçütü karşılamaz. İlişkiyi doğrulamak için tarayıcı DevTools’u kullanarak hesaplanan erişilebilirlik ağacını inceleyin.
5. ARIA etiket denetimi: Sayfanın kaynak kodunda bağlantı öğeleri üzerindeki tüm aria-labelledby ve aria-describedby kullanımlarını arayın. Her referans verilen ID’nin belgede yalnızca bir kez bulunduğunu ve referans verilen öğenin amaçlanan açıklayıcı metni içerdiğini doğrulayın. Her bağlantı için hesaplanan adı doğrulamak üzere tarayıcının erişilebilirlik ağacı panelini (Chrome DevTools’ta Accessibility sekmesi altında mevcuttur) kullanın.

Nasıl Düzeltilir

Erişilebilir adı olmayan yalnızca simgeden oluşan bağlantı — Hatalı

<!-- Metni ve aria-label'i olmayan bir simge bağlantı -->
<a href='https://twitter.com/accsible'>
  <svg viewBox='0 0 24 24' width='24' height='24'>
    <path d='M23 3a10.9 10.9...' />
  </svg>
</a>

Erişilebilir adı olmayan yalnızca simgeden oluşan bağlantı — Doğru

<!-- aria-label ekran okuyucular için açıklayıcı bir erişilebilir ad sağlar -->
<a href='https://twitter.com/accsible' aria-label='Accsible on Twitter'>
  <svg viewBox='0 0 24 24' width='24' height='24' aria-hidden='true' focusable='false'>
    <path d='M23 3a10.9 10.9...' />
  </svg>
</a>

Kart listesinde genel "Devamını oku" bağlantıları — Hatalı

<!-- Ayırt edici bağlamı olmayan birden çok özdeş bağlantı metni -->
<ul>
  <li>
    <h3>Istanbul Accessibility Summit 2024</h3>
    <p>Join us for the annual summit on digital inclusion.</p>
    <a href='/events/istanbul-2024'>Read more</a>
  </li>
  <li>
    <h3>New WCAG 2.2 Guidelines Released</h3>
    <p>W3C has published the updated guidelines.</p>
    <a href='/news/wcag-22'>Read more</a>
  </li>
</ul>

Kart listesinde genel "Devamını oku" bağlantıları — Doğru

<!-- Seçenek 1: Bağlantıya görsel olarak gizli metin eklemek -->
<ul>
  <li>
    <h3>Istanbul Accessibility Summit 2024</h3>
    <p>Join us for the annual summit on digital inclusion.</p>
    <a href='/events/istanbul-2024'>
      Read more
      <span class='sr-only'>about the Istanbul Accessibility Summit 2024</span>
    </a>
  </li>
  <li>
    <h3>New WCAG 2.2 Guidelines Released</h3>
    <p>W3C has published the updated guidelines.</p>
    <a href='/news/wcag-22'>
      Read more
      <span class='sr-only'>about the New WCAG 2.2 Guidelines</span>
    </a>
  </li>
</ul>

<!-- Seçenek 2: Görünür metni tamamen geçersiz kılmak için aria-label kullanmak -->
<a href='/events/istanbul-2024' aria-label='Read more about the Istanbul Accessibility Summit 2024'>
  Read more
</a>

Boş alt özniteliğine sahip resim bağlantı — Hatalı

<!-- Resmin boş alt'ı var, bu da bağlantıyı tamamen isimsiz yapıyor -->
<a href='/products/overlay-widget'>
  <img src='widget-logo.png' alt='' />
</a>

Boş alt özniteliğine sahip resim bağlantı — Doğru

<!-- Resim üzerindeki alt özniteliği bağlantının erişilebilir adını sağlar -->
<a href='/products/overlay-widget'>
  <img src='widget-logo.png' alt='Accsible Overlay Widget — product details' />
</a>

Yinelenen bir ID’yi referans alan aria-labelledby — Hatalı

<!-- İki öğe aynı ID'yi paylaşıyor; ikinci bağlantı yanlış etikete çözülüyor -->
<div>
  <span id='card-title'>Accsible SDK Documentation</span>
  <a href='/docs' aria-labelledby='card-title'>View</a>
</div>
<div>
  <span id='card-title'>Accsible Pricing Plans</span>
  <a href='/pricing' aria-labelledby='card-title'>View</a>
</div>

Yinelenen bir ID’yi referans alan aria-labelledby — Doğru

<!-- Her ID benzersiz; her bağlantı doğru etikete çözülüyor -->
<div>
  <span id='card-title-docs'>Accsible SDK Documentation</span>
  <a href='/docs' aria-labelledby='card-title-docs'>View</a>
</div>
<div>
  <span id='card-title-pricing'>Accsible Pricing Plans</span>
  <a href='/pricing' aria-labelledby='card-title-pricing'>View</a>
</div>

Yaygın Hatalar

• Ekran okuyucu tarafından görsel bağlamdan koparıldığında anlamsız olan bu dizeler, herhangi bir ek erişilebilir ad (örneğin aria-label, aria-labelledby veya görsel olarak gizli <span> öğeleri) olmadan bağlantı metni olarak "buraya tıklayın", "burada", "daha fazla" veya "devamını oku" kullanmak.
• Bağlantıya, farklı görünen metin içerirken, etiketin görünen metin dizesiyle başlamasını sağlamadan bir aria-label eklemek — bu, WCAG 2.5.3’ü (Label in Name) ihlal eder ve bağlantıyı görünen adıyla sesli olarak etkinleştirmeye çalışan sesle kontrol kullanıcıları için kafa karışıklığına neden olur.
• Bir bağlantının tek içeriği olan resim üzerinde alt='' ayarlamak; bu, bağlantının hesaplanan erişilebilir adını boş hale getirir ve bir link-name ihlaline yol açar — boş alt dekoratif resimler için doğrudur, ancak resim etkileşimli bir öğenin tek içeriği olduğunda doğru değildir.
• Bir bağlantı içindeki tek metin düğümüne aria-hidden='true' uygulamak; bu, erişilebilir adı erişilebilirlik ağacından kaldırır ve bağlantıyı ekran okuyucu kullanıcıları için isimsiz bırakır.
• Farklı bağlantılar üzerinde aria-labelledby tarafından referans verilen birden çok öğe arasında aynı id değerini yeniden kullanmak; bu, ekran okuyucuların öngörülemeyen ID çözümü nedeniyle bir veya daha fazla bağlantı için yanlış erişilebilir ad hesaplamasına neden olur.
• Bir kart bileşeninin tamamını (başlık, resim, paragraf ve düğme) tek bir <a> etiketi içine sarmak; bu, ekran okuyucuların bağlantının erişilebilir adı olarak tüm kart içeriğini okumasına neden olur — kısa, açıklayıcı bir etiket yerine uzun ve yön şaşırtıcı bir deneyim.
• Bağlantı bağlamı sağlamak için yalnızca bir CSS title özniteliği araç ipucuna veya bir :hover sözde sınıfına güvenmek — title özniteliği ekran okuyucular tarafından tutarsız şekilde açığa çıkarılır ve hover durumlarını tetikleyemeyen yalnızca klavye kullanıcıları için tamamen erişilemezdir.
• URL’nin kendisini bağlantı metni olarak kullanmak (örneğin, <a href='https://example.com/p?id=12345'>https://example.com/p?id=12345</a>); bu, ekran okuyucular tarafından telaffuz edilemez ve bilişsel engeli olan kullanıcılar için anlamsızdır.
• JavaScript framework’leriyle bağlantı ID’lerini veya ARIA öznitelik değerlerini benzersizliği sağlamadan dinamik olarak üretmek — listeler halinde oluşturulan React, Vue ve Angular bileşenleri, açık anahtarlama stratejileri uygulanmadıkça sıklıkla yinelenen ID’ler üretir.
• Internet Explorer ve eski Edge sürümlerinde bağlantı içindeki satır içi SVG simgelerine focusable='false' eklemeyi unutmak; bu, SVG’nin kendi sekme durağını almasına ve ekran okuyucuların erişilebilir ad hesaplamasını bölerek SVG’yi bağlantı metninden ayrı olarak duyurmasına neden olur.

Türkiye’nin Erişilebilirlik Mevzuatıyla İlişkisi

21 Haziran 2025’te 32933 sayılı Resmî Gazete’de yayımlanan Türkiye Cumhurbaşkanlığı Genelgesi 2025/10, WCAG 2.2 ile uyumlu zorunlu dijital erişilebilirlik gereklilikleri getirir. WCAG 2.4.4 Bağlantı Amacı (Bağlam İçinde) Seviye A ölçütüdür; bu da kapsamdaki tüm kuruluşların ulaşması gereken zorunlu asgari seviye içinde yer aldığı anlamına gelir.

Genelge, kamu ve özel sektör genelinde tanımlanmış bir kuruluş kümesine uygulanır. Bakanlıklar, devlet kurumları, belediyeler ve devlet üniversiteleri dahil kamu kurumları, genelgenin yayımlanmasından itibaren bir yıl içinde tam Seviye A uyumu sağlamakla yükümlüdür. Genelge kapsamındaki özel sektör kuruluşlarının ise iki yıllık bir uyum süresi vardır. Özel sektör kapsamı geniştir ve açıkça e-ticaret platformlarını, bankaları ve finans kuruluşlarını, özel hastaneleri ve sağlık hizmeti sağlayıcılarını, 200.000 veya daha fazla abonesi olan telekomünikasyon operatörlerini, seyahat acentelerini, özel ulaşım şirketlerini ve Millî Eğitim Bakanlığı tarafından yetkilendirilmiş özel okulları içerir.

Bu kuruluşların tümü için, uyumsuz bağlantı metni doğrudan bir mevzuat ihlali anlamına gelir. Ürün listeleme sayfalarında, programatik bağlam içermeyen tekrarlayan "Satın Al" veya "Devamını Oku" bağlantıları gösteren bir Türk e-ticaret platformunu düşünün. TalkBack, NVDA veya VoiceOver’a güvenen kör bir kullanıcı, her bağlantının hangi ürüne ait olduğunu belirleyemez; bu da 2.4.4’ün ihlali ve genelge gerekliliklerinin ihlali anlamına gelir. Benzer şekilde, yalnızca simge tabanlı gezinme bağlantıları kullanıp bunlara erişilebilir ad sağlamayan bir kamu hastanesinin randevu alma portalı hem link-name axe kuralını hem de genelgenin zorunluluğunu ihlal eder.

2.4.4’e uyum yalnızca teknik bir onay kutusu değildir. Genelge, Türkiye’deki yaklaşık 8,5 milyon engelli vatandaş için dijital kapsayıcılığa yönelik daha geniş bir devlet taahhüdünü işaret eder. Kapsamdaki kuruluşlar için, tasarım sistemi standartları, geliştirici eğitimi ve otomatik CI/CD taraması yoluyla bağlantı amacı ihlallerini proaktif olarak ele almak hem yasal bir yükümlülük hem de kullanılabilirlik ve arama performansına yapılan sağlam bir yatırımdır. Belirlenen süreler içinde uyulmaması, genelge kapsamında yetkilendirilen ilgili denetleyici otoriteler tarafından idari yaptırımlara yol açabilir.