WCAG 2.4.4 · A Seviyesi

Bağlantının Maksadı

Her bağlantının amacının, bağlantı metninden ya da bağlantıyla birlikte programatik olarak belirlenebilen bağlamından anlaşılabilmesini ister.

Kısaca

Ekran okuyucu kullanıcıları sayfayı tanımak için çoğu zaman bağlantı listesini açar ve bağlantıları bağlamlarından kopuk biçimde dinler. Bu listede beş tane "Tıklayınız" veya on tane "Detay" duymak hiçbir şey anlatmaz.

Bu kriter, bağlantının nereye götürdüğünün veya ne yaptığının bağlantı metninden ya da onunla programatik olarak ilişkili bağlamdan (aynı paragraf, liste öğesi, tablo hücresi, ilgili başlık) anlaşılabilmesini ister. En iyi yöntem, bağlantı metnini tek başına anlamlı yazmaktır.

Neleri kapsar?

  • Bağlantı metni: Bağlantının görünür metninin veya erişilebilir adının amacı anlatması.
  • Bağlam: Belirsiz bir bağlantının aynı cümle, paragraf, liste öğesi, tablo hücresi veya ilgili başlıkla birlikte anlam kazanması.
  • Simge ve görsel bağlantılar: Yalnızca simgeden veya görselden oluşan bağlantıların erişilebilir adı.
  • Aynı metinli bağlantılar: Farklı yerlere giden "Detay", "İncele" gibi bağlantıların birbirinden ayırt edilebilmesi.
  • Kapsam dışı notlar: Görünür etiketin erişilebilir adla uyumu İsimlerin Kullanılan Etiketi İçermesi kriterinin, bağlantının rolünün doğru bildirilmesi İsim, Rol, Değer kriterinin konusudur.

Kimleri etkiler?

Ekran okuyucu kullanan kör kullanıcılar, bağlantılar arasında Tab ile gezinirken veya bağlantı listesini açtıklarında yalnızca bağlantı metnini duyar. Bilişsel engeli olan kullanıcılar açık bağlantı metinleriyle nereye gideceklerini önceden anlar. Ses komutu kullanan kişiler bağlantıyı adıyla söyleyerek açar; aynı adlı bağlantılar bu işlemi zorlaştırır. Ekranı büyüten kullanıcılar da bağlantının çevresini görmeden metnine bakarak karar verir.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 88–94 numaralı soruları kapsar. Yönlendirme soruları sayfada ilgili içerik olup olmadığını belirler; yoksa liste sizi sonraki soruya geçirir. Aşağıdaki açıklamalar sorulardan alıntı değil, özetidir. Soruların tam metni için resmî listeye bakın.

BK 19 kapsamındaki sorular
SoruTürüNe kontrol eder?
88YönlendirmeSayfada başka sayfalara, ekranlara veya kaynaklara giden bağlantı olup olmadığını sorar.
89★ ZorunluBağlantı metninin veya erişilebilir adının tek başına okunduğunda amacı anlatıp anlatmadığını kontrol eder. Yanıt olumluysa 90. soru atlanır.
90★ ZorunluTek başına yeterli olmayan bağlantılarda amacın, kullanıcının algılayabildiği ve programatik olarak ilişkili bağlam ile anlaşılıp anlaşılmadığını kontrol eder. Yalnızca title veya görünmeyen açıklamalar bu amaçla yeterli sayılmaz.
91YönlendirmeYalnızca simgeyle sunulan veya görsel olarak çok kısa tutulan bağlantı olup olmadığını sorar.
92★ ZorunluBu bağlantılar için amacı anlatan bir erişilebilir ad sağlanıp sağlanmadığını kontrol eder.
93YönlendirmeAynı metne veya aynı erişilebilir ada sahip birden fazla bağlantı olup olmadığını sorar.
94★ ZorunluAynı adlı bağlantıların her birinin amacının bağlamıyla birlikte ayırt edilebilir olup olmadığını kontrol eder.

Resmî kontrol listesini indirin (PDF), yeni sekmede açılır

Web için kod örnekleri

