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-hidden
dan hidden
atribut.
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-hidden
dan hidden
atribut.
Jawaban:
ARIA (Aplikasi Kaya Internet yang Dapat Diakses) mendefinisikan cara untuk membuat konten Web dan aplikasi Web lebih mudah diakses oleh para penyandang cacat.
The hidden
atribut baru dalam HTML5 dan memberitahu browser untuk tidak menampilkan elemen. The aria-hidden
properti 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.
hidden
artinya tersembunyi bagi semua orang. aria-hidden
berarti disembunyikan ke pembaca layar dan alat serupa. Ini berguna untuk komponen yang digunakan murni untuk memformat dan tidak mengandung konten nyata, misalnya.
hidden
Harus mencegah pembaca layar mengakses konten tag.
aria-hidden
itu benar; Namun, Anda tidak mengatakan apa pun hidden
untuk membedakannya aria-hidden
. Sayangnya ini adalah jawaban terbaik. Harap lebih teliti atas jawaban Anda.
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
aria-hidden="true"
masih terlihat di browser, tetapi tidak akan terlihat oleh alat aksesibilitas, seperti pembaca layar.
aria-hidden
digunakan untuk menyembunyikan elemen dari orang yang menggunakan situs web Anda dengan alat aksesibilitas.
Menurut HTML 5.2 :
Ketika ditentukan pada suatu elemen, [
hidden
atribut] 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-hidden
Status] 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-hidden
atribut 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 hidden
atribut). 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.
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 hidden
atribut 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, hidden
lakukan triknya. Namun, jangan gunakan hidden
hanya karena Anda menginginkan efek ini. Tanyakan pada diri Anda apakah hidden
secara semantik benar dulu (lihat di atas). Jika hidden
tidak 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.
Terakhir, ada perbedaan dalam sintaksis antara dua atribut.
hidden
adalah 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-hidden
atribut 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