Label formulir

Kotak teks di sebelah kata "Email" belum berlabel sampai elemen label diikatkan padanya; sebelum itu pembaca layar mungkin hanya mengucapkan "edit text".

Setiap kolom butuh nama

Saat fokus mendarat di kolom formulir, pembaca layar mengumumkan labelnya, jenisnya, dan keadaannya: "Email, edit text, required". Label itu berasal dari elemen label yang diikatkan ke kolomnya. Ada dua cara mengikatnya. Beri input sebuah id dan beri label for yang cocok, atau taruh input di dalam label. Cara mana pun yang dipakai, mengklik teks label juga memindahkan fokus ke kolom itu, sehingga kotak centang dan tombol radio yang kecil jauh lebih mudah dikenai.

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">

<label>
  <input type="checkbox" name="news"> Send me the weekly menu
</label>

Kriteria keberhasilan WCAG 2.2 3.3.2 Label atau Instruksi, pada level A, meminta label atau instruksi setiap kali konten membutuhkan masukan pengguna, dan 1.3.1 Info dan Hubungan meminta agar ikatan antara label dan kolom ada di dalam kode, bukan hanya di layar. Paragraf yang kebetulan berada di atas input hanya dekat secara visual; tidak ada yang memberi tahu teknologi bantu bahwa keduanya satu pasangan.

Placeholder bukan label

Atribut placeholder menampilkan teks petunjuk abu-abu di dalam kolom yang kosong. Godaannya besar untuk memakainya sebagai pengganti label, dan banyak formulir pendaftaran melakukannya. Masalahnya, teks itu hilang begitu kamu mengetik, jadi kamu tidak bisa memeriksa lagi untuk apa kolom itu, dan warnanya biasanya cukup pucat sampai gagal aturan kontras dari unit sebelumnya. Pakai label yang terlihat dan, kalau mau, tambahkan juga placeholder berisi contoh nilai.

Grup, tujuan, dan galat

Tombol radio dan kotak centang yang saling berkaitan juga butuh label grup. Bungkus dengan fieldset dan taruh pertanyaannya di legend, sehingga pembaca layar mengucapkan "Size, group" sebelum "Small, radio button, 1 of 3". Untuk data pribadi, atribut autocomplete memberi tahu browser untuk apa sebuah kolom, dengan nama dari standar HTML seperti name, email, tel, new-password, dan one-time-code. Kriteria 1.3.5 Identifikasi Tujuan Masukan, pada level AA, meminta persis hal ini, karena browser jadi bisa mengisi kolom dan sebagian alat bisa menampilkan ikon yang sudah dikenal di sebelahnya.

Kalau ada yang salah, katakan dengan kata-kata. Kriteria 3.3.1 Identifikasi Galat meminta agar galat masukan dikenali dan dijelaskan kepada pengguna dalam bentuk teks, bukan hanya dengan mengubah bingkai menjadi merah. WCAG 2.2 juga menambahkan 3.3.7 Entri Berulang: informasi yang sudah dimasukkan seseorang dalam proses yang sama harus diisikan lagi untuknya atau ditawarkan untuk dipilih, bukan diketik dua kali. Lalu 3.3.8 Autentikasi yang Aksesibel (Minimum), pada level AA, menyatakan bahwa langkah masuk tidak boleh bergantung pada mengingat atau menyalin sesuatu kecuali ada bantuan; membiarkan pengelola kata sandi mengisi kolom dan membolehkan tempel sama-sama dihitung sebagai bantuan itu.

Sebutkan yang dibutuhkan sebelum orang mulai

Instruksi ditaruh sebelum kolom yang dijelaskannya, bukan di pesan galat setelah seseorang gagal. Kalau kata sandi harus sedikitnya 15 karakter, tulis itu di sebelah label. Tandai kolom wajib di teks labelnya, misalnya dengan kata "wajib", dan tambahkan atribut required agar browser juga mengumumkannya. Saat pesan galat muncul, letakkan di sebelah kolomnya dan ikat keduanya dengan aria-describedby yang menunjuk ke id pesan itu; pembaca layar lalu membacakan pesan itu ketika kolom menerima fokus. Terakhir, pindahkan fokus ke kolom pertama yang bermasalah, atau ke ringkasan galat di bagian atas, agar pengguna papan ketik tidak tertinggal di bawah formulir yang panjang sambil bertanya-tanya apa yang terjadi.