Barındırılan sayfaların erişilebilirliği
KeenAuth'un barındırılan giriş, hesap portalı ve e-posta sayfaları WCAG 2.2 düzey AA'yı karşılayacak şekilde tasarlanmıştır. Bu bir tasarım hedefidir, bir sertifika değildir: bunu otomatik olarak test ediyoruz ve bu sayfa neyin kapsandığını ve neyin henüz kapsanmadığını anlatıyor.
Sayfaların sunduğu özellikler
- Etiketler ve hatalar. Her girişin kendisine bağlı görünür bir
<label>vardır. Hata iletileri ekran okuyucularına uyarı olarak duyurulur. - Klavye. Denetimler yerel form öğeleridir ve odak,
color.focus_ringrenginizde görünür bir çerçeveyle gösterilir. - Dil ve yön. Sayfalar seçilen dilin
langvedirözniteliklerini taşır. Arapça, Farsça ve İbranice sağdan sola yerleştirilir. Bkz. Diller ve sağdan sola yazım. - Küçük ekranlar. Sayfalar yatay kaydırma olmadan 320 px genişliğe kadar yeniden akar.
- Açık ve koyu. Her iki tema ayrı ayrı test edilir.
- Parolalar. Barındırılan sayfalar yapıştırmayı engellemez ve alanlar, parola yöneticilerinin çalışması için
autocompletedeğerleri taşır.
Nasıl test ediyoruz
Otomatik bir paket barındırılan sayfaları açar ve her sayfa için açık ve koyu temada, desteklenen her dilde (30), 320 px ve 1280 px genişliklerde şunları denetler:
- WCAG 2.0, 2.1 ve 2.2 düzey A ve AA için axe-core kuralları, hiçbir ihlal kabul edilmeden;
- yatay kaydırma olmaması;
- bir dilin gerektirdiği yerde sağdan sola yön ve Arapça için ekran görüntüsü karşılaştırması;
- yalnızca klavyeyle giriş sayfasında bir yol: Tab tuşu tanımlayıcı alanına ve ardından Devam düğmesine ulaşır, Enter gönderir.
Kabul edilen her istisna bir gerekçeyle yazılır ve 90 gün içinde sona erer.
Henüz kapsanmayanlar
- Hesap portalı, hata ve çıkış sayfaları ile yerleştirilebilir React bileşenleri henüz otomatik paketin parçası değil.
- Ekran okuyucularıyla (NVDA, VoiceOver) manuel test henüz yapılmadı.
- E-posta şablonları henüz erişilebilirlik açısından denetlenmedi.
- Otomatik denetimler olası sorunların yalnızca bir kısmını bulur. Bazı bulgular hâlâ düzeltiliyor.
Marka kontrast koruması
Marka renkleriniz barındırılan bir sayfayı okunamaz hale getiremez. Markayı kaydettiğinizde KeenAuth bu çiftleri açık ve koyu tema için ayrı ayrı denetler:
| Çift | Asgari oran |
|---|---|
| Metin / arka plan | 4,5:1 |
color.link / arka plan |
4,5:1 |
color.primary_contrast / color.primary |
4,5:1 |
| Denetim kenarlığı / arka plan | 3:1 |
| Odak çerçevesi / arka plan | 3:1 |
Asgari değerin altındaki bir çift 422 brand_contrast_insufficient ile reddedilir. Hata alanı adlandırır ve geçen en yakın rengi önerir; öneri tonu ve kromayı korur, yalnızca parlaklığı değiştirir. Başarısız olan bir marka yayımlanamaz. Ayrıntılar ve hata biçimi Giriş sayfalarınızı markalaştırın sayfasındadır.
Özel CSS (Startup planı) kontrastı düşürebilir; KeenAuth bunu düzeltmez. Önizleme taraması sorunları uyarı olarak bildirir ve özel CSS ile yapılan değişikliklerin erişilebilirliği sizin sorumluluğunuzdadır.