Form adalah tempat pengunjung paling banyak mengeluarkan usaha: membaca, mengetik, memilih, memperbaiki galat. Pengguna pembaca layar menjalankan semuanya tanpa melihat tata letak — mereka mengandalkan apa yang diumumkan pada setiap kolom. Chapter label di Section Forms sudah mengajarkan cara memasangkan label; chapter ini memeriksa apa yang benar-benar didengar pengguna, lalu melengkapinya dengan instruksi format dan pesan galat.

Label yang Terbaca Saat Fokus #

Mekanismenya: saat fokus tiba di sebuah input, pembaca layar mengumumkan nama kolom, jenisnya, dan statusnya — misalnya “Nomor telepon, wajib diisi, edit teks”. Nama itu diambil dari label yang terikat lewat for dan id (atau label yang membungkus input). Tanpa ikatan itu, kolom hanya diumumkan sebagai “edit teks” — pengguna harus menebak isinya dari urutan kolom.

Status “wajib diisi” pada pengumuman di atas berasal dari atribut required: pembaca layar modern mengumumkannya bersama label tanpa markup tambahan. Ini salah satu contoh terbaik HTML native yang bekerja diam-diam untuk aksesibilitas.

Placeholder Bukan Label #

Tiga alasan membuat placeholder tidak boleh dipakai sebagai satu-satunya nama kolom:

  1. Hilang begitu pengguna mengetik — petunjuknya tertutup teks yang sedang diisikan; pengguna lupa format yang diminta di tengah pekerjaan.
  2. Kontras rendah — warna abu-abu bawaan placeholder lazimnya lemah, sulit dibaca di layar terang.
  3. Dukungan pembaca layar bervariasi — sebagian membacanya sebagai nama kolom, sebagian mengabaikannya sepenuhnya.

Instruksi format seperti “mulai angka 08, tanpa spasi” tempatnya di label atau teks sebelum input — tetap terbaca selama pengisian berlangsung.

Pesan Galat yang Terbaca #

Galat yang hanya ditandai warna — border merah pada kolom — tidak terbaca pembaca layar dan sulit dibedakan sebagian pengunjung. Solusinya dua lapis: tulis pesannya sebagai teks, lalu ikat ke inputnya lewat aria-describedby agar ikut dibacakan saat fokus kembali ke kolom bermasalah.

Contoh: Kurang Ramah vs Ramah #

html 
<input type="text" placeholder="Nama lengkap">
<input type="tel" placeholder="Nomor telepon, mulai 08">
<button type="submit">Kirim</button>

Versi ramah:

html 
<form action="/pesan" method="post">
  <label for="nama">Nama lengkap</label>
  <input type="text" id="nama" name="nama" required autocomplete="name">

  <label for="telepon">Nomor telepon (mulai 08, tanpa spasi)</label>
  <input type="tel" id="telepon" name="telepon" required aria-describedby="galat-telepon">
  <p id="galat-telepon">Nomor telepon harus diawali angka 08.</p>

  <button type="submit">Kirim Pesanan</button>
</form>

Mari kita bedah perbedaannya:

  1. Baris 1-3 (versi kurang ramah): hanya placeholder — semua pengumuman bergantung pada teks yang hilang saat mengetik, tanpa nama tetap, tanpa penanda wajib, tanpa teks galat.
  2. Baris 2 (label for="nama"): label eksplisit — fokus ke kolom nama diumumkan lengkap: “Nama lengkap, wajib diisi, edit teks”.
  3. Baris 5-6 (label dengan instruksi): format ditulis di dalam label — “mulai 08, tanpa spasi” tetap terbaca selama pengisian, tidak tertutup apa pun.
  4. Baris 6 (required): status wajib diumumkan otomatis; browser juga menahan pengiriman dan memfokuskan kolom galat pertama — kita sudah membahas mekanismenya di Section Form Validation.
  5. Baris 6 (aria-describedby="galat-telepon"): tautan ke teks galat — saat fokus kembali ke kolom telepon, pembaca layar ikut membacakan pesan pada baris 7.
  6. Baris 7 (p id="galat-telepon"): pesan galat sebagai teks nyata — terlihat, terbaca, tidak bergantung pada warna border.

Ikatan label bukan konsep abstrak — ia bisa dibuktikan dengan mouse. Klik teks di atas masing-masing kotak isian berikut dan perhatikan ke mana fokus jatuh; cincin biru sengaja dipertebal agar terlihat jelas:

Hanya kelompok pertama yang merespons: klik teks “Nama lengkap” dan kursor langsung muncul di kotaknya. Teks span pada kelompok kedua terlihat serupa, tetapi tidak terikat ke elemen apa pun — klik tidak berpindah ke mana-mana. Bagi pembaca layar, bedanya lebih besar lagi: kolom pertama diumumkan dengan namanya, kolom kedua hanya sebagai “edit teks”.

Ringkasan #

  • Fokus ke input memicu pengumuman label, jenis, dan status required — semuanya bergantung ikatan label.
  • Placeholder bukan label: hilang saat mengetik, kontras lemah, dukungan pembaca layar bervariasi.
  • Instruksi format ditulis di label atau sebelum input; pesan galat diikat aria-describedby dan selalu sebagai teks.
  • Grup pilihan memakai fieldset + legend agar pertanyaannya ikut diumumkan.

Label menuntaskan urusan nama; urusan berikutnya adalah mengoperasikan seluruh halaman tanpa mouse.