Atribut inert

Emma Twersky

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 saat Anda menggunakan showModal untuk membuka dialog bagi pengguna untuk membuat pilihan, lalu menutupnya dari layar. Setelah membuka <dialog>, sisa halaman menjadi inert, misalnya Anda tidak dapat lagi mengklik atau menekan {i>tab<i} untuk menautkan.

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

Inert berarti tidak memiliki kemampuan untuk bergerak, jadi saat Anda menandai sesuatu yang inert, Anda membuang perpindahan 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 terperangkap fokus.

Aksesibilitas yang lebih baik

Panduan Aksesibilitas Konten Web memerlukan pengelolaan fokus serta urutan fokus yang logis 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 bermanfaat dan mudah diakses.

Ada dua kasus penggunaan utama dalam menerapkan inert ke elemen guna memberikan aksesibilitas yang lebih baik:

• Jika elemen adalah bagian dari hierarki DOM, tetapi berada di balik layar atau tersembunyi.
• Jika sebuah elemen adalah bagian dari hierarki DOM, namun seharusnya non-interaktif.

Di luar layar atau elemen DOM tersembunyi

Salah satu kekhawatiran aksesibilitas umum adalah dengan elemen seperti panel samping, yang menambahkan elemen ke DOM yang tidak selalu terlihat oleh pengguna. Dengan inert, Anda dapat memastikan bahwa meskipun sub-elemen panel samping berada di balik 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 "jebakan" fokus ke bagian laman yang interaktif.

Menjebak fokus

Pembentukan fokus adalah konsep utama aksesibilitas UI yang baik. Anda harus memastikan bahwa fokus pembaca layar berada pada elemen UI interaktif dan mengetahui kapan 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:

• Elemen pemblokir seperti dialog modal, menu perangkap fokus, atau navigasi samping.
• Carousel dengan item nonaktif.
• 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 tidak konsisten.

Menunjukkan elemen inert secara visual

Secara default, tidak ada indikasi visual bahwa subpohon sedang inert. Sebaiknya Anda menandai dengan jelas bagian DOM yang aktif dan mana 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 yang memiliki pembesar, dan bahkan pengguna yang hanya menggunakan jendela kecil mungkin tidak dapat melihat bagian aktif halaman, dan mungkin merasa kesal jika bagian inert jelas-jelas tidak tidak aktif. Untuk kontrol individual, atribut yang dinonaktifkan mungkin lebih tepat.

Interaksi dan gerakan apa yang diblokir?

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

Nilai default inert adalah false.