aria-describedby untuk Konteks Tambahan

Terkadang sebuah kontrol membutuhkan lebih dari sekadar nama. aria-describedby menambahkan konteks yang dibacakan pembaca layar setelah nama.

Seperti labelledby, aria-describedby menyimpan id elemen lain. Browser mengambil teks elemen tersebut sebagai deskripsi.

Pembaca layar mengucapkan nama terlebih dahulu, kemudian jeda singkat, lalu deskripsi. Urutan ini membantu pengguna memahami kontrol dengan cepat.

Petunjuk bidang seperti aturan format sebaiknya ditempatkan dalam aria-describedby, agar panduan dibacakan secara otomatis ketika bidang menerima focus.

Deskripsi bersifat tambahan. Jika elemen hanya memiliki aria-describedby tanpa nama, elemen tersebut tetap pada dasarnya tidak memiliki label.

Berikan beberapa id yang dipisahkan spasi kepada aria-describedby, lalu browser akan menggabungkan teksnya. Ini berguna untuk menggabungkan petunjuk dan error.

Arahkan aria-describedby ke pesan validasi agar error dibacakan bersama bidangnya, bukan terpisah di tempat lain pada halaman.

Deskripsi sebaiknya berupa kalimat singkat. Teks aria-describedby yang panjang akan dibacakan seluruhnya setiap kali, sehingga cepat terasa melelahkan.

Tidak seperti label tersembunyi, petunjuk yang dirujuk biasanya tetap terlihat di layar, sehingga membantu pengguna yang dapat melihat sekaligus pengguna lainnya.

Sebagian besar pembaca layar mendukung aria-describedby, tetapi beberapa hanya mengumumkannya dalam mode tertentu. Karena itu, uji petunjuk tersebut dengan pembaca layar nyata.

Gunakan aria-labelledby untuk menyatakan nama sebuah kontrol dan aria-describedby untuk detail tambahan tentangnya. Keduanya memiliki tugas yang berbeda.

Anda telah mempelajari bahwa aria-describedby merujuk ke id untuk membacakan petunjuk dan error setelah nama, melengkapinya tanpa pernah menggantikannya. 💬