Menggunakan label ARIA untuk membuat deskripsi elemen yang mudah diakses
Label
ARIA menyediakan beberapa mekanisme untuk menambahkan label dan deskripsi ke elemen. Faktanya, ARIA adalah satu-satunya cara untuk menambahkan teks deskripsi atau bantuan yang dapat diakses. Mari kita lihat properti yang digunakan ARIA untuk membuat label yang dapat diakses.
aria-label
aria-label
memungkinkan kita menentukan string yang akan digunakan sebagai label yang dapat diakses.
Tindakan ini akan menggantikan mekanisme pelabelan native lainnya, seperti elemen label
— misalnya, jika button
memiliki konten teks dan aria-label
, hanya nilai aria-label
yang akan digunakan.
Anda dapat menggunakan atribut aria-label
jika memiliki semacam indikasi visual
tujuan elemen, seperti tombol yang menggunakan grafik, bukan
teks, tetapi masih perlu mengklarifikasi tujuan tersebut bagi siapa saja yang tidak dapat mengakses
indikasi visual, seperti tombol yang hanya menggunakan gambar untuk menunjukkan tujuannya.
aria-labelledby
aria-labelledby
memungkinkan kita untuk menentukan ID elemen lain dalam DOM sebagai label elemen.
Ini mirip seperti menggunakan elemen label
, dengan beberapa perbedaan utama.
aria-labelledby
dapat digunakan pada elemen apa pun, tidak hanya elemen yang dapat diberi label.- Meskipun elemen
label
mengacu pada hal yang diberi label, hubungannya dibalikkan dalam kasusaria-labelledby
— hal yang dilabeli mengacu pada hal yang melabelinya. - Hanya satu elemen label yang dapat dikaitkan dengan elemen yang dapat diberi label, tetapi
aria-labelledby
dapat mengambil daftar IDREF untuk membuat label dari beberapa elemen. Label akan digabungkan sesuai urutan IDREF diberikan. - Anda dapat menggunakan
aria-labelledby
untuk merujuk ke elemen yang tersembunyi dan jika tidak ada dalam hierarki aksesibilitas. Misalnya, Anda dapat menambahkanspan
tersembunyi di samping elemen yang ingin diberi label, dan merujuknya denganaria-labelledby
. - Namun, karena ARIA hanya memengaruhi hierarki aksesibilitas,
aria-labelledby
tidak memberi Anda perilaku klik label yang familier yang Anda dapatkan saat menggunakan elemenlabel
.
Yang penting, aria-labelledby
menggantikan semua sumber nama lain untuk
elemen. Jadi, misalnya, jika suatu elemen memiliki aria-labelledby
dan
aria-label
, atau aria-labelledby
dan label
HTML native, label
aria-labelledby
akan selalu diprioritaskan.
Hubungan
aria-labelledby
adalah contoh atribut hubungan. Atribut hubungan
membuat hubungan semantik antara elemen di halaman
terlepas dari hubungan DOM-nya. Dalam kasus aria-labelledby
, hubungan tersebut adalah "elemen ini diberi label oleh elemen tersebut".
Spesifikasi ARIA mencantumkan delapan atribut
hubungan.
Enam dari elemen ini, aria-activedescendant
, aria-controls
, aria-describedby
,
aria-labelledby
, dan aria-owns
, mengambil referensi ke satu atau beberapa elemen untuk
membuat link baru antarelemen pada halaman. Perbedaan setiap kasus adalah apa arti tautan itu dan bagaimana tautan tersebut disajikan kepada pengguna.
aria-own
aria-owns
adalah salah satu hubungan ARIA yang paling banyak digunakan. Dengan atribut ini,
kita dapat memberi tahu teknologi pendukung bahwa elemen yang terpisah dalam
DOM harus diperlakukan sebagai turunan dari elemen saat ini, atau untuk mengatur ulang
elemen turunan yang ada ke dalam urutan yang berbeda. Misalnya, jika sub-menu
pop-up diposisikan secara visual di dekat menu induknya, tetapi tidak dapat menjadi turunan DOM
dari induknya karena akan memengaruhi presentasi visual, Anda dapat menggunakan
aria-owns
untuk menampilkan sub-menu tersebut sebagai turunan dari menu induk ke pembaca
layar.
aria-activedescendant
aria-activedescendant
memainkan peran terkait. Sama seperti elemen aktif
halaman yang memiliki fokus, menetapkan turunan aktif suatu elemen
memungkinkan kita memberi tahu teknologi pendukung bahwa suatu elemen harus ditampilkan kepada
pengguna sebagai elemen yang difokuskan ketika induknya benar-benar memiliki fokus. Misalnya, dalam listbox, Anda mungkin ingin membiarkan fokus halaman di penampung listbox, tetapi tetap memperbarui atribut aria-activedescendant
-nya ke
item daftar yang saat ini dipilih. Hal ini membuat item yang saat ini dipilih tampak oleh
teknologi pendukung seolah-olah item tersebut adalah item yang difokuskan.
aria-dijelaskan oleh
aria-describedby
memberikan deskripsi yang dapat diakses dengan cara yang sama seperti
aria-labelledby
memberikan label. Seperti aria-labelledby
, aria-describedby
dapat mereferensikan elemen yang tidak terlihat, baik yang disembunyikan dari DOM, maupun yang disembunyikan dari pengguna teknologi pendukung. Ini adalah teknik yang berguna jika
ada teks penjelasan tambahan yang mungkin diperlukan pengguna, baik yang hanya berlaku
untuk pengguna teknologi pendukung maupun semua pengguna.
Contoh umumnya adalah kolom input sandi dengan sejumlah teks deskriptif yang menjelaskan persyaratan sandi minimum. Tidak seperti label, deskripsi ini mungkin atau mungkin tidak akan pernah ditampilkan kepada pengguna; pengguna mungkin memiliki pilihan apakah akan mengaksesnya, atau mungkin setelah semua informasi lainnya, atau mungkin diawali oleh hal lain. Misalnya, jika pengguna memasukkan informasi, input mereka akan digemakan kembali dan dapat mengganggu deskripsi elemen. Oleh karena itu, deskripsi adalah cara yang bagus untuk mengomunikasikan informasi tambahan, tetapi tidak penting,; deskripsi tidak akan menghalangi informasi yang lebih penting seperti peran elemen.
aria-posinset & aria-setsize
Atribut hubungan lainnya sedikit berbeda, dan bekerja samalah.
aria-posinset
("posisi dalam set") dan aria-setsize
("ukuran set") adalah tentang
menentukan hubungan antara elemen yang seinduk dalam kumpulan, seperti daftar.
Jika ukuran kumpulan tidak dapat ditentukan oleh elemen yang ada di DOM — seperti saat rendering lambat digunakan agar tidak ada semua daftar besar di DOM sekaligus — aria-setsize
dapat menentukan ukuran kumpulan sebenarnya, dan aria-posinset
dapat menentukan posisi elemen dalam kumpulan tersebut. Misalnya, dalam
kumpulan yang mungkin berisi 1.000 elemen, Anda dapat mengatakan bahwa elemen tertentu
memiliki aria-posinset
857 meskipun muncul terlebih dahulu di DOM, lalu
menggunakan teknik HTML dinamis untuk memastikan pengguna dapat menjelajahi daftar lengkapnya
sesuai permintaan.