Accessible Form Design

Seluruh peralatan dari section ini — input ber-styling, tombol bervarian, status validasi, hingga kontrol kustom — bermuara pada satu tujuan: form yang bisa dipakai siapa pun, termasuk pengguna screen reader, pengguna keyboard, dan pengguna perangkat sentuh. Styling yang menawan tidak menolong bila pengguna tidak tahu field itu menanyakan apa, tidak menerima penjelasan atas galatnya, atau berulang kali salah menekan tombol yang terlalu kecil. Pada Chapter ini kita merakit form kecil yang benar: label eksplisit, pengelompokan semantik, hint yang terhubung, dan target sentuh yang memadai.

Label Eksplisit, Bukan Sekadar Placeholder #

Dasar form yang accessible adalah pasangan label dan kontrol melalui atribut for pada label yang sama nilainya dengan id input. Dengan pasangan ini, klik pada teks label memfokuskan input, dan screen reader membacakan nama field saat pengguna tiba di sana. Placeholder tidak dapat menggantikan tugas ini: teksnya menghilang begitu pengguna mulai mengetik, kontrasnya sering rendah, dan tidak semua screen reader membacakannya sebagai nama field. Placeholder boleh dipakai — tetapi sebagai contoh format, bukan sebagai satu-satunya penanda field:

.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.field input {
  font: inherit;
  padding: 10px 12px;
  border: 2px solid rgb(203, 213, 225);
  border-radius: 8px;
  width: 100%;
  max-width: 320px;
}

display: block pada label memindahkan teks label ke baris tersendiri di atas input, sehingga hubungan label–field terbaca dari atas ke bawah. Untuk kelompok kontrol yang satu maksud — misalnya rangkaian radio — bungkus dengan <fieldset> dan beri judul lewat <legend>; keduanya membentuk konteks yang dibacakan screen reader untuk setiap anggota grupnya.

Hint dan Error dengan aria-describedby #

Penjelasan tambahan — hint format atau pesan galat — perlu terhubung ke input agar screen reader menyampaikannya pada konteks yang tepat. Hubungkan lewat atribut aria-describedby yang berisi id paragraf penjelas:

<label for="email">Email</label>
<p class="hint" id="hint-email">Kami mengirim tautan verifikasi ke email ini.</p>
<input id="email" type="email" aria-describedby="hint-email" autocomplete="email">

Atribut tersebut dapat menampung beberapa id sekaligus — saat form disubmit dan galat muncul, cukup tambahkan id pesan galat ke daftar: aria-describedby="hint-email galat-email". Pola ini menjaga hint dan galat tetap milik field-nya, bukan teks lepas yang berdiri sendiri. Sebagai pasangan kebiasaan, isi autocomplete dengan token standar seperti email atau name agar browser dapat mengisi otomatis dengan benar.

Hasil di Browser:

Form menampilkan dua field berlabel eksplisit dengan hint di bawah
label; tombol submit ber-tinggi minimum 44px; label distyle
display "block" dan input memakai padding atas 10px.

Tiga nilai itu diprobe otomatis pada demo: min-height tombol submit, display label, dan padding-top input.

Target Sentuh dan Checklist Akhir #

Tombol submit pada demo membawa min-height: 44px — ambang yang sejak Chapter Styling Buttons kita pakai sebagai batas bawah target sentuh. Prinsipnya berlaku untuk semua elemen yang dapat disentuh: checkbox kustom 20px pun sebaiknya ditemani label yang ikut menjadi area klik. Rangkuman pemeriksaan sebelum form dikirim ke produksi:

Form yang lolos daftar periksa ini menutup section Tables dan Forms: kontrol tetap milik HTML, CSS mengurus tampilan setiap keadaannya, dan kebutuhan semua pengguna sudah terakomodasi sejak struktur pertama.