Agent skill · design visual · chromedevtools
a11y-debugging
Uses 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.
Why this skill is useful
Provides specific commands and workflows for auditing accessibility that the AI wouldn't reliably generate on its own.
What it needs
Requires chrome installed locally. About 3k tokens when loaded. Last updated 2026-08-06. 48,655 stars on the source repository.
What this skill does
Core Concepts Page Targeting: Page-scoped tools (takesnapshot, listconsolemessages, evaluatescript, presskey, takescreenshot, lighthouseaudit, etc.) require a pageId parameter. Retrieve available page IDs using listpages or from newpage. 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! Workflow Patterns 1. Automated Audit (Lighthouse) Start by running a Lighthouse accessibility audit to get a comprehensive baseline. This tool provides a high-level score and lists specific failing elements with remediation advice. 1. Run the audit: Set mode to "navigation" to refresh the page and capture load issues. Set outputDirPath (e.g., /tmp/lh-report) to save the full JSON report. 2. Analyze the Summary: Check scores (0-1 scale). A score < 1 indicates violations. Review audits.failed count. 3. Review the Report (CRITICAL): Parsing: Do not read the entire file line-by-line. Use a CLI tool like jq or a Node.js one-liner to filter for failures: This efficiently extracts the selector and snippet of failing elements without loading the full report into context. 2. Browser Issues & Audits Chrome automatically checks for common accessibility problems. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills chromedevtools/a11y-debugging