En los propios términos del Skill
Este skill audita y corrige la accesibilidad web conforme a WCAG 2.2, organizada en torno a POUR — Perceivable, Operable, Understandable, Robust — y los niveles de conformidad A, AA y AAA. Ejecuta un flujo de trabajo basado en evidencia: cuando hay una página renderizada disponible, ejecute una auditoría de accesibilidad Lighthouse en vivo (lighthouse_audit con Chrome DevTools MCP), use los nodos fallidos para localizar el componente, inspeccione el árbol de accesibilidad con take_snapshot y, después, corrija el código fuente y vuelva a ejecutar.
Si faltan las herramientas en vivo, Lighthouse CLI o axe cubren la mitad automatizada y siguen aplicándose las mismas comprobaciones manuales. Incluye reglas a nivel de código para texto alternativo, ratios de contraste, visibilidad del foco, tamaño del objetivo, movimiento reducido, errores de formulario y autenticación accesible, además de una lista de triaje ordenada en crítico, grave y moderado.
Qué produce
- Una lista de problemas priorizada, agrupada en niveles Crítico (corregir de inmediato), Grave (corregir antes del lanzamiento) y Moderado (corregir pronto), con ejemplos concretos.
- Marcado corregido y fragmentos listos para pegar, incluida una utilidad de ocultación visual para exponer a las tecnologías de asistencia las etiquetas de los botones de icono.
- Implementaciones de referencia completas en references/A11Y-PATTERNS.md que cubren etiquetas de formulario, trampa de foco en modales, enlace de salto, pestañas ARIA, regiones dinámicas, gestión de errores y comandos de lectores de pantalla.
Cómo funciona
- 01Ejecutar una auditoría de accesibilidad en vivo
Comience con una página renderizada y ejecute una auditoría Lighthouse de accesibilidad en vivo, usando el modo de navegación móvil para páginas públicas generales o el modo snapshot cuando recargar perdería el estado autenticado.
- 02Localizar el componente que falla
Use los nodos fallidos de la auditoría para señalar el componente o la plantilla concretos, en lugar de hacer grep en todo el repositorio en busca de patrones genéricos.
- 03Inspeccionar el árbol de accesibilidad
Lea una instantánea renderizada del árbol de accesibilidad para comprobar nombres, roles, estados, landmarks y estructura de encabezados, y después recorra el flujo afectado con el teclado.
- 04Corregir el código fuente y volver a verificar
Cambie el código fuente y no el resultado renderizado, y luego repita la misma auditoría y la misma interacción manual para confirmar la corrección.
- 05Recurrir a las herramientas de CLI
Cuando no haya herramientas de navegador en vivo disponibles, combine la salida de Lighthouse CLI o axe con las mismas comprobaciones manuales, porque la automatización por sí sola solo cubre parte de las barreras.