Atribut inert adalah atribut HTML global yang menyederhanakan cara menghapus dan memulihkan peristiwa input pengguna untuk suatu elemen, termasuk peristiwa fokus dan peristiwa dari teknologi pendukung.
Inert adalah perilaku default dalam elemen dialog, seperti ketika Anda menggunakan showModal untuk membuka dialog bagi pengguna guna membuat pilihan, lalu menutupnya dari layar.
Setelah membuka <dialog>, halaman lainnya menjadi tidak aktif,
misalnya Anda tidak dapat lagi mengklik atau tab ke link.
Anda dapat menggunakan atribut inert untuk mencapai perilaku yang sama pada elemen lain.
Inert berarti kurangnya kemampuan untuk berpindah, jadi saat Anda menandai sesuatu yang tidak aktif, Anda akan menghapus gerakan atau interaksi dari elemen DOM tersebut.
<div>
<label for="button1">Button 1</label>
<button id="button1">I am not inert</button>
</div>
<div inert>
<label for="button2">Button 2</label>
<button id="button2">I am inert</button>
</div>
Di sini, inert telah dideklarasikan pada elemen <div> kedua yang berisi button2,
sehingga semua konten yang ada dalam <div> ini, termasuk tombol dan label, tidak dapat menerima fokus atau diklik.
Atribut inert sangat berguna untuk aksesibilitas,
khususnya untuk mencegah agar fokus tidak terjebak.
Aksesibilitas yang lebih baik
Panduan Aksesibilitas Konten Web memerlukan pengelolaan fokus serta urutan fokus yang masuk akal dan dapat digunakan. Hal ini mencakup visibilitas dan interaktivitas. Sebelumnya, visibilitas dapat disembunyikan dengan aria-hidden="true", tetapi interaktivitas lebih sulit.
inert memberi developer kemampuan untuk menghapus elemen dari urutan tab dan dari hierarki aksesibilitas. Hal ini memungkinkan Anda mengontrol visibilitas dan interaktivitas, serta memungkinkan kemampuan untuk membuat pola yang lebih berguna dan mudah diakses.
Ada dua kasus penggunaan utama untuk menerapkan inert ke elemen guna memungkinkan aksesibilitas yang lebih baik:
- Jika elemen merupakan bagian dari hierarki DOM, tetapi berada di balik layar atau tersembunyi.
- Jika suatu elemen merupakan bagian dari hierarki DOM, namun seharusnya bersifat non-interaktif.
Elemen DOM tersembunyi atau di balik layar
Salah satu masalah aksesibilitas umum adalah elemen seperti panel samping,
yang menambahkan elemen ke DOM yang tidak selalu terlihat oleh pengguna.
Dengan inert, Anda dapat memastikan bahwa saat subelemen panel samping berada di balik layar, pengguna keyboard tidak dapat berinteraksi dengannya secara tidak sengaja.
Elemen DOM noninteraktif
Masalah aksesibilitas umum lainnya adalah ketika desain UI terlihat atau sebagian terlihat, tetapi jelas non-interaktif. Hal ini dapat terjadi selama pemuatan halaman, saat formulir sedang dikirim, atau jika overlay dialog terbuka.
Untuk memberikan pengalaman terbaik bagi pengguna, tunjukkan status UI dan "perangkap" fokus ke bagian halaman yang interaktif.
Perangkap fokus
Jebakan fokus adalah konsep utama aksesibilitas UI yang baik. Anda harus memastikan bahwa fokus pembaca layar berada pada elemen UI interaktif dan mengetahui kapan suatu elemen memblokir interaktivitas. Hal ini juga membantu membatasi pembaca layar jahat agar tidak menjangkau di belakang overlay halaman, atau secara tidak sengaja mengirimkan formulir saat pengiriman pertama masih diproses.
Dengan menggunakan inert, Anda dapat memastikan bahwa satu-satunya konten yang dapat ditemukan yang dapat dijangkau. Hal ini berguna untuk:
- Elemen pemblokir seperti dialog modal, menu pemangkas fokus, atau navigasi samping.
- Carousel dengan item non-aktif.
- Konten formulir yang tidak berlaku (misalnya, memudar dan menonaktifkan kolom "Alamat pengiriman" jika kotak centang "Sama dengan alamat penagihan" telah dicentang).
- Menonaktifkan seluruh UI saat dalam keadaan tidak konsisten.
Menunjukkan elemen inert secara visual
Secara default, tidak ada indikasi visual subtree yang inert. Disarankan agar Anda menandai dengan jelas bagian mana dari DOM yang aktif dan yang tidak aktif.
[inert], [inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}
Tidak semua pengguna dapat melihat semua bagian halaman sekaligus. Misalnya, pengguna pembaca layar, perangkat kecil, atau dengan kaca pembesar, dan bahkan pengguna yang hanya menggunakan jendela yang sangat kecil mungkin tidak dapat melihat bagian aktif halaman, dan mungkin merasa frustrasi jika bagian yang inert tidak jelas inert. Untuk kontrol individu, atribut yang dinonaktifkan mungkin lebih tepat.
Interaksi dan gerakan apa yang diblokir?
Secara default, inert memblokir peristiwa fokus dan klik. Untuk teknologi pendukung, hal ini juga memblokir tab dan visibilitas. Browser juga dapat mengabaikan penelusuran halaman dan pemilihan teks dalam elemen.
Nilai default inert adalah false.