Accessibility

Form adalah interaksi paling umum di web. Form yang tidak accessible menyulitkan banyak pengguna.

Label yang Terhubung

Setiap input harus punya label yang terhubung secara eksplisit:

<!-- Benar — label punya for yang cocok dengan id input -->
<label for="email">Email</label>
<input id="email" type="email" />

<!-- Juga benar — input di dalam label -->
<label>
  Email
  <input type="email" />
</label>

<!-- Salah — label tidak terhubung -->
<label>Email</label>
<input type="email" />

Fieldset dan Legend

Untuk grup input terkait:

<fieldset>
  <legend>Metode Pembayaran</legend>
  <label>
    <input type="radio" name="pembayaran" value="kartu" />
    Kartu Kredit
  </label>
  <label>
    <input type="radio" name="pembayaran" value="transfer" />
    Transfer Bank
  </label>
</fieldset>

Error Message

Error harus dihubungkan dengan input menggunakan aria-describedby:

<label for="email">Email</label>
<input
  id="email"
  type="email"
  aria-required="true"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<span id="email-error" role="alert">
  Format email tidak valid
</span>

Required Fields

<!-- Gunakan required attribute dan aria-required -->
<label for="nama">Nama <span aria-label="required">*</span></label>
<input id="nama" required aria-required="true" />

Input Types yang Tepat

<!-- Gunakan type yang sesuai untuk mobile keyboard yang benar -->
<input type="email" />      <!-- @ dan .com muncul -->
<input type="tel" />        <!-- numeric keypad -->
<input type="number" />     <!-- numeric dengan spinner -->
<input type="date" />       <!-- date picker native -->
<input type="search" />     <!-- clear button -->

Placeholder Bukan Label

<!-- Salah — placeholder hilang saat user mengetik -->
<input placeholder="Masukkan email Anda" />

<!-- Benar -->
<label for="email">Email</label>
<input id="email" placeholder="nama@perusahaan.com" />

Success State

<input
  aria-invalid="false"
  aria-describedby="email-success"
/>
<span id="email-success" role="status">
  Email tersedia
</span>

Checkbox dan Toggle

<!-- Gunakan switch role untuk toggle -->
<button
  role="switch"
  aria-checked="false"
  aria-label="Notifikasi email"
>
  <span aria-hidden="true">OFF</span>
  <span aria-hidden="true">ON</span>
</button>

Accessibility - Forms