Formulir adalah elemen yang memungkinkan pengguna memberikan data ke dalam satu bidang atau sekelompok bidang. Formulir bisa sesederhana satu kolom atau serumit elemen formulir multi-langkah dengan beberapa kolom per halaman, validasi input, dan terkadang CAPTCHA.
Formulir dianggap sebagai salah satu elemen yang paling sulit untuk dibuat dengan benar dari perspektif aksesibilitas, karena memerlukan pengetahuan tentang semua elemen yang telah kita bahas, serta aturan tambahan khusus untuk formulir. Dengan sedikit pemahaman dan waktu, Anda dapat membuat formulir yang mudah diakses agar sesuai dengan Anda dan pengguna Anda.
Forms adalah modul khusus komponen terakhir dalam kursus ini. Modul ini akan berfokus pada panduan khusus formulir, tetapi semua panduan lain yang Anda pelajari di modul sebelumnya, seperti struktur konten, fokus keyboard, dan kontras warna, juga berlaku untuk elemen formulir.
Kolom
Tulang punggung formulir adalah kolom. Kolom adalah pola interaktif kecil, seperti elemen input atau tombol pilihan, yang memungkinkan pengguna memasukkan konten atau membuat pilihan. Ada berbagai macam kolom formulir yang dapat dipilih.
Rekomendasi default adalah menggunakan pola HTML yang sudah ada, bukan membuat sesuatu yang kustom dengan ARIA, karena fitur dan fungsi tertentu—seperti status, properti, dan nilai kolom—sudah ada di elemen HTML. Kolom kustom mengharuskan Anda menambahkan ARIA secara manual.
Tidak direkomendasikan — HTML Kustom dengan ARIA
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
Direkomendasikan — HTML Standar
<form id="sundae-order-form">
<!-- form content -->
</form>
Selain memilih pola kolom formulir yang paling mudah diakses, jika berlaku, Anda juga harus menambahkan atribut pelengkapan otomatis HTML ke kolom Anda. Menambahkan atribut pelengkapan otomatis memungkinkan definisi atau identifikasi tujuan yang lebih terperinci untuk agen pengguna dan teknologi pendukung (AT).
Atribut pelengkapan otomatis memungkinkan pengguna mempersonalisasi presentasi visual, seperti menampilkan ikon kue ulang tahun di kolom dengan atribut pelengkapan otomatis ulang tahun (bday) yang ditetapkan padanya. Secara umum, atribut pelengkapan otomatis membuat pengisian formulir lebih mudah dan cepat. Hal ini sangat membantu bagi orang dengan gangguan kognitif dan membaca serta mereka yang menggunakan AT, seperti pembaca layar.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
Terakhir, kolom formulir tidak boleh menghasilkan perubahan kontekstual saat menerima fokus atau input pengguna, kecuali jika pengguna telah diperingatkan tentang perilaku tersebut sebelum menggunakan komponen. Misalnya, formulir tidak boleh dikirim secara otomatis saat kolom menerima fokus atau setelah pengguna menambahkan konten ke kolom.
Label
Label memberi tahu pengguna tentang tujuan kolom, apakah kolom wajib diisi, dan juga dapat memberikan informasi tentang persyaratan kolom, seperti format input. Label harus selalu terlihat dan secara akurat menjelaskan kolom formulir kepada pengguna.
Salah satu prinsip dasar formulir yang dapat diakses adalah membuat koneksi yang jelas dan akurat antara kolom dan labelnya. Hal ini berlaku baik secara visual maupun secara terprogram. Tanpa konteks ini, pengguna mungkin tidak memahami cara mengisi kolom dalam formulir.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
Selain itu, kolom formulir terkait, seperti alamat surat, harus dikelompokkan secara terprogram dan visual. Salah satu metodenya adalah dengan menggunakan pola fieldset dan legend untuk mengelompokkan elemen yang serupa.
Deskripsi
Deskripsi kolom serupa dengan label dalam tujuannya karena digunakan untuk memberikan lebih banyak konteks pada kolom dan persyaratan. Deskripsi kolom tidak diperlukan untuk aksesibilitas jika label atau petunjuk formulir cukup deskriptif.
Namun, ada situasi saat penambahan informasi tambahan berguna untuk menghindari kesalahan formulir, seperti menyampaikan informasi tentang panjang minimum input untuk kolom sandi atau memberi tahu pengguna format kalender yang harus digunakan (seperti MM-DD-YYYY).
Ada banyak metode berbeda yang dapat Anda gunakan untuk menambahkan deskripsi kolom ke formulir. Salah satu metode terbaik adalah menambahkan atribut
aria-describedby
ke elemen formulir, selain elemen <label>. Pembaca
layar akan membaca deskripsi dan label.
Jika Anda menambahkan atribut
aria-labelledby
ke elemen, nilai atribut akan menggantikan teks dalam
<label>. Seperti biasa, pastikan untuk menguji kode akhir dengan semua AT yang Anda rencanakan untuk didukung.
Error
Saat membuat formulir yang mudah diakses, ada banyak hal yang dapat Anda lakukan untuk mencegah pengguna melakukan kesalahan formulir. Sebelumnya dalam modul ini, kita membahas cara menandai kolom dengan jelas, membuat label identifikasi, dan menambahkan deskripsi mendetail jika memungkinkan. Namun, sejelas apa pun formulir Anda, pada akhirnya, pengguna akan melakukan kesalahan.
Saat pengguna mengalami error formulir, langkah pertama adalah memberitahukan error tersebut. Kolom tempat terjadinya error harus diidentifikasi dengan jelas, dan error itu sendiri harus dijelaskan kepada pengguna dalam teks.
Ada berbagai metode untuk menampilkan pesan error, seperti:
- Modal, inline di dekat tempat terjadinya error
- Kumpulan error yang dikelompokkan dalam satu pesan yang lebih besar di bagian atas halaman
Pastikan untuk memperhatikan fokus keyboard dan opsi area aktif ARIA saat mengumumkan error.
Jika memungkinkan, berikan saran mendetail kepada pengguna tentang cara memperbaiki error. Ada dua atribut yang tersedia untuk memberi tahu pengguna tentang error.
- Anda dapat menggunakan atribut HTML required. Browser akan memberikan pesan error umum berdasarkan parameter validasi yang diajukan.
- Atau, Anda dapat menggunakan atribut aria-required untuk membagikan pesan error yang disesuaikan ke AT. Hanya AT yang akan menerima pesan, kecuali jika Anda menambahkan kode lain untuk membuat pesan terlihat oleh semua pengguna.
Setelah pengguna merasa semua error telah diselesaikan, izinkan mereka mengirim ulang formulir dan memberikan masukan tentang hasil pengiriman mereka. Pesan error memberi tahu pengguna bahwa ada pembaruan lain yang harus dilakukan, sementara pesan berhasil mengonfirmasi bahwa pengguna telah menyelesaikan semua error dan berhasil mengirimkan formulir.
Kriteria keberhasilan tambahan
WCAG 2.2 memperkenalkan kriteria keberhasilan berikut yang berfokus pada pengalaman formulir yang lebih mudah diakses: