# Accessibilité des pages hébergées

Les pages de connexion hébergées, le portail de compte et les pages d'e-mail de KeenAuth sont conçues pour respecter le niveau AA des WCAG 2.2. Il s'agit d'un objectif de conception, et non d'une certification : nous le testons automatiquement, et cette page indique ce qui est couvert et ce qui ne l'est pas encore.

## Ce que fournissent les pages

- **Libellés et erreurs.** Chaque champ dispose d'un `<label>` visible qui lui est associé. Les messages d'erreur sont annoncés aux lecteurs d'écran sous forme d'alertes.
- **Clavier.** Les contrôles sont des éléments de formulaire natifs, et le focus est indiqué par un contour visible de la couleur `color.focus_ring` de votre configuration.
- **Langue et sens de lecture.** Les pages portent les attributs `lang` et `dir` de la langue choisie. L'arabe, le persan et l'hébreu sont mis en page de droite à gauche. Voir [Langues et droite-à-gauche](/docs/guides/localization).
- **Petits écrans.** Les pages se réorganisent jusqu'à une fenêtre de 320 px de large sans défilement horizontal.
- **Clair et sombre.** Les deux thèmes sont testés séparément.
- **Mots de passe.** Les pages hébergées ne bloquent pas le collage, et les champs portent des valeurs `autocomplete` pour que les gestionnaires de mots de passe fonctionnent.

## Comment nous testons

Une suite automatisée ouvre les pages hébergées et vérifie, pour chaque page, dans le thème clair et dans le thème sombre, dans chaque langue prise en charge (30), à des largeurs de 320 px et de 1280 px :

- les règles axe-core pour les niveaux A et AA des WCAG 2.0, 2.1 et 2.2, sans aucune violation acceptée ;
- l'absence de défilement horizontal ;
- le sens de lecture de droite à gauche lorsqu'une langue l'exige, et une comparaison de captures d'écran pour l'arabe ;
- un parcours uniquement au clavier sur la page de connexion : la touche Tab atteint le champ d'identifiant puis le bouton Continuer, et Entrée envoie le formulaire.

Toute exception acceptée est consignée avec une justification et expire sous 90 jours.

### Ce qui n'est pas encore couvert

- Le portail de compte, les pages d'erreur et de déconnexion ainsi que les composants React intégrables ne font pas encore partie de la suite automatisée.
- Les tests manuels avec des lecteurs d'écran (NVDA, VoiceOver) n'ont pas encore été réalisés.
- Les modèles d'e-mail n'ont pas encore fait l'objet d'un audit d'accessibilité.
- Les contrôles automatisés ne détectent qu'une partie des problèmes possibles. Certaines anomalies sont encore en cours de correction.

## Protection du contraste de la marque

Les couleurs de votre marque ne peuvent pas rendre une page hébergée illisible. Lorsque vous enregistrez l'identité visuelle, KeenAuth vérifie ces paires, pour le thème clair et le thème sombre séparément :

| Paire | Ratio minimal |
|---|---|
| Texte sur fond | 4,5:1 |
| `color.link` sur fond | 4,5:1 |
| `color.primary_contrast` sur `color.primary` | 4,5:1 |
| Bordure de contrôle sur fond | 3:1 |
| Contour de focus sur fond | 3:1 |

Une paire en dessous de son minimum est refusée avec `422 brand_contrast_insufficient`. L'erreur indique le champ concerné et propose la couleur la plus proche qui respecte le seuil ; la suggestion conserve la teinte et la saturation et ne modifie que la luminosité. Une identité visuelle en échec ne peut pas être publiée. Les détails et le format de l'erreur figurent dans [Personnaliser vos pages de connexion](/docs/guides/branding).

Le CSS personnalisé (offre Startup) peut réduire le contraste, et KeenAuth ne le corrige pas. Une analyse de prévisualisation signale les problèmes sous forme d'avertissements, et l'accessibilité des modifications apportées par CSS personnalisé relève de votre responsabilité.

## Voir aussi

- [Personnaliser vos pages de connexion](/docs/guides/branding)
- [Langues et droite-à-gauche](/docs/guides/localization)
- [SDK React](/docs/sdk/react)