Formulir

Formulir adalah elemen yang memungkinkan pengguna memberikan data ke dalam satu kolom atau sekelompok kolom. Formulir dapat 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 langsung dilihat dari sudut pandang aksesibilitas, karena memerlukan pengetahuan tentang semua elemen yang telah kita bahas, serta aturan tambahan khusus untuk formulir. Dengan sedikit pengertian dan waktu, Anda dapat membuat formulir yang mudah diakses yang cocok bagi 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 telah Anda pelajari di modul sebelumnya, seperti struktur konten, fokus keyboard, dan kontras warna, juga berlaku untuk elemen bentuk.

Kolom

Inti dari formulir adalah {i>field<i}. Kolom adalah pola interaktif kecil, seperti elemen tombol pilihan atau input, yang memungkinkan pengguna memasukkan konten atau membuat pilihan. Ada berbagai kolom formulir yang dapat dipilih.

Rekomendasi default-nya adalah menggunakan pola HTML yang sudah ditetapkan, bukan membangun sesuatu khusus dengan ARIA, karena fitur dan fungsi tertentu—seperti status kolom, properti, dan nilai—pada dasarnya dibangun ke dalam elemen HTML, sementara Anda harus menambahkan ARIA khusus secara manual.

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

<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. Penambahan atribut pelengkapan otomatis memungkinkan definisi atau identifikasi tujuan yang lebih mendetail untuk agen pengguna dan teknologi pendukung (AT).

Atribut Autocomplete memungkinkan pengguna mempersonalisasi presentasi visual, seperti menampilkan ikon kue ulang tahun di kolom dengan atribut pelengkapan otomatis ulang tahun (bday) yang ditetapkan padanya. Secara lebih umum, atribut pelengkapan otomatis membuat pengisian formulir lebih mudah dan lebih cepat. Hal ini sangat membantu bagi orang yang memiliki 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 diperingatkan tentang perilaku sebelum menggunakan komponen. Misalnya, formulir tidak boleh dikirim secara otomatis saat kolom menerima fokus atau setelah pengguna menambahkan konten ke kolom tersebut.

Label

Label memberi tahu pengguna tentang tujuan suatu kolom, jika kolom tersebut diperlukan, dan juga dapat memberikan informasi tentang persyaratan kolom, seperti format input. Label harus selalu terlihat dan mendeskripsikan kolom formulir secara akurat kepada pengguna.

Salah satu prinsip dasar formulir yang dapat diakses adalah membangun hubungan yang jelas dan akurat antara kolom dan labelnya. Hal ini berlaku baik secara visual maupun 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 menggunakan fieldset/pola legenda untuk mengelompokkan elemen yang serupa.

Deskripsi

Deskripsi kolom mirip dengan label yang 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 ketika menambahkan informasi tambahan berguna untuk menghindari error formulir, seperti menyampaikan informasi tentang panjang input minimum untuk kolom sandi atau memberi tahu pengguna format kalender mana yang akan 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-describeby 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 akan Anda dukung.

Error

Saat membuat formulir yang dapat diakses, ada banyak hal yang dapat Anda lakukan untuk mencegah pengguna membuat error formulir. Sebelumnya dalam modul ini, kita membahas markup kolom yang jelas, membuat label identifikasi, dan menambahkan deskripsi mendetail jika memungkinkan. Namun, tidak peduli seberapa jelas menurut Anda formulir Anda, pada akhirnya, pengguna akan membuat kesalahan.

Jika pengguna menemukan error formulir, langkah pertama adalah mengetahui error tersebut. Kolom tempat error terjadi harus diidentifikasi dengan jelas, dan error itu sendiri harus dijelaskan kepada pengguna dalam teks.

Ada berbagai metode untuk menampilkan pesan error, seperti:

• Modal pop-up, yang terletak 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.

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 diselesaikan, izinkan mereka untuk mengirim ulang formulir dan memberikan masukan tentang hasil pengiriman mereka. Pesan error memberi tahu pengguna bahwa mereka memiliki lebih banyak update untuk dilakukan, sementara pesan sukses mengonfirmasi bahwa mereka telah mengatasi semua error dan berhasil mengirimkan formulir.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang formulir yang dapat diakses