Utiliza Chrome DevTools MCP para la depuración y auditoría de accesibilidad (a11y) según las pautas de web.dev. Úselo al probar HTML semántico, etiquetas ARIA, estados de enfoque, navegación con teclado, objetivos de toque y contraste de color.
Instala rápidamente el skill de IA a11y-debugging en tu entorno de desarrollo mediante línea de comandos
Fuente: chromedevtools/chrome-devtools-mcp.
Accessibility Tree vs DOM: Visually hiding an element (e.g., CSS opacity: 0) behaves differently for screen readers than display: none or aria-hidden="true". The takesnapshot tool returns the accessibility tree of the page, which represents what assistive technologies "see", making it the most reliable source of truth for semantic structure.
Reading web.dev documentation: If you need to research specific accessibility guidelines (like https://web.dev/articles/accessible-tap-targets), you can append .md.txt to the URL (e.g., https://web.dev/articles/accessible-tap-targets.md.txt) to fetch the clean, raw markdown version. This is much easier to read!
Chrome automatically checks for common accessibility problems. Use listconsolemessages to check for these native audits first:
Utiliza Chrome DevTools MCP para la depuración y auditoría de accesibilidad (a11y) según las pautas de web.dev. Úselo al probar HTML semántico, etiquetas ARIA, estados de enfoque, navegación con teclado, objetivos de toque y contraste de color. Fuente: chromedevtools/chrome-devtools-mcp.
Campos y comandos estables para citas de IA/búsqueda.
npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debuggingUtiliza Chrome DevTools MCP para la depuración y auditoría de accesibilidad (a11y) según las pautas de web.dev. Úselo al probar HTML semántico, etiquetas ARIA, estados de enfoque, navegación con teclado, objetivos de toque y contraste de color. Fuente: chromedevtools/chrome-devtools-mcp.
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debugging Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw
https://github.com/chromedevtools/chrome-devtools-mcp