Mengaitkan Ralat dengan Medan Menggunakan aria-describedby

Mesej ralat yang berada berhampiran medan kelihatan berkaitan dengan medan itu kepada anda. Namun, bagi pembaca skrin, mesej itu hanyalah teks terpisah yang mungkin tidak pernah didengar oleh pengguna. ⚠️

Anda perlu mengaitkan mesej itu secara rasmi dengan inputnya. Atribut yang melakukannya ialah aria-describedby, dan atribut itu diletakkan pada medan.

Berikan elemen ralat itu id, kemudian tetapkan aria-describedby input kepada id yang sama. Kini kedua-duanya dipautkan secara rasmi.

Apabila fokus sampai ke input, pembaca skrin membaca label, jenis dan kemudian penerangan. Ralat itu tidak lagi terasing.

aria-describedby tidak menggantikan label. Label memberikan nama; describedby menambahkan maklumat tambahan yang dibaca selepasnya.

Anda boleh menyenaraikan beberapa id yang dipisahkan dengan ruang. Pelayar membacanya mengikut susunan, jadi anda boleh menggabungkan petunjuk dan ralat.

Tambahkan id ralat pada aria-describedby hanya semasa ralat dipaparkan. Menunjuk kepada nod kosong atau tersembunyi boleh menyebabkan tiada apa-apa dibaca atau mengelirukan pengguna.

Elemen yang diterangkan mesti mengandungi teks sebenar yang boleh dilihat. aria-describedby membaca kandungannya, jadi rentang yang kosong tidak menerangkan apa-apa yang berguna.

Jika sasaran mempunyai display none, kebanyakan pembaca skrin akan melangkaunya. Pastikan teks ralat dipaparkan dan kelihatan supaya penerangan benar-benar diumumkan.

Gandingkan describedby dengan aria-invalid pada medan yang sama. Satu atribut menyatakan bahawa semakan gagal; satu lagi menjelaskan sebabnya. Bersama-sama, kedua-duanya menyampaikan gambaran penuh.

Atribut yang sama juga membawa petunjuk tentang format, seperti peraturan kata laluan. Ralat ialah salah satu kegunaan biasa, bukan satu-satunya.

Hubungkan ralat dengan medan menggunakan aria-describedby yang menunjuk kepada id sebenar dan kelihatan. Pembaca skrin kemudian membaca medan dan ralatnya bersama-sama. ✅