Formulir merupakan salah satu komponen terpenting dalam sebuah website. Hampir setiap aplikasi web memiliki formulir, mulai dari kolom pencarian, halaman masuk (login), formulir pendaftaran, hingga proses pembayaran.

Namun, formulir juga menjadi salah satu bagian yang paling sering menimbulkan hambatan aksesibilitas apabila tidak dirancang dengan baik.

Salah satu kesalahan yang masih sering dijumpai adalah menggunakan placeholder sebagai pengganti label.

Contohnya seperti berikut.

Sekilas tampilannya terlihat bersih dan modern.

Namun ketika pengguna mulai mengetik, teks placeholder akan menghilang sehingga tidak lagi memberikan informasi mengenai kolom yang sedang diisi.

Pada artikel ini kita akan mempelajari bagaimana membangun struktur formulir yang mudah dipahami, mudah dioperasikan, dan ramah bagi pengguna keyboard maupun screen reader.

Mengapa Placeholder Tidak Boleh Menggantikan Label?

Placeholder hanya berfungsi sebagai petunjuk tambahan (hint), bukan sebagai nama sebuah kolom.

Ketika pengguna mulai mengetik, placeholder akan menghilang.

Akibatnya pengguna dapat lupa informasi apa yang sedang diminta.

Hal ini terutama dapat menyulitkan:

1. pengguna dengan gangguan kognitif;
2. pengguna dengan gangguan memori jangka pendek;
3. pengguna yang sedang mengisi formulir panjang;
4. pengguna screen reader tertentu yang lebih mengandalkan label dibanding placeholder.

Selain itu, warna placeholder sering dibuat lebih redup daripada teks biasa sehingga kurang mudah dibaca.

Karena itu, placeholder sebaiknya hanya digunakan sebagai contoh format pengisian, bukan sebagai pengganti label.

Aturan 1: Selalu Gunakan <label>

Setiap elemen formulir sebaiknya memiliki label yang jelas.

Label dihubungkan dengan elemen formulir menggunakan atribut for yang mengacu pada id elemen tersebut.

Contohnya:

Perhatikan bahwa placeholder tetap digunakan, tetapi hanya sebagai contoh pengisian.

Mengapa Label Sangat Penting?

Menghubungkan <label> dengan <input> memberikan beberapa keuntungan.

1. Memperbesar Area Klik

Pengguna tidak harus mengklik tepat pada kotak input.

Mereka cukup mengklik teks label.

Browser akan otomatis memindahkan fokus ke kolom yang sesuai.

Hal ini sangat membantu bagi:

1. pengguna layar sentuh;
2. pengguna dengan gangguan motorik;
3. pengguna yang kesulitan melakukan klik secara presisi.

2. Membantu Screen Reader

Ketika pengguna berpindah menggunakan tombol Tab, screen reader akan membacakan nama kolom secara otomatis.

Sebagai contoh:

"Nama Lengkap, edit teks."

Tanpa label yang benar, screen reader mungkin hanya mengumumkan bahwa pengguna sedang berada pada sebuah kolom teks tanpa memberikan konteks yang memadai.

Aturan 2: Gunakan <fieldset> dan <legend> untuk Pilihan yang Berkaitan

Beberapa kontrol formulir terdiri atas beberapa pilihan yang masih berada dalam satu kelompok.

Contohnya:

1. metode pembayaran;
2. jenis kelamin;
3. tingkat pendidikan;
4. pilihan pengiriman.

Untuk kondisi seperti ini, gunakan <fieldset> sebagai pembungkus kelompok, kemudian gunakan <legend> sebagai judul kelompok tersebut.

Dengan struktur tersebut, screen reader akan mengetahui bahwa seluruh pilihan berada dalam satu kelompok pertanyaan.

Kapan Menggunakan <fieldset>?

Gunakan <fieldset> apabila beberapa kontrol merupakan jawaban dari satu pertanyaan yang sama.

Contohnya:

1. radio button;
2. beberapa checkbox yang saling berkaitan;
3. kelompok informasi tertentu.

Sebaliknya, tidak perlu menggunakan <fieldset> untuk setiap kolom formulir yang berdiri sendiri, misalnya kolom:

1. Nama
2. Email
3. Nomor Telepon

Kolom-kolom tersebut cukup menggunakan <label>.

Tambahkan Petunjuk dan Pesan Kesalahan

Sering kali sebuah kolom membutuhkan penjelasan tambahan.

Misalnya format kata sandi.

Gunakan teks bantuan yang dihubungkan dengan aria-describedby.

Ketika fokus berpindah ke kolom tersebut, screen reader dapat membacakan petunjuk tersebut sehingga pengguna memperoleh informasi yang diperlukan sebelum mengisi formulir.

Gunakan Tipe Input yang Tepat

HTML telah menyediakan berbagai jenis input.

Gunakan sesuai kebutuhan.

Dengan menggunakan tipe yang tepat:

1. browser dapat melakukan validasi dasar;
2. keyboard pada perangkat seluler menjadi lebih sesuai;
3. pengalaman pengguna menjadi lebih baik.

Kesalahan yang Sering Terjadi

Praktik Cepat: Audit Formulir Anda

Coba buka salah satu formulir pada website yang sedang Anda kembangkan.

Kemudian lakukan pemeriksaan berikut.

1. Apakah setiap kolom memiliki elemen <label>?
2. Apakah atribut for pada label sesuai dengan id pada input?
3. Apakah placeholder hanya digunakan sebagai contoh pengisian?
4. Apakah kelompok radio button atau checkbox menggunakan <fieldset> dan <legend>?
5. Apakah tipe input sudah sesuai dengan jenis data yang diminta?

Terakhir, lakukan pengujian sederhana.

Klik pada teks label, bukan pada kotak input.

Apabila fokus langsung berpindah ke kolom yang sesuai, berarti hubungan antara <label> dan <input> telah dibuat dengan benar.

Formulir yang aksesibel dimulai dari struktur HTML yang benar. Setiap kolom harus memiliki label yang jelas, placeholder hanya digunakan sebagai petunjuk tambahan, dan kelompok pilihan yang berkaitan sebaiknya dibungkus menggunakan <fieldset> serta <legend>.

Dengan menerapkan struktur formulir yang tepat, Anda tidak hanya memenuhi prinsip-prinsip WCAG, tetapi juga membantu seluruh pengguna—baik yang menggunakan keyboard, screen reader, perangkat seluler, maupun pengguna non disabilitas—mengisi formulir dengan lebih cepat, mudah, dan minim kesalahan.