# Barrierefreiheit gehosteter Seiten

Die gehostete Anmeldung, das Konto-Portal und die E-Mail-Seiten von KeenAuth sind so gestaltet, dass sie WCAG 2.2 Stufe AA erfüllen. Dies ist ein Gestaltungsziel und keine Zertifizierung: Wir testen es automatisiert, und diese Seite beschreibt, was abgedeckt ist und was noch nicht.

## Was die Seiten bieten

- **Beschriftungen und Fehler.** Jedes Eingabefeld hat ein sichtbares `<label>`, das ihm zugeordnet ist. Fehlermeldungen werden Screenreadern als Warnungen angekündigt.
- **Tastatur.** Die Bedienelemente sind native Formularelemente, und der Fokus wird durch einen sichtbaren Rahmen in der Farbe `color.focus_ring` angezeigt.
- **Sprache und Schreibrichtung.** Die Seiten tragen die Attribute `lang` und `dir` der gewählten Sprache. Arabisch, Persisch und Hebräisch werden von rechts nach links dargestellt. Siehe [Sprachen und Rechts-nach-links](/docs/guides/localization).
- **Kleine Bildschirme.** Die Seiten passen sich bis zu einer Ansichtsbreite von 320 px an, ohne horizontales Scrollen.
- **Hell und dunkel.** Beide Designs werden getrennt getestet.
- **Passwörter.** Die gehosteten Seiten blockieren das Einfügen nicht, und die Felder tragen `autocomplete`-Werte, damit Passwort-Manager funktionieren.

## So testen wir

Eine automatisierte Testsuite öffnet die gehosteten Seiten und prüft für jede Seite im hellen und im dunklen Design, in jeder unterstützten Sprache (30) und bei Breiten von 320 px und 1280 px:

- die axe-core-Regeln für WCAG 2.0, 2.1 und 2.2 der Stufen A und AA, wobei keine Verstöße akzeptiert werden;
- kein horizontales Scrollen;
- Schreibrichtung von rechts nach links, wo eine Sprache dies erfordert, sowie ein Screenshot-Vergleich für Arabisch;
- ein Pfad nur mit der Tastatur auf der Anmeldeseite: Tab erreicht das Feld für die Kennung und danach die Schaltfläche Weiter, und Enter sendet das Formular ab.

Jede akzeptierte Ausnahme wird mit einer Begründung dokumentiert und läuft innerhalb von 90 Tagen ab.

### Was noch nicht abgedeckt ist

- Das Konto-Portal, die Fehler- und Abmeldeseiten sowie die einbettbaren React-Komponenten sind noch nicht Teil der automatisierten Testsuite.
- Manuelle Tests mit Screenreadern (NVDA, VoiceOver) wurden noch nicht durchgeführt.
- E-Mail-Vorlagen wurden noch nicht auf Barrierefreiheit geprüft.
- Automatisierte Prüfungen finden nur einen Teil der möglichen Probleme. Einige Befunde werden noch behoben.

## Schutz des Markenkontrasts

Ihre Markenfarben können eine gehostete Seite nicht unlesbar machen. Beim Speichern des Brandings prüft KeenAuth diese Paare, getrennt für das helle und das dunkle Design:

| Paar | Mindestverhältnis |
|---|---|
| Text auf Hintergrund | 4,5:1 |
| `color.link` auf Hintergrund | 4,5:1 |
| `color.primary_contrast` auf `color.primary` | 4,5:1 |
| Rahmen eines Bedienelements auf Hintergrund | 3:1 |
| Fokusrahmen auf Hintergrund | 3:1 |

Ein Paar unterhalb seines Mindestwerts wird mit `422 brand_contrast_insufficient` abgelehnt. Der Fehler nennt das Feld und schlägt die nächstgelegene Farbe vor, die besteht; der Vorschlag behält Farbton und Chroma bei und verändert nur die Helligkeit. Ein fehlgeschlagenes Branding kann nicht veröffentlicht werden. Details und das Fehlerformat finden Sie unter [Anmeldeseiten mit Ihrer Marke gestalten](/docs/guides/branding).

Benutzerdefiniertes CSS (Startup-Tarif) kann den Kontrast verringern, und KeenAuth korrigiert dies nicht. Eine Vorschau-Prüfung meldet Probleme als Warnungen, und die Barrierefreiheit von Änderungen mit benutzerdefiniertem CSS liegt in Ihrer Verantwortung.

## Verwandte Themen

- [Anmeldeseiten mit Ihrer Marke gestalten](/docs/guides/branding)
- [Sprachen und Rechts-nach-links](/docs/guides/localization)
- [React SDK](/docs/sdk/react)