A11y İletişim Kutusuyla Erişilebilir Modal Pencereler Oluşturun

Fiiller Modern tarayıcılarda yaygın olarak desteklenmektedir. Olarak kullanılabilirler bildirim açılır pencereleri, gibi katılım alanları, hatta fotoğraf slayt gösterileri.

Bu pencereleri kullanarak oluşturabilirsiniz. saf CSS ama bu en erişilebilir çözüm değil. Bunun yerine, kontrol edin A11y İletişim Kutusu, odağı yerleştiren tamamen işleyen bir kalıcı pencere önce erişilebilirlik.

Çalışır vanilya JavaScript onunla kendi özel API'si ve tüm cihazlardaki tüm modern tarayıcıları destekler. Kontrol edebilirsiniz bu demo nasıl göründüğünü görmek için.

Tipik bir model penceresine çok benziyor. Ancak, bu komut dosyası ARIA etiketlerini kullanır tüm kullanıcılar için modern erişilebilirliği desteklemek.

Varsayılan olarak, A11y Dialog ayrıca dokunmatik ekranları destekler, bu yüzden dokunarak tıklatma ile aynı etkiye sahiptir. Kapatmak için pencerenin dışındaki herhangi bir yere tıklayabilir veya dokunabilirsiniz ya da bir bilgisayarda ESC tuşuna basabilirsiniz..

Her nasılsa, bu kütüphane oldukça küçük., sadece 1.2 kb, tüm CSS ve JS kodları dahil. Bu, tamamen erişilebilir bir konumda hafif olmasını sağlar.

Okuyarak daha fazla bilgi edinebilirsiniz GitHub deposu ve A11y Dialog’un kendi dokümantasyon sayfası, çok. Bu bir bölüm içerir kurulum ve kurulum tam yeni başlayanlar için. Ayrıca kapsayan uzun bir bölüm var. Düğme eklemek için DOM API Modal pencereyi açabilen (veya kapatan) sayfanıza.

Deniyorsan daha erişilebilir web siteleri oluşturun projelerinizde A11y Dialog'u çalıştırmayı ciddiye alın. Yapabilirsin kaynak kodunu al GitHub’dan veya npm veya Bower gibi bir paket yöneticisinden indirin..

Kurulum ve temel JavaScript özellikleri hakkında daha fazla bilgi edinmek için ana sayfaya bakın. Bu kütüphane ile birlikte geliyor ARIA erişilebilirliğinden çok daha fazlası, modal pencerelerinizin özelliklerini genişletmek istiyorsanız test etmeye değer.