# Accesibilidad de las páginas alojadas

Las páginas alojadas de inicio de sesión, del portal de cuenta y de correo electrónico de KeenAuth están diseñadas para cumplir WCAG 2.2 nivel AA. Es un objetivo de diseño, no una certificación: lo probamos de forma automática, y esta página indica qué está cubierto y qué todavía no.

## Lo que ofrecen las páginas

- **Etiquetas y errores.** Cada campo tiene un `<label>` visible asociado. Los mensajes de error se anuncian a los lectores de pantalla como alertas.
- **Teclado.** Los controles son elementos de formulario nativos, y el foco se muestra con un contorno visible en el color `color.focus_ring` de su configuración.
- **Idioma y dirección.** Las páginas incluyen los atributos `lang` y `dir` del idioma elegido. El árabe, el persa y el hebreo se muestran de derecha a izquierda. Consulte [Idiomas y escritura de derecha a izquierda](/docs/guides/localization).
- **Pantallas pequeñas.** Las páginas se reorganizan hasta un ancho de viewport de 320 px sin desplazamiento horizontal.
- **Claro y oscuro.** Ambos temas se prueban por separado.
- **Contraseñas.** Las páginas alojadas no bloquean pegar, y los campos incluyen valores de `autocomplete` para que los gestores de contraseñas funcionen.

## Cómo lo probamos

Una suite automatizada abre las páginas alojadas y comprueba, en cada página, en el tema claro y en el oscuro, en cada idioma compatible (30), con anchos de 320 px y 1280 px:

- las reglas de axe-core para los niveles A y AA de WCAG 2.0, 2.1 y 2.2, sin aceptar ninguna infracción;
- que no haya desplazamiento horizontal;
- la dirección de derecha a izquierda cuando un idioma la necesita, y una comparación de capturas de pantalla para el árabe;
- un recorrido solo con teclado en la página de inicio de sesión: Tab llega al campo del identificador y luego al botón Continuar, y Intro envía el formulario.

Cualquier excepción aceptada se documenta con un motivo y caduca en un plazo de 90 días.

### Lo que todavía no está cubierto

- El portal de cuenta, las páginas de error y de cierre de sesión, y los componentes React incrustables todavía no forman parte de la suite automatizada.
- Todavía no se han hecho pruebas manuales con lectores de pantalla (NVDA, VoiceOver).
- Las plantillas de correo electrónico todavía no se han auditado en cuanto a accesibilidad.
- Las comprobaciones automáticas encuentran solo una parte de los posibles problemas. Algunos hallazgos todavía se están corrigiendo.

## Protección del contraste de la marca

Los colores de su marca no pueden hacer que una página alojada resulte ilegible. Al guardar la personalización de marca, KeenAuth comprueba estos pares, por separado para el tema claro y el oscuro:

| Par | Relación mínima |
|---|---|
| Texto sobre fondo | 4.5:1 |
| `color.link` sobre fondo | 4.5:1 |
| `color.primary_contrast` sobre `color.primary` | 4.5:1 |
| Borde del control sobre fondo | 3:1 |
| Anillo de foco sobre fondo | 3:1 |

Un par por debajo de su mínimo se rechaza con `422 brand_contrast_insufficient`. El error indica el campo y sugiere el color más cercano que cumple; la sugerencia mantiene el tono y la croma y modifica solo la luminosidad. Una personalización que no cumple no puede publicarse. Los detalles y el formato del error se describen en [Personalice sus páginas de inicio de sesión](/docs/guides/branding).

El CSS personalizado (plan Startup) puede reducir el contraste, y KeenAuth no lo corrige. Un análisis de vista previa informa de los problemas como advertencias, y la accesibilidad de los cambios hechos con CSS personalizado es responsabilidad suya.

## Relacionado

- [Personalice sus páginas de inicio de sesión](/docs/guides/branding)
- [Idiomas y escritura de derecha a izquierda](/docs/guides/localization)
- [SDK de React](/docs/sdk/react)