1. Belirsiz bağlantı metni

Bağlantının amacını cümlenin içinde, bağlantı metninin kendisine yerleştirin.

Hatalı
<p>2026 bütçe raporuna ulaşmak için
<a href="/belgeler/butce-2026.pdf">tıklayınız</a>.</p>
Doğru
<p><a href="/belgeler/butce-2026.pdf">2026 Bütçe Raporu
(PDF, 2,4 MB)</a> yayımlandı.</p>

2. Bağlamla anlam kazanan bağlantı

"Devamını okuyun" gibi kısa bir metin, aynı liste öğesindeki başlıkla birlikte anlam kazanabilir. Daha güçlü bir çözüm, başlığı aria-labelledby ile bağlantının adına eklemektir.

Hatalı
<div class="haber">Su kesintisi duyurusu</div>
<div class="haber-ozet">…</div>
<a href="/duyurular/su-kesintisi">Devamını okuyun</a>
Doğru
<article>
  <h3 id="duyuru-41">Su kesintisi duyurusu</h3>
  <p>…</p>
  <a href="/duyurular/su-kesintisi" id="devam-41"
     aria-labelledby="devam-41 duyuru-41">Devamını okuyun</a>
</article>
<!-- Ekran okuyucu: "Devamını okuyun Su kesintisi duyurusu" -->

3. Yalnızca simgeden oluşan bağlantı

Hatalı
<a href="https://x.com/ornekbelediye">
  <svg>…</svg>
</a>
Doğru
<a href="https://x.com/ornekbelediye"
   aria-label="Örnek Belediyesi X hesabı">
  <svg aria-hidden="true" focusable="false">…</svg>
</a>

4. Aynı metne sahip bağlantılar

Bir tabloda her satırda "İndir" bağlantısı varsa, görünmeyen ek metinle her bağlantıyı ayırt edilebilir yapın. Görünür metin bağlantı adının başında kaldığı için ses komutu kullanıcıları da etkilenmez.

Hatalı
<tr>
  <td>Meclis kararı – Ocak</td>
  <td><a href="/kararlar/ocak.pdf">İndir</a></td>
</tr>
<tr>
  <td>Meclis kararı – Şubat</td>
  <td><a href="/kararlar/subat.pdf">İndir</a></td>
</tr>
Doğru
<tr>
  <th scope="row">Meclis kararı – Ocak</th>
  <td><a href="/kararlar/ocak.pdf">İndir<span class="sr-only">:
    Meclis kararı – Ocak (PDF)</span></a></td>
</tr>
<tr>
  <th scope="row">Meclis kararı – Şubat</th>
  <td><a href="/kararlar/subat.pdf">İndir<span class="sr-only">:
    Meclis kararı – Şubat (PDF)</span></a></td>
</tr>

5. title özniteliğine güvenmek

title özniteliği klavye ve dokunmatik kullanıcılara görünmez ve ekran okuyucular tarafından tutarlı biçimde okunmaz. Bağlantının amacını taşımak için kullanılmamalıdır.

Hatalı
<a href="/ihale-ilanlari" title="İhale ilanları listesi">
  Buraya bakın
</a>
Doğru
<a href="/ihale-ilanlari">Güncel ihale ilanları</a>

6. Görsel ve metni aynı yere götüren kart

Kartlarda görsel ve başlık ayrı ayrı bağlantı olduğunda, ekran okuyucu kullanıcısı aynı hedef için iki bağlantı duyar. Tek bir bağlantı kullanın.

Hatalı
<a href="/etkinlik/kitap-fuari"><img src="fuar.jpg" alt="Fuar"></a>
<a href="/etkinlik/kitap-fuari">Kitap Fuarı 2026</a>
Doğru
<a href="/etkinlik/kitap-fuari">
  <img src="fuar.jpg" alt="">
  Kitap Fuarı 2026
</a>

Mobil için kod örnekleri

iOS (SwiftUI)

import SwiftUI

