Formulir yang Anda buat adalah untuk orang-orang. Orang menggunakan perangkat yang berbeda-beda. Beberapa menggunakan mouse, beberapa perangkat sentuh, beberapa keyboard, beberapa perangkat yang dikontrol dengan gerakan mata. Sebagian menggunakan {i>screen reader<i}, beberapa perangkat layar kecil, dan beberapa menggunakan {i>software<i} pembesaran teks. Semua orang ingin menggunakan formulir Anda. Pelajari cara membuat formulir Anda dapat diakses dan digunakan oleh semua orang.
Pastikan pengguna memahami tujuan kolom formulir
Ada banyak kontrol formulir yang dapat Anda pilih.
Apa kesamaan yang mereka miliki?
Setiap kontrol formulir harus memiliki elemen <label> terkait.
Elemen <label> menjelaskan tujuan kontrol formulir.
Teks <label> secara visual terkait dengan kontrol formulir, dan dibacakan oleh pembaca layar.
Selain itu, mengetuk atau mengklik <label> akan memfokuskan kontrol formulir terkait,
sehingga menjadikannya target yang lebih besar.
Menggunakan HTML yang bermakna untuk mengakses fitur browser bawaan
Secara teori, Anda dapat membuat formulir hanya menggunakan elemen <div>.
Anda bahkan dapat membuatnya terlihat seperti <form> native.
Ada masalah apa saat menggunakan
elemen non-semantik?
Elemen formulir bawaan menyediakan banyak fitur bawaan. Mari kita lihat sebuah contoh.
Secara visual, <input> (yang pertama dalam contoh) dan <div> akan terlihat sama.
Anda bahkan dapat menyisipkan teks untuk keduanya, karena <div> memiliki
atribut contenteditable.
Namun, ada banyak perbedaan antara penggunaan elemen <input> yang sesuai dan <div>
yang terlihat seperti <input>.
Pengguna pembaca layar tidak mengenali <div> sebagai elemen input,
dan tidak dapat menyelesaikan formulir.
Semua yang didengar pembaca layar adalah 'Nama',
tanpa indikasi bahwa elemen tersebut merupakan kontrol formulir untuk menambahkan teks.
Mengklik <div>Name</div> tidak akan memfokuskan <div> yang menyertainya, sedangkan <label> dan
<input> terhubung menggunakan atribut for dan id.
Setelah mengirimkan formulir, data yang dimasukkan di <div> tidak disertakan dalam permintaan.
Meskipun melampirkan data dengan JavaScript dapat dilakukan,
<input> secara default melakukannya.
Elemen formulir bawaan memiliki fitur lain.
Misalnya, dengan elemen formulir yang sesuai dan inputmode atau type yang benar,
keyboard di layar akan menampilkan karakter yang sesuai. Penggunaan atribut inputmode pada <div> tidak dapat melakukannya.
Pastikan pengguna mengetahui format data yang diharapkan
Anda dapat menetapkan berbagai aturan validasi untuk kontrol formulir.
Misalnya, satu kolom formulir harus selalu memiliki minimal delapan karakter.
Anda menggunakan atribut minlength, yang menunjukkan aturan validasi ke browser.
Bagaimana Anda dapat memastikan bahwa pengguna juga mengetahui tentang aturan validasi? Katakan kepada mereka.
Tambahkan informasi tentang format yang diharapkan langsung di bawah kontrol formulir.
Untuk memperjelas perangkat pendukung,
gunakan atribut aria-describedby pada kontrol formulir,
dan id pada pesan error dengan nilai yang sama, untuk menghubungkan keduanya.
Membantu pengguna menemukan pesan error untuk kontrol formulir
Dalam modul sebelumnya tentang validasi, Anda telah mempelajari cara menampilkan pesan error jika ada entri data yang tidak valid.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
Misalnya, jika sebuah kolom memiliki atribut required, dan data yang dimasukkan tidak valid, browser akan menampilkan
pesan error di sebelah kontrol formulir saat formulir dikirimkan. Pembaca layar juga mengumumkan pesan error.
Anda juga dapat mendefinisikan pesan error Anda sendiri:
Contoh ini memerlukan lebih banyak perubahan untuk menghubungkan pesan error ke kontrol formulir.
Pendekatan sederhananya adalah menggunakan atribut aria-describedby pada kontrol formulir yang cocok dengan id pada elemen pesan error.
Selanjutnya, gunakan aria-live="assertive" untuk pesan error.
Wilayah live ARIA mengumumkan error kepada pengguna pembaca layar saat error tersebut ditampilkan.
Masalah dengan pendekatan ini untuk formulir dengan beberapa kolom,
adalah aria-live biasanya hanya akan mengumumkan error pertama jika ada beberapa error.
Seperti yang dijelaskan dalam artikel ini tentang beberapa pengumuman aria-live terkait tindakan yang sama, Anda dapat membuat satu pesan dengan menyambungkan semua error. Pendekatan lainnya adalah dengan mengumumkan adanya error, lalu mengumumkan error satu per satu saat kolom difokuskan.
Memastikan pengguna mengenali error
Terkadang, desainer mewarnai status yang tidak valid tersebut menjadi merah,
menggunakan pseudo-class :invalid.
Namun, untuk mengomunikasikan kesalahan atau keberhasilan,
Anda tidak boleh hanya mengandalkan warna.
Bagi orang yang buta warna merah-hijau, batas hijau
dan merah terlihat hampir sama.
Anda tidak dapat melihat apakah pesan terkait dengan error.
Selain memberi warna, gunakan ikon, atau awali pesan error Anda dengan jenis error.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
Membantu pengguna membuka formulir Anda
Anda dapat mengubah urutan visual kontrol formulir dengan CSS. Terputusnya hubungan antara urutan visual dan navigasi keyboard (urutan DOM) bermasalah bagi pembaca layar dan pengguna keyboard.
Pelajari lebih lanjut cara memastikan urutan visual di halaman mengikuti urutan DOM.
Membantu pengguna mengidentifikasi kontrol formulir yang saat ini difokuskan
Gunakan keyboard untuk menjelajahi
formulir ini.
Apakah Anda menyadari bahwa gaya kontrol formulir berubah setelah aktif?
Ini adalah gaya fokus default.
Anda dapat menggantinya dengan
class pseudo CSS :focus.
Gaya apa pun yang Anda gunakan dalam :focus,
selalu pastikan perbedaan visual antara status default dan status fokus dapat dikenali.
Pelajari lebih lanjut cara mendesain indikator fokus.
Memastikan formulir Anda dapat digunakan
Anda dapat mengidentifikasi banyak masalah umum dengan mengisi formulir menggunakan perangkat yang berbeda. Hanya gunakan keyboard, gunakan pembaca layar (seperti NVDA di Windows atau VoiceOver di Mac), atau zoom halaman hingga 200%. Selalu uji formulir Anda di berbagai platform, terutama perangkat atau setelan yang tidak Anda gunakan setiap hari. Apakah Anda mengenal seseorang yang menggunakan {i>screen reader<i}, atau seseorang yang menggunakan perangkat lunak pembesaran teks? Minta mereka untuk mengisi formulir Anda. Peninjauan aksesibilitas sangat bagus, pengujian dengan pengguna sungguhan akan lebih baik.
Pelajari lebih lanjut cara melakukan peninjauan aksesibilitas dan cara melakukan pengujian dengan pengguna sungguhan.