Form

Kumpulkan informasi dari pengguna dengan label yang jelas, petunjuk, dan pesan kesalahan yang dapat dipahami.

Form yang Aksesibel (WCAG 2.2)

<!-- Shown after a failed submit; focus moves here -->
<div id="error-summary" role="alert" tabindex="-1">
  <h3>Form belum bisa dikirim. Perbaiki kesalahan berikut:</h3>
  <ul>
    <li><a href="#age">Kamu wajib mengisi umur</a></li>
  </ul>
</div>

<form novalidate>
  <div>
    <label for="age">Umur <span>(wajib)</span></label>
    <input id="age" name="age" type="text" inputmode="numeric"
      required aria-required="true"
      aria-invalid="true" aria-describedby="age-hint age-error">
    <p id="age-hint">Masukkan umur Anda dalam angka, misalnya 25.</p>
    <p id="age-error">Kesalahan: Kamu wajib mengisi umur</p>
  </div>

  <div>
    <label for="email">Email <span>(wajib)</span></label>
    <input id="email" name="email" type="email" autocomplete="email"
      required aria-required="true" aria-describedby="email-hint">
    <p id="email-hint">Contoh: [email protected]</p>
  </div>

  <div>
    <label for="password">Kata sandi <span>(wajib)</span></label>
    <input id="password" name="password" type="password"
      autocomplete="new-password" minlength="6"
      required aria-required="true" aria-describedby="password-hint">
    <p id="password-hint">Minimal 6 karakter.</p>
  </div>

  <div>
    <label for="gender">Jenis kelamin <span>(wajib)</span></label>
    <select id="gender" name="gender" autocomplete="sex"
      required aria-required="true">
      <option value="">Pilih jenis kelamin</option>
      <option value="male">Laki-laki</option>
      <option value="female">Perempuan</option>
      <option value="none">Memilih untuk tidak menjawab</option>
    </select>
  </div>

  <button type="submit">Kirim Form Ini</button>
</form>

<!-- Announced once the form is sent -->
<p role="status"></p>

Membuat Form yang Aksesibel

Sediakan label yang terlihat dan terhubung dengan input (for/id), jangan hanya placeholder
Tandai kolom wajib dengan teks dan atribut required, bukan hanya dengan warna atau tanda bintang
Hubungkan petunjuk dan pesan kesalahan ke input dengan aria-describedby, dan tandai input yang salah dengan aria-invalid
Saat form dikirim dengan kesalahan, tampilkan ringkasan kesalahan, pindahkan fokus ke sana, dan tautkan setiap kesalahan ke kolomnya
Gunakan atribut autocomplete agar browser dapat mengisi data pengguna, dan umumkan keberhasilan pengiriman

Form yang Tidak Aksesibel (Harap Dihindari)

Contoh tidak aksesibel. Jangan ditiru.

<form>
  <!-- No labels: the placeholder disappears as soon as you type -->
  <input name="age" type="text" placeholder="Umur">
  <input name="email" type="text" placeholder="Email">
  <input name="password" type="password" placeholder="Kata sandi">
  <select name="gender">
    <option value="">Jenis kelamin</option>
    <option value="male">Laki-laki</option>
    <option value="female">Perempuan</option>
  </select>

  <!-- Errors: only the border turns red. No text, no aria-invalid,
       no summary, focus stays on the button. -->
  <button type="submit">OK</button>
</form>

<style>
  .error { border-color: red; }
</style>

Contoh Implementasi Form yang Tidak Aksesibel

Tidak menyediakan label yang terhubung dengan input, hanya mengandalkan placeholder yang hilang saat pengguna mulai mengetik
Kesalahan hanya ditandai dengan border merah tanpa penjelasan, sehingga tidak terlihat oleh pengguna buta warna maupun pembaca layar
Pesan kesalahan tidak dihubungkan ke input dan fokus tidak dipindahkan, sehingga pengguna tidak tahu bahwa pengiriman gagal
Tidak mengindikasikan kolom wajib dengan jelas, dan tidak ada petunjuk format (misalnya syarat kata sandi)
Tombol kirim yang tidak deskriptif seperti 'OK' saja dan tidak ada umpan balik setelah form dikirim