aria-label vs aria-labelledby

Jika pelabelan bawaan tidak cukup, Anda memiliki dua alat ARIA: aria-label untuk string langsung dan aria-labelledby untuk menunjuk teks yang sudah ada.

Gunakan aria-label jika tidak ada teks yang terlihat untuk dipinjam. Ketik nama yang dibacakan langsung pada elemen itu sendiri.

Gunakan aria-labelledby jika teks yang terlihat pada halaman dapat menjadi nama. Nilainya adalah id elemen tersebut, bukan string.

Gunakan aria-labelledby terlebih dahulu. Dengan menggunakan kembali teks di layar, nama yang dibacakan dan nama yang terlihat akan tetap selaras secara otomatis.

Berikan beberapa id yang dipisahkan spasi kepada aria-labelledby, lalu browser akan menggabungkan teksnya sesuai urutan menjadi satu nama.

Jika keduanya ada, aria-labelledby yang digunakan. Browser sepenuhnya mengabaikan aria-label, jadi jangan pernah mengharapkan keduanya digabungkan.

Dengan aria-labelledby, sebuah elemen dapat merujuk ke id-nya sendiri. Ini berguna untuk memberi nama pada region berdasarkan teks judul yang terlihat.

aria-label tidak pernah muncul di layar. Atribut ini hanya mengubah apa yang diumumkan teknologi bantu, sehingga pengguna yang dapat melihat tidak melihat perbedaan.

aria-label adalah teks biasa yang sering dilewati penerjemah halaman, sedangkan labelledby menggunakan kembali konten yang terlihat dan ikut diterjemahkan.

id pada aria-labelledby harus cocok dengan id elemen yang benar-benar ada. Salah ketik akan diam-diam membuat elemen tersebut sama sekali tidak memiliki nama yang dihitung.

Tanyakan di mana nama tersebut berada. Jika sudah terlihat di layar, gunakan aria-labelledby; jika hanya ada untuk teknologi bantu, gunakan aria-label.

Anda telah mempelajari penggunaan aria-labelledby untuk teks terlihat yang sudah ada dan aria-label untuk nama langsung yang tidak terlihat, serta tidak pernah mengharapkan keduanya bergabung. 🎯