Apa saja atribut ini: `aria-labelledby` dan` aria-hidden`

Menggunakan modal Bootstrap, saya telah melihat ariabanyak atribut ini , tetapi saya tidak pernah tahu bagaimana memanfaatkannya.

Adakah yang tahu kasus apa yang menggunakan atribut ini? Saya mencari di Google - hanya tidak menemukan jawaban langsung.

Atribut HTML5 ARIA adalah yang Anda cari. Itu dapat digunakan dalam kode Anda bahkan tanpa bootstrap.

Aplikasi Internet Kaya yang Dapat Diakses (ARIA) mendefinisikan cara untuk membuat konten Web dan aplikasi Web (terutama yang dikembangkan dengan Ajax dan JavaScript) lebih mudah diakses oleh para penyandang cacat.

Untuk lebih tepatnya untuk pertanyaan Anda, inilah atribut Anda disebut sebagai status dan model atribut ARIA

aria-labelledby: Mengidentifikasi elemen (atau elemen) yang memberi label elemen saat ini.

aria-hidden (state): Menunjukkan bahwa elemen dan semua turunannya tidak terlihat atau dapat dipahami oleh pengguna mana pun yang dilaksanakan oleh penulis.

Konsumen utama dari properti ini adalah agen pengguna seperti pembaca layar untuk orang buta. Jadi dalam kasus dengan modal Bootstrap, modal divpunya role="dialog". Ketika pembaca layar memperhatikan bahwa a divmenjadi terlihat yang memiliki peran ini, itu akan berbicara label untuk itu div.

Ada banyak cara untuk melabeli sesuatu (dan beberapa yang baru dengan ARIA), tetapi dalam beberapa kasus adalah tepat untuk menggunakan elemen yang ada sebagai label (semantik) tanpa menggunakan <label>tag HTML. Dengan HTML modals, label biasanya berupa <h>tajuk. Jadi dalam kasus modal Bootstrap, Anda menambahkan aria-labelledby=[IDofModalHeader], dan pembaca layar akan berbicara header itu ketika modal muncul.

Secara umum pembaca layar akan memperhatikan setiap kali elemen DOM menjadi terlihat atau tidak terlihat, sehingga aria-hiddenproperti sering berlebihan dan mungkin dapat dilewati dalam kebanyakan kasus.

aria-hidden="true"akan menyembunyikan barang-barang dekoratif seperti ikon glyphicon dari pembaca layar, yang tidak memiliki pengucapan yang bermakna sehingga tidak menimbulkan kebingungan. Ini hal yang baik dilakukan sebagai soal praktik yang baik.

ARIA tidak mengubah fungsionalitas, ARIA hanya mengubah peran / properti yang disajikan kepada pengguna pembaca layar. Toolbar WAVE WebAIM mengidentifikasi peran ARIA pada halaman.

Aria digunakan untuk meningkatkan pengalaman pengguna pengguna tunanetra. Pengguna tunanetra menavigasi aplikasi menggunakan perangkat lunak pembaca layar seperti JAWS, NVDA, .. Saat menavigasi melalui aplikasi, perangkat lunak pembaca layar mengumumkan konten kepada pengguna. Aria dapat digunakan untuk menambahkan konten dalam kode yang membantu pengguna pembaca layar memahami peran, status, label, dan tujuan kontrol

Aria tidak mengubah apa pun secara visual. (Aria juga takut pada desainer).

tersembunyi aria:

Atribut aria-hidden digunakan untuk menyembunyikan konten untuk pengguna tunanetra yang menavigasi melalui aplikasi menggunakan pembaca layar (JAWS, NVDA, ...).

Atribut aria-hidden digunakan dengan nilai true, false.

Cara Penggunaan:

<i class = "fa fa-books" aria-hidden = "true"></i>

menggunakan aria-hidden = "true" pada menu <i> konten menyembunyikan untuk pengguna pembaca layar tanpa perubahan visual dalam aplikasi.

label aria

atribut aria-label digunakan untuk mengkomunikasikan label kepada pengguna pembaca layar. Biasanya bidang input pencarian tidak memiliki label visual (terima kasih kepada desainer). aria-label dapat digunakan untuk mengkomunikasikan label kontrol kepada pengguna pembaca layar

Cara Penggunaan:

<input type = "edit" aria-label = "search" placeholder = "search">

Tidak ada perubahan visual dalam aplikasi. Tetapi pembaca layar dapat memahami tujuan kontrol

aria-labelledby

Baik aria-label dan aria-labelled by digunakan untuk mengkomunikasikan label. Tapi aria-labelledby dapat digunakan untuk referensi label apa pun yang sudah ada di halaman sedangkan aria-label digunakan untuk mengkomunikasikan label yang saya tidak ditampilkan secara visual

Pendekatan 1:

<span id = "sd"> Search </span>

<input type = "text" aria-labelledby = "sd">

aria-labelledby juga dapat digunakan untuk menggabungkan dua label untuk pengguna pembaca layar

Pendekatan 2:

<span id = "de"> Billing Address </span>

<span id = "sd"> First Name </span>

<input type = "text" aria-labelledby = "de sd">