Her Girdinin Gerçek Bir label'ı Olmalıdır
Dokunmaların ve okumaların düzgün çalışması için etiketleri alanlara bağlayın.
Her Girdinin Gerçek Bir label'ı Olmalıdır, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Etiketler Neden Önemlidir
Adı olmayan bir form alanı gizemli bir kutu gibidir. Gerçek bir etiket, gören veya görmeyen her kullanıcıya tam olarak ne yazacağını söyler. 🏷️
label Öğesi
label öğesi, HTML'nin bir alanı adlandırmak için yerleşik yöntemidir. Tarayıcılar, ekran okuyucular ve dokunma hedefleri onu ek bir işlem gerektirmeden anlar.
for ve id ile Bağlayın
En temiz bağlantı, label üzerindeki for değerinin input öğesinin id değeriyle eşleşmesidir. Böylece bu ikisi resmi olarak eşleştirilir.
<label for="email">Email</label>
<input id="email" type="email">ID'ler Benzersiz Olmalıdır
İşaret ettiğiniz id, sayfada benzersiz olmalıdır. Aynı id'yi paylaşan iki input, eşleşmeyi fark edilmeden bozar.
Sarmalamak da İşe Yarar
Input öğesini label'ın içine de sarabilirsiniz. İç içe yerleştirme bağlantıyı açıkça kurduğu için id gerekmez.
<label>Email
<input type="email">
</label>Daha Büyük Tıklama Hedefi
Bağlantılı bir label, kullanıcılara daha geniş bir tıklama alanı sunar. Metne dokunmak alanı odaklar veya işaretler; bu da titreyen eller ve küçük ekranlar için yardımcıdır.
Ekran Okuyucular Onu Okur
Odak eşleştirilmiş bir input'a geldiğinde ekran okuyucu önce label metnini söyler. Label olmadan kullanıcılar yalnızca alan türünü duyar.
title Yeterli Değildir
Bir title özniteliği üzerine gelindiğinde görünebilir; ancak dokunmatik ekranlarda ve klavyeyle kullanımda güvenilir değildir. Gerçek bir label'ın yerini tutmaz.
Onay Kutularının da Etiketlere İhtiyacı Vardır
Onay kutuları ve radyo düğmeleri görsel olarak belirgin olabilir; ancak onları dokunulabilir ve duyurulabilir kılan bir label kullanılmasıdır. Bunları hiçbir zaman etiketsiz bırakmayın.
<input id="terms" type="checkbox">
<label for="terms">I agree</label>Görünür Olan Daha İyidir
Mümkün olduğunda etiketleri görünür tutun. Bilişsel yük yaşayan gören kullanıcılar da ekran okuyucu kullanıcıları kadar bundan yararlanır.
Gizlemeniz Gerektiğinde
Bir arama kutusunda metin için yer yoksa label'ı visually-hidden sınıfıyla gizleyin; display none kullanmayın. Böylece label yardımcı teknolojilere ulaşmaya devam eder.
Hızlı Kontrol
Bir label, hangi input'u adlandırdığını nasıl bilir?
Özet
Her input'un for ve id ile bağlanan veya sarmalanan gerçek bir label'a ihtiyacı vardır. Bu tek alışkanlık formları dokunulabilir, okunabilir ve anlaşılır kılar. ✅
Sıkça Sorulan Sorular
“Her Girdinin Gerçek Bir label'ı Olmalıdır” dersi ücretsiz mi?
Evet — “Her Girdinin Gerçek Bir label'ı Olmalıdır” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“Her Girdinin Gerçek Bir label'ı Olmalıdır” dersinde ne öğreneceğim?
Dokunmaların ve okumaların düzgün çalışması için etiketleri alanlara bağlayın. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Her Girdinin Gerçek Bir label'ı Olmalıdır” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Her Girdinin Gerçek Bir label'ı Olmalıdır
- Placeholder Bir Etiket Değildir
- Alanları fieldset ve legend ile Gruplama
- Yardım Metni ve Duyurulan Zorunlu Alanlar