Verwendet Chrome DevTools MCP zum Debuggen und Prüfen der Barrierefreiheit (a11y) basierend auf den web.dev-Richtlinien. Zum Testen von semantischem HTML, ARIA-Beschriftungen, Fokuszuständen, Tastaturnavigation, Tippzielen und Farbkontrast.
Installieren Sie den KI-Skill a11y-debugging schnell in Ihrer Entwicklungsumgebung über die Kommandozeile
Quelle: 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:
Verwendet Chrome DevTools MCP zum Debuggen und Prüfen der Barrierefreiheit (a11y) basierend auf den web.dev-Richtlinien. Zum Testen von semantischem HTML, ARIA-Beschriftungen, Fokuszuständen, Tastaturnavigation, Tippzielen und Farbkontrast. Quelle: chromedevtools/chrome-devtools-mcp.
Stabile Felder und Befehle für KI/Such-Zitate.
npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debuggingVerwendet Chrome DevTools MCP zum Debuggen und Prüfen der Barrierefreiheit (a11y) basierend auf den web.dev-Richtlinien. Zum Testen von semantischem HTML, ARIA-Beschriftungen, Fokuszuständen, Tastaturnavigation, Tippzielen und Farbkontrast. Quelle: chromedevtools/chrome-devtools-mcp.
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debugging Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw
https://github.com/chromedevtools/chrome-devtools-mcp