MoreLesson 165Preview gratis
Modal Boxes
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini membahas modal, yaitu lapisan dialog yang muncul di atas halaman untuk meminta perhatian atau input. Modal yang baik memiliki overlay, judul, tombol tutup, serta fokus yang terperangkap di dalam dialog selama terbuka. Elemen dialog bawaan HTML atau implementasi khusus dengan ARIA dapat digunakan.
Poin kunci
- Gunakan role="dialog" dan aria-modal="true" pada modal kustom, serta hubungkan judul dengan aria-labelledby
- Pindahkan fokus ke modal saat dibuka dan kembalikan ke tombol pemicu saat ditutup
- Izinkan penutupan dengan tombol tutup, klik overlay, dan tombol Escape
- Cegah scroll halaman di belakang modal dan jangan menyembunyikan tombol tutup dari keyboard
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.