Çarşamba 22 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. A11y İletişim Kutusu ile Erişilebilir Pencere Oluşturun
 A11y İletişim Kutusu ile Erişilebilir Pencere Oluşturun
Arayüz JavaScript

A11y İletişim Kutusu ile Erişilebilir Pencere Oluşturun

Yazar : Bilal UÇAR 19 Temmuz 2017 0 Comment

Modern tarayıcılarda kalıplar yaygın olarak desteklenir. Bunlar, bildirim pop-up’ları, opt-in alanları veya fotoğraf slayt gösterileri için kullanılabilir.

Bu pencereleri saf CSS kullanarak oluşturabilirsiniz, ancak bu en erişilebilir çözüm değildir. Bunun yerine, öncelikle erişilebilirliğe odaklanmayı sağlayan tam işlevli bir mod penceresi olan A11y Dialog‘u kontrol edin.

Kendi özel API’si ile pure JavaScript üzerinde çalışır ve tüm cihazlardaki tüm modern tarayıcıları destekler. Nasıl çalıştığını görmek için bu demoyu inceleyebilirsiniz.


Tipik bir modsal pencere gibi görünür. Ancak, bu komut dosyası tüm kullanıcıların modern erişilebilirliğini desteklemek için ARIA etiketlerini kullanıyor.

Varsayılan olarak, A11y İletişim Kutusu dokunmatik ekranları da destekler, bu nedenle dokunmak tıklama ile aynı etkiye sahiptir. Pencereyi kapatmak için herhangi bir yeri tıklatabilir, herhangi bir yere dokunabilirsiniz veya bir bilgisayarda ESC tuşuna basabilirsiniz.

Her nasılsa, bu kütüphane oldukça küçük, yalnızca 1.2kb, tüm CSS ve JS kodu da dahil olmak üzere. Bu, hafifçe erişilebilir olmasını sağlar.

GitHub repo‘yu okuyarak daha fazla bilgi edinebilirsiniz ve A11y Dialog’un da kendi dokümantasyon sayfası mevcuttur. Bu, yeni başlayanlar için kurulum ile ilgili bir bölümü içerir. DOM API’sını sayfanıza eklemek için kalıcı pencereyi açan (veya kapatan) düğmeleri kapsayan uzun bir bölüm de var.

Daha erişilebilir web siteleri oluşturmak istiyorsanız, projelerinizde A11y Dialog’u kullanmayı düşünebilirsiniz. Kaynak kodu GitHub’dan alabilir veya npm veya Bower gibi bir paket yöneticisinden indirebilirsiniz.


Kurulum ve temel JavaScript özellikleri hakkında daha fazla bilgi edinmek için ana sayfaya göz atın. Bu kütüphane, ARIA erişilebilirliğinden çok daha fazlasıyla birlikte gelir; bu nedenle, kalıcı pencerelerinizin özelliklerini genişletmek istiyorsanız test etmeye değerdir.

Bu makalede sitelerde açılan küçük pencelerin açılmasına yarayan A11y’den bahsettik. Bu konu hakkındaki düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.

Etiketler: girişte açılan küçük pencere nasıl yapılır siteye girince açılan küçük pencere nasıl yapılır
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.