Formulir yang Anda buat ditujukan untuk orang. Orang menggunakan perangkat yang berbeda. Ada yang menggunakan {i>mouse<i}, beberapa perangkat sentuh, beberapa menggunakan {i>keyboard<i}, beberapa perangkat yang dikontrol oleh gerakan mata. Sebagian menggunakan pembaca layar, sebagian lagi berukuran kecil, dan sebagian lagi menggunakan software pembesaran teks. Semua orang ingin menggunakan formulir Anda. Pelajari cara membuat formulir dapat diakses dan digunakan oleh semua orang.
Memastikan 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 dikaitkan dengan kontrol formulir, dan dibaca oleh pembaca layar.
Selain itu, mengetuk atau mengklik <label> akan memfokuskan kontrol formulir terkait,
menjadikannya target yang lebih besar.
Gunakan 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.
Apa masalahnya
dengan menggunakan
non-semantik?
Elemen formulir bawaan menyediakan banyak fitur bawaan. Mari kita lihat sebuah contoh.
Secara visual, <input> (yang pertama dalam contoh) dan <div> terlihat sama.
Anda bahkan dapat menyisipkan teks untuk keduanya, karena <div> memiliki
Atribut contenteditable.
Namun, ada banyak perbedaan antara menggunakan elemen <input> yang sesuai dan <div>
yang terlihat seperti <input>.
Pengguna pembaca layar tidak mengenali <div> sebagai elemen input,
dan tidak dapat mengisi formulir.
Semua yang didengar pengguna
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 ke dalam <div> tidak disertakan dalam permintaan.
Meskipun melampirkan data dengan JavaScript dapat dilakukan,
<input> melakukannya secara default.
Elemen formulir bawaan memiliki fitur lainnya.
Misalnya, dengan elemen formulir yang sesuai dan inputmode atau type yang benar,
{i>keyboard<i} di layar menampilkan
karakter yang sesuai. Menggunakan atribut inputmode pada <div>
tidak bisa melakukan itu.
Memastikan pengguna mengetahui format data yang diharapkan
Anda dapat menentukan berbagai aturan validasi untuk kontrol formulir.
Misalnya, kolom formulir harus selalu memiliki minimal delapan karakter.
Anda menggunakan atribut minlength, yang menunjukkan aturan validasi ke browser.
Bagaimana cara memastikan pengguna juga mengetahui tentang aturan validasi? Beri tahu mereka.
Tambahkan informasi tentang format yang diharapkan langsung di bawah kontrol formulir.
Untuk menjelaskan tentang
perangkat bantuan,
menggunakan 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
Di modul sebelumnya tentang validasi, Anda belajar cara menampilkan pesan {i>error<i} jika terjadi 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 tidak valid dimasukkan, browser akan menampilkan
pesan error di samping kontrol formulir saat formulir dikirimkan. Pembaca layar juga mengumumkan pesan error.
Anda juga dapat menentukan pesan error Anda sendiri:
Contoh ini memerlukan perubahan lainnya untuk menghubungkan pesan error ke kontrol formulir.
Pendekatan sederhananya adalah menggunakan aria-describedby
pada kontrol formulir yang cocok dengan id pada elemen pesan error.
Lalu, gunakan aria-live="assertive" untuk pesan error.
Wilayah live ARIA mengumumkan error kepada pengguna pembaca layar saat error ditampilkan.
Masalah dengan pendekatan ini untuk formulir dengan banyak {i>field<i},
adalah bahwa aria-live biasanya hanya akan mengumumkan error pertama jika ada beberapa error.
Seperti yang dijelaskan dalam artikel ini tentang beberapa pengumuman aria-live tentang tindakan yang sama, Anda dapat membuat satu pesan dengan menggabungkan semua error. Pendekatan lain adalah mengumumkan bahwa ada {i>error<i}, kemudian mengumumkan setiap kesalahan ketika {i>field <i}itu difokuskan.
Memastikan pengguna mengenali error
Terkadang desainer mewarnai
keadaan yang tidak valid menjadi merah,
menggunakan class semu :invalid.
Namun, untuk mengkomunikasikan
{i>error<i} atau keberhasilan,
Anda tidak boleh hanya
mengandalkan warna.
Untuk orang dengan kebutaan
warna merah-hijau,
batas hijau dan merah terlihat
hampir sama.
Tidak mungkin untuk melihat apakah pesan tersebut terkait dengan error.
Selain warna, gunakan ikon, atau beri awalan pada pesan error Anda dengan jenis error.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
Membantu pengguna menjelajahi formulir Anda
Anda dapat mengubah urutan visual kontrol formulir dengan CSS. Tidak adanya hubungan antara urutan visual dan navigasi keyboard (urutan DOM) bermasalah bagi pengguna pembaca layar dan {i>keyboard<i}.
Pelajari lebih lanjut cara memastikan urutan visual di halaman mengikuti urutan DOM.
Membantu pengguna mengidentifikasi kontrol formulir yang saat ini difokuskan
Gunakan keyboard untuk menavigasi
formulir ini.
Apakah Anda menyadari bahwa gaya visual kontrol formulir berubah setelah aktif?
Ini adalah gaya fokus default.
Anda dapat menggantinya dengan
:focus Class semu CSS.
Gaya apa pun yang Anda gunakan di dalam :focus,
selalu pastikan perbedaan visual antara status default dan status fokus dapat dikenali.
Pelajari selengkapnya tentang mendesain indikator fokus.
Pastikan formulir Anda dapat digunakan
Anda dapat mengidentifikasi banyak masalah umum dengan mengisi formulir menggunakan berbagai perangkat. Gunakan keyboard saja, gunakan pembaca layar (seperti NVDA di Windows atau VoiceOver di Mac), atau memperbesar halaman hingga 200%. Selalu uji formulir Anda pada berbagai platform, terutama perangkat atau pengaturan yang tidak Anda gunakan setiap hari. Apakah Anda mengenal seseorang yang menggunakan pembaca layar, atau seseorang yang menggunakan perangkat lunak pembesaran teks? Minta mereka untuk mengisi formulir Anda. Ulasan aksesibilitas sangat bagus, karena menguji dengan pengguna sungguhan akan lebih baik.
Pelajari lebih lanjut cara melakukan peninjauan aksesibilitas dan cara menguji dengan pengguna sungguhan.