Skip to main content
Teknik

Form Erişilebilirlik Kalıpları

Erişilebilir form tasarım kalıpları — etiketler, hata yönetimi, gruplama, otomatik tamamlama ve doğrulama — yaygın form bileşenleri için kod örnekleriyle.

Temel: Etiketler

Her form kontrolünün programlı olarak ilişkilendirilmiş bir etiketi olmalıdır. Tercih sırasına göre dört geçerli etiketleme yöntemi:

  1. <label for="id"> — açık ilişkilendirme. En güvenilir yöntem.
  2. aria-labelledby="id" — başka bir öğenin metnine başvurur.
  3. aria-label="string" — satır içi dize etiket.
  4. title niteliği — araç ipucu etiketi. Birincil etiketleme için kaçının.
<!-- Açık etiket (tercih edilen) -->
<label for="email">E-posta adresi</label>
<input type="email" id="email" name="email" autocomplete="email">

İlgili Kontrolleri Gruplama

Radyo düğmeleri, onay kutuları ve ilgili girişler grubu <fieldset> ve <legend> ile gruplandırılmalıdır. Legend, kullanıcılara bağlam sağlamak için ekran okuyucuların her bir seçenekten önce duyurduğu grup etiketini sağlar.

<fieldset>
  <legend>Tercih edilen iletişim yöntemi</legend>
  <label><input type="radio" name="iletisim" value="email"> E-posta</label>
  <label><input type="radio" name="iletisim" value="telefon"> Telefon</label>
</fieldset>

Hata Yönetimi: Üç Kural

  1. Hatadaki alanı yalnızca renkle değil, adıyla tanımlayın.
  2. Hatayı açıklayın — "Lütfen geçerli bir e-posta adresi girin".
  3. Hata mesajını ekran okuyucuların alan odaklandığında duyurabilmesi için programlı olarak alanla ilişkilendirin.
<label for="email">E-posta adresi</label>
<input
  type="email"
  id="email"
  aria-invalid="true"
  aria-describedby="email-hata"
  required
>
<span id="email-hata" role="alert">
  Lütfen geçerli bir e-posta adresi girin (örn. ad@ornek.com).
</span>

Otomatik Tamamlama Nitelikleri

WCAG 1.3.5, kişisel bilgi toplayan girişlerin doğru otomatik tamamlama nitelik değerine sahip olmasını gerektirir. Bu, tarayıcıların formu otomatik doldurmasına olanak tanır; motor engelli, bilişsel engelli ve disleksisi olan kullanıcılara fayda sağlar.

Gerekli Alanlar

Gerekli alanları açıkça ve programlı olarak belirtin. HTML required niteliği yerel tarayıcı doğrulamasını ve ekran okuyucu duyurusunu sağlar. Görünür bir göstergeyle (açıklamalı yıldız veya "Gerekli" metni) tamamlayın.

Kaynaklar