Merancang Formulir yang Dapat Diakses: Perbaikan Kecil, Dampak Besar

Bentuk yang dapat diakses adalah bagian penting dari desain inklusif.

Mereka membantu memastikan bahwa setiap orang, apakah menggunakan keyboard, pembaca layar, input suara, atau perangkat bantuan, dapat menyelesaikan tugas yang sama dengan pengguna lain.

Tetapi terlalu sering, formulir dirancang tanpa mempertimbangkan bagaimana pengguna dari semua kemampuan akan mengalaminya. Hasilnya? Frustrasi, kesalahan, dan bahkan pengabaian.

Berita baiknya adalah bahwa meningkatkan aksesibilitas formulir tidak memerlukan desain ulang yang lengkap. Faktanya, penyesuaian kecil dapat membuat perbedaan besar.

Dalam posting ini, kami akan mengeksplorasi cara-cara praktis untuk membuat formulir Anda lebih mudah diakses, mudah digunakan, dan ramah pengguna untuk semua orang.

“1 dalam 4 formulir tidak ada label deskriptif untuk penyandang disabilitas” – – Audioeye

Mengapa formulir yang dapat diakses penting

Aksesibilitas web bukan hanya persyaratan hukum di banyak negara; Ini juga tentang menciptakan pengalaman pengguna yang lebih baik untuk semua. Formulir yang Dapat Diakses Bantuan:

• Orang dengan gangguan visual atau penglihatan rendah menavigasi situs Anda menggunakan pembaca layar
• Pengguna dengan disabilitas motor mengisi bidang menggunakan perangkat input alternatif
• Orang dengan gangguan kognitif memahami label, instruksi, dan kesalahan
• Orang lain, karena bentuk yang dapat diakses cenderung lebih jelas, lebih mudah, dan lebih cepat untuk semua pengguna

Ketika formulir Anda dapat diakses, Anda memperluas audiens, meningkatkan konversi, dan membangun kepercayaan pada merek Anda. Dan karena formulir sering kali di mana perjalanan pengguna berakhir (checkout, pendaftaran, atau kontak), membuat pengalaman ini inklusif sangat penting.

1. Mulailah dengan HTML semantik

Fondasi yang kuat membuat aksesibilitas bentuk menjadi lebih mudah. Selalu gunakan struktur yang tepat saat merancang formulir Anda.

Pastikan setiap bidang memiliki label yang jelas dan terlihat, dan hindari menggunakan teks placeholder saja untuk menggambarkan suatu bidang.

Placeholder menghilang ketika pengguna mulai mengetik, yang dapat menyebabkan kebingungan. Dan pembaca layar mungkin tidak selalu menafsirkannya sebagai instruksi yang bermanfaat.

2. Label bidang dengan jelas

Salah satu perbaikan paling sederhana tetapi paling penting adalah menambahkan label yang tepat. Setiap bidang bentuk harus memiliki label yang jelas dan terlihat yang menjelaskan apa yang harus dimasukkan pengguna.

Associate Label dengan input (Contoh: Label untuk = “Field-ID”), atau dengan bersarang input di dalam label.

Ini memastikan bahwa pengguna semua perangkat dan pembaca layar tahu persis apa yang diminta setiap bidang.

3. Berikan instruksi yang bermanfaat

Terkadang bidang membutuhkan konteks ekstra, seperti memformat petunjuk, contoh teks, atau panduan tentang persyaratan kata sandi. Berikan instruksi ini di dekat lapangan, baik di atas atau di bawahnya.

Hindari bahasa yang tidak jelas atau terlalu teknis. Misalnya, alih -alih “input tidak valid,” katakan “Kata sandi Anda harus setidaknya 8 karakter dan sertakan angka.” Semakin jelas instruksi, semakin kecil kemungkinan pengguna macet.

Jika instruksi sangat penting, pastikan mereka diumumkan oleh pembaca layar menggunakan yang tepat Aria Atribut (Aplikasi Internet Kaya yang Dapat Diakses) seperti ARIA-dijelaskan oleh ARIA.

4. Membuat kesalahan menjadi jelas dan bermanfaat

Penanganan kesalahan adalah salah satu titik paling umum di mana aksesibilitas rusak dalam bentuk.

Inilah cara membuat kesalahan lebih mudah diakses:

