# 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_ring` renginizde görünür bir çerçeveyle gösterilir.
- **Dil ve yön.** Sayfalar seçilen dilin `lang` ve `dir` özniteliklerini taşır. Arapça, Farsça ve İbranice sağdan sola yerleştirilir. Bkz. [Diller ve sağdan sola yazım](/docs/guides/localization).
- **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 `autocomplete` değ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](/docs/guides/branding) 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.

## İlgili

- [Giriş sayfalarınızı markalaştırın](/docs/guides/branding)
- [Diller ve sağdan sola yazım](/docs/guides/localization)
- [React SDK](/docs/sdk/react)