# a11y-debugging

> Claude/Codex skill by [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars · Updated 2026-10-18

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.

Tags: browser, chrome, chrome-devtools, debugging, devtools, mcp, mcp-server, puppeteer

## Install

```sh
git clone https://github.com/ChromeDevTools/chrome-devtools-mcp /tmp/chrome-devtools-mcp && ln -s /tmp/chrome-devtools-mcp/skills/a11y-debugging ~/.claude/skills/a11y-debugging
```

## From README

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!

## Links

- HTML page: https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/a11y-debugging/
- GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp
- Author: [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md)

## More from this repo

- [chrome-devtools](https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/chrome-devtools/index.md) — Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation.
   - [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars
- [chrome-devtools-cli](https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/chrome-devtools-cli/index.md) — Used to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via...
   - [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars
- [debug-optimize-lcp](https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/debug-optimize-lcp/index.md) — Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools.
   - [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars