Tentang Tanda Wajib pada Formulir Input

Kami merangkum informasi tentang tanda “wajib” pada UI layar (formulir) di luar negeri, beserta materi pedoman UI.

📌 Tanda Wajib Utama dan Praktik Terbaik

Penggunaan Asterisk (*)
- Ini adalah yang paling umum dan banyak digunakan, di mana bidang wajib ditandai dengan “*”.
- Namun, penjelasan di awal formulir seperti “ adalah bidang wajib” sangat diperlukan* (Nielsen Norman Group, California State University, Northridge).
- Ada juga contoh penggunaan warna untuk penekanan (seperti teks merah).
Menyatakan “Required” atau “(required)” dengan Jelas pada Label
- Dengan menambahkan kata “Required” di dalam label, ini juga dapat diperjelas untuk pembaca layar, sehingga meningkatkan aksesibilitas (Deque).
Kombinasi Atribut ARIA dan Atribut required HTML5
- Selain tampilan visual, penggunaan aria-required="true" dan <input required> dapat menyampaikan kewajiban secara terprogram (Deque).
Menggunakan “(optional)” untuk Menandai Bidang Opsional Secara Jelas
- Ada juga metode untuk dengan jelas menyatakan bidang opsional menggunakan “(optional)” alih-alih bidang wajib, yang efektif ketika keduanya dicampur.
- Namun, Nielsen‑Norman menunjukkan bahwa “lebih mudah untuk menilai jika bidang wajib juga dinyatakan dengan jelas” (TPGi).

✅ Ringkasan Materi Pedoman UI

Sumber	Konten
NN/g: Marking Required Fields in Forms	Kombinasi asterisk + teks penjelasan direkomendasikan, dan hanya menampilkan opsi opsional dianggap kurang ramah pengguna (Nielsen Norman Group).
Deque (Anatomy of Accessible Forms)	・Menggunakan string “Required” atau gambar di dalam label. ・Dinyatakan dengan jelas bahwa indikasi berdasarkan warna saja tidak cukup.
W3C Techniques (H90)	Contoh penyertaan asterisk atau “(required)” dalam label, dan mendefinisikan artinya di awal formulir.
TPGi (Doing what’s required)	Mempertimbangkan aksesibilitas, kombinasi asterisk + atribut ARIA + penyisipan teks label dievaluasi sebagai yang paling optimal.
Panduan UX Formulir Contensis	Diringkas secara singkat bahwa penandaan yang konsisten (* atau (optional)) adalah hal yang penting.

✅ Pendekatan yang Direkomendasikan dalam Implementasi

Tambahkan teks penjelasan di awal formulir :
Fields marked with * are required. (Atau secara kolektif “All fields are required”, dan jika ada yang opsional “unless marked optional”)
Penambahan Label :
- Ditulis seperti First Name * atau Email (required).

Atribut ARIA dan HTML5 :

1
2
<label for="email">Email <abbr title="required">*</abbr></label>
<input id="email" required aria-required="true">

Jangan Hanya Mengandalkan Warna : Berikan dukungan baik secara visual maupun terprogram.

🔗 Tautan Referensi (Materi Pedoman UI)

NN/g: Marking Required Fields in Forms (California State University, Northridge, Nielsen Norman Group, Deque)
Deque: Anatomy of Accessible Forms (Deque)
W3C Techniques: H90 Indicating required form controls (W3C)
TPGi: Indicating mandatory fields accessibly (TPGi)
Contensis: UX Forms Guidelines (Contensis)

Jika diperlukan, kami juga dapat memberikan contoh kode HTML/CSS tertentu, templat desain komponen UI untuk Sketch atau Figma, dll. Jangan ragu untuk berkonsultasi dengan kami!