Formulir adalah elemen yang memungkinkan pengguna memasukkan data ke dalam kolom atau grup kolom. Formulir dapat sesederhana satu kolom atau serumit elemen formulir beberapa langkah dengan beberapa kolom per halaman, validasi input, dan terkadang CAPTCHA.
Formulir dianggap sebagai salah satu elemen yang paling sulit untuk dilakukan 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 untuk Anda dan pengguna.
Formulir 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
Kolom adalah tulang punggung formulir. 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 defaultnya adalah menggunakan pola HTML yang sudah ada, bukan membuat sesuatu yang kustom dengan ARIA, karena fitur dan fungsi tertentu—seperti status kolom, properti, dan nilai—secara bawaan terintegrasi ke dalam 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. 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 ke kolom tersebut. Secara lebih umum, atribut pelengkapan otomatis membuat pengisian formulir lebih mudah dan lebih 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 diberi tahu 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, jika kolom diperlukan, dan juga dapat memberikan informasi tentang persyaratan kolom, seperti format input. Label harus selalu terlihat dan menjelaskan kolom formulir kepada pengguna secara akurat.
Salah satu prinsip dasar formulir yang mudah diakses adalah membuat koneksi yang jelas dan akurat antara kolom dan labelnya. Hal ini berlaku secara visual dan 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, perlu dikelompokkan secara terprogram dan visual. Salah satu metodenya adalah menggunakan fieldset dan pola legenda untuk mengelompokkan elemen yang serupa.
Deskripsi
Deskripsi kolom memiliki tujuan yang sama dengan label karena digunakan untuk memberikan lebih banyak konteks ke kolom dan persyaratan. Deskripsi kolom tidak diperlukan untuk aksesibilitas jika label atau petunjuk formulir cukup deskriptif.
Namun, ada situasi saat menambahkan informasi tambahan berguna untuk menghindari error formulir, seperti menyampaikan informasi tentang panjang minimum input untuk kolom sandi atau memberi tahu pengguna format kalender yang akan digunakan (seperti MM-DD-YYYY).
Ada banyak metode yang dapat Anda gunakan untuk menambahkan deskripsi kolom ke
formulir. Salah satu metode terbaik adalah dengan 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 error formulir. Sebelumnya dalam modul ini, kita telah membahas cara menandai kolom dengan jelas, membuat label identifikasi, dan menambahkan deskripsi mendetail jika memungkinkan. Namun, seberapa jelas pun formulir Anda, pada akhirnya, pengguna akan melakukan kesalahan.
Saat pengguna mengalami error formulir, langkah pertamanya adalah memberi tahu error tersebut. Kolom tempat error terjadi harus diidentifikasi dengan jelas, dan error itu sendiri harus dijelaskan kepada pengguna dalam bentuk 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 wilayah live ARIA saat mengumumkan error.
Jika memungkinkan, tawarkan 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 tambahan agar pesan dapat dilihat oleh semua pengguna.
Setelah pengguna merasa semua error telah teratasi, izinkan mereka mengirim ulang formulir dan memberikan masukan tentang hasil pengiriman mereka. Pesan error memberi tahu pengguna bahwa mereka harus melakukan lebih banyak pembaruan, sedangkan pesan berhasil mengonfirmasi bahwa mereka 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:
Memeriksa pemahaman Anda
Uji pengetahuan Anda tentang formulir yang mudah diakses
Manakah dari opsi berikut yang merupakan input formulir yang paling mudah diakses?
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>