Verified:GitHub

a11y-debugging

Audits web page accessibility using Chrome DevTools MCP and web.dev guidelines.

1|Updated Aug 31, 2026

Search Tags:#accessibility #a11y #ARIA #WCAG #audit #chrome devtools #lighthouse

One-click install

npx skills add https://github.com/nguyenhungtran18/skill-and-tool-tracker --skill a11y-debugging-nguyenhungtran18

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: a11y-debugging
Source: https://github.com/nguyenhungtran18/skill-and-tool-tracker/tree/main/skills/a11y-debugging
Command: npx skills add https://github.com/nguyenhungtran18/skill-and-tool-tracker --skill a11y-debugging-nguyenhungtran18

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web accessibility issues like missing ARIA labels, broken keyboard navigation, low color contrast, and undersized tap targets are hard to detect without assistive technology, and manual audits are slow and error-prone. ## Core Features & Use Cases - Automated Lighthouse Audits: Run navigation-mode accessibility audits and parse failing elements from JSON reports with jq or Node.js one-liners instead of loading full reports into context. - Accessibility Tree Inspection: Use take_snapshot to verify heading hierarchy, semantic landmarks, labels, and DOM order against visual layout. - Interactive Testing Snippets: Evaluate keyboard focus traps, tap target sizes (48x48px minimum), color contrast ratios, and global page settings via ready-made JavaScript snippets. - Use Case: While testing a checkout form, run a Lighthouse audit, detect orphaned inputs without labels, Tab through the page to verify focus order, and confirm contrast ratios meet WCAG AA. ## Quick Start Audit this page for accessibility issues using Chrome DevTools and report any failing elements with remediation advice.

Frequently Asked Questions about a11y-debugging

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I find form inputs missing labels?▼

Run the Find Orphaned Form Inputs snippet with evaluate_script. It returns all input, select, and textarea elements lacking a label[for], aria-label, aria-labelledby, or wrapping label element.