Form erişilebilirliği
Label, aria-required, aria-invalid kullanırsın.
label ve for/id ilişkisi
Bir form alanının erişilebilir adı, ona bağlı bir <label> ile verilir. Bağlantı iki yönden kurulur: label'ın for özniteliği ile input'un id'si aynı değeri taşır. Örnek: <label for="eposta">E-posta</label> <input id="eposta">.
Bu sayede ekran okuyucu input'a odaklanınca 'E-posta' diye okur. Tıklanan label da input'u aktive eder; bu küçük dokunuş tıklama alanını büyütür.
required ve aria-invalid
Normal bir <input> için zorunlu alan bildirirken HTML'in kendi required özniteliğini kullan; bu hem tarayıcıya hem ekran okuyucuya bilgi verir. aria-required="true" ise yalnızca <div> ile yapılmış özel bileşenler içindir; standart input'larda gereksizdir.
Doğrulama hatası gösterdiğinde aria-invalid="true" eklemek, ekran okuyucu kullanıcısının hatayı duymasını sağlar. Bu görsel değil, yalnızca yardımcı teknolojiye bilgi verir.
Uygulama Erişilebilir form alanı yaz
Body içine bir <form> ekle. Form içine bir <label for="eposta">E-posta</label> ve bir <input id="eposta" required> koy. Label'ın for değeri ile input'un id'si birebir eşleşmeli.
Örnek çözümü göster
<body>
<form>
<label for="eposta">E-posta</label>
<input id="eposta" required>
</form>
</body>Kendini test et
-
Aşağıdakilerden hangisi yanlış kullanımdır?
- label for="ad" ile input id="ad"
- label içine input koymak
- label for="ad" ile input name="ad"
- label for="soyad" ile input id="soyad"
Cevabı göster
label for="ad" ile input name="ad" — Doğru. for, id ile eşleşir; name ile değil.
-
Label etiketini yaz
<____ for="eposta">E-posta</label> <input id="eposta">Cevabı göster
<label for="eposta">E-posta</label> <input id="eposta"> -
Özniteliği amacıyla eşleştir
- for
- Etiketi input'a bağlar
- id
- Input'un kimliği
- aria-required
- Zorunlu alan bildirir
- aria-invalid
- Hatalı değer bildirir