Does it support web.dev accessibility guidelines?

Absolutely. The skill is designed to follow web.dev standards and can fetch raw markdown documentation directly to ensure compliance with the latest best practices.

How does this skill check for accessibility issues?

It leverages Chrome DevTools to run Lighthouse audits, inspect the accessibility tree, and execute specialized scripts to measure tap targets and color contrast.

Can I test keyboard navigation with this skill?

Yes, you can simulate 'Tab' and 'Shift+Tab' key presses and use snapshots to verify that the focus moves to the correct interactive elements as expected.

How do I see the accessibility tree instead of just the DOM?

You can use the 'take_snapshot' tool, which specifically captures the accessibility tree to show you exactly how assistive technologies like screen readers interpret your page.

Can it detect low color contrast automatically?

Yes, it monitors native Chrome console issues for contrast warnings and can run targeted scripts to manually verify contrast ratios for specific elements.

Web Accessibility Debugger

Name: Web Accessibility Debugger
Author: ChromeDevTools

byChromeDevTools

•

30,809

•

보안 및 테스팅

Performs comprehensive accessibility audits and debugging using Chrome DevTools to ensure web applications meet semantic and usability standards.

This skill integrates Chrome DevTools' powerful auditing capabilities into Claude, allowing for deep accessibility inspections based on web.dev guidelines. It enables developers to analyze the accessibility tree, run automated Lighthouse audits, verify keyboard navigation flows, and detect color contrast or tap target issues. By bridging the gap between raw DOM structure and what assistive technologies actually see, this skill provides actionable remediation advice for semantic HTML and ARIA implementation, making it an essential tool for building inclusive, WCAG-compliant web applications.

주요 기능

01Accessibility Tree snapshots to verify semantic structure and heading hierarchy

02Automated detection of orphaned form inputs and missing ARIA labels

03Automated Lighthouse accessibility audits with detailed failure reporting

0430,809 GitHub stars

05Visual auditing for color contrast ratios and interactive tap target sizing

06Real-time keyboard navigation testing and focus state tracking

사용 사례

01Identifying and fixing 'keyboard traps' in complex modal or navigation structures

02Ensuring a new UI component meets WCAG accessibility standards before deployment

03Auditing existing websites for missing alt text, labels, and improper semantic HTML

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add chromedevtools/chrome-devtools-mcp a11y-debugging

For use in Claude.ai and ChatGPT

Download Skill