WCAG 2.5.3 · A Seviyesi
İsimlerin Kullanılan Etiketi İçermesi
Görünür bir metin etiketi olan arayüz bileşenlerinde erişilebilir adın bu görünür metni içermesini, tercihen onunla başlamasını ister.
Kısaca
Ses komutuyla bilgisayar kullanan biri, ekranda "Gönder" yazan düğmeyi çalıştırmak için "Gönder'e tıkla" der. Düğmenin erişilebilir adı kodda "Formu ilet" olarak tanımlanmışsa, yazılım bu düğmeyi bulamaz. Ekran okuyucu kullanan ama ekranı kısmen gören biri de duyduğu adla gördüğü metin arasındaki farktan kafası karışır.
Bu kriter, görünür metin etiketi olan bileşenlerde erişilebilir adın bu metni içermesini ister. İyi uygulama, erişilebilir adın görünür metinle aynı olması ya da onunla başlamasıdır. En kolay çözüm çoğu zaman aria-label eklememek ve görünür metnin ad olarak kullanılmasına izin vermektir.
Neleri kapsar?
- Düğmeler ve bağlantılar: Görünür metni olan düğme ve bağlantıların erişilebilir adı.
- Form alanları: Görünür etiketi olan alanlarda
aria-labelveyaaria-labelledbyile verilen adın etiketle uyumu. - Metin içeren görseller: Üzerinde yazı bulunan düğme görsellerinde metin alternatifinin bu yazıyı içermesi.
- Ek bilgi: Erişilebilir ada ek bilgi eklenebilir; ancak görünür metin adın başında kalmalıdır.
- Kapsam dışı notlar: Görünür etiketi olmayan simge düğmeler bu kriterin değil, Metinsel Olmayan İçerik ve İsim, Rol, Değer kriterlerinin konusudur.
Kimleri etkiler?
Ses komutu yazılımı kullanan motor engelli kişiler, bileşenleri ekranda gördükleri adla çağırır; adlar eşleşmezse komut çalışmaz. Ekran okuyucuyu görme kalıntısıyla birlikte kullanan az gören kullanıcılar ve öğrenme güçlüğü olan kişiler, duyulan adla görülen metin aynı olduğunda arayüzü daha kolay takip eder. Metin okuma yazılımı kullanan disleksili kullanıcılar da tutarlılıktan yararlanır.
Kontrol listesinde
Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 99–100 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? |
|---|---|---|
| 99 | Yönlendirme | Sayfada kullanıcıya görünür bir metin etiketiyle sunulan bileşen (düğme, bağlantı, form alanı, menü öğesi vb.) olup olmadığını sorar. |
| 100 | ★ Zorunlu | Bu bileşenlerin erişilebilir adının görünür etiketle aynı olup olmadığını ya da görünür etiket metniyle başlayıp başlamadığını kontrol eder. |
Resmî kontrol listesini indirin (PDF), yeni sekmede açılır
Web için kod örnekleri
1. Görünür metinle çelişen aria-label
aria-label, görünür metnin yerine geçer. Görünür metinden farklıysa ses komutu kullanıcısı düğmeyi çağıramaz.
2. Ek bağlam gerektiğinde
Bir bağlantıya bağlam eklemek istiyorsanız görünür metni adın başında tutun.
DevamıDevamı:
Su kesintisi duyurusu
3. Form alanı etiketi
Görünür etiketi olan bir alana farklı bir aria-label vermek, görünür etiketin ad olarak kullanılmasını engeller.
Başında 0 olmadan, 10 hane
Ek açıklamalar için aria-describedby kullanmak, adı değiştirmeden bilgiyi iletir.
4. Simge ve metin içeren düğme
Düğmede hem simge hem metin varsa simgeyi gizleyin; görünür metin ad olarak kullanılsın.
5. Metin içeren görsel düğme
Üzerinde "Başvur" yazan bir görsel düğmede metin alternatifi bu yazıyla başlamalıdır.
Mobil için kod örnekleri
Mobil platformlarda da standart düğmeler görünür metni erişilebilir ad olarak kullanır. Sorun genellikle görünür metni olan bir bileşene farklı bir erişilebilirlik etiketi verildiğinde ortaya çıkar.
iOS (SwiftUI)
import SwiftUI
struct AramaCubugu: View {
@State private var sorgu = ""
var body: some View {
HStack {
TextField("Hizmet ara", text: $sorgu)
// Hatalı: görünür metin "Ara", VoiceOver ve Ses Denetimi "Sorgula" kullanır
// Button("Ara") { ara() }.accessibilityLabel("Sorgula")
// Doğru: görünür metin ad olarak kullanılır
Button("Ara") { ara() }
// Ek bilgi gerekiyorsa ipucu kullanılır; ad değişmez
Button("Filtrele") { filtrele() }
.accessibilityHint("Sonuçları ilçeye göre daraltır")
}
}
private func ara() { }
private func filtrele() { }
}Android (Jetpack Compose)
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
@Composable
fun AramaDugmeleri(ara: () -> Unit) {
Row {
// Hatalı: görünür metin "Ara", erişilebilir ad "Sorgula"
// Button(onClick = ara, modifier = Modifier.semantics { contentDescription = "Sorgula" }) {
// Text("Ara")
// }
// Doğru: Text içeriği erişilebilir ad olur
Button(onClick = ara) { Text("Ara") }
}
}Nasıl test edilir?
- Erişilebilir adı inceleyin: Tarayıcı geliştirici araçlarının erişilebilirlik panelinde her düğme, bağlantı ve form alanının hesaplanan adını görünür metinle karşılaştırın.
- Ses komutuyla deneyin: Windows Sesli Erişim, macOS veya iOS Ses Denetimi ya da Android Voice Access ile bileşenleri görünür adlarıyla çağırın. Komut çalışıyor mu?
- Ekran okuyucuyla dinleyin: Okunan ad, ekranda görünen metinle başlıyor mu?
- Otomatik araçların sınırı: Bazı otomatik araçlar görünür metin ile
aria-labeldeğerinin uyuşmadığı düğme ve bağlantıları işaretleyebilir. Ancak görsel içindeki yazıları, CSS ile eklenen metinleri ve mobil uygulamaları güvenilir biçimde değerlendiremez; elle kontrol gerekir.
Sık yapılan hatalar
- Her düğmeye aria-label eklemek: Görünür metni olan düğmelere alışkanlıkla
aria-labeleklemek çoğu zaman bu kriteri bozar. - Çeviri farkları: Görünür metin Türkçe,
aria-labelİngilizce kalmış bileşenler. - Ek bilgiyi başa koymak: "Su kesintisi duyurusu, devamı" gibi, görünür metni adın sonuna iten etiketler.
- Simgenin adını kullanmak: Görünür metni "Yazdır" olan düğmenin adının "Yazıcı simgesi" olması.
- Eş anlamlı terim kullanmak: Görünür etikette "Cep telefonu", erişilebilir adda "GSM numarası" gibi farklı terimlerin kullanılması.
Kaynaklar
- Understanding SC 2.5.3: Label in Name (W3C), İngilizce, yeni sekmede açılır
- Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
- Erişilebilirlik kütüphanesi — Erişilebilir ad, görünür etiket, ses komutu 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
Klavye Erişimi
Sayfadaki veya uygulamadaki tüm işlevlerin fare ya da dokunma gerektirmeden, klavye veya platforma uygun eşdeğer giriş yöntemleriyle de kullanılabilmesini ister.
Kriteri inceleKlavye Kilitlenmesinin Olmaması
Klavyeyle veya eşdeğer bir yöntemle ulaşılan bir bileşenden yine aynı yöntemle çıkılabilmesini, odağın hiçbir yerde sıkışıp kalmamasını ister.
Kriteri inceleKlavye Kısayolları
Tek bir harf, rakam veya sembolle çalışan kısayolların kapatılabilmesini, değiştirilebilmesini ya da yalnızca ilgili bileşen odaktayken etkin olmasını ister.
Kriteri incele