Ana içeriğe geç

2.5.3 Etiket Ad İçinde

Görünür etikete sahip kontrollerde, erişilebilir ad aynı metni içermelidir. Böylece yardımcı teknolojiler görsel etiket ile programatik etiketi eşleştirebilir.

SC Kodu: 2.5.3 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#label-in-name

Genel Tanım​

WCAG SC 2.5.3, metin veya metin içeren görseller olsun, kullanıcı arayüzü bileşenlerinin etiketlerinin, programatik olarak belirlenmiş adlarıyla veya ön ekleriyle eşleşmesini gerektirir. Bu, konuşma girişi kullanan kullanıcılar ve ilgili kontrole erişmek için etiketi görüntülemeye dayanan diğer yardımcı teknoloji kullanıcıları için kesintisiz erişim sağlar.

Faydalar​

  • Sesli Giriş Kullanıcıları için Geliştirilmiş Kullanılabilirlik: Sesle verilen komutların görünür etiketlerle eşleşmesini sağlar.

Ana Amaç​

Kullanıcı arayüzü bileşeninin görünür metin etiketinin, erişilebilir adıyla veya önekiyle eşleşmesini sağlamak.

Erişilebilir ad, bir denetime atanan ve programatik olarak belirlenen adı ifade eder; bu ad <label>, aria-label, aria-labelledby, alt veya title özniteliği kullanılarak, farklı düzeylerde özgüllükle belirtilebilir (örneğin, aria-label en özgül olanıdır). Görünür etiketlerin eşleşmesine güvenen konuşmadan metne dönüştürme yardımcı teknolojisi kullanıcıları için, denetimleri kesintisiz bir şekilde çalıştırmak açısından çok önemlidir. Görünür etiketin erişilebilir ad veya ön ekiyle eşleşmemesi, kullanıcıların denetimlerle etkili bir şekilde etkileşim kurmasını engeller.

Yazarlar, görme engelli veya bilişsel engelli kullanıcılar için ek metin veya ipuçları sağlayabilir; bu bilgiler görme yetisine sahip kullanıcılardan gizlenir (örneğin, erişilebilir adı geçersiz kılan ancak etiketin ön ekiyle yine de eşleşmesi gereken gizli bir <span>, aria-labelledby veya aria-label kullanarak). Etiketin en azından erişilebilir adın ön ekiyle eşleşmesi şarttır. Örneğin, etiket 'Ara' ise, görme engelli kullanıcılar için ek bilgi sağlamak ve 'Ara' ön ekiyle eşleşmek için erişilebilir ad 'Ayakkabı ara' şeklinde aria-label özniteliği eklenerek genişletilebilir. Özellikle, bu kriter için büyük harf kullanımına gerek yoktur.

'Ayakkabılar burada aranabilir' gibi farklı, erişilebilir bir isim seçmek bu kriteri karşılamayacaktır, çünkü konuşmadan metne dönüştürme yardımcı teknolojileri kontrolü doğru şekilde tanımlayamayacaktır.

En İyi Uygulamalar​

  • Görünür ve programatik etiketlerin eşleştiğinden emin olun: Görünür etiket metninin, programatik adı veya önekiyle (örneğin aria-label veya alt özniteliği) eşleştiğinden emin olun. Görünür etiket metnini erişilebilir adın başına yerleştirin.
  • Sembolleri etiket olarak kullanmaktan kaçının: Gerekli olmadıkça, yanlışlıkları önlemek için sembolleri etiket olarak kullanmaktan kaçının. Örneğin, matematiksel işaretler (örneğin, 'çarpma' işareti) gibi temel semboller, konuşmadan metne dönüştürme yardımcı teknolojileri için doğruluğu sağlamak amacıyla × gibi HTML karakter varlıklarıyla birlikte kullanılmalıdır.
  • Radyo grupları ve onay kutuları için bireysel ve grup etiketleri sağlayın: Radyo grupları ve onay kutuları için, her seçeneğe kendi etiketini verin ve <fieldset> ve <legend> veya ARIA rollerinden "role="radiogroup" veya "role="group" kullanarak tüm gruba ortak bir etiket atayın. Bu yaklaşım, ekran okuyucu kullanıcılarının her radyo düğmesi veya onay kutusu için aynı yorumu duymasını önler ve konuşmadan metne dönüştürme kullanıcıları için doğruluğu artırır.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Bir Düğmenin Görünür ve Erişilebilir Adları

Nelerden Kaçınılmalı?

HTML/CSS

<button aria-label="Yeni ayakkabı satın al" >Satın al </button>

Açıklama: Bir web sayfasında, görünür etiketinde "Satın Al" yazan bir düğme bulunur, ancak düğmenin aria etiketi "Yeni ayakkabı satın al" şeklindedir. Bu hatalı uygulamada, "Satın Al" diyen sesli giriş kullanıcıları, programatik olarak erişilebilir ad ("Yeni ayakkabı satın al") görünür etiketle ("Satın Al") eşleşmediği için düğmeyi etkinleştiremeyebilir.

Ne Yapılmalı?

HTML/CSS

<button aria-label="Yeni ayakkabı satın al" >Satın al </button>

Açıklama: Doğru uygulamada, 'Yeni ayakkabı satın al' kontrolünün erişilebilir adının ön ekinin, 'Satın al' düğmesinin görünür etiketiyle eşleşmesini sağladık. Bu, hem ekran okuyucu kullanıcılarının kontrolün amacını algılamasını sağlayarak başarı kriteri 1.3.1'i (bilgi ve ilişki) karşılar, hem de konuşmadan metne dönüştürme yardımcı teknolojisi kullanıcılarının 'Satın al'ı görünür ad olarak duyurarak kontrolü çalıştırmasına olanak tanıyarak başarı kriteri 2.5.3'ü karşılar.