Fundamentos
Accesibilidad
Objetivo: WCAG 2.2 AA en web y app. La accesibilidad está dentro de los componentes; al usarlos correctamente se hereda.
Lista de comprobación#
Contraste
Texto y acciones ≥ 4,5:1 (AA). El coral de acción es coral-600 (4,57:1 con blanco); coral-500 solo es decorativo.
Foco visible
Todos los elementos interactivos muestran el doble anillo de foco con teclado (focus-visible).
Objetivos táctiles
Mínimo 44 × 44 px en la vista app. Los iconos pequeños crecen su área con padding.
Nombres accesibles
IconButton exige la prop label; los iconos decorativos llevan aria-hidden.
Imágenes
La primera foto de cada carrusel tiene alt con el nombre del lugar; las siguientes son decorativas.
Movimiento reducido
Con prefers-reduced-motion todas las animaciones duran 1 ms.
Estados no solo por color
Errores con icono + texto; seleccionado con borde y peso, no solo color.
Teclado
Modales con foco atrapado y Escape; menús y pestañas navegables con flechas (Radix).
Idioma
lang="es" en la raíz; fechas y números con toLocaleString("es-ES").
Al revisar una pantalla#
Prueba con teclado y con lector de pantalla