peterruiter/claude-build-framework

Evaluación de accesibilidad completa hasta WCAG 2.2 AA - axe-core mediante Playwright sobre cada página principal en modo claro y oscuro a 1440/390 (y 320 para reflow), comprobaciones de enlace de salto, un h1, idioma, foco visible y no oscurecido, objetivos de 24px y desplazamiento lateral, un script de teclado para diálogos/drawers/pestañas, verificaciones manuales (espaciado de texto, zoom, alternativas de arrastre, autenticación accesible), pruebas de contrato para componentes compartidos y contraste de temas, correcciones, limitaciones conocidas con razones y una página de declaración de accesibilidad. Utilizar cuando el usuario solicite una "evaluación de accesibilidad", "WCAG", "auditoría a11y", "lector de pantalla", o antes del primer lanzamiento público.

¿Qué es claude-build-framework?

Esta habilidad automatiza una auditoría integral de accesibilidad web basada en WCAG 2.2 AA, combinando herramientas como axe-core y Playwright para analizar todas las páginas principales de una aplicación en múltiples tamaños de ventana (1440px, 390px y 320px) y modos de color (claro y oscuro). Realiza comprobaciones programáticas (contraste, etiquetas ARIA, estructura de encabezados, enlaces de salto) y manuales (espaciado de texto, zoom al 200%, alternativas para arrastrar, autenticación accesible). Además, ejecuta un script de teclado para validar patrones de interacción como diálogos, pestañas y listas con teclas de flecha. Los resultados se registran en un archivo JSON con severidades, se corrigen problemas en componentes compartidos y se documentan limitaciones conocidas en una página de declaración de accesibilidad. Está diseñada para desarrolladores que necesitan garantizar el cumplimiento de WCAG 2.2 AA antes de lanzamientos públicos o cuando los usuarios solicitan auditorías de accesibilidad.

Compatible con✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/peterruiter/claude-build-framework/tree/HEAD/skills/a11y-pass

Documentación

Evaluación de accesibilidad

Referencia: ${CLAUDE_PLUGIN_ROOT}/docs/accessibility.md y ${CLAUDE_PLUGIN_ROOT}/docs/design-systems.md. WCAG 2.2 AA es parte de la definición de "hecho" de cada funcionalidad; esta evaluación es el barrido completo adicional.

1. Configuración

Fijar e instalar las herramientas fuera del producto: npm i --prefix <carpeta> playwright@<fijada> axe-core@<fijada>; A11Y_TOOLS=<carpeta>.
Ejecutar la aplicación localmente con datos de demostración en una base de datos temporal y su propio puerto.
Crear tests/a11y/pages.json listando cada página principal (y diálogos mediante open), con lang por página y un módulo signIn para las páginas que requieren inicio de sesión.
Ejecutar la evaluación cuando pocos otros agentes estén en ejecución; realizar ediciones pequeñas y específicas en componentes compartidos.

2. Medición ("antes")

node tests/a11y/axe-pages.mjs --probes --json scratch/a11y-before.json
node tests/a11y/axe-pages.mjs --probes --widths 320 --page <páginas anchas>
node --test "tests/contracts/*.test.mjs"     # contraste del tema en modo claro y oscuro

Además, el script de teclado para los patrones de la aplicación (enlace de salto → contenido principal, trampa de foco y retorno de foco en diálogos, Escape de nivel superior, teclas de flecha en listas de pestañas, Intro en filas cliqueables) y las comprobaciones manuales: espaciado de texto (1.4.12), zoom al 200%, alternativas para arrastrar (2.5.7), entrada redundante (3.3.7), autenticación accesible (3.3.8), gráficos con tablas, correos electrónicos (idioma, tablas de presentación, textos alternativos, modo oscuro).

3. Hallazgos y correcciones

Tabla: # | Criterio | Dónde | Gravedad (grave/moderado/menor) | ¿Corregido?. Corregir en el componente compartido (un token de anillo de foco, un helper de teclas de diálogo, filas cliqueables, teclas compuestas, regiones de desplazamiento, regiones en vivo, padding de desplazamiento). Traducir cada nuevo nombre accesible a todos los idiomas configurados. Agregar pares de contraste para nuevas combinaciones de colores.

4. Protección

Pruebas de contrato para componentes compartidos (nombres, regiones en vivo presentes antes de los mensajes, pares de tokens, movimiento reducido, enlaces de salto).
Hallazgos restantes en tests/a11y/known.json con razones, idénticos a las limitaciones conocidas en la página de declaración de accesibilidad (objetivo WCAG 2.2 AA, limitaciones, contacto; en todos los idiomas configurados; enlazado desde cada pie de página).

5. Informe

Antes → después: recuento de violaciones por superficie, recuento por gravedad (corregido / no), capturas de pantalla, lo que no se hizo (lectores de pantalla, shells nativos, auditoría externa). Una entrada de "Novedades". Sección en STATE.md.