Latar Belakang Inert dan aria-modal

Bahkan saat fokus terkunci, konten di belakang modal Anda masih berada di DOM. Pembaca layar dapat masuk ke sana jika Anda tidak mencegahnya.

Atribut inert membuat sebuah elemen dan semua turunannya tidak dapat menerima fokus, tidak dapat diklik, dan dilewati oleh teknologi asistif dalam satu langkah.

Saat modal terbuka, tambahkan inert ke semua yang berada di luarnya. Kini halaman di belakang benar-benar tidak dapat dijangkau oleh siapa pun.

Saat modal ditutup, hapus atribut inert agar halaman kembali interaktif. Jika lupa melakukannya, halaman akan tetap membeku.

dialog bawaan yang dibuka dengan showModal() secara otomatis membuat bagian halaman lainnya tidak aktif, sehingga Anda mendapatkan perlindungan ini tanpa kode tambahan.

Menambahkan aria-modal dengan nilai true memberi tahu teknologi asistif bahwa konten di luar dialog ini tidak tersedia selama dialog terbuka.

Perhatikan: aria-modal hanya memberi informasi kepada pembaca layar. Atribut ini tidak benar-benar memblokir fokus atau klik, jadi Anda tetap membutuhkan inert.

Pola yang tangguh memasangkan inert pada latar belakang dengan aria-modal pada dialog. Yang satu menegakkan batas, sedangkan yang lain mengumumkannya.

Sebelum inert didukung secara luas, para pengembang menambahkan aria-hidden pada latar belakang. Cara ini menyembunyikan konten dari pembaca, tetapi tidak menghentikan fokus papan ketik.

Salah satu bug klasik adalah menerapkan aria-hidden terlalu luas sehingga dialog ikut tercakup. Pastikan modal Anda tetap berada di luar wilayah tersembunyi.

Buka pohon aksesibilitas browser saat modal terbuka. Pastikan halaman di belakangnya menghilang dari pohon tersebut dan hanya dialog yang tersisa. ✅

Anda telah mempelajari cara membuat halaman di belakang menjadi inert dan mendeklarasikan aria-modal, sehingga modal benar-benar menjadi satu-satunya hal yang dapat dijangkau pengguna. 🎯