Fundamentos

Accesibilidad

Los componentes hacen la parte difícil. Esto es lo que obtienes, cómo se prueba, y lo que todavía te toca a ti.

Teclado

Cada control funciona con el teclado, con las teclas que se esperan de los patrones ARIA. Los anillos de foco solo aparecen con foco de teclado.

Lectores de pantalla

Roles, nombres, estados y descripciones en cada componente, según los patrones de WAI-ARIA. Las etiquetas, el texto de ayuda y los errores están enlazados a sus campos, y los cambios se anuncian en regiones live.

Contraste

Los tokens de texto pasan WCAG 2.2 AA sobre las superficies para las que están pensados, en oscuro y claro. El texto tenue es solo para detalles secundarios.

Movimiento

Las animaciones respetan prefers-reduced-motion. Nada parpadea.

Táctil y puntero

Los controles miden al menos 32 px, de 40 a 48 px por defecto. Los estados de presión funcionan igual con mouse, dedo y lápiz.

Internacionalización

Diseños de derecha a izquierda, formatos de número y fecha para cualquier idioma y región, y las etiquetas propias del kit en inglés y español (agrega más con strings de ThemeProvider).

Cómo se prueba

Pruebas unitarias con Testing Library para cada componente: roles, nombres, teclado, estados.
axe en cada componente, en estados válidos e inválidos.
Pruebas de navegador sobre cada página de la documentación en oscuro y claro: sin errores en consola, y axe otra vez con los colores reales para el contraste.

Lo que todavía te toca

Escribe etiquetas, textos de enlace y mensajes de error reales.
Dale a cada página un solo h1 y un orden de títulos lógico.
Nombra los botones de solo ícono con aria-label (los tipos lo exigen).
Revisa el contraste cuando cambies los tokens; el Contrast Checker de Fun Lab ayuda.

Teclas que funcionan en todas partes

Teclas	Qué hacen
`Tab` / `Shift+Tab`	Pasa entre controles; los widgets compuestos (pestañas, menús, grids, barras de herramientas) son una sola parada
`Arrow keys`	Se mueven dentro de un widget compuesto: pestañas, menús, grupos de radios, listas, grids, sliders
`Home` / `End`	Primer o último elemento, o el mínimo o máximo de un slider
`Enter` / `Space`	Pulsa un botón, marca una casilla o un switch, elige una opción
`Escape`	Cierra la capa, el menú o el popover de arriba y devuelve el foco a lo que lo abrió
`Type ahead`	Salta a una opción escribiendo sus primeras letras en menús, selects y listas

Respetar las preferencias

El movimiento reducido y el mayor contraste siguen la configuración del sistema. Pruébalos en este panel.

Movimiento reducidoAlto contraste

Pendiente

Texto secundario, en el nivel atenuado.

Más allá de AA

Cada página de la documentación también se prueba con contraste reforzado (AAA), movimiento reducido y áreas táctiles de 24 px.
El estado nunca se dice solo con color: lo acompañan íconos y palabras.
Las regiones vivas anuncian lo que cambia sin mover el foco: toasts, conteos, subidas, filtros, tareas de una lista.
Los gráficos tienen un resumen en texto y un botón para ver la tabla de datos.