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

Bu Kuralın Anlamı

\n

WCAG 2.4.9 — Bağlantı Amacı (Yalnızca Bağlantı) WCAG 2.1 ve 2.2 altında Seviye AAA başarı ölçütüdür. Her bir bağlantının amacının yalnızca bağlantı metninden belirlenebilmesini gerektirir. Başlığın, paragrafın veya tablo hücresinin bağlamından bağlantı amacının çıkarılmasına izin veren AA düzeyindeki karşılığı WCAG 2.4.4’ün (Bağlantı Amacı — Bağlam İçinde) aksine, 2.4.9 çok daha katıdır: bağlantı metninin kendisi tamamen kendi kendini açıklayıcı olmalı, çevresindeki içerikten hiçbir şekilde yararlanmamalıdır.

\n

Bu ölçüt, <a> öğesiyle oluşturulan tüm köprüler için ve erişilebilir bir ada sahip olup bağlantı gibi davranan tüm etkileşimli öğeler için geçerlidir. Buna resim bağlantıları (resmin alt özniteliğinin veya bir aria-label’ın erişilebilir adı sağladığı durumlar), buton görünümlü bağlantılar ve SVG tabanlı bağlantılar dahildir. Bağlantının erişilebilir adı — görünür metninden, aria-label, aria-labelledby veya resim alternatif metninden hesaplanan ad — tek başına bağlantının nereye gittiğini veya ne yaptığını ifade etmelidir.

\n

Geçer sayılan durumlar: Bir kullanıcı yalnızca bağlantı metnini — sayfadaki başka hiçbir şeyi okumadan — okuyarak bağlantının hedefini veya işlevini güvenle anlayabiliyorsa, bağlantı 2.4.9’u geçer. Örneğin, "2024 Yıllık Erişilebilirlik Raporunu İndir (PDF, 2.4 MB)" metnini taşıyan bir bağlantı, ilgili tüm bilgiler bağlantı metninin içinde yer aldığı için geçer. "Tam makaleyi okuyun: Erişilebilir Bağlantı Metni Nasıl Yazılır" metnini taşıyan bir bağlantı da geçer. alt='Fiyatlandırma planlarını görüntüle' olan bir resim bağlantısı da alt metin tamamen açıklayıcı olduğu için geçer.

\n

Başarısız sayılan durumlar: Metni "buraya tıklayın", "devamını oku", "daha fazla bilgi", "bu", "burada" veya yalnızca bağlam içinde anlamlı olan herhangi bir ifade olan bağlantılar bu ölçütte başarısız olur. Benzer şekilde, alt özniteliği boş veya olmayan bir resmi saran ve bu nedenle erişilebilir adı bulunmayan bir bağlantı da başarısız olur. aria-label veya aria-labelledby kullanan, ancak hesaplanan erişilebilir adı hâlâ belirsiz olan bağlantılar da başarısızdır.

\n

Resmî istisnalar: WCAG açıkça bir istisna belirtir — bağlantının amacının yalnızca engelli kullanıcılar için değil, tüm kullanıcılar için kasıtlı olarak belirsiz olduğu durumlar. Örneğin, bir gizem oyununda "Devam Et" yazan bir teaser bağlantısı (belirsizliğin tasarımın kasıtlı bir parçası olduğu durum) belirsizlik evrensel olarak geçerli olduğu sürece başarısızlık olarak değerlendirilmez. Bu istisna dardır ve kötü bağlantı metni uygulamaları için bir açık kapı olarak kullanılmamalıdır.

\n\n

Neden Önemlidir

\n

Anlamlı bağlantı metni, bir web sitesinin yapabileceği en etkili erişilebilirlik iyileştirmelerinden biridir. Belirsiz bağlantı metninden en doğrudan etkilenen gruplar ekran okuyucu kullanıcıları, klavye ile gezinme yapan kullanıcılar, bilişsel engeli olan kullanıcılar ve sesle kontrol yazılımları kullanan kullanıcılardır.

\n

Ekran okuyucu kullanıcıları — genellikle kör olan veya ciddi derecede az gören kişiler — bir sayfada gezinirken sık sık tüm bağlantıların bir listesini açarlar. NVDA, JAWS ve VoiceOver gibi popüler ekran okuyucular, her bağlantının erişilebilir adını çıkarıp bunları bağımsız bir liste olarak sunan bu özelliği sunar. Bağlantılar "buraya tıklayın", "devamını oku" veya "detaylar" şeklinde olduğunda, bu liste birbirinin aynı, anlamsız girdilerden oluşan bir diziye dönüşür. Kullanıcı, her bir bağlantı için çevresindeki içeriği okumadan hangi bağlantıyı etkinleştireceğini belirleyemez — bu da özellikle onlarca bağlantının bulunduğu sayfalarda yavaş, sinir bozucu ve çoğu zaman imkânsız bir görevdir.

\n

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 ve bunların en az 1 milyarının durumu önlenebilir niteliktedir veya hâlâ ele alınmamıştır. Görme engeli olmayan kullanıcılar arasında bile, anahtarlama erişimi veya sesle gezinmeye (Dragon NaturallySpeaking gibi araçlar kullanarak) güvenen motor engelli kullanıcılar, bağlantıları doğrudan adını söyleyerek veya seçerek etkinleştirebildikleri için açıklayıcı bağlantı metninden büyük ölçüde fayda görür. Dikkat eksikliği, hafıza bozukluğu veya okuma güçlüğü olan kullanıcıları da içeren bilişsel engel grupları da fayda görür; çünkü net bağlantı etiketleri bilişsel yükü ve bağlamı tekrar tekrar okuma ihtiyacını azaltır.

\n

Gerçek bir senaryoyu düşünün: Bir kamu hastanesinin web sitesini ziyaret ederek randevu almak isteyen bir Türkiye Cumhuriyeti vatandaşı. Sayfada, her birinde bağlantı metninde başka bir bağlam olmadan "Randevu Al" ifadesi bulunan üç hizmet butonu var. Ekran okuyucusunun bağlantı listesini açan kör bir kullanıcı "Randevu Al", "Randevu Al" ve "Randevu Al" görür — birbirinden ayırt edilemeyen üç seçenek. Bağlamına geri dönmeden hangi bağlantının kardiyolojiye, hangisinin aile hekimliğine, hangisinin radyolojiye ait olduğunu belirleyemez. WCAG 2.4.9’u karşılamak için her bağlantının "Randevu Al — Kardiyoloji", "Randevu Al — Aile Hekimliği" ve "Randevu Al — Radyoloji" şeklinde okunması gerekir; böylece amaç yalnızca bağlantı metninden açıkça anlaşılır.

\n

Erişilebilirliğin ötesinde, açıklayıcı bağlantı metni önemli SEO değeri taşır. Arama motoru tarayıcıları, sayfaları indekslerken bağlantı metnine ağırlık verir ve açıklayıcı bağlantılar hem kaynak sayfa hem de hedef sayfa için alaka sinyallerini iyileştirir. Genel bağlantı metnini anlamlı ifadelerle değiştirmek bulunabilirliği artırır ve hemen çıkma oranlarını düşürür; bu da tüm kullanıcılara fayda sağlar.

\n\n

İlgili Axe-core Kuralları

\n

WCAG 2.4.9, otomatik araçlar anlamı veya niyeti belirleyemediği için manuel test gerektirir — erişilebilir adın yokluğunu işaretleyebilirler, ancak belirli bir erişilebilir adın yeterince açıklayıcı olup olmadığını değerlendiremezler.

\n

\n
• Manuel test gerekli — link-name (axe kuralı): Axe-core link-name kuralı, hiç erişilebilir adı olmayan bağlantıları tespit eder (örneğin, metin içeriği olmayan, aria-label’ı, aria-labelledby’si ve boş olmayan alt öznitelikli resmi bulunmayan bir <a> öğesi). Bu kural tamamen boş bağlantıları yakalasa da, var olan erişilebilir adın anlamlı olup olmadığını değerlendiremez. "burada" metnini taşıyan bir bağlantı, teknik olarak bir erişilebilir ada sahip olduğu için otomatik link-name kuralını geçer — ancak bu ad kendi kendini açıklayıcı olmadığı için WCAG 2.4.9’da başarısız olur. Tam da bu nedenle 2.4.9 manuel inceleme gerektiriyor olarak işaretlenir: Bir insan her bağlantı etiketini okumalı ve amacını tek başına iletip iletmediğini değerlendirmelidir.
\n
• Manuel test gerekli — identical-links-same-purpose: Axe-core, erişilebilir adları aynı fakat hedefleri farklı olan bağlantı kümelerini işaretleyen bir kural içerir. Bu, olası 2.4.9 ihlallerini ortaya çıkaran bir sezgisel yöntemdir — örneğin, farklı makalelere işaret eden birden fazla "Devamını Oku" bağlantısı. Ancak, aynı hedefe işaret eden aynı adların ihlal olmadığı durumlarda olduğu gibi, bu kural bile insan onayı gerektirir. Kural, kesin başarısızlıklar değil, incelenecek adaylar üretir.
\n
• Neden otomasyon yetersizdir: Bağlantı amacını değerlendirmek için doğal dil anlayışı gerekir. Otomatik bir araç, bir bağlantının erişilebilir adının "detaylar" dizgesi olduğunu hesaplayabilir, ancak bu dizgenin bir hedefi tanımlamada yetersiz olduğunu bilemez. Benzer şekilde, bir araç "Görüntüle" ifadesinin yeterli olup olmadığını (belki çok dar kapsamlı, çok özel bir arayüzde yeterlidir) veya "3. Çeyrek Finansal Tablosunu Görüntüle" ifadesinin daha iyi olup olmadığını değerlendiremez. Ekran okuyucu testiyle ideal olarak birleştirilmiş insan yargısı, tek güvenilir yöntemdir.
\n

\n\n

Nasıl Test Edilir

\n

\n
1. Otomatik tarama başlangıç noktası: Hedef sayfada axe DevTools’u (tarayıcı eklentisi) veya Lighthouse’u çalıştırın. Axe DevTools’ta link-name kuralı ihlallerine bakın — bunlar hiç erişilebilir adı olmayan bağlantıları temsil eder ve 2.4.9’un kesin başarısızlıklarıdır. Sonuçları dışa aktarın ve işaretlenen tüm bağlantıları not edin. Bu adım 2.4.9 denetiminizi tamamlamaz; yalnızca en bariz başarısızlıkları belirler.
\n
2. Ekran okuyucu ile bağlantı listesi oluşturma: Sayfayı NVDA yüklü Firefox’ta açın. Insert + F7 (NVDA’nın Öğeler Listesi kısayolu) tuşlarına basın ve iletişim kutusundan "Bağlantılar"ı seçin. Bağlantı etiketlerinin tam listesini inceleyin. Kendinize şunu sorun: Yalnızca bu listeyi okuyan bir kullanıcı, her bağlantının hedefini veya işlevini anlayabilir mi? Bu testi, Bağlantı Listesi iletişim kutusunu açmak için Insert + F7 tuşlarına basarak JAWS’ta ve Rotor’u açmak için Safari (macOS) üzerinde VoiceOver’da VO + U tuşlarına basıp Bağlantılar’a giderek tekrarlayın. Etiketi belirsiz, farklı hedeflere sahip olduğu hâlde yinelenen veya tamamen bir URL dizgesinden oluşan bağlantıların tümünü işaretleyin.
\n
3. Klavye ile sekme denetimi: Sayfada yalnızca Tab tuşunu kullanarak gezinin. Odak her bağlantının üzerine geldiğinde, yalnızca odaklanmış öğenin görünür metnini okuyun (veya ekran okuyucu duyurusunu dinleyin). Çevresindeki içeriğe bakmadan, bağlantının amacının net olup olmadığına karar verin. Amacı yalnızca bağlantı metninden belirsiz olan her bağlantıyı belgeleyin.
\n
4. Resim bağlantı kontrolü: Yalnızca resim içeren (görünür metni olmayan) tüm bağlantıları belirleyin. Her birini tarayıcı geliştirici araçlarıyla inceleyerek resmin boş olmayan, açıklayıcı bir alt özniteliğine sahip olduğunu veya bağlantının açıklayıcı bir aria-label taşıdığını doğrulayın. Erişilebilir ad hesaplaması anlamlı bir ifadeyle sonuçlanmalıdır.
\n
5. Yinelenen bağlantı metni kontrolü: Sayfanın HTML’inde aynı bağlantı metninin birden fazla örneğini arayın (örneğin, birden fazla "Devamını Oku" veya "Satın Al" bağlantısı). Bu bağlantıların aynı hedefe (kabul edilebilir) mi yoksa farklı hedeflere (2.4.9 ihlali; aria-label veya aria-labelledby ile ayırt edilmedikçe) mi işaret ettiğini doğrulayın.
\n
6. Sesle kontrol testi: Dragon NaturallySpeaking veya Windows Voice Access kullanarak, görünür etiketlerini söyleyerek bağlantıları etkinleştirmeye çalışın. Söylenen etiket belirsizse ve birden fazla aday görünüyorsa (örneğin, "Devamını Oku’ya tıkla" dediğinizde birden fazla bağlantı vurgulanıyorsa), bu durum 2.4.9 ile uyumlu gerçek bir kullanılabilirlik sorunu olduğunu doğrular.
\n

\n\n

Nasıl Düzeltilir

\n

Genel "Devamını Oku" bağlantı metni — Hatalı

\n

<!-- 2.4.9’da başarısız: bağlantı amacı yalnızca bağlantı metninden belirlenemiyor -->\n<article>\n  <h3>Web Sitenizin Erişilebilirlik Skorunu Nasıl İyileştirirsiniz</h3>\n  <p>Erişilebilirlik iyileştirmeleri kullanıcı tabanınızı dramatik biçimde artırabilir...</p>\n  <a href='/blog/improve-accessibility-score'>Devamını oku</a>\n</article>

\n

Genel "Devamını Oku" bağlantı metni — Doğru

\n

<!-- 2.4.9’u geçer: bağlantı amacı yalnızca bağlantı metninden tamamen açıktır -->\n<article>\n  <h3>Web Sitenizin Erişilebilirlik Skorunu Nasıl İyileştirirsiniz</h3>\n  <p>Erişilebilirlik iyileştirmeleri kullanıcı tabanınızı dramatik biçimde artırabilir...</p>\n  <a href='/blog/improve-accessibility-score'>\n    Web sitenizin erişilebilirlik skorunu iyileştirme hakkında daha fazla bilgi edinin\n  </a>\n</article>\n\n<!-- Alternatif: görsel olarak kısa metin gösterin ancak tam erişilebilir ad sağlayın -->\n<a href='/blog/improve-accessibility-score'\n   aria-label='Web sitenizin erişilebilirlik skorunu iyileştirme hakkında daha fazla bilgi edinin'>\n  Devamını oku\n</a>

\n\n

Alt metni eksik yalnızca resimden oluşan bağlantı — Hatalı

\n

<!-- 2.4.9’da başarısız: resim bağlantısının erişilebilir adı yok; ekran okuyucular URL’yi veya hiçbir şey söylemez -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt=''>\n</a>

\n

Alt metni eksik yalnızca resimden oluşan bağlantı — Doğru

\n

<!-- 2.4.9’u geçer: alt metin bağlantıya tamamen açıklayıcı bir erişilebilir ad verir -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt='Accsible fiyatlandırma planlarını görüntüle'>\n</a>\n\n<!-- Bağlantı üzerinde aria-label kullanma alternatifi -->\n<a href='https://accsible.com/pricing' aria-label='Accsible fiyatlandırma planlarını görüntüle'>\n  <img src='/icons/pricing.svg' alt=''>\n  <!-- alt='' dekoratif resmi yardımcı teknolojilerden gizler; <a> üzerindeki aria-label adı sağlar -->\n</a>

\n\n

Birden fazla özdeş "Satın Al" bağlantısı — Hatalı

\n

<!-- 2.4.9’da başarısız: farklı ürünlere işaret eden üç özdeş bağlantı etiketi -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise'>Satın Al</a>\n</div>

\n

Birden fazla özdeş "Satın Al" bağlantısı — Doğru

\n

<!-- 2.4.9’u geçer: her bağlantının aria-label ile benzersiz, açıklayıcı bir erişilebilir adı vardır -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic' aria-label='Temel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro' aria-label='Profesyonel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise' aria-label='Kurumsal Planı Satın Al'>Satın Al</a>\n</div>\n\n<!-- Alternatif: bağlantı içinde görsel olarak gizli metin kullanın -->\n<a href='/plans/basic'>\n  Satın Al <span class='sr-only'>— Temel Plan</span>\n</a>

(İçerik belirteç sınırı nedeniyle kesildi — lütfen bu makaleyi yeniden deneyin.)