agent-files

Imported from janpereira-dev/skillsCurate (.agents/skills/accesibilidad-web/agent-files/AGENTS.md). Install upstream with npx skills add janpereira-dev/skillsCurate --skill agent-files. Copyright stays with the author.

Reglas de formato

Arquitectura

• Cumplir estandares WCAG 2.2 nivel AA como minimo
• Aplicar patrones WAI-ARIA en todos los componentes interactivos custom
• Usar elementos HTML nativos siempre que sea posible antes de recurrir a ARIA
• Gestionar foco correctamente en navegacion SPA (router events de Angular)
• Implementar skip navigation link en la aplicacion

Estilo

• Sigue convenciones de nomenclatura Angular (camelCase, PascalCase)
• TypeScript estricto con interfaces para modelos de datos
• Usar aria-* attributes solo cuando el HTML nativo no cubra la semantica
• Contraste minimo 4.5:1 para texto normal, 3:1 para texto grande (>= 18pt o 14pt bold)

Verificacion

• Ejecutar AXE en cada componente interactivo
• Validar navegacion completa por teclado sin raton
• Probar con lectores de pantalla (NVDA, VoiceOver)
• Verificar interfaz usable al 200% de zoom
• Integrar axe checks en pipeline CI/CD
• Bloquear merge si hay violaciones criticas de accesibilidad

Implementacion (pasos)

1. Auditar componentes existentes con AXE y Lighthouse
2. Identificar anti-patrones: <div> como boton, imagenes sin alt, formularios sin labels, color como unico indicador, foco invisible, tabindex > 0, ARIA redundante, contenido dinamico sin anuncio, autoplay, contraste insuficiente
3. Corregir anti-patrones detectados usando elementos HTML nativos
4. Implementar patrones WAI-ARIA para modales (role="dialog", aria-modal, trap de foco), tabs (role="tablist/tab/tabpanel"), menus (role="menu/menuitem", aria-expanded), alerts (role="alert", aria-live), formularios (aria-describedby, aria-required, aria-invalid)
5. Configurar title dinamico de pagina con Angular Title service
6. Implementar gestion de foco en navegacion SPA
7. Agregar tests automatizados de accesibilidad (axe-core con Jasmine/Jest, Playwright a11y assertions)
8. Integrar validacion de accesibilidad en CI/CD
9. Ejecutar checklist Angular especifico de accesibilidad

Errores / Restricciones

• No usar <div> ni <span> como elementos interactivos sin roles y keyboard handlers
• No usar tabindex con valores mayores a 0
• No agregar roles ARIA a elementos HTML que ya tienen la semantica correcta
• No usar autoplay en audio/video sin controles de pausa/stop
• No depender exclusivamente del color para comunicar informacion
• No omitir alt en imagenes (usar alt="" solo para imagenes decorativas)
• No usar any en TypeScript