ARIA (Diakses Rich Internet Applications) mendefinisikan cara untuk membuat konten Web dan aplikasi Web lebih mudah diakses untuk orang-orang cacat.

Yang tersembunyi atribut baru dalam HTML5 dan bercerita browser tidak untuk menampilkan elemen. The aria-hidden properti menceritakan pembaca layar jika mereka harus mengabaikan unsur. Lihatlah w3 docs untuk lebih jelasnya:

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

Menggunakan standar-standar ini dapat membuat lebih mudah bagi orang-orang cacat untuk menggunakan web.

Tersembunyi atribut adalah atribut boolean (True/False). Ketika atribut ini digunakan pada elemen, menghilangkan semua relevansi dengan elemen itu. Ketika pengguna melihat halaman html, elemen dengan atribut tersembunyi tidak akan terlihat.

Contoh:

    <p hidden>You can't see this</p>

Aria-atribut tersembunyi menunjukkan bahwa elemen dan SEMUA keturunannya yang masih terlihat di browser, tapi akan terlihat dengan aksesibilitas alat-alat, seperti pembaca layar.

Contoh:

    <p aria-hidden="true">You can't see this</p>

Lihatlah ini. Itu harus menjawab semua pertanyaan anda.

Catatan: ARIA berdiri untuk Diakses oleh Aplikasi Internet Kaya

Sumber: Paciello Group

Perbedaan Semantik

Menurut HTML 5.2:

Saat yang ditentukan pada elemen, [yang tersembunyi atribut] menunjukkan bahwa unsur ini belum, atau tidak lagi, langsung relevan untuk halaman saat ini negara, atau yang sedang digunakan untuk menyatakan kandungan untuk digunakan kembali oleh bagian lain dari halaman sebagai lawan yang langsung diakses oleh pengguna.

Contoh mencakup tab daftar di mana beberapa panel yang tidak terkena, atau log-in screen yang hilang setelah pengguna log in. Saya suka menyebutnya "hal-hal duniawi yang relevan" yaitu mereka yang relevan berdasarkan waktu.

Di sisi lain, ARIA 1.1 mengatakan:

[The aria-hidden negara] menunjukkan apakah suatu elemen terkena aksesibilitas API.

Dengan kata lain, unsur-unsur dengan aria-hidden="benar" dihapus dari aksesibilitas treeyang paling teknologi bantu kehormatan, dan unsur-unsur dengan aria-hidden="salah" pasti akan terkena pohon. Unsur-unsur tanpa aria-hidden atribut yang di "undefined (default)" negara, yang berarti agen pengguna harus mengekspos ke pohon berdasarkan rendering. E. g. agen pengguna dapat memutuskan untuk menghapus itu jika teks warna yang cocok dengan warna latar belakang.

Sekarang mari kita bandingkan semantik. Itu sesuai untuk penggunaan yang tersembunyi, tetapi tidak aria-hidden, untuk unsur yang belum "temporal relevan", tapi itu mungkin menjadi relevan di masa depan (dalam hal ini anda akan menggunakan dynamic script untuk menghapus tersembunyi atribut). Sebaliknya, itu tepat untuk menggunakan aria-hidden, tetapi bukan tersembunyi, pada sebuah elemen yang selalu relevan, tetapi dengan yang anda tidak ingin kekacauan aksesibilitas API; unsur-unsur tersebut mungkin memiliki "bakat visual", seperti ikon dan/atau citra yang tidak penting bagi pengguna untuk mengkonsumsi.

Perbedaan Yang Efektif

The semantik telah diprediksi efek di browser/agen pengguna. Alasan saya membuat perbedaan adalah bahwa user agent perilaku recommended, tapi tidak diperlukan dengan spesifikasi.

Yang tersembunyi atribut harus menyembunyikan sebuah elemen dari semua presentasi, termasuk printer dan layar pembaca (dengan asumsi perangkat ini menghormati HTML spesifikasi). Jika anda ingin menghapus sebuah elemen dari aksesibilitas pohon serta media visual, tersembunyi akan melakukan trik. Namun, jangan gunakan tersembunyi karena anda ingin efek ini. Tanyakan pada diri anda jika tersembunyi semantik yang benar pertama (lihat di atas). Jika tersembunyi tidak semantik benar, tetapi anda masih ingin visual menyembunyikan elemen, anda bisa menggunakan teknik lain seperti CSS.

Unsur-unsur dengan aria-hidden="benar" tidak terkena aksesibilitas pohon, jadi misalnya, pembaca layar tidak akan mengumumkannya. Teknik ini harus digunakan dengan hati-hati, karena akan memberikan pengalaman yang berbeda kepada pengguna yang berbeda: mudah diakses agen pengguna tidak akan mengumumkan/membuat mereka, tapi mereka masih diberikan pada visual agen. Hal ini dapat menjadi hal yang baik jika dilakukan dengan benar, tetapi memiliki potensi untuk disalahgunakan.

Perbedaan Sintaksis

Terakhir, ada perbedaan dalam sintaks antara dua atribut.

tersembunyi adalah boolean atribut, yang berarti jika atribut ini hadir memang benar—terlepas dari apa pun nilai yang mungkin—dan jika atribut yang absen itu adalah palsu. Untuk kasus yang benar, praktek terbaik adalah untuk menggunakan nilai sama sekali (<div tersembunyi>...</div>), atau string kosong nilai (<div tersembunyi="">...</div>). Aku akan tidak merekomendasikan tersembunyi="benar" karena seseorang membaca/memperbarui kode anda mungkin menyimpulkan bahwa tersembunyi="salah" akan memiliki efek sebaliknya, yang hanya tidak benar.

aria-hidden, sebaliknya, adalah sebuah dihitung atribut, yang memungkinkan salah satu dari daftar terbatas dari nilai-nilai. Jika aria-hidden atribut hadir, nilainya harus baik "benar" atau"salah". Jika anda ingin "undefined (default)" negara, menghapus atribut sama sekali.

Bacaan lebih lanjut: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

pengaturan aria-hidden palsu dan toggling pada elemen.show() bekerja untuk saya.

e.g

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

dan ketika bersembunyi di belakang

$(span).attr('aria-hidden', 'true');
$(span).hide();