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.
| Soru | Türü | Ne kontrol eder? |
|---|---|---|
| 88 | Yönlendirme | Sayfada başka sayfalara, ekranlara veya kaynaklara giden bağlantı olup olmadığını sorar. |
| 89 | ★ Zorunlu | Bağ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 | ★ Zorunlu | Tek 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. |
| 91 | Yönlendirme | Yalnızca simgeyle sunulan veya görsel olarak çok kısa tutulan bağlantı olup olmadığını sorar. |
| 92 | ★ Zorunlu | Bu bağlantılar için amacı anlatan bir erişilebilir ad sağlanıp sağlanmadığını kontrol eder. |
| 93 | Yönlendirme | Aynı metne veya aynı erişilebilir ada sahip birden fazla bağlantı olup olmadığını sorar. |
| 94 | ★ Zorunlu | Aynı 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.
<p>2026 bütçe raporuna ulaşmak için
<a href="/belgeler/butce-2026.pdf">tıklayınız</a>.</p><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.
<div class="haber">Su kesintisi duyurusu</div>
<div class="haber-ozet">…</div>
<a href="/duyurular/su-kesintisi">Devamını okuyun</a><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ı
<a href="https://x.com/ornekbelediye">
<svg>…</svg>
</a><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.
<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><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.
<a href="/ihale-ilanlari" title="İhale ilanları listesi">
Buraya bakın
</a><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.
<a href="/etkinlik/kitap-fuari"><img src="fuar.jpg" alt="Fuar"></a>
<a href="/etkinlik/kitap-fuari">Kitap Fuarı 2026</a><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-labelvermek 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
- Understanding SC 2.4.4: Link Purpose (In Context) (W3C), İngilizce, yeni sekmede açılır
- Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
- Erişilebilirlik kütüphanesi — Bağlantı metni, erişilebilir ad, bağlam ve diğer terimler.
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.
Sıradaki kriterler
Bilgi ve İlişkiler
Görsel olarak sunulan yapının ve ilişkilerin (başlıklar, listeler, tablolar, form etiketleri, gruplar) yardımcı teknolojilerin anlayabileceği şekilde kodda da tanımlanmasını ister.
Kriteri inceleDuraklatma, Durdurma, Gizleme
Kendiliğinden başlayan, 5 saniyeden uzun süren ve başka içerikle birlikte sunulan hareketli, kayan, yanıp sönen veya kendiliğinden güncellenen içeriğin duraklatılabilmesini, durdurulabilmesini ya da gizlenebilmesini ister.
Kriteri inceleDuyusal Özellikler
Kullanıcıya verilen talimatların yalnızca renk, şekil, boyut, konum, yön veya ses gibi duyusal özelliklere dayanmamasını, öğenin adı gibi herkesin algılayabileceği bir bilgi de içermesini ister.
Kriteri incele