struct BelgelerEkrani: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            // Açıklayıcı metinli bağlantı
            Link("2026 Bütçe Raporu (PDF)",
                 destination: URL(string: "https://ornek.gov.tr/belgeler/butce-2026.pdf")!)

            // Yalnızca simgeden oluşan bağlantı
            Link(destination: URL(string: "https://x.com/ornekbelediye")!) {
                Image(systemName: "bubble.left.and.bubble.right")
            }
            .accessibilityLabel("Örnek Belediyesi X hesabı")

            // Kart: başlık ve bağlantı tek öğe olarak okunur
            NavigationLink {
                DuyuruDetayi() // Kendi ekranınız
            } label: {
                VStack(alignment: .leading) {
                    Text("Su kesintisi duyurusu").font(.headline)
                    Text("Devamını okuyun")
                }
            }
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.LinkAnnotation
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withLink

@Composable
fun BelgelerEkrani(duyuruyuAc: () -> Unit) {
    Column {
        // Metin içindeki bağlantı (Compose 1.7 ve sonrası)
        Text(
            buildAnnotatedString {
                withLink(LinkAnnotation.Url("https://ornek.gov.tr/belgeler/butce-2026.pdf")) {
                    append("2026 Bütçe Raporu (PDF)")
                }
                append(" yayımlandı.")
            }
        )

        // Kart: alt öğeler birleştirilir, eylem açıklayıcı bir etiketle sunulur
        Column(
            Modifier
                .clickable(onClickLabel = "Duyurunun devamını oku", onClick = duyuruyuAc)
                .semantics(mergeDescendants = true) { }
        ) {
            Text("Su kesintisi duyurusu", style = MaterialTheme.typography.titleMedium)
            Text("Devamını okuyun")
        }
    }
}

Nasıl test edilir?

  • Bağlantı listesini açın: Ekran okuyucunun bağlantı listesini açın (NVDA'da Insert+F7, VoiceOver'da rotor). Her bağlantı bağlamı olmadan anlaşılıyor mu?
  • Tekrar eden adları arayın: Listede aynı adla birden çok bağlantı varsa, farklı yerlere gidip gitmediklerini ve ayırt edilip edilemediklerini kontrol edin.
  • Simge bağlantıları dinleyin: Yalnızca simge içeren bağlantılara odaklanın; anlamlı bir ad okunuyor mu?
  • Dosya bağlantılarını kontrol edin: PDF, Word gibi dosyalara giden bağlantılarda dosya türü belirtiliyor mu?
  • Otomatik araçların sınırı: Otomatik araçlar boş bağlantıları, adsız simge bağlantılarını ve "tıklayınız", "buraya" gibi bilinen belirsiz metinleri işaretleyebilir. Bir bağlantı metninin amacı yeterince anlatıp anlatmadığını ya da bağlamın yeterli olup olmadığını ise bir kişinin değerlendirmesi gerekir.

Sık yapılan hatalar

  • "Tıklayınız", "Buraya", "Devamı": Kamu sitelerinde en sık görülen belirsiz bağlantı metinleri.
  • URL'yi bağlantı metni yapmak: Uzun adreslerin harf harf okunması kullanıcıyı yorar.
  • Simge bağlantıları adsız bırakmak: Sosyal medya, yazdır ve paylaş simgeleri sık sık ad taşımaz.
  • Görünür metinle çelişen aria-label: "Devamı" görünen bir bağlantıya tamamen farklı bir aria-label vermek ses komutu kullanıcılarını zorlar; görünür metni adın başında tutun.
  • Dosya türünü belirtmemek: Kullanıcı bir sayfa yerine büyük bir PDF indirileceğini önceden bilmez.

Kaynaklar

Kontrol listesi sürümü: V2.2.30.01 (2026). Bu sayfa bilgilendirme amaçlıdır; bağlayıcı metin için Aile ve Sosyal Hizmetler Bakanlığı'nın resmî kontrol listesini esas alın.

Sitenizde bu kriter nasıl görünüyor?

Ücretsiz tarama, bu kriterdeki sorunları ve diğerlerini Bakanlığın A Seviyesi Kontrol Listesi esas alınarak listeler.

Sitemi ücretsiz tara