A11y Debugging
Skill ActiveUses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.
To enable developers and testers to thoroughly audit and debug the accessibility of web pages using automated checks and manual inspection methods.
Features
- Automated accessibility audits (Lighthouse)
- Inspection of accessibility tree for semantic structure
- Verification of form labels and image alt text
- Testing keyboard navigation and focus management
- Measurement of tap target sizes
- Color contrast ratio checks
- Analysis of console messages for accessibility issues
Use Cases
- When ensuring semantic HTML structure and heading hierarchy are correct.
- When verifying interactive elements have accessible names and form inputs have associated labels.
- When testing keyboard-only navigation and focus management for users with motor impairments.
- When auditing tap target sizes and color contrast ratios against WCAG guidelines.
Non-Goals
- Performing general web scraping or data extraction.
- Testing for performance bottlenecks unrelated to accessibility.
- Automating complex user interaction flows beyond accessibility checks.
Compliance
- warning:Telemetry opt-inUsage statistics collection is enabled by default, though it is documented and can be opted out via a flag or environment variable. The schema of collected fields is not explicitly published.
Installation
First, add the marketplace
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp/plugin install chrome-devtools-mcp@chrome-devtools-pluginsQuality Score
Trust Signals
Similar Extensions
Use My Browser
100Use when work depends on the user's live browser session or visible rendered state rather than static fetches, especially for browser debugging contexts or DevTools-selected elements or requests, logged-in dashboards or CMS flows, localhost apps, forms, uploads, downloads, media inspection, DOM or iframe inspection, Shadow DOM, or browser failures that look like soft 404s, auth walls, anti-bot checks, or rate limits.
Fixing Accessibility
100Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
Baseline Ui
100Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
Noob Mode
100Plain-English translation layer for non-technical Copilot CLI users. Translates every approval prompt, error message, and technical output into clear, jargon-free English with color-coded risk indicators.
Android Design Guidelines
100Material Design 3 and Android platform guidelines. Use when building Android apps with Jetpack Compose or XML layouts, implementing Material You, navigation, or accessibility. Triggers on tasks involving Android UI, Compose components, dynamic color, or Material Design compliance.
Design Audit
100Full project design audit that orchestrates all agents, scores across 12 dimensions, generates prioritized action plan