KAL
Menu

Label yang Dikerjakan Benar

Asosiasi label eksplisit, sasaran klik, dan perilakunya pada pembaca layar.

Daftar isi

Elemen label memberi nama yang terbaca pada sebuah kontrol formulir, dan asosiasinya menentukan apakah nama itu benar-benar melekat pada kontrolnya. Label yang berasosiasi dengan benar membuat teks label ikut menjadi sasaran klik, memunculkan nama kontrol pada pembaca layar (screen reader), dan mengikat teks dengan kontrolnya meskipun posisinya berjauhan dalam markup. Topik ini membahas asosiasi eksplisit dengan for dan id, label implisit beserta keterbatasannya, perilaku keduanya pada pembaca layar, serta kesalahan memperlakukan placeholder sebagai label. Setelah membacanya, setiap kontrol pada formulir dapat dilabeli dengan cara yang kokoh dan teruji.

Asosiasi eksplisit dengan for dan id#

Asosiasi eksplisit dibentuk dengan dua atribut yang saling menunjuk, yaitu atribut for pada label dan atribut id pada kontrolnya. Nilai for harus persis sama dengan nilai id kontrol yang dilabelinya, dan karena id wajib unik di seluruh halaman, satu label selalu menunjuk tepat satu kontrol. Cara ini bekerja tanpa memandang letak markup, sehingga label boleh berada di kolom lain, di baris tabel, atau jauh di atas kontrolnya.

html Contoh: asosiasi eksplisit for dan id 
<p>
  <label for="nama">Nama lengkap</label>
  <input id="nama" name="nama" type="text">
</p>
<p>
  <label for="surel">Surel</label>
  <input id="surel" name="surel" type="email">
</p>

Pasangan for dan id adalah bentuk asosiasi yang disarankan dokumentasi resmi karena paling eksplisit dan paling kokoh. Kesalahan yang paling sering terjadi pada pola ini adalah salah ketik nilai for, misalnya for="Nama" sedangkan id-nya nama, sehingga asosiasinya diam-diam tidak terbentuk dan halaman tetap tampak benar. Pemeriksaan asosiasi dapat diotomatisasi, dan contoh skripnya ada di bagian bawah topik ini.

Label implisit dan keterbatasannya#

Label implisit dibentuk dengan menaruh kontrol di dalam elemen label, tanpa for dan tanpa id. Pola ini ringkas dan sering digunakan pada kotak centang serta tombol radio, karena teksnya memang berdampingan dengan kontrolnya.

html Contoh: label implisit dengan kontrol di dalamnya 
<label>
  <input type="checkbox" name="arsip" value="ya">
  Simpan salinan ke arsip
</label>

Keterbatasan label implisit muncul ketika struktur halaman menuntut pemisahan. Label yang harus berjauhan dari kontrolnya tidak mungkin dibuat dengan pola ini, dan penataan gaya yang kompleks menjadi lebih sulit karena teks dan kontrol terikat dalam satu elemen. Dukungan pembaca layar terhadap label implisit juga bergantung pada browser dan versi pembaca layarnya, sehingga hasil pengumumannya kurang seragam dibanding asosiasi eksplisit. Satu label implisit pun tetap terikat satu kontrol, sehingga pola ini tidak dapat dipinjam untuk memberi nama pada dua kontrol sekaligus. Karena itu label implisit diperlakukan sebagai pilihan praktis untuk kasus sederhana, sedangkan asosiasi eksplisit tetap menjadi bentuk yang dipilih saat ragu.

Sasaran klik yang membesar#

Label yang berasosiasi meneruskan kliknya ke kontrol yang dilabelinya, sehingga mengklik teks label sama dengan mengklik kontrol itu. Efeknya paling terasa pada kontrol yang sasarannya kecil, yaitu kotak centang dan tombol radio, karena luas area klik ikut mencakup teksnya. Kebiasaan sederhana ini menurunkan jumlah klik yang meleset, terutama pada layar sentuh yang sasaran kecilnya sulit dituju.

html Contoh: klik pada label meneruskan ke radio 
<fieldset>
  <legend>Jadwal latihan</legend>
  <p>
    <label><input type="radio" name="jadwal" value="rabu"> Rabu sore</label>
    <label><input type="radio" name="jadwal" value="jumat"> Jumat sore</label>
  </p>
</fieldset>

Perilaku penerusan klik ini juga berlaku pada asosiasi eksplisit, dan ujinya mudah dilakukan, yaitu mengklik teks label lalu mengamati kontrolnya ikut terfokus atau tercentang. Apabila klik pada teks label tidak berpengaruh apa pun, asosiasinya tidak terbentuk, dan penyebabnya biasanya nilai for dan id yang tidak cocok atau label yang tidak terikat ke kontrol mana pun. Manfaatnya paling terasa pada kontrol kecil, karena lingkaran tombol radio hanya menutupi area beberapa piksel, sedangkan teks labelnya dapat mencakup ratusan piksel.

Perilaku pada pembaca layar#

Pembaca layar membacakan nama kontrol saat kontrolnya memperoleh fokus, dan nama itu diambil dari label yang berasosiasi dengannya. Pengguna papan ketik yang mengandalkan pembaca layar menelusuri formulir kontrol demi kontrol, sehingga kontrol tanpa label yang berasosiasi hanya diumumkan sebagai tipe kontrolnya, misalnya kotak teks kosong tanpa keterangan. Kondisi semacam itu memaksa pengguna menebak isi kontrol dari konteks sekitarnya.

Bentuk bawaan kontrol tertentu sudah menyertakan teks sendiri, misalnya tombol yang membawa teks di dalam elemennya, tetapi kontrol formulir seperti input tidak memiliki teks sama sekali. Itulah sebabnya label menjadi keharusan bagi input, select, dan textarea. Perancangan label yang baik juga menjaga teksnya tetap ringkas, karena pembacaan panjang memperlambat penelusuran formulir pada mode baca cepat pembaca layar.

Placeholder bukan label#

Atribut placeholder menampilkan teks petunjuk di dalam kolom, dan teks itu menghilang begitu kolom terisi. Karena muncul di posisi yang sama dengan isi kolom, placeholder sering digunakan sebagai pengganti label, dan penggunaan itu menimbulkan tiga masalah sekaligus. Teks petunjuk hilang saat pengguna mulai mengetik, kontrasnya biasanya rendah sehingga sulit dibaca, dan sebagian pembaca layar tidak mengumumkan placeholder sebagai nama kontrol.

Pola yang sehat terlihat pada berkas utuh di bawah, yaitu kolom nama panggilan tetap memiliki label, sedangkan placeholder-nya hanya memberi contoh isi yang diharapkan. Dengan susunan itu, hilangnya teks petunjuk tidak menghapus nama kolom, karena labelnya tetap terbaca di tempatnya. Apabila petunjuknya memang perlu tetap terlihat sepanjang waktu, teks bantuan di luar kolom lebih andal daripada placeholder, karena teks itu tidak pernah hilang saat kolom terisi.

Memeriksa asosiasi dengan skrip#

Asosiasi label dan kontrol dapat diperiksa secara mekanis dari markupnya, dan pemeriksaan itu memperlihatkan mekanisme di baliknya, yaitu pencocokan nilai for dengan id. Skrip berikut memindai potongan markup, lalu melaporkan status setiap kontrol dan labelnya. Pemeriksaan semacam ini meniru cara browser membentuk nama kontrol, yaitu mencari label yang menunjuk melalui for, atau mengambil label yang membungkus kontrolnya.

js 
// Memeriksa asosiasi label dan kontrol dari sebuah potongan markup
const markup = `
<form>
  <label for="nama">Nama lengkap</label>
  <input id="nama" name="nama" type="text">
  <label for="surel">Surel</label>
  <input id="surel" name="surel" type="email">
  <input name="alamat" type="text">
  <label><input type="checkbox" name="arsip"> Simpan ke arsip</label>
</form>`;

const blokLabel = [...markup.matchAll(/<label[^>]*>[\s\S]*?<\/label>/g)].map(m => m[0]);
const idLabel = blokLabel
  .filter(blok => blok.includes('for="'))
  .map(blok => blok.match(/for="([^"]+)"/)[1]);

for (const cocok of markup.matchAll(/<input[^>]*>/g)) {
  const id = (cocok[0].match(/id="([^"]+)"/) || [])[1];
  if (id === undefined) {
    console.log(`${cocok[0].slice(0, 30)} ... : tanpa id`);
  } else if (idLabel.includes(id)) {
    console.log(`input #${id} : berasosiasi eksplisit`);
  } else {
    console.log(`input #${id} : ber-id tetapi tidak ada label yang menunjuknya`);
  }
}

for (const blok of blokLabel) {
  if (blok.includes('for="')) continue;
  if (blok.includes("<input")) {
    console.log("label implisit : kontrol berada di dalam label");
  } else {
    console.log("label tanpa for dan tanpa kontrol : tidak berasosiasi dengan apa pun");
  }
}
text Keluaran 
input #nama : berasosiasi eksplisit
input #surel : berasosiasi eksplisit
<input name="alamat" type="tex ... : tanpa id
<input type="checkbox" name="a ... : tanpa id
label implisit : kontrol berada di dalam label

