Aksesibilitas Form

Markup sudah lengkap dan tervalidasi — pertanyaan terakhir proyek: apakah form ini bisa dijalankan pengguna yang tidak memakai mouse? Bagian penutup meninjau formulir dari sisi aksesibilitas — label, kelompok, urutan fokus, dan pesan galat — lalu menutup proyek dengan uji menyeluruh.

Label untuk Semua Kontrol #

Tidak ada satu pun kontrol yang ditanam tanpa nama. Lima belas kontrol memakai dua mekanisme pengikatan label bergantian:

Kedua mekanisme sama kuatnya — materi chapter Label. Yang dihindari adalah kontrol tanpa ikatan sama sekali: kolom yang bertumpu pada placeholder kehilangan namanya begitu pengguna mengetik, dan pembaca layar hanya mendengar “edit text, kosong” — jebakan yang dibedah chapter Placeholder.

Kelompok yang Diumumkan #

Tiga pasang fieldset dan legend tidak sekadar membagi tampilan. Saat fokus pengguna pembaca layar masuk ke kolom nama, nama kelompok ikut diumumkan — kira-kira “Identitas, Nama lengkap, edit text, kosong” — sehingga pengguna tahu kolom ini bagian dari kelompok mana tanpa melihat bingkai. Perilaku pengumuman ini alasan utama legend wajib menjadi anak pertama fieldset — materi chapter Fieldset dan Legend.

Urutan Fokus Logis #

Uji keyboard paling sederhana: tekan Tab dari judul dan biarkan fokus berjalan sendiri:

1. kolom Nama lengkap,
2. kolom Alamat email,
3. kolom Usia,
4. grup radio frekuensi — di dalam grup, tombol panah yang berpindah antar opsi, bukan Tab,
5. lima checkbox menu favorit,
6. daftar sumber,
7. kolom saran,
8. checkbox persetujuan,
9. tombol Kirim Survei.

Urutan ini persis mengikuti urutan penulisan markup — tidak ada satu atribut pun yang mengaturnya. Form yang ditulis dalam urutan yang logis untuk dibaca otomatis menjadi form yang logis untuk dilalui keyboard; Shift+Tab berjalan mundur, Space menandai checkbox dan memilih radio, Enter pada kolom teks menekan tombol kirim. Materi lengkapnya ada di chapter Keyboard Navigation.

Pesan Galat yang Fokus Sendiri #

Jalankan ulang skenario galat Bagian 4: browser tidak hanya menampilkan pesan — fokus sudah berpindah ke kontrol bermasalah, jadi pengguna keyboard dan pembaca layar langsung tahu letak masalah. Perilaku bawaan Constraint Validation, bukan atribut tambahan dari kita.

Autocomplete dan Catatan Privasi #

Dua sentuhan terakhir berdampak besar bagi pengguna tertentu. autocomplete="name" dan autocomplete="email" memangkas ketikan identitas menjadi satu tawaran isian — pengguna pembaca layar dan pengguna ponsel sama-sama diuntungkan. Catatan privasi kecil di bawah form menjanjikan data tidak dibagikan; transparansi juga bagian dari aksesibilitas, karena responden yang percaya menyelesaikan pengisian yang mereka mulai.

Uji Menyeluruh dan Checklist #

Gabungkan seluruh pemeriksaan proyek menjadi satu putaran terakhir:

1. Buka form, isi seluruh kolom dengan keyboard saja — semua kontrol terjangkau, urutan fokus logis.
2. Kirim kosong, email salah format, usia di bawah 13 — ketiganya ditahan dengan fokus dan pesan bawaan.
3. Hidupkan pembaca layar singkat (NVDA di Windows, VoiceOver di macOS) dan dengarkan label, legend, serta pesan galat — pola uji dari chapter Memeriksa Accessibility HTML.
4. Isi lengkap dengan sah dan kirim — data berangkat ke alamat fiktif example.com, tanda alur penuh berjalan.

Putaran pertama dan kedua di atas bisa dijalankan langsung pada demo berikut — klik di dalam form, tekan Tab berulang, dan biarkan fokus berjalan sesuai urutan markup; di dalam grup radio, ganti Tab dengan tombol panah. Lalu kirim kosong dan rasakan fokus melompat sendiri ke kolom bermasalah:

Proyek selesai: satu berkas 97 baris yang mengumpulkan data dengan sopan — menyebut durasi sebelum bertanya, menolak isian salah dengan pesan dan fokus yang jelas, dan bisa dilalui pengguna dari perangkat apa pun. Pola yang sama menopang form sungguhan: ganti action dengan pemroses milik Anda, perkuat pemeriksaan di sisi server, dan survei siap menerima responden pertamanya.