YUMPU Premium müşterisi olarak, WebKiosk'unuzu veya Uygulamanızı kurumsal kimliğinize (CI) tamamen uyarlayabilme seçeneğine sahipsiniz. Bu, yazı tiplerini, renkleri, boşlukları, düğmeleri, gezinmeyi ve daha fazlasını stillendirmek için özel CSS yükleyebilme yeteneğini içerir.
Özelleştirmelerinizin yalnızca markanızı yansıtmasını değil, aynı zamanda tüm kullanıcılar için erişilebilir olmasını sağlamak adına, erişilebilirlik en iyi uygulamalarını takip etmenizi önemle tavsiye ederiz. Aşağıda, tasarım seçimlerinizin güncel erişilebilirlik standartlarına uygunluğunu sağlamaya yardımcı olacak faydalı kılavuzlar ve test araçları bulabilirsiniz.
Özel CSS Kullanılırken Erişilebilirliğin Neden Önemli Olduğu
Özel stillendirme markanızı ifade etmenize yardımcı olsa da, belirli CSS değişiklikleri, engelli kullanıcılar için bilinçdışı olarak şu tür engeller oluşturabilir:
Yetersiz renk kontrastı
Okunması zor yazı tipleri veya çok küçük metin boyutları
Klavye gezinmesi kullanılırken gizlenen veya ulaşılamayan öğeler
Sadece üzerine gelme (hover) ile erişilebilen işlevler
Yakınlaştırıldığında veya mobil cihazlarda düzen sorunları
Tüm özelleştirmelerin, WCAG 2.1 Level AA standartlarına dayalı olarak erişilebilirlik açısından değerlendirilmesini öneririz.
Erişilebilir Stiller İçin Temel Öneriler
Özel tasarımınızı oluştururken göz önünde bulundurmanız gereken önemli unsurlar şunlardır:
Öğe | En İyi Uygulama |
Renkler | Metin ile arka plan arasında yeterli kontrast olduğundan emin olun (en az 4.5:1). |
Yazı tipleri | Okunabilir yazı tipleri kullanın ve 14px'den küçük yazı boyutlarından kaçının. |
Odak Durumları | Tüm etkileşimli öğeler klavye ile erişilebilir olmalı ve net bir şekilde odaklanılabilir olmalıdır. |
Üzerine gelme (hover) efektleri | Kritik işlevlerin fare kullanılmadan da erişilebilir olduğundan emin olun. |
Erişilebilirlik Testi İçin Önerilen Araçlar
Özel CSS'nizin erişilebilirlik standartlarına uygunluğunu kontrol etmek için aşağıdaki ücretsiz araçları kullanabilirsiniz:
WAVE Web Accessibility Evaluation Tool → https://wave.webaim.org/
Kontrastı, yapıyı, alternatif metinleri ve daha fazlasını test eder.Accessible Colors Checker → https://accessible-colors.com/
Metin/arka plan renk kombinasyonlarını kolayca değerlendirin.WebAIM Contrast Checker → https://webaim.org/resources/contrastchecker/
Kontrast oranlarını doğrulamak için basit ve etkilidir.Lighthouse (Chrome DevTools) → Sağ tıkla > “İncele” > “Lighthouse” sekmesi
Otomatik erişilebilirlik raporları oluşturur.axe DevTools (by Deque Systems) → https://www.deque.com/axe/devtools/
Kapsamlı erişilebilirlik testi için tarayıcı uzantısı.
YUMPU Varsayılan Olarak Ne Sağlar
YUMPU, WebKiosk'unuzun ve Uygulamanızın varsayılan yapısının erişilebilirlik göz önünde bulundurularak geliştirildiğinden emin olur. Bu, klavye gezinmesi, anlamsal işaretleme ve ölçeklenebilir düzenler içerir.
Ancak, özel CSS yüklerken, stil ile ilgili ek erişilebilirlik yönlerinden sorumluluğu siz üstlenirsiniz.
Not: Tasarımınızı düzenli olarak test etmenizi önemle öneririz; özellikle yeni içerik yayınladıktan, renkleri ayarladıktan veya büyük düzen değişiklikleri yaptıktan sonra.
Daha Fazla Kaynak