2.5.3 İsimdeki Etiket

Bu kural ne anlama geliyor

WCAG 2.5.3, bir kullanıcı arayüzü bileşeninin erişilebilir adinin (yardımcı teknolojiye sunulan ad) görsel metin etiketini bir alt dize olarak içermesini gerektirir. Bir düğme görsel olarak "Ara" gösteriyorsa, erişilebilir adı "Ara" kelimesini içermelidir. Erişilebilir ad daha uzun olabilir, ancak görsel metin içinde yer almalıdır.

Bu kriter, sesli kontrol kullanıcılarının görsel etiketi söyleyerek kontrolleri etkinleştirmesini sağlar. Görsel etiket "Gönder" diyorsa ancak erişilebilir ad "Form verilerini ilet" ise, "Gönder tıkla" diyen bir kullanıcı eşleştirme bulamaz.

Neden önemlidir

Konuşma tanıma kullanıcıları, görsel kontrollerin adlarını söyleyerek web sayfalarıyla etkilesir. Erişilebilir ad görsel etiketle eslesmediginde, bu kullanıcılar kontrolleri güvenilir şekilde etkinlestiremez. "Ara" etiketli bir düğme görür ve "Ara tıkla" derler, ancak erişilebilir ad farklı olduğu için komut başarısız olur.

Bu kriter aynı zamanda ekranı gorebilen ekran okuyucu kullanıcılar için de yardımcı olur. Görsel etiket "Devam" diyorsa ancak ekran okuyucu "Sonraki adima geç" diye duyurursa, gören ekran okuyucu kullanıcıları duydukari ile gordukleri arasındaki uyumsuzluk nedeniyle karışıklık yasarlar.

İlgili axe-core kuralları

axe-core, 2.5.3 için belirli bir eslestirmis kurala sahip olmasa da bazı uygulamalarda label-content-name-mismatch kuralı, görsel metne sahip öğelerin erişilebilir adinin bu metni içerdiğini kontrol eder. Manuel doğrulama yine de onerilir.

Nasıl test edilir

1. Görsel metin etiketlerine sahip tüm etkileşimli kontrolleri (düğmeler, bağlantılar, etiketli form girişleri) belirleyin.
2. Hesaplanan erişilebilir adı okumak için bir tarayıcı erişilebilirlik denetcisi (Chrome DevTools Erişilebilirlik paneli) kullanın.
3. Görsel metnin erişilebilir ad dizesi içinde göründüğünü doğrulayın.
4. Görsel etiketi söyleyerek bir konuşma tanıma araciyla (Dragon, macOS/iOS Sesli Kontrol) test edin.
5. aria-label veya aria-labelledby değerlerinin görsel metni tamamen değiştirmek yerine içerdiğini kontrol edin.

Nasıl düzeltilir

Erişilebilir adin görsel metni içerdiğinden emin olun. Yaygın kalıplar asagidadir.

Dugme etiketleri — yanlış uygulama

<!-- Görsel metin "Ara" ama erişilebilir ad "Öğeleri bul" -->
<button aria-label="Öğeleri bul">Ara</button>

<!-- Görsel metin "Kapat" ama erişilebilir ad "Diyalogu kapat" -->
<button aria-label="Diyalogu reddet">
  <span>Kapat</span>
</button>

Dugme etiketleri — doğru uygulama

<!-- Erişilebilir ad görsel metinle eşleşiyor -->
<button>Ara</button>

<!-- Erişilebilir ad görsel metni iceriyor -->
<button aria-label="Ürünleri ara">Ara</button>

<!-- Kapat düğmesi eşleşen erişilebilir adla -->
<button aria-label="Diyalogu kapat">
  <span>Kapat</span>
</button>

Form girişi etiketleri

<!-- Yanlış: aria-label görsel etiket metnini icermiyor -->
<label for="eposta">E-posta adresi</label>
<input id="eposta" aria-label="Elektronik posta girin">

<!-- Doğru: celiskili aria-label yok, yerel etiket kullanılıyor -->
<label for="eposta">E-posta adresi</label>
<input id="eposta">

<!-- Doğru: aria-label görsel etiket metnini iceriyor -->
<label for="eposta">E-posta adresi</label>
<input id="eposta" aria-label="E-posta adresi (zorunlu)">

Sık yapılan hatalar

• Görsel metni tamamen farklı ifadelerle değiştiren aria-label kullanmak.
• Görsel etiket yerine gizli metne işaret eden aria-labelledby sağlamak.
• Görsel etiketten farklı metin içeren ve bazı tarayıcılarda erişilebilir adı geçersiz kilan bir title niteliği eklemek.
• DOM metin içeriğinden farklı metni görsel olarak gösteren CSS kullanmak (örneğin, algilanan etiketi değiştiren text-transform veya ::before sahte öğeleri).
• aria-label in bitişik görsel ipucu veya metinden farklı terminoloji kullandığı simge düğmeleri.