WCAG 2.2 AA: cómo lo aplicamos en el Starter

Resumen de las prácticas de accesibilidad incluidas por defecto y cómo no romperlas.

Actualizado el min de lectura

Contraste

Todos los colores cumplen 4.5:1 mínimo para texto normal y 3:1 para texto grande. Si cambias colores del theme, revalida con el widget de accesibilidad.

Navegación por teclado

Tab funciona en todos los componentes interactivos. Arrow keys + Home/End en widgets compuestos (carruseles, tabs, accordions).

Focus visible

Anillos de foco visibles con focus:ring de Tailwind. Nunca uses outline: none sin reemplazarlo por algo equivalente.

ARIA correcto

role, aria-label, aria-controls, aria-expanded donde corresponde. No es "más ARIA = mejor": muchas veces el HTML semántico ya es suficiente.

Movimiento reducido

Todas las animaciones respetan prefers-reduced-motion: reduce. Si agregas animaciones custom, usa la misma media query.

¿Te fue útil este artículo?

✓ ¡Gracias por tu feedback!

Lamentamos que no haya sido lo que buscabas. ¿Quieres contactarnos directamente?

Contactar soporte
Tags: #wcag

¿Aún necesitas ayuda?

Si no encontraste lo que buscabas, contáctanos y te ayudaremos lo antes posible.

Contactar soporte