Jadikan Modal Mudah Diakses

25 minitLanjutanKebolehcapaian

Popup tetapan ini nampak elok dengan tetikus. Tetapi pengguna pembaca skrin tidak mendengar apa-apa apabila ia dibuka, fokus pengguna papan kekunci tertinggal di belakang latar gelap, dan ✕ ialah <span> yang tidak boleh dicapai dengan Tab. Baiki supaya semua orang boleh menggunakannya.

Keperluan

#settings-modal ada role="dialog" dan aria-modal="true" (<dialog> asli yang dibuka dengan showModal() pun dikira).
Dialog ada nama yang boleh diakses — halakan aria-labelledby kepada tajuk Settings.
Apabila ia dibuka, fokus papan kekunci berpindah ke sesuatu di dalam dialog.
Menekan Escape menutupnya.
Selepas ditutup, fokus kembali ke butang Open settings.
✕ ialah <button> sebenar dengan nama yang boleh diakses yang mengandungi "Close" (cth. aria-label="Close settings"), dan mengkliknya juga menutup dialog.

Kekalkan ini

Kekalkan id settings-modal dan open-settings. Dialog mesti kekal tersembunyi sehingga butang diklik.

Jadikan #settings-modal dialog yang benar-benar mudah diakses: role="dialog", aria-modal="true", dilabel oleh tajuknya, fokus masuk ke dalam apabila ia dibuka, Escape dan butang tutup sebenar menutupnya, dan fokus kembali ke Open settings.

Semakan

Ia diumumkan sebagai dialog modal
Dialog ada nama yang boleh diakses
Membuka dialog memindahkan fokus ke dalamnya
Escape menutup dialog
Fokus kembali ke Open settings
Butang Close sebenar menutupnya

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.