Belajar HTML - Label, Fieldset, dan Aksesibilitas Form
Episode ini membedah aksesibilitas formulir: label yang benar dengan atribut for, pengelompokan kontrol dengan fieldset dan legend, serta mengapa placeholder tidak menggantikan label.
#Pendahuluan
Di episode 8 kalian menulis formulir dengan label yang masih asal. Episode 9 memperbaikinya: label, fieldset, dan aksesibilitas form. Formulir yang dapat diakses bukan sekadar nilai tambah — tanpa label yang benar, pengguna screen reader tidak bisa tahu apa yang harus mereka isi.
Episode ini membahas dua pola fundamental: menghubungkan label dengan kontrol lewat atribut for dan id, serta mengelompokkan pilihan yang saling terkait dengan fieldset dan legend. Keduanya adalah fondasi validasi dan UX formulir yang baik.
#Label yang Benar
#Hubungan for dan id
Elemen label memberi nama pada sebuah kontrol. Hubungan dibentuk dengan mencocokkan for pada label dengan id pada kontrol:
<p>
<label for="nama-lengkap">Nama lengkap</label>
<input type="text" id="nama-lengkap" name="nama">
</p>Saat label dihubungkan dengan benar, klik pada teks label memindahkan fokus ke input. Screen reader membacakan label ketika kontrol menerima fokus — pengguna tahu persis apa yang diminta.
#Label Membungkus Kontrol
Alternatif lain: bungkus kontrol di dalam label tanpa atribut:
<label>
Nama lengkap
<input type="text" name="nama">
</label>Pola ini lebih pendek dan tetap membuat hubungan implisit. Keduanya valid; yang penting adalah setiap kontrol butuh label yang dapat diakses.
#Fieldset dan Legend
#Mengelompokkan Pilihan Terkait
fieldset mengelompokkan kontrol yang berkaitan, dan legend memberi judul kelompok:
<fieldset>
<legend>Alamat pengiriman</legend>
<p>
<label for="jalan">Jalan</label>
<input type="text" id="jalan" name="jalan">
</p>
<p>
<label for="kota">Kota</label>
<input type="text" id="kota" name="kota">
</p>
</fieldset>legend dibacakan oleh screen reader sebagai judul kelompok — pengguna tahu bahwa kontrol di dalamnya membentuk satu kesatuan.
#Grup Pilihan yang Wajib Menggunakan Fieldset
Kelompok radio dan checkbox memakai fieldset hampir selalu:
<fieldset>
<legend>Ukuran paket</legend>
<label>
<input type="radio" name="ukuran" value="kecil">
Kecil
</label>
<label>
<input type="radio" name="ukuran" value="besar">
Besar
</label>
</fieldset>Tanpa fieldset, pengguna screen reader mendengar sederet pilihan radio tanpa tahu pertanyaannya apa. legend menjawab itu.
#Placeholder Bukan Pengganti Label
#Bahaya Placeholder Saja
Kesalahan paling umum: memakai placeholder sebagai satu-satunya penjelas dan menulis label di luar halaman. Masalahnya: placeholder hilang begitu pengguna mulai mengetik, warnanya kontras rendah, dan pada beberapa screen reader tidak dibacakan sebagai nama kontrol.
<p>
<label for="email">Alamat email</label>
<input
type="email"
id="email"
name="email"
placeholder="nama@contoh.id"
>
</p>Pola yang benar: label sebagai penjelas permanen, placeholder hanya sebagai contoh tambahan yang formatnya sudah jelas.
#Latihan: Formulir Profil Lengkap
Gabungkan semua pola ke dalam satu formulir:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Profil</title>
</head>
<body>
<h1>Formulir Profil</h1>
<form action="/profil" method="post">
<fieldset>
<legend>Data pribadi</legend>
<p>
<label for="nama">Nama lengkap</label>
<input type="text" id="nama" name="nama">
</p>
<p>
<label for="email">Alamat email</label>
<input type="email" id="email" name="email">
</p>
</fieldset>
<fieldset>
<legend>Preferensi berlangganan</legend>
<label>
<input type="checkbox" name="berita" value="ya">
Kirim berita mingguan
</label>
<label>
<input type="checkbox" name="promo" value="ya">
Kirim promo terbaru
</label>
</fieldset>
<p>
<button type="submit">Simpan Profil</button>
</p>
</form>
</body>
</html>Buka halaman dan gunakan tab keyboard untuk berpindah antar kontrol. Di konsol, periksa label yang terhubung dengan document.getElementById("nama").labels — hasilnya harus berisi elemen label yang benar.
#Kesalahan Umum dan Solusinya
#for yang Tidak Cocok
for pada label yang tidak mencocokkan id mana pun membuat hubungan putus. Pastikan nilai keduanya sama persis dan unik dalam halaman.
#Fieldset untuk Satu Kontrol
fieldset untuk satu kontrol tunggal tidak diperlukan dan membuat hierarki aneh. Gunakan hanya untuk kelompok kontrol yang saling terkait.
#Penutup
Episode 9 membuat formulir kalian dapat diakses: label dengan for dan id, fieldset dengan legend untuk pengelompokan, serta kesadaran bahwa placeholder tidak pernah menggantikan label.
Inti yang harus dibawa pulang:
- Setiap kontrol butuh
labelyang terhubung lewatfordanid. fieldsetdanlegendmengelompokkan kontrol yang berkaitan.- Kelompok radio dan checkbox hampir selalu memakai
fieldset. placeholderhanya contoh;labeladalah penjelas permanen.fordanidharus cocok persis dan unik.
Di episode 10 selanjutnya kita akan membahas aksesibilitas konten dasar — atribut ARIA, teks alternatif, dan fokus keyboard. Kalian akan belajar membuat konten yang bisa diakses semua orang, termasuk pengguna alat bantu.