Saya telah melihat atribut aria di seluruh saat bekerja dengan Bahan Angular. Adakah yang bisa menjelaskan kepada saya, apa arti awalan aria? tetapi yang paling penting yang saya coba pahami adalah perbedaan antara aria-hiddendan hiddenatribut.

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

The hiddenatribut baru dalam HTML5 dan memberitahu browser untuk tidak menampilkan elemen. The aria-hiddenproperti memberitahu pembaca layar jika mereka harus mengabaikan elemen. Lihat dokumen w3 untuk lebih jelasnya:

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

Menggunakan standar-standar ini dapat memudahkan orang-orang cacat untuk menggunakan web.

Atribut tersembunyi adalah atribut boolean (Benar / Salah). Ketika atribut ini digunakan pada suatu elemen, itu menghapus semua relevansi dengan elemen itu. Saat pengguna melihat halaman html, elemen dengan atribut tersembunyi seharusnya tidak terlihat.

Contoh:

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

Atribut tersembunyi Aria menunjukkan bahwa elemen dan SEMUA turunannya masih terlihat di browser, tetapi tidak akan terlihat oleh alat aksesibilitas, seperti pembaca layar.

Contoh:

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

Lihatlah ini . Itu harus menjawab semua pertanyaan Anda.

Catatan: ARIA adalah singkatan dari Aplikasi Internet Kaya yang Dapat Diakses

Sumber: Grup Paciello

Perbedaan Semantik

Menurut HTML 5.2 :

Ketika ditentukan pada suatu elemen, [ hiddenatribut] menunjukkan bahwa elemen tersebut belum, atau tidak lagi, secara langsung relevan dengan keadaan halaman saat ini, atau bahwa itu digunakan untuk menyatakan konten yang akan digunakan kembali oleh bagian halaman lainnya sebagai menentang untuk diakses langsung oleh pengguna.

Contohnya termasuk daftar tab di mana beberapa panel tidak terbuka, atau layar masuk yang hilang setelah pengguna masuk. Saya suka menyebut hal-hal ini "relevan untuk sementara" yaitu mereka relevan berdasarkan waktu.

Di sisi lain, ARIA 1.1 mengatakan:

[ aria-hiddenStatus] menunjukkan apakah suatu elemen terbuka ke API aksesibilitas.

Dengan kata lain, elemen dengan aria-hidden="true"dihapus dari pohon aksesibilitas , yang paling dihormati teknologi bantu, dan elemen dengan aria-hidden="false"pasti akan terkena pohon. Elemen tanpa aria-hiddenatribut berada dalam "undefined (default)" state, yang berarti agen pengguna harus memaparkannya ke pohon berdasarkan renderingnya. Misalnya agen pengguna dapat memutuskan untuk menghapusnya jika warna teksnya cocok dengan warna latar belakangnya.

Sekarang mari kita bandingkan semantik. Ini layak untuk digunakan hidden, tetapi tidak aria-hidden , untuk elemen yang belum "relevan untuk sementara", tetapi yang mungkin menjadi relevan di masa mendatang (dalam hal ini Anda akan menggunakan skrip dinamis untuk menghapus hiddenatribut). Sebaliknya, itu layak digunakan aria-hidden, tetapi tidakhidden , pada elemen yang selalu relevan, tetapi Anda tidak ingin mengacaukan API aksesibilitas; elemen seperti itu mungkin termasuk "bakat visual", seperti ikon dan / atau citra yang tidak penting untuk dikonsumsi pengguna.

Perbedaan yang efektif

The semantik memiliki diprediksi efek di agen browser / user. Alasan saya membuat perbedaan adalah bahwa perilaku agen pengguna direkomendasikan , tetapi tidak diharuskan oleh spesifikasi.

The hiddenatribut harus menyembunyikan elemen dari semua presentasi, termasuk printer dan pembaca layar (dengan asumsi perangkat ini menghormati HTML spesifikasi). Jika Anda ingin menghapus elemen dari pohon aksesibilitas serta media visual, hiddenlakukan triknya. Namun, jangan gunakan hidden hanya karena Anda menginginkan efek ini. Tanyakan pada diri Anda apakah hiddensecara semantik benar dulu (lihat di atas). Jika hiddentidak benar secara semantik, tetapi Anda masih ingin menyembunyikan elemen secara visual, Anda dapat menggunakan teknik lain seperti CSS.

Elemen dengan aria-hidden="true"tidak terpapar ke pohon aksesibilitas, jadi misalnya, pembaca layar tidak akan mengumumkannya. Teknik ini harus digunakan dengan hati-hati, karena akan memberikan pengalaman berbeda kepada pengguna yang berbeda: agen pengguna yang dapat diakses tidak akan mengumumkan / membuat mereka, tetapi mereka masih diberikan pada agen visual. Ini bisa menjadi hal yang baik bila dilakukan dengan benar, tetapi berpotensi disalahgunakan.

Perbedaan sintaksis

Terakhir, ada perbedaan dalam sintaksis antara dua atribut.

hiddenadalah atribut boolean , artinya jika atribut itu hadir itu benar — terlepas dari nilai apa pun yang mungkin dimiliki — dan jika atribut itu tidak ada, maka itu salah. Untuk kasus sebenarnya, praktik terbaik adalah menggunakan nilai sama sekali ( <div hidden>...</div>), atau nilai string kosong ( <div hidden="">...</div>). Saya tidak akan merekomendasikan hidden="true"karena seseorang membaca / memperbarui kode Anda mungkin menyimpulkan bahwa hidden="false"akan memiliki efek sebaliknya, yang hanya salah.

aria-hidden, sebaliknya, adalah atribut enumerated , memungkinkan salah satu dari daftar nilai yang terbatas. Jika aria-hiddenatribut ada, nilainya harus berupa "true"atau "false". Jika Anda menginginkan status "tidak terdefinisi (default)", hapus atributnya sekaligus.

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

pengaturan aria-hidden ke false dan mengaktifkannya pada element.show () bekerja untuk saya.

misalnya

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

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

dan saat bersembunyi kembali

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