Bir <label>, form denetimine erişilebilir bir ad ve daha büyük bir tıklama hedefi sağlar. Bunları ilişkilendirmenin iki yolu vardır ve bunu yapmak erişilebilirlik için gereklidir.
Metod 1: for + id (açık)
html
Email address
Bir <label>, form denetimine erişilebilir bir ad ve daha büyük bir tıklama hedefi sağlar. Bunları ilişkilendirmenin iki yolu vardır ve bunu yapmak erişilebilirlik için gereklidir.
for + id (açık)Email address
Etiketin for öğesi, girdinin id öğesiyle eşleşir. Bu, işaretlemede bitişik olmasa bile çalışır.
<label>
Email address
<input type="email" />
</label>
Girdi, etiketin içinde iç içe geçmiştir — id gerekmez.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
Bir placeholder, kullanıcı yazdığında kaybolur ve güvenilir şekilde duyurulmaz — bunu asla tek etiket olarak kullanmayın.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
aria-label (veya aria-labelledby) kullanın, yalnızca görünür bir etiket gerçekten imkânsız olduğunda.
Düzgün ilişkilendirilen etiketler, formlar için en etkili erişilebilirlik uygulamalarından biridir — her denetim için yardımcı teknoloji için bir ad sağlarlar ve herkes için tıklama hedeflerini genişletirler.
Gerçek bir <label> tercih edin; yalnızca gerektiğinde aria-label öğesine geri dönün ve asla placeholder öğesine etiket olarak güvenmeyin.