• Tampilkan pesan kesalahan di dekat bidang bermasalah, tidak hanya di bagian atas formulir.
• Gunakan bahasa yang jelas yang menjelaskan apa yang salah dan bagaimana memperbaikinya.
• Gunakan kombinasi isyarat visual (warna, ikon, teks tebal) dan teks, bukan warna saja, untuk menunjukkan kesalahan. Ini membantu pengguna yang buta warna.
• Pastikan pesan kesalahan secara terprogram terkait dengan bidang (sekali lagi, menggunakan ARIA-dideskripsikan oleh jika perlu), jadi pembaca layar mengumumkannya dengan benar.

Jika pengguna tidak tahu mengapa pengiriman mereka gagal, mereka kemungkinan akan menyerah. Penanganan kesalahan yang dapat diakses membuat mereka bergerak maju.

5. Pastikan kontras warna yang cukup

Kontras warna mempengaruhi keterbacaan bagi pengguna dengan penglihatan rendah, kebutaan warna, atau kondisi pencahayaan yang buruk. WCAG (Pedoman Aksesibilitas Konten Web) merekomendasikan rasio kontras minimal 4,5: 1 untuk teks normal dan 3: 1 untuk teks besar.

Ini berlaku untuk:

• Label Lapangan
• Teks placeholder (jika digunakan)
• Pesan kesalahan
• Status fokus (seperti perbatasan atau sorotan di sekitar bidang aktif)
• Bidang dan tombol yang dinonaktifkan

Periksa kontras menggunakan alat seperti WEBAIM CONTRON CHECKER. Perbaikan kecil di sini dapat membuat perbedaan besar dalam keterbacaan.

6. Dukung navigasi keyboard

Banyak pengguna menavigasi formulir hanya menggunakan keyboard.

Formulir Anda harus sepenuhnya mendukung perilaku ini:

• Semua bidang dan tombol harus dapat dijangkau melalui kunci tab.
• Urutan tab harus mengikuti urutan logis: kiri ke kanan, atas ke bawah.
• Elemen interaktif seperti tombol radio, kotak centang, dan select harus dapat dioperasikan dengan kontrol keyboard (spacebar, tombol panah).
• Lewati bidang tersembunyi atau elemen dekoratif dalam urutan tab menggunakan tabIndex = ”-1 ″.

Uji formulir Anda dengan menavigasinya tanpa mouse. Jika Anda terjebak atau bingung, begitu juga pengguna Anda.

7. Berikan status fokus yang jelas

Indikator fokus visual yang kuat membantu pengguna keyboard tahu di mana mereka berada dalam bentuk. Secara default, browser menyediakan a Garis besar fokus (sering cincin biru).

Jangan nonaktifkan garis besar ini kecuali Anda menggantinya dengan alternatif khusus, sangat terlihat.

Gaya fokus yang konsisten tidak hanya meningkatkan aksesibilitas, mereka juga membantu pengguna tetap berorientasi dan bergerak melalui formulir lebih efisien.

8. Bidang Terkait Grup

Ketika formulir Anda berisi bidang terkait, seperti detail pembayaran atau alamat pengiriman, mengelompokkannya dengan judul atau bidang yang jelas.

• Gunakan “Fieldset” dan “Legenda” untuk pengelompokan semantik. Ini membantu pembaca layar mengumumkan tujuan grup.
• Bidang terkait grup secara visual dengan jarak atau perbatasan untuk memperkuat struktur bagi pengguna yang terlihat. Pengelompokan yang jelas meningkatkan pemahaman dan mengurangi beban kognitif, membuatnya lebih mudah bagi pengguna untuk memproses bentuk yang kompleks.

9. Berhati -hatilah dengan timeout

Jika formulir Anda berkali -kali (seperti untuk alasan keamanan), beri pengguna peringatan yang jelas dan cara mudah untuk memperpanjang sesi.

Penyandang disabilitas mungkin membutuhkan lebih banyak waktu untuk mengisi formulir, dan batas waktu yang tidak terduga bisa membuat frustrasi.

Gunakan modal atau lansiran yang dapat diakses untuk memberi tahu pengguna sebelum waktu habis terjadi, dan pastikan pesan -pesan ini diumumkan dengan benar oleh pembaca layar.

10. Gunakan alternatif captcha yang dapat diakses

Captchas sering menghadirkan hambatan aksesibilitas yang serius. Captcha berbasis gambar tidak dapat dibaca oleh pembaca layar, dan bahkan captcha audio bisa sulit bagi banyak pengguna.

Jika Anda harus menggunakan captcha, pilih alternatif yang dapat diakses, seperti pertanyaan matematika sederhana, bidang honeypot, atau Google RECAPTCHA V3 (yang bekerja secara tidak terlihat di latar belakang).

Uji pengalaman dengan cermat untuk memastikan bahwa semua pengguna dapat mengisi formulir Anda dengan sukses.

11. Tes dengan pengguna nyata dan alat bantu

Tidak ada daftar periksa yang menggantikan pengujian dunia nyata. Gunakan pembaca layar (seperti Nvda atau MULUT) untuk mengalami formulir Anda seperti yang dilakukan oleh pengguna dengan gangguan penglihatan.

Juga, uji dengan:

• Navigasi keyboard saja
• Teks yang diperbesar (hingga 200%)
• Mode kontras tinggi
• Pembaca Layar Seluler (Talkback atau Voiceover untuk iOS)

Kapan pun memungkinkan, merekrut pengguna penyandang cacat untuk menguji formulir Anda dan memberikan umpan balik. Anda akan belajar lebih banyak dari tes dunia nyata daripada dari audit otomatis saja.

Kesimpulan

Label yang jelas, kesalahan bermanfaat, kontras yang baik, dukungan keyboard, ini adalah perubahan yang menguntungkan setiap pengguna, bukan hanya mereka yang cacat.

Saat Anda memprioritaskan aksesibilitas formulir, Anda menciptakan pengalaman yang lebih ramah dan inklusif untuk semua orang yang berinteraction dengan merek Anda.

Anda juga meningkatkan kegunaan, mengurangi kesalahan, dan membangun kepercayaan, yang semuanya menghasilkan hasil yang lebih baik untuk bisnis Anda.

Mulai dari yang kecil. Audit formulir Anda. Oleskan beberapa perbaikan ini. Seiring waktu, Anda akan membangun formulir yang lebih mudah diakses secara default dan menjadikan web tempat yang lebih baik dalam prosesnya.

FAQ tentang merancang formulir yang dapat diakses

1. Mengapa teks placeholder tidak cukup untuk memberi label bidang formulir?

Teks placeholder menghilang saat pengguna mulai mengetik. Ini juga tidak memberikan pelabelan terprogram yang tepat untuk pembaca layar. Selalu gunakan label yang terlihat dan gigih di samping setiap teks placeholder untuk memastikan semua pengguna tahu untuk apa setiap bidang.

2. Bagaimana cara menguji jika formulir saya dapat diakses?

Mulailah dengan menavigasi formulir Anda hanya menggunakan keyboard. Selanjutnya, uji dengan pembaca layar (seperti sulih suara, NVDA, atau rahang) untuk mendengar bagaimana bidang dan instruksi diumumkan. Juga, periksa kontras warna dan status fokus untuk memastikan kejelasan visual. Pengujian pengguna nyata dengan pengguna teknologi bantu sangat dianjurkan.

3. Apa cara terbaik untuk menampilkan pesan kesalahan?

Gunakan teks yang dapat dibaca oleh pembaca layar dan mendukungnya dengan isyarat visual seperti ikon atau teks tebal. Jangan pernah mengandalkan warna sendiri untuk menunjukkan kesalahan. Secara terprogram mengaitkan pesan kesalahan dengan bidang menggunakan atribut ARIA saat diperlukan.

4. Apakah boleh menggunakan kontrol formulir bergaya khusus?

Itu mungkin, tetapi membutuhkan perawatan ekstra. Kontrol formulir khusus harus sepenuhnya dapat diakses keyboard dan diberi label dengan benar untuk pembaca layar. Kapan pun memungkinkan, mulailah dengan kontrol HTML asli dan menata mereka dengan CSS, mereka lebih mudah dapat diakses dan berperilaku lebih konsisten di seluruh browser dan perangkat.

5. Bagaimana saya bisa membuat captcha lebih mudah diakses?

Captcha berbasis gambar tradisional sering menghadirkan hambatan aksesibilitas utama. Jika captcha harus digunakan, selalu tawarkan opsi yang dapat diakses seperti tantangan audio atau bypass untuk pengguna tepercaya.

6. Apa rasio kontras yang disarankan untuk bentuk teks dan elemen?

Menurut Pedoman WCAGteks normal (termasuk label formulir, teks placeholder, dan pesan kesalahan) harus memiliki rasio kontras setidaknya 4,5: 1 dengan latar belakangnya. Teks besar (18pt atau 14pt tebal dan lebih tinggi) harus memiliki rasio kontras setidaknya 3: 1.