WCAG y contratos

Accesibilidad incorporada al componente

Ally ayuda a prevenir errores frecuentes mediante HTML semántico, foco visible, teclado, estados perceptibles y reglas automatizadas. No sustituye pruebas con usuarios ni una auditoría experta.

HTML semántico primero

Landmarks

Estructura

Usa header, nav, main, aside y footer según el propósito.

Headings

Jerarquía

Mantén niveles lógicos y un heading que nombre cada sección identificable.

Controles

Elementos nativos

Usa botones para acciones, enlaces para destinos y labels asociados a campos.

Teclado y foco

Contrato del modal: Tab y Shift+Tab permanecen dentro del diálogo, Escape cierra y el foco retorna al disparador.

Tecla	Comportamiento esperado
`Tab`	Avanza por controles operables en orden lógico.
`Shift` + `Tab`	Retrocede sin saltos inesperados.
`Enter` / `Space`	Activa botones y controles según su patrón.
`Escape`	Cierra overlays, dropdowns, popovers y diálogos.
`Flechas`	Navegan tabs, acordeones, menús, listas y calendarios cuando aplica.

Cada campo tiene un label visible o un nombre accesible equivalente.
Los errores se conectan mediante aria-describedby.
El estado no depende exclusivamente del color.
Los campos obligatorios se anuncian y validan de forma clara.

Color, contraste y temas

El sistema visual incluye temas claro, oscuro y alto contraste. Ally Accessible Color Engine puede generar todas las paletas desde un único color primario y ajusta los tokens funcionales para mantener como mínimo 4.5:1 en texto normal y 3:1 en controles, gráficos, bordes funcionales y foco.

El color nunca es la única señal: los estados mantienen texto, estructura, iconografía o etiquetas además del tono. Abrir generador de color accesible.

Correcto Revisión manual Error Información

ARIA solo cuando es necesaria

Primera regla de ARIA: no reemplaces un elemento HTML nativo por un contenedor genérico con roles si existe una opción semántica equivalente.

Ally administra estados como aria-expanded, aria-selected, aria-current, aria-live y relaciones mediante IDs en componentes complejos.