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 di 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 interaktivitasnya 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

Masalah aksesibilitas umum lainnya adalah saat desain UI terlihat atau terlihat sebagian, tetapi jelas tidak interaktif. Misalnya, hal ini dapat terjadi selama pemuatan halaman, saat formulir dikirim, atau jika overlay dialog terbuka.

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

Fokus trapping

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

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

• Elemen pemblokiran 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" saat kotak centang "Sama dengan alamat penagihan" telah 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 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.