Lompat ke konten utama
←

UX Writing

Pelajaran 3 dari 14

Teks antarmuka, tombol, dan label

Label dan petunjuk kolom isian

Setelah pelajaran ini kamu bisa memasang label yang terlihat dan terhubung ke kolomnya lewat for dan id, serta menulis petunjuk singkat tanpa bergantung pada placeholder.

±14 menitDiperiksa 28 Sep 2026

Materi

GOV.UK Text input menyatakan setiap kolom isian wajib punya label, dan hampir selalu label itu terlihat. Label diletakkan di atas kolom yang dirujuknya, pendek, langsung, ditulis dalam sentence case, dan tanpa titik dua di akhir. WCAG 2.2 kriteria 3.3.2 Labels or Instructions meminta label atau instruksi disediakan setiap kali konten meminta masukan. Salah satu contoh W3C: dua kolom diberi label Nama depan dan Nama belakang, bukan satu label Nama yang maksudnya samar.

Placeholder, teks abu-abu di dalam kolom, bukan pengganti label. GOV.UK melarang placeholder dipakai sebagai label, petunjuk, atau contoh, karena teks itu hilang saat orang mulai mengetik, tidak semua pembaca layar membacakannya, dan warna bawaannya sering tidak memenuhi kontras WCAG 1.4.3. Tutorial formulir W3C menambahkan bahwa pembaca layar tidak memperlakukan placeholder sebagai label, dan MDN menyatakan placeholder tidak boleh dibutuhkan untuk memahami formulir.

Label dihubungkan ke kolomnya lewat kode: nilai atribut for pada label sama persis dengan id kolomnya. Dengan hubungan itu pembaca layar membacakan label saat kolom difokus, dan menekan label memindahkan fokus ke kolom. Petunjuk (hint) dipakai untuk bantuan yang berguna bagi sebagian besar pengisi, misalnya untuk apa datanya dipakai atau di mana menemukannya. GOV.UK memintanya satu kalimat pendek tanpa titik dan tanpa tautan, karena pembaca layar membacakan teks tautan tanpa memberi tahu bahwa itu tautan. W3C menghubungkan petunjuk ke kolom dengan aria-describedby agar dibacakan sesudah label. Di halaman pertanyaan, GOV.UK juga melarang tanda bintang untuk kolom wajib.

<label for="nomor-anggota">Nomor anggota koperasi</label>
<div id="nomor-anggota-petunjuk">Tercetak di bagian depan kartu anggota</div>
<input type="text" id="nomor-anggota" name="nomor" aria-describedby="nomor-anggota-petunjuk">

Latihan

0/3 lulus

Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Latihan 2 dari 3

Kolom Nomor rekening butuh petunjuk. Petunjuk mana yang mengikuti aturan hint text GOV.UK?

Pilih satu jawaban

Latihan 3 dari 3

Tim ingin menghapus label dan hanya memakai placeholder "Nama lengkap" di dalam kolom supaya formulir tampak ringkas. Alasan mana yang tertulis di GOV.UK Text input untuk menolaknya?

Pilih satu jawaban

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Luluskan semua latihan dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke