What problem does it solve? Web accessibility issues like missing labels, poor color contrast, broken keyboard navigation, and incorrect heading structures are hard to detect without assistive technology. This Skill gives an AI agent a structured workflow to audit and debug accessibility problems directly in a live browser using Chrome DevTools MCP tools. ## Core Features & Use Cases - Automated Lighthouse Audits: Run navigation-mode Lighthouse accessibility audits and parse failing audits from the JSON report with jq or Node.js one-liners instead of loading the full report into context. - Accessibility Tree Inspection: Use take_snapshot to verify heading hierarchy, semantic landmarks, accessible names, and DOM order against the visual layout. - Targeted JavaScript Snippets: Run ready-made evaluate_script snippets to find orphaned form inputs, measure tap target sizes, approximate color contrast ratios, and check global page settings like lang, title, and viewport. - Use Case: While testing a new checkout page, ask the agent to audit it. It runs Lighthouse, checks console issues for native Chrome a11y warnings, tabs through interactive elements to verify focus order, and reports every unlabeled input and low-contrast element with its selector. ## Quick Start Audit the current page for accessibility issues including labels, keyboard focus, tap targets, and color contrast, then report each failing element with its selector.
