Formulir adalah elemen yang memungkinkan pengguna memberikan data ke kolom atau grup {i>field<i} tersebut. Formulir dapat sesederhana satu kolom atau serumit kolom elemen formulir multi-langkah dengan beberapa {i>field <i}per halaman, validasi {i>input<i}, dan terkadang CAPTCHA.
Formulir dianggap sebagai salah satu elemen yang paling sulit untuk diperoleh langsung dari aksesibilitas, karena mereka membutuhkan pengetahuan tentang semua elemen yang kita serta aturan tambahan khusus untuk formulir. Dengan beberapa pemahaman dan waktu, Anda dapat membuat formulir yang dapat diakses yang sesuai dengan kebutuhan Anda dan pelanggan.
Formulir adalah modul khusus komponen terakhir dalam kursus ini. Modul ini akan fokus pada pedoman khusus formulir, tetapi semua panduan lain yang Anda pelajari di modul sebelumnya, seperti struktur konten, fokus keyboard, dan kontras warna, juga berlaku untuk bentuk yang kurang penting.
Kolom
Fondasi utama formulir adalah {i>field<i}. {i>Field<i} adalah pola interaktif kecil, seperti elemen input atau tombol pilihan, yang memungkinkan pengguna untuk memasukkan konten atau membuat pilihan. Ada beragam bidang formulir yang dipilih.
Saran defaultnya adalah menggunakan pola HTML yang sudah ada, bukan membuat sesuatu yang khusus dengan ARIA, sebagai fitur dan fungsi—seperti status kolom, properti, dan nilai—secara inheren yang dibuat ke dalam elemen HTML, sementara Anda harus menambahkan ARIA khusus secara manual.
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
Selain memilih pola bidang formulir yang paling mudah diakses, di mana berlaku, Anda juga harus menambahkan Atribut pelengkapan otomatis HTML ke {i>field<i} Anda. Menambahkan atribut pelengkapan otomatis memungkinkan definisi atau identifikasi tujuan bagi agen pengguna dan teknologi pendukung (AT).
Atribut pelengkapan otomatis memungkinkan
pengguna menyesuaikan presentasi visual,
seperti menampilkan ikon kue ulang tahun di kolom dengan pelengkapan otomatis ulang tahun
(bday) yang ditetapkan padanya. Secara lebih umum, atribut pelengkapan otomatis membuat
mengisi formulir dengan
lebih mudah dan lebih cepat. Hal ini sangat
membantu bagi orang-orang
dengan gangguan kognitif dan membaca serta mereka yang menggunakan AT, seperti layar
pembaca.
<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 pengguna telah diperingatkan tentang perilaku tersebut sebelum menggunakan komponennya. Misalnya, formulir tidak boleh terkirim secara otomatis saat kolom menerima fokus atau setelah pengguna menambahkan konten ke kolom.
Label
Label memberi tahu pengguna tentang tujuan kolom, jika kolom itu wajib diisi, dan juga dapat memberikan informasi tentang persyaratan kolom, seperti input format font. Label harus selalu terlihat dan menjelaskan formulir secara akurat {i>field <i}untuk pengguna.
Salah satu prinsip dasar dari bentuk-bentuk yang aksesibel adalah membangun landasan yang jelas dan koneksi yang akurat antara kolom dan labelnya. Hal ini juga berlaku secara visual dan terprogram. Tanpa konteks ini, pengguna mungkin tidak mengerti bagaimana cara isi kolom yang tersedia di 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 secara terprogram dan visual. Salah satu metode adalah dengan menggunakan {i>fieldset<i}/legend pola untuk mengelompokkan elemen yang serupa.
Deskripsi
Deskripsi {i>field<i} mirip dengan label yang digunakan untuk memberikan lebih banyak konteks pada bidang dan persyaratan. Deskripsi {i>field<i} tidak diperlukan untuk aksesibilitas jika label atau petunjuk formulir bersifat deskriptif sudah cukup.
Namun, ada situasi ketika menambahkan informasi tambahan akan bermanfaat untuk menghindari error formulir, seperti menyampaikan informasi tentang panjang minimum untuk bidang sandi atau memberi tahu pengguna format kalender mana yang akan digunakan (seperti sebagai MM-DD-YYYY).
Ada banyak metode yang bisa Anda gunakan
untuk menambahkan deskripsi {i>field <i}ke
formulir. Salah satu metode terbaik adalah dengan menambahkan
diuraikan oleh aria
ke elemen formulir, selain elemen <label>. Layar
pembaca akan membaca deskripsi dan label.
Jika Anda menambahkan
dilabeli oleh aria
ke elemen, nilai atribut menggantikan teks dalam
<label>. Seperti biasa, pastikan untuk menguji
kode akhir dengan semua AT yang Anda
yang rencananya akan Anda dukung.
Error
Saat membuat formulir yang mudah diakses, ada banyak hal yang dapat Anda lakukan untuk mencegah pengguna membuat kesalahan formulir. Di awal modul ini, kita telah membahas markup yang jelas kolom, membuat label pengidentifikasi, dan menambahkan deskripsi mendetail setiap kali sebaik mungkin. Namun, tidak peduli seberapa jelas formulir Anda, akhirnya, pengguna akan membuat kesalahan.
Saat pengguna mengalami error formulir, langkah pertama adalah jelaskan error tersebut. Bidang tempat kesalahan terjadi harus diidentifikasi dengan jelas, dan kesalahan harus dijelaskan kepada pengguna dalam bentuk teks.
Ada berbagai metode untuk menampilkan kesalahan email, seperti:
- Modal pop-up, sebaris di dekat tempat error terjadi
- Kumpulan error yang dikelompokkan dalam satu pesan yang lebih besar di bagian atas halaman
Pastikan Anda memperhatikan fokus keyboard dan opsi live region ARIA saat mengumumkan error.
Bila memungkinkan, tawarkan saran terperinci kepada pengguna tentang cara memperbaiki {i>error<i}. Ada dua atribut yang tersedia untuk memberi tahu pengguna tentang error.
- Anda dapat menggunakan atribut HTML wajib. 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 berpikir semua kesalahan telah diselesaikan, izinkan mereka mengirim ulang formulir dan memberikan {i>feedback<i} tentang hasil pengiriman mereka. Sebuah {i>error<i} pesan memberi tahu pengguna bahwa mereka memiliki lebih banyak pembaruan untuk dilakukan, sedangkan pesan sukses mengonfirmasi bahwa mereka telah mengatasi semua error dan berhasil mengirimkan formulir.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang formulir yang dapat diakses
Manakah dari jawaban di bawah ini 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>