Keluaran tersebut memperlihatkan tiga keadaan sekaligus, yaitu dua kontrol yang berasosiasi eksplisit, satu kontrol teks tanpa id yang berpotensi tanpa nama, dan satu label implisit yang kontrolnya memang berada di dalamnya. Kontrol alamat pada contoh itu belum tentu salah, karena label implisit atau asosiasi lain masih mungkin menyertainya, tetapi skrip berhasil menandai tempat yang layak diperiksa ulang.

Berkas utuh label yang berasosiasi#

Berkas berikut mengumpulkan pola-pola topik ini dalam satu formulir pendaftaran, yaitu asosiasi eksplisit pada kolom teks, label implisit pada pilihan jadwal, dan placeholder yang hanya berperan sebagai contoh isi. Pola eksplisit digunakan pada kolom teks karena label dan kontrolnya ditata vertikal, sedangkan pola implisit digunakan pada pilihan radio yang teksnya memang menempel. Formulir ini sebaiknya dibuka langsung di browser agar perilaku klik pada label radio dapat dicoba sendiri.

html label.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh label yang berasosiasi</title>
  <style>
    body { font-family: sans-serif; max-width: 34rem; margin: 0 auto; padding: 0 1rem; }
    .baris { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; }
    input[type="text"], input[type="email"] { padding: 0.3rem 0.5rem; font-size: 1rem; }
    fieldset { margin-bottom: 1rem; }
  </style>
</head>
<body>
  <h1>Formulir pendaftaran ekstrakurikuler</h1>

  <form action="/daftar" method="post">
    <p class="baris">
      <label for="nama">Nama lengkap</label>
      <input id="nama" name="nama" type="text">
    </p>
    <p class="baris">
      <label for="surel">Surel</label>
      <input id="surel" name="surel" type="email">
    </p>
    <fieldset>
      <legend>Jadwal latihan</legend>
      <p>
        <label><input type="radio" name="jadwal" value="rabu"> Rabu sore</label>
        <label><input type="radio" name="jadwal" value="jumat"> Jumat sore</label>
      </p>
    </fieldset>
    <p class="baris">
      <label for="alias">Nama panggilan</label>
      <input id="alias" name="alias" type="text" placeholder="misalnya: Citra">
    </p>
    <p><button type="submit">Daftar</button></p>
  </form>
</body>
</html>

Klik teks Rabu sore atau Jumat sore, dan tombol radionya ikut terpilih tanpa menyentuh lingkaran kecilnya. Pengalaman yang sama berlaku bagi pengguna pembaca layar, karena nama jadwal ikut terbaca saat kontrolnya menerima fokus, dan itulah tujuan akhir dari seluruh disiplin labeling pada topik ini.

Kesalahan umum#

  • Salah pasang nilai for dengan id, misalnya beda huruf besar kecil atau beda urutan kata. Halaman tampak benar, tetapi asosiasinya tidak terbentuk. Cocokkan nilainya persis dan uji dengan mengklik labelnya.
  • Menggunakan placeholder sebagai pengganti label. Teksnya hilang saat kolom terisi dan tidak selalu diumumkan pembaca layar. Gunakan label yang berasosiasi, dan jadikan placeholder petunjuk tambahan saja.
  • Melabeli beberapa kontrol dengan satu label. Satu label hanya boleh terikat satu kontrol, sehingga kelompok pilihan perlu fieldset dan legend, bukan label bersama.
  • Membiarkan kontrol tanpa label hanya karena terlihat jelas bagi pengguna normal. Kontrol tetap membutuhkan nama yang terbaca oleh alat bantu, dan penilaian “jelas melihat” bukan penggantinya.

Ringkasan#

  • Asosiasi eksplisit dibentuk for pada label dan id pada kontrol, bekerja tanpa memandang jarak markup, dan menjadi bentuk yang paling kokoh.
  • Label implisit menaruh kontrol di dalam labelnya, ringkas untuk kasus sederhana, tetapi kaku saat tata letak memisahkan keduanya.
  • Label yang berasosiasi memperbesar sasaran klik dan menyediakan nama yang dibacakan pembaca layar saat kontrolnya menerima fokus.
  • placeholder hanya petunjuk, bukan label, karena teksnya hilang saat kolom terisi dan pengumumannya tidak dapat diandalkan.

Referensi#