Masada form ve hesap makinesi — erişilebilir form tasarımı

Formlar, sitenizin para kazandığı yerdir: üyelik, iletişim, ödeme. Aynı zamanda erişilebilirlik sorunlarının en yoğun olduğu bileşendir. WebAIM taramalarında eksik form etiketi, en yaygın beş hatadan biridir.

8 kural

  1. Her alana görünür etiket: Placeholder etiket değildir — yazmaya başlayınca kaybolur ve kontrastı düşüktür.
  2. Etiketi kodla bağlayın: label for="eposta" ile input id'sini eşleştirin; ekran okuyucu ancak böyle okur.
  3. Zorunlu alanları metinle belirtin: Yalnızca kırmızı yıldız yetmez; "(zorunlu)" ekleyin veya isteğe bağlıları işaretleyin.
  4. Hataları açıklayın: "Geçersiz giriş" değil; "Doğum tarihi GG.AA.YYYY biçiminde olmalı" yazın. Hatalı alana odağı taşıyın.
  5. Rengi tek başına kullanmayın: Hata durumunu simge + metinle destekleyin (renk körlüğü rehberi).
  6. Otomatik doldurmayı açın: autocomplete="email" gibi öznitelikler, motor ve bilişsel engelli kullanıcıların işini büyük ölçüde kolaylaştırır.
  7. Klavyeyle test edin: Tab sırası mantıklı olmalı; tarih seçici gibi bileşenler klavyeyle kullanılabilmeli (test rehberi).
  8. Oturumu aceleye getirmeyin: Süre kısıtı varsa uzatma seçeneği sunun; bilişsel test içeren doğrulamalardan kaçının (WCAG 2.2 — 3.3.8).

Hızlı denetim: Formlarınızın durumunu ücretsiz erişilebilirlik raporuyla görün.