Atribut inert

Emma Twersky

Atribut inert adalah atribut HTML global yang menyederhanakan cara menghapus dan memulihkan peristiwa input pengguna untuk elemen, termasuk peristiwa fokus dan peristiwa dari teknologi pendukung.

Inert adalah perilaku default dalam elemen dialog, seperti saat Anda menggunakan showModal untuk membuka dialog bagi pengguna untuk membuat pilihan, lalu menutupnya dari layar. Setelah membuka <dialog>, bagian halaman lainnya menjadi tidak aktif, misalnya, Anda tidak dapat lagi mengklik atau menggunakan tab untuk membuka link.

Anda dapat menggunakan atribut inert untuk mencapai perilaku yang sama pada elemen lain.

Inert berarti tidak memiliki kemampuan untuk bergerak, sehingga saat menandai sesuatu yang inert, 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 terdapat dalam <div> ini, termasuk tombol dan label, tidak dapat menerima fokus atau diklik.

Atribut inert sangat berguna untuk aksesibilitas, terutama untuk mencegah fokus terjebak.

Aksesibilitas yang lebih baik

Panduan Aksesibilitas Konten Web mewajibkan pengelolaan fokus dan 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 mudah digunakan dan diakses.

Ada dua kasus penggunaan utama untuk menerapkan inert ke elemen guna memungkinkan aksesibilitas yang lebih baik:

• Saat elemen merupakan bagian dari hierarki DOM, tetapi berada di luar layar atau disembunyikan.
• Saat elemen merupakan bagian dari hierarki DOM, tetapi harus non-interaktif.

Elemen DOM yang tidak ditampilkan atau tersembunyi

Salah satu masalah aksesibilitas yang umum adalah pada elemen seperti panel samping, yang menambahkan elemen ke DOM yang tidak selalu terlihat oleh pengguna. Dengan inert, Anda dapat memastikan bahwa saat sub-elemen panel samping berada di luar layar, pengguna keyboard tidak dapat berinteraksi dengannya secara tidak sengaja.

Elemen DOM non-interaktif

Kekhawatiran aksesibilitas umum lainnya adalah ketika desain UI terlihat atau sebagian terlihat, tetapi jelas non-interaktif. Hal ini dapat terjadi selama pemuatan halaman, saat formulir dikirimkan, atau jika overlay dialog terbuka, misalnya.

Untuk memberikan pengalaman terbaik bagi pengguna, tunjukkan status UI dan "perangkap" fokus ke bagian halaman yang interaktif.

Fokus trapping

Focus trapping adalah konsep inti dari aksesibilitas UI yang baik. Anda harus memastikan bahwa fokus pembaca layar berada pada elemen UI interaktif dan mengetahui saat elemen memblokir interaktivitas. Tindakan ini juga membantu membatasi pembaca layar yang tidak bertanggung jawab agar tidak mendekati overlay halaman, atau tidak sengaja mengirimkan formulir saat pengiriman pertama masih diproses.

Dengan menggunakan inert, Anda dapat memastikan bahwa satu-satunya konten yang dapat ditemukan dapat dijangkau. Hal ini berguna untuk:

• Memblokir elemen seperti dialog modal, menu fokus-trapping, atau navigasi samping.
• Carousel dengan item yang tidak aktif.
• Konten formulir yang tidak berlaku (misalnya, memudar dan menonaktifkan kolom "Alamat pengiriman" jika kotak "Sama dengan alamat penagihan" dicentang).
• Menonaktifkan seluruh UI saat dalam status yang tidak konsisten.

Menunjukkan elemen inert secara visual

Secara default, tidak ada indikasi visual bahwa sub-pohon tidak aktif. Sebaiknya Anda menandai dengan jelas bagian 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 tidak aktif tidak jelas tidak aktif. Untuk setiap kontrol, atribut dinonaktifkan mungkin lebih sesuai.

Interaksi dan gerakan apa yang diblokir?

Secara default, inert akan memblokir peristiwa fokus dan klik. Untuk teknologi pendukung, hal ini juga memblokir tab dan visibilitas. Browser juga dapat mengabaikan penelusuran halaman dan pemilihan teks di elemen.

Nilai default inert adalah false.