labelfieldsetaksesibilitasMenengah3 mnt baca

Label, Fieldset, Legend

Bikin form aksesibel: label yang bisa diklik, grup field dengan fieldset.

Kenapa Form Butuh Label?

Form tanpa label itu seperti soal ujian tanpa pertanyaan: ada kotak jawaban, tetapi tidak jelas harus diisi apa. Secara visual kita bisa menaruh teks "Nama:" di samping input, tetapi teks biasa tidak terhubung dengan inputnya. Akibatnya, pengguna screen reader (pembaca layar untuk tunanetra) hanya mendengar "kotak teks kosong" tanpa tahu itu untuk apa. Elemen label memecahkan masalah ini dengan mengikat teks ke input secara resmi.

Bonusnya, label yang terikat membuat area klik lebih besar: mengklik teks "Nama:" otomatis memindahkan fokus ke inputnya. Di layar sentuh yang kecil, ini sangat membantu karena target sentuhnya jadi jauh lebih lega.

Dua Cara Menulis Label

html

<!-- Cara 1: implisit, label membungkus input -->
<label>Nama: <input type="text" name="nama" /></label>

<!-- Cara 2: eksplisit, hubungkan dengan for dan id -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" />

Cara implisit praktis untuk form sederhana. Cara eksplisit wajib dipakai saat label dan input terpisah jauh di layout, misalnya label di kolom kiri dan input di kolom kanan. Kuncinya: nilai for harus sama persis dengan id inputnya, dan setiap id hanya boleh dipakai sekali dalam satu halaman.

Contoh Realistis: Mengelompokkan dengan fieldset

Formulir panjang berisi belasan field akan melelahkan kalau tampil sebagai daftar tanpa jeda. fieldset mengelompokkan field yang se-tema, dan legend menjadi judul grupnya:

html

<form>
  <fieldset>
    <legend>Data Diri</legend>
    <p><label for="nama">Nama lengkap:</label>
      <input type="text" id="nama" name="nama" /></p>
    <p><label for="lahir">Tanggal lahir:</label>
      <input type="date" id="lahir" name="lahir" /></p>
  </fieldset>
  <fieldset>
    <legend>Akun</legend>
    <p><label for="user">Username:</label>
      <input type="text" id="user" name="user" /></p>
    <p><label for="pass">Password:</label>
      <input type="password" id="pass" name="pass" /></p>
  </fieldset>
  <button type="submit">Daftar</button>
</form>

Bagi pengguna screen reader, legend sangat berarti: sebelum membacakan field di dalamnya, screen reader mengumumkan nama grupnya, misalnya "grup Data Diri". Tanpa ini, pengguna hanya mendengar deretan field tanpa konteks, seperti disuruh mengisi formulir sambil ditutup matanya.

Kesalahan Umum

Kesalahan paling sering: memakai placeholder sebagai pengganti label. Placeholder hilang begitu pengguna mulai mengetik, sehingga di tengah mengisi form ia lupa field itu sebenarnya untuk apa. Placeholder itu petunjuk tambahan, bukan pengganti label.

Kesalahan kedua: menulis label dengan teks biasa tanpa elemen label. Terlihat sama di layar, tetapi tidak ada ikatan resmi sehingga mengklik teks tidak memindahkan fokus dan screen reader tidak bisa mengumumkannya:

html

<!-- Salah: teks biasa, tidak terikat ke input -->
<p>Nama:</p>
<input type="text" name="nama" />

<!-- Benar: label resmi terhubung via for dan id -->
<label for="nama2">Nama:</label>
<input type="text" id="nama2" name="nama" />

Catatan teknis: fieldset punya border bawaan yang memang terlihat kuno. Jangan menghapus elemennya dari HTML hanya karena tidak suka tampilannya, atur saja dengan CSS seperti border: none. Struktur yang aksesibel harus dipertahankan, soal tampilan itu urusan CSS, bukan HTML.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Form Pendaftaran Rapi

Buat form pendaftaran dengan 2 fieldset: "Akun" (username + password, label eksplisit dengan for/id) dan "Profil" (nama + tanggal lahir, label implisit dengan bungkus). Form yang aksesibel dan terorganisir seperti ini adalah standar di situs profesional, dan perekrut sering menilai kerapian form saat melihat portofoliomu.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Daftar</title>
</head>
<body>
  <h1>Daftar Akun</h1>
  <form>
    <!-- dua fieldset di sini -->
  </form>
</body>
</html>

Open Sandbox