Bağlantı Metni ve ADA

Bağlamdan kopuk duyulan bağlantılar

Ekran okuyucu kullanıcıları çoğu zaman sayfadaki tüm bağlantıların listesini açar. Bu listede "Gündem", "Devamını oku" ve "Buraya tıklayın" bir düzine kez tekrarlanır ve hiçbir şey ifade etmez. "Gündem'e tıkla" diyen ses denetimi kullanıcıları da aynı belirsizlikle karşılaşır.

2.4.4 başarı ölçütü, her bağlantının amacının yalnızca bağlantı metninden ya da bağlantı metni ile programsal olarak belirlenebilen bağlantı bağlamından anlaşılabilmesini ister. HTML'de bağlam, aynı cümledeki, paragraftaki, liste öğesindeki ya da tablo hücresindeki metni ve ilişkili tablo başlık hücresini içerir. Amacı engeli olmayanlar dahil herkes için belirsiz olan bağlantılar istisnadır.

En basit yaklaşım, amacı söyleyen bağlantı metnidir. Bağlama güveniyorsanız onu aynı liste öğesine ya da paragrafa, tercihen bağlantıdan önce koyun.

Belediye ve okul sitelerinde tipik hatalar

• Ayrı bir tarih başlığının altında "Gündem" ve "Tutanak" bağlantıları olan toplantı takvimleri.
• "Devamını oku" kullanan haberler ve duyurular.
• Bağlantı metni olarak kullanılan çıplak URL'ler ve dosya adları.
• Görsel bağlantısı ile başlık bağlantısının aynı yere gittiği kartlar.
• Bir ödeme sitesini yeni sekmede, bundan söz etmeden açan bağlantılar.

Sakinler son tarihler ve hizmetler için bu bağlantılara güvenir; bu yüzden belirsiz bağlantılar teknik olarak bir şey başarısız olmadan önce bile bir engeldir.

Bağlamı bağlantıyla birlikte tutun

Bağlam, aynı liste öğesinde olduğu gibi bağlantıya programsal olarak bağlıysa sayılır. Başka bir yerdeki başlık ya da paragraf sayılmaz.

<p>Belediye Meclisi, 6 Mayıs</p>
<ul>
  <li><a href="/a/0506">Gündem</a></li>
  <li><a href="/m/0506">Tutanak</a></li>
</ul>

<ul>
  <li>Belediye Meclisi, 6 Mayıs:
      <a href="/a/0506">Gündem</a>,
      <a href="/m/0506">Tutanak</a></li>
</ul>

Çıplak URL'ler ve dosya bağlantıları

Bağlantının ne olduğunu, dosyalarda ise türünü ve boyutunu söyleyin. Bağlantının yeni sekmede açıldığını belirtmek iyi uygulamadır, ancak bu ölçütün parçası değildir.

<a href="/files/PRR-2024-final-v3.pdf">
  https://example.gov/files/PRR-2024-final-v3.pdf
</a>

<a href="/files/PRR-2024-final-v3.pdf">
  Bilgi edinme başvuru formu (PDF, 180 KB)
</a>

Kart başına tek, net bir bağlantı

Boş alt metinli bir görsel bağlantısı ile aynı hedefe giden bir metin bağlantısı yan yana olduğunda, adı olmayan bir bağlantı kalır. Kartı tek bir bağlantıyla sarın ya da tek bağlantı olarak metin bağlantısını bırakın.

<a href="/events/farmers-market"><img src="fm.jpg" alt=""></a>
<a href="/events/farmers-market">Üretici pazarı</a>

<a href="/events/farmers-market">
  <img src="fm.jpg" alt="">
  <h3>Üretici pazarı, cumartesi 08.00 - 12.00</h3>
</a>

Mobil uygulamalardaki bağlantılar

Yerel bağlantıların da anlamlı metne ihtiyacı vardır. LinkAnnotation ve withLink Compose UI ve Foundation 1.7 ya da üstünü gerektirir. SwiftUI:

Link("Buraya tıklayın",
     destination: URL(string: "https://city.example/appeals")!)

Link("Park cezası itirazları",
     destination: URL(string: "https://city.example/appeals")!)

Jetpack Compose:

ClickableText(
    text = AnnotatedString("Buraya tıklayın"),
    onClick = { openAppeals() }
)

Text(buildAnnotatedString {
    withLink(LinkAnnotation.Url("https://city.example/appeals")) {
        append("Park cezası itirazları")
    }
})

Nasıl test edilir

1. Bir ekran okuyucunun bağlantı listesini (ya da bağlantıları listeleyen bir tarayıcı eklentisini) kullanın. Her birini yüksek sesle okuyun. Nereye gittiğini anlayabiliyor musunuz?
2. Yinelenenlere bakın: aynı metinle farklı yerlere giden bağlantılar. Aynı yer için farklı metin kullanmak yalnızca tavsiye niteliğindedir.
3. Bağlama dayanan bağlantılarda bağlamın aynı cümlede, liste öğesinde ya da tablo hücresinde olduğunu kontrol edin.
4. Ses denetimiyle test edin: birkaç bağlantının görünen metnini söyleyin. Doğru olan etkinleşiyor mu?

Otomatik araçlar boş bağlantıları ve "buraya tıklayın" gibi bazı genel metinleri bulur, ama her belirsiz etiketi değerlendiremez.

Hatalar ve yayın öncesi liste

• Görünen sözcükleri içermeyen aria-label metni eklemek.
• Bağlamı, bağlantıdan uzakta bir başlığa koymak.
• Farklı belgelere giden bağlantılar için aynı metni kullanmak.
• Erişilebilir adı olmayan yalnızca görsel bağlantılar.

Her bağlantı kendi metninden ya da aynı cümledeki, liste öğesindeki ya da hücredeki bağlamından anlaşılıyorsa ve aynı metin her zaman aynı yere gidiyorsa yayına alın.

Bir incelemeye nereden başlanacağı için ilk adımlar sayfasına bakın.

Kaynaklar

• Understanding SC 2.4.4: Link Purpose (In Context) (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.