Membina Windows Modal Boleh Akses dengan Dialog A11y

Modal disokong secara meluas dalam pelayar moden. Mereka boleh digunakan sebagai popup pemberitahuan, sebagai bidang opt-in, atau bahkan untuk tayangan slaid foto.

Anda boleh membina tetingkap ini menggunakan CSS tulen tetapi ini bukan penyelesaian yang paling mudah dicapai. Sebaliknya, semak Dialog A11y, tingkap modal yang berfungsi sepenuhnya yang memberi tumpuan kepada kebolehaksesan terlebih dahulu.

Ia berjalan pada JavaScript vanila dengannya API adat sendiri dan menyokong semua penyemak imbas moden di semua peranti. Anda boleh menyemak demo ini untuk melihat bagaimana ia kelihatan dalam tindakan.

Ia kelihatan seperti tingkap modal biasa. Tetapi, skrip ini menggunakan tanda ARIA untuk menyokong kebolehaksesan moden untuk semua pengguna.

Secara lalai, A11y Dialog juga menyokong skrin sentuh, jadi mengetik mempunyai kesan yang sama seperti mengklik. Anda boleh mengklik atau ketik mana-mana sahaja di luar tetingkap untuk menutupnya, atau pada komputer melanda kunci ESC.

Entah bagaimana, perpustakaan ini agak kecil, hanya 1.2kb, termasuk semua kod CSS dan JS. Ini menjadikannya ringan di atas sepenuhnya boleh diakses.

Anda boleh belajar lebih banyak dengan membaca melalui Repo GitHub dan Dialog A11y mempunyai halaman dokumentasi sendiri, juga. Ini termasuk bahagian pada pemasangan & persediaan untuk pemula yang lengkap. Terdapat juga seksyen yang panjang yang meliputi API DOM untuk menambah butang ke laman anda yang boleh membuka (atau menutup) tetingkap modal.

Jika anda cuba membina laman web yang lebih mudah diakses serius mempertimbangkan menjalankan A11y Dialog dalam projek anda. Awak boleh dapatkan kod sumber dari GitHub atau muat turun dari pengurus pakej seperti npm atau Bower.

Lihat laman utama untuk mengetahui lebih lanjut mengenai persediaan dan ciri JavaScript asas. Perpustakaan ini dilengkapi dengan lebih banyak daripada akses ARIA, jadi itu bernilai ujian jika anda ingin mengembangkan ciri-ciri tingkap modal anda.