A11y Debugging

chromedevtools/chrome-devtools-mcpOfficial

This is a solid accessibility debugging workflow built on Chrome DevTools MCP and web.dev guidelines. It covers the full spectrum: automated Lighthouse audits, accessibility tree snapshots, keyboard navigation testing, color contrast checks, and tap target measurements. The workflow is methodical, starting with automated checks then drilling into specifics like orphaned form inputs and focus traps. One smart detail: it teaches you to append .md.txt to web.dev URLs to get clean markdown instead of rendered pages. The accessibility tree snapshots are the real workhorse here, showing you what screen readers actually see versus what's in the DOM. Includes ready-made JavaScript snippets for common checks you'd otherwise write from scratch every time.

skills.sh installs: 3.9K
GitHub stars: 55K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add chromedevtools/chrome-devtools-mcp --skill a11y-debugging --agent claude-code

Installs into .claude/skills of the current project.

Files

Core Concepts

Page Targeting: Page-scoped tools (take_snapshot, list_console_messages, evaluate_script, press_key, take_screenshot, lighthouse_audit, etc.) require a pageId parameter. Retrieve available page IDs using list_pages or from new_page.

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 take_snapshot 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.

SKILL.md on GitHub