Formulir

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?

<label>Email address: <input type="email" required autocomplete="email"></label>
<label>Email address: <input type="email" required></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>
Email address: <input type="email" required>