Label dan hubungan ARIA

Menggunakan label ARIA untuk membuat deskripsi elemen yang mudah diakses

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

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.

Menggunakan aria-label untuk mengidentifikasi tombol khusus gambar.

aria-labelledby

aria-labelledby memungkinkan kita untuk menentukan ID elemen lain dalam DOM sebagai label elemen.

Menggunakan aria berlabel by untuk mengidentifikasi grup radio.

Ini mirip seperti menggunakan elemen label, dengan beberapa perbedaan utama.

  1. aria-labelledby dapat digunakan pada elemen apa pun, tidak hanya elemen yang dapat diberi label.
  2. Meskipun elemen label mengacu pada hal yang diberi label, hubungannya dibalikkan dalam kasus aria-labelledby — hal yang dilabeli mengacu pada hal yang melabelinya.
  3. 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.
  4. Anda dapat menggunakan aria-labelledby untuk merujuk ke elemen yang tersembunyi dan jika tidak ada dalam hierarki aksesibilitas. Misalnya, Anda dapat menambahkan span tersembunyi di samping elemen yang ingin diberi label, dan merujuknya dengan aria-labelledby.
  5. Namun, karena ARIA hanya memengaruhi hierarki aksesibilitas, aria-labelledby tidak memberi Anda perilaku klik label yang familier yang Anda dapatkan saat menggunakan elemen label.

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.

Menggunakan aria-owns untuk membangun hubungan antara menu dan submenu.

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.

Menggunakan aria-activedescendant untuk membangun hubungan dalam kotak daftar.

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.

Menggunakan aria-describeby untuk membangun hubungan dengan kolom sandi.

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.

Menggunakan aria-posinset dan aria-setsize untuk membangun hubungan dalam daftar.