Membangun Modal Modal yang Dapat Diakses dengan Dialog A11y

Modals secara luas didukung di browser modern. Mereka dapat digunakan sebagai munculan pemberitahuan, sebagai bidang keikutsertaan, atau bahkan untuk tayangan slide foto.

Anda dapat membangun windows ini menggunakan CSS murni tetapi ini bukan solusi yang paling mudah diakses. Sebagai gantinya, periksa Dialog A11y, jendela modal yang berfungsi penuh yang menempatkan fokus aksesibilitas terlebih dahulu.

Ini berjalan terus JavaScript vanila dengan itu API khusus sendiri dan mendukung semua browser modern di semua perangkat. Anda bisa melihatnya demo ini untuk melihat tampilannya saat beraksi.

Itu muncul seperti jendela modal yang khas. Tapi, skrip ini menggunakan tag ARIA untuk mendukung aksesibilitas modern untuk semua pengguna.

Secara default, Dialog A11y juga mendukung layar sentuh, jadi mengetuk memiliki efek yang sama dengan mengklik. Anda dapat mengklik atau mengetuk di mana saja di luar jendela untuk menutupnya, atau di komputer tekan tombol ESC.

Entah bagaimana, perpustakaan ini cukup kecil, hanya 1.2kb, termasuk semua kode CSS dan JS. Ini membuatnya ringan di atas sepenuhnya dapat diakses.

Anda dapat mempelajari lebih lanjut dengan membaca Repo GitHub dan Dialog A11y memiliki halaman dokumentasi sendiri, terlalu. Ini termasuk bagian aktif instalasi & pengaturan untuk pemula yang lengkap. Ada juga bagian panjang yang mencakup API DOM untuk menambahkan tombol ke halaman Anda yang dapat membuka (atau menutup) jendela modal.

Jika Anda mencoba membangun situs web yang lebih mudah diakses serius mempertimbangkan menjalankan Dialog A11y di proyek Anda. Kamu bisa dapatkan kode sumbernya dari GitHub atau mengunduhnya dari pengelola paket seperti npm atau Bower.

Lihatlah halaman utama untuk mempelajari lebih lanjut tentang pengaturan dan fitur-fitur dasar JavaScript. Perpustakaan ini dilengkapi dengan lebih banyak dari aksesibilitas ARIA, jadi ada baiknya menguji jika Anda ingin memperluas fitur modal windows Anda.