Cara membuat formulir web yang dapat diakses

Feb 2, 2026

Bagaimana caranya

Formulir adalah komponen penting dari web karena mereka menghubungkan pengguna ke bisnis Anda dan membantu mereka mencapai apa yang mereka datangi ke situs atau aplikasi Anda. Yang sedang berkata, Anda ingin memastikan bahwa semua pengguna Anda dapat menggunakan formulir Anda tanpa harus menderita pengalaman yang mengerikan. Tujuannya adalah untuk membuat interaksi pengguna kunci ini tanpa gesekan mungkin.

Meskipun memang benar bahwa bentuk bangunan kadang-kadang menjadi tugas yang sulit, membuatnya dapat diakses secara moderat tidak serumit yang mungkin Anda pikirkan (yang baik Pembangun Situs Web akan membuatnya sangat sederhana). Seringkali ada alasan yang dilemparkan seperti 'kita tidak punya waktu untuk khawatir tentang aksesibilitas' atau 'kita akan membuatnya dapat diakses nanti'. Alasan ini sering (jika tidak selalu) tidak valid dan Anda dapat membantu tim Anda mengubah pola pikir ini.

Mencari lebih banyak saran? Kami membuat Anda ditutupi dengan posting pada topik dari hosting web. untuk penyimpanan awan .

13 Best Potongan Perangkat Lunak Pengujian Pengguna

Berikut adalah beberapa pertanyaan yang harus Anda pertimbangkan saat membangun bentuk:

Kesulitan apa yang mungkin ada seseorang dengan gangguan penglihatan menggunakan formulir saya?
Apakah pengguna memiliki indikasi yang jelas tentang data apa yang diharapkan untuk input?
Apakah formulir mudah digunakan - apakah para pengguna dapat memahaminya dengan cepat?
Apakah saya dapat menggunakan keyboard untuk mengisi formulir?

Cara Membuat Formulir Berlangganan Dasar

Saya telah memberi Anda beberapa kode starter untuk membantu Anda maju. Baik Mulailah dengan ini dan akhirnya Dapatkan untuk ini .

Saya telah memberi Anda beberapa gaya dan elemen dasar yang akan membuat formulir berlangganan sederhana tetapi ada banyak yang bisa kami lakukan di sini untuk membuat formulir ini lebih bermanfaat. Dengan apa pun yang Anda buat, menggunakan html semantik yang baik akan membuat Anda jauh.

Mari kita mulai dengan menghubungkan & lt; input & gt; elemen untuk masing-masing & lt; label & gt; s. Kami melakukan ini dengan memberikan & lt; input & gt; ID dan menggunakannya sebagai atribut untuk & lt; label & gt; . Kita dapat menggunakan "nama" dan "email" untuk ini dan kita sudah melakukan dua hal:

Kami telah secara terprogram mengaitkan label ke input. Manfaatnya adalah bahwa ia akan membaca label ke pengguna pembaca layar jika input itu difokuskan.
Pengguna sekarang dapat mengklik label dan input masing-masing akan difokuskan, sehingga pengguna sekarang memiliki ukuran target yang lebih besar.

Sekarang input dan label kami semua ditransfer, kami dapat menentukan jenis input HTML. Ini sangat berguna dan cara super mudah untuk memberikan pengalaman pengguna yang sangat baik. Menambahkan Tipe Atribut akan membantu pengguna secara otomatis mengisi formulir dan juga akan menyediakan keyboard yang lebih cocok untuk pengguna seluler. Untuk kasus penggunaan kami yang bisa kita lakukan Ketik = "teks" untuk input nama dan Ketik = "Email" untuk input email.

Kami juga ingin pengguna memiliki ide bagus tentang jenis data apa (dan pemformatannya) yang kami harapkan dari mereka. Di sini cukup jelas tapi itu tidak selalu terjadi. Secara umum praktik yang baik untuk memberikan label yang selalu dapat dilihat dan placeholder yang mengkomunikasikan input yang diharapkan. Ini berarti tidak menggunakan Placeholder. Atribut sebagai label visual untuk input di mana label tidak dapat dilihat setelah pengguna mulai mengetik. Ini telah menjadi praktik populer untuk banyak pengembang dan benar-benar perlu ditidurkan sekali dan untuk semua. Kami dapat memberikan placeholder "Ex. Jane Doe" untuk nama dan "ex. [email protected]" untuk email.

Sekarang kita bisa mulai bekerja pada fokus negara Styling. Styling default dari status fokus berbeda antara browser dan kami dapat meningkatkan apa pun gaya default mungkin untuk membuatnya lebih ramah pengguna. Dalam kasus kami di sini, kami ingin input memiliki garis besar yang tebal dan berwarna yang cocok dengan tombol.

14 cara mudah untuk membuat situs web Anda lebih mudah diakses

Tambahkan gaya fokus ke pemilih input

Terakhir, kita perlu menambahkan beberapa gaya fokus di sekitar elemen tombol. Ini sering diabaikan tetapi benar-benar dapat membantu pengguna keyboard hanya tahu di mana mereka berada. Kita perlu menambahkan ini & amp; :: moz-focus-innner Bit untuk menyingkirkan beberapa styling default di Firefox (Anda mungkin ingin menyimpan cuplikan itu untuk digunakan di masa mendatang).

Sama seperti itu, kami memiliki formulir berlangganan dasar yang dapat Anda banggakan dan tingkatkan. Karena kami telah menggunakan semantik yang baik, formulir dapat diakses melalui keyboard saja (coba gunakan Tab dan Spacebar / Enter Keys). Warna yang digunakan untuk tombol adalah rasio warna 11,51, memenuhi standar AAA untuk WCAG (panduan aksesibilitas konten web). Kami telah menyediakan label untuk pengguna visual dan pengguna pembaca layar, serta status fokus bergaya untuk teman-teman keyboard kami. Akhirnya, perhatikan bahwa font diatur ke 18px. dalam tubuh. Ini membuat formulir kami jauh lebih mudah dibaca (Anda harus mencoba untuk tetap di atas 14px).

Merancang dan membangun dengan aksesibilitas dalam pikiran membutuhkan latihan tetapi Anda akan menjadi pengembang yang lebih baik untuk itu dan membantu menjadikan web tempat yang lebih baik.

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Hasilkan, konferensi pemenang penghargaan untuk desainer web, kembali ke NYC pada 24-25 April! Klik gambar untuk memesan tiket

Artikel ini awalnya diterbitkan dalam masalah 316 dari bersih , majalah terlaris di dunia untuk desainer dan pengembang web. Beli masalah 316 di sini atau berlangganan di sini .

Artikel terkait:

Perbaiki aksesibilitas gagal dengan alat gratis ini
50 alat baru yang luar biasa untuk pengembang pada tahun 2019
Seberapa mudah diakses desain Anda?

Cara membuat formulir web yang dapat diakses

Cara Membuat Formulir Berlangganan Dasar

Tambahkan gaya fokus ke pemilih input

Bagaimana caranya - Artikel Terpopuler

Cara Storyboard di Photoshop

Cara menggambar anjing

Gunakan Adobe XD untuk membuat interaksi mikro

Bangun UI yang dikendalikan suara

membuat tanaman realistis di bioskop 4D

Pertajam keterampilan sketsa Anda

Cara Membangun situs web halaman penuh dalam Angular

mempercepat pemodelan 3D Anda

Kategori