Utilizza Chrome DevTools MCP per il debug e il controllo dell'accessibilità (a11y) in base alle linee guida web.dev. Da utilizzare durante il test di HTML semantico, etichette ARIA, stati di attivazione, navigazione da tastiera, target tocco e contrasto di colore.
Installa rapidamente la skill AI a11y-debugging nel tuo ambiente di sviluppo tramite riga di comando
Fonte: 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:
Utilizza Chrome DevTools MCP per il debug e il controllo dell'accessibilità (a11y) in base alle linee guida web.dev. Da utilizzare durante il test di HTML semantico, etichette ARIA, stati di attivazione, navigazione da tastiera, target tocco e contrasto di colore. Fonte: chromedevtools/chrome-devtools-mcp.
Campi e comandi stabili per citazioni AI/ricerca.
npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debuggingUtilizza Chrome DevTools MCP per il debug e il controllo dell'accessibilità (a11y) in base alle linee guida web.dev. Da utilizzare durante il test di HTML semantico, etichette ARIA, stati di attivazione, navigazione da tastiera, target tocco e contrasto di colore. Fonte: chromedevtools/chrome-devtools-mcp.
Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debugging Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw
https://github.com/chromedevtools/chrome-devtools-mcp