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

Sıradaki ders: Tablo erişilebilirliği

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler