Erişilebilir bir form nasıl yapılır? Hata mesajlarını ekran okuyuculara nasıl iletirsiniz?

Her alanın programatik bir etiketi (label) olmalı, zorunluluk ve format bilgisi görünür ve okunabilir olmalı, hatalar alanla ilişkilendirilmeli ve kullanıcıya duyurulmalıdır.

<form novalidate>
  <label for="email">E-posta <span aria-hidden="true">*</span></label>
  <input
    id="email"
    name="email"
    type="email"
    autocomplete="email"
    required
    aria-invalid="true"
    aria-describedby="email-hint email-error"
  />
  <p id="email-hint">İş e-postanızı girin.</p>
  <p id="email-error">Geçerli bir e-posta adresi girin, örneğin ad@firma.com</p>

  <fieldset>
    <legend>Teslimat tercihi</legend>
    <label><input type="radio" name="ship" value="std" /> Standart</label>
    <label><input type="radio" name="ship" value="exp" /> Hızlı</label>
  </fieldset>
  <button type="submit">Gönder</button>
</form>

Kurallar

• Placeholder etiketin yerine geçmez; yazınca kaybolur ve kontrastı düşüktür.
• aria-describedby ile ipucu ve hata metni alanla bağlanır; ekran okuyucu odaklanınca okur.
• aria-invalid="true" alanın geçersiz olduğunu bildirir.
• Hatayı sadece renkle belirtmeyin; metin ve ikon ekleyin.
• Doğru type ve autocomplete değerleri mobil klavyeyi ve otomatik doldurmayı iyileştirir.

Gönderimde hatalar

• Birden fazla hata varsa formun üstüne bir hata özeti koyun ve odağı ona veya ilk hatalı alana taşıyın.
• Dinamik mesajlar için live region:

<div role="alert">3 alanda hata var.</div>
<div aria-live="polite">Kaydedildi.</div>

role="alert" acil (assertive) duyurur; aria-live="polite" kullanıcının o anki okumasını bölmez. Live region elemanı içerik değişmeden önce DOM'da bulunmalıdır.

• Her tuş vuruşunda hata göstermeyin; alan terk edildiğinde (blur) veya gönderimde doğrulayın (:user-invalid CSS seçicisi bu davranışı destekler).