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

Her bağlantının amacı, bağlantı metninden veya çevresindeki bağlamdan anlaşılabilir olmalıdır.

SC Kodu: 2.4.4 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#link-purpose-in-context

Genel Tanım

WCAG SC 2.4.4 Bağlantı Amacı (Bağlam İçinde), her bağlantının amacının yalnızca bağlantı metninden veya bağlantı metniyle birlikte çevresindeki bağlamdan belirlenebilmesini sağlar. İstisna, bağlantının amacının yalnızca engelli kullanıcılar tarafından değil, herhangi bir kullanıcı tarafından anlaşılamaması durumudur. Bununla birlikte, bağlantının amacı başka bir alandaki (önceki paragraflar) diğer metinlerden çıkarılabiliyorsa ve engelli kullanıcılar (örneğin ekran okuyucu kullanıcıları) tarafından çıkarılamıyorsa, başarı kriteri karşılanmamış olur.

Faydalar

• Ekran Okuyucu Kullanıcıları İçin Geliştirilmiş Erişilebilirlik: Ekran okuyucu kullanan kullanıcıların her bağlantının amacını anlayabilmesini sağlar.
• Geliştirilmiş Kullanıcı Deneyimi: Açık ve açıklayıcı bağlantılar kafa karışıklığını azaltır ve tüm kullanıcıların ihtiyaç duydukları bilgilere ulaşmasını kolaylaştırır.
• SEO Faydaları: Açıklayıcı bağlantılar, arama motorlarına bağlantı verilen içerik hakkında net bir bağlam sağlayarak arama motoru optimizasyonunu iyileştirir. Özellikle bağlantının metni, yönlendirilen sayfanın başlığıyla aynı olduğunda bu durum geçerlidir.

Ana Amaç

Her bağlantının amacının açık ve anlaşılır olmasını sağlamak için öncelikle bağlantının kendisini olabildiğince açıklayıcı hale getirmeye çalışın. Örneğin, 'Abone Ol' yerine 'Haftalık Güncellemeler için Bültenimize Abone Olun' gibi bir ifade kullanın. Ekran okuyucu kullanan kullanıcılar bazen sayfadaki tüm bağlantıların listesine erişebilirler. Bağlantı yalnızca 'Abone Ol' diyorsa, amacını anlayamazlar; oysa görme yetisine sahip kullanıcılar bunu sayfanın başka bir bölümünden veya paragrafından çıkarabilirler.

Bağlantının amacı bağlantı metninde doğrudan verilemiyorsa, bağlantıdan önceki metne eklemeyi deneyin ve hem bağlantının hem de metnin aynı paragraf (<p>) veya liste öğesi (<li>) içinde yer aldığından emin olun. Açıklayıcı metni bağlantıdan sonra eklemeye karşı bir kural olmamakla birlikte, ekran okuyucu kullanıcıları için deneyimi iyileştirmek amacıyla bağlantıdan önce yerleştirilmesi şiddetle tavsiye edilir. Herhangi bir nedenle metin bu şekillerde verilemiyorsa ancak sayfadaki diğer yollarla (örneğin, önceki bir başlık) anlaşılabiliyorsa, aria-labelledby veya aria-label özniteliğini ekleyerek programatik olarak anlaşılabilir hale getirmeyi deneyin.

En İyi Uygulamalar

• Bağlantı açıklamalarının net olduğundan emin olun: Bağlantının amacını ve anlamını açıkça belirttiğinden emin olun; örneğin, "Daha Fazla Bilgi" veya "Buraya Bakın" yerine "Haftalık Güncellemeler İçin Bültenimize Abone Olun" veya "Danışmanlık Randevusu Almak İçin Bize Ulaşın" gibi ifadeler kullanın.
• Belirsiz bağlantı metinlerinden kaçının: 'Hadi gidelim' veya 'Başlayalım' gibi belirsiz bağlantı metinleri kullanmaktan kaçının. Kullanılacaksa, amacın ve bağlamın netliğini sağlamak için bunları bir paragraf veya liste içine, tercihen paragrafın sonuna yerleştirin. Paragrafın kendisi yeterli netlik sağlamıyorsa, bağlantıyı bölüm içindeki bir başlık veya birden fazla metin dizesiyle ilişkilendirmek için aria-labelledby özniteliğini kullanmayı veya aria-label özniteliğiyle ilişkilendirmeyi düşünün.
• Ekran okuyucu bildirimlerinde tekrarlardan kaçının: Ekran okuyucu bildirimlerinde tekrarlardan kaçınmak için, bir resim ve yanındaki bağlantı aynı amaca veya hedefe hizmet ediyorsa, ikisi için de aynı metni ve alternatif metni kullanmayın. Bunun yerine, resmi ve bağlantıyı tek bir öğenin altına yerleştirin ve resmin alt özelliğini boş bir değere (alt="") ayarlayın.
• Resim bağlantılarının erişilebilir olduğundan emin olun: Bağlantının tek içeriği bir resim veya simge ise, mutlaka bir alt özniteliği ekleyin. Bağlantının öncesinde veya sonrasında metin yoksa, CSS ile biçimlendirilmiş gizli metin kullanmayı düşünün. Bu, ekran okuyucuların bağlantının tam adını yorumlayabilmesini sağlayacaktır.

Örnekler ve Açıklamalar

Örnek: Örnek Uygulama

Bağlantı Bağlamı için aria-label kullanımı

Nelerden Kaçınılmalı?

Gezinti menüsünde, açılır menüler CSS kullanılarak gizlenir. Klavye kullanıcılarının açılır menüyü açması için herhangi bir komut dosyası sağlanmamıştır. Sonuç olarak, klavye ile gezinen kullanıcılar açılır menüdeki öğeleri kaçıracaktır. Görme engelli olmayan kullanıcılar fare tıklaması veya üzerine gelme yoluyla açılır menüyü açabilir, ancak bu işlevsellik klavye kullanıcıları için erişilebilir değildir. HTML Örneği (Yanlış uygulama):

HTML/CSS

<section class = "animal-entry" >
  <h2> Muhteşem Hayvanlar </h2>​
  <img src = "images/seahorse.jpg" alt = "Denizatı resmi" >
  <p> Denizatı, büyüleyici bir deniz canlısı olup, benzersiz vücut şekli ve çevresiyle kamufle olma yeteneğiyle bilinir. Bu nazik balıklar tek eşlidir ve erkekler döllenmiş yumurtaları kuluçkaya yatana kadar taşır . </p>
  <p> <a href="seahorse-details.html"> Daha Fazla Bilgi ... </a> </p>​​ ​​
</section>

Açıklama: Bağlantının öncesinde veya sonrasında herhangi bir metin bulunmamaktadır ve bağlantının bağlamını açıklayacak bir paragraf içine yerleştirilmemiştir. Görme engeli olmayan kullanıcılar, <h2> etiketini veya önceki paragrafı tamamen okuyarak bağlantıyı anlayabilirler. Ancak, yalnızca bağlantıya tıklayan ekran okuyucu kullanıcıları için bu durum belirsiz görünebilir.

Ne Yapılmalı?

HTML/CSS

<section class = "animal-entry" >
  <h2 id = "animal-heading" > Muhteşem Hayvanlar </h2>
  <img src = "images/seahorse.jpg" alt = "Denizatı resmi" >
  <p> Denizatı, büyüleyici bir deniz canlısı olup, benzersiz vücut şekli ve çevresiyle kamufle olma yeteneğiyle bilinir. Bu nazik balıklar tek eşlidir ve erkekler döllenmiş yumurtaları kuluçkaya yatana kadar taşır . </p>
  <p> <a href="seahorse-details.html" aria-label="Deniz atları hakkında daha fazla bilgi edinin"> Daha fazla bilgi edinin </a> </p>​​ ​​​​​
</section>

Açıklama: Bu düzeltilmiş uygulamada, "Deniz atları hakkında daha fazla bilgi edinin" aria etiketi, bağlantılı hedef hakkında net ve açıklayıcı bilgiler sağlar. Aria etiketinin kullanımı, bağlantıya amacının ötesinde bağlam kazandırarak, ekran okuyucu kullanıcılarının bağlantının bağlamını kolayca anlamasını sağlar.