a11y-debugging

Audit web pages for WCAG AA accessibility violations using Lighthouse and browser accessibility trees.

1|Updated Jun 29, 2026
One-click install
npx skills add https://github.com/coreyone/software-maestro --skill a11y-debugging-coreyone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y-debugging
Source: https://github.com/coreyone/software-maestro/tree/main/quality/a11y-debugging
Command: npx skills add https://github.com/coreyone/software-maestro --skill a11y-debugging-coreyone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web accessibility issues like missing ARIA labels, keyboard focus traps, low color contrast, and broken heading hierarchies are hard to detect manually, leaving users of assistive technologies with broken experiences. ## Core Features & Use Cases - Automated Lighthouse Audits: Run navigation-mode Lighthouse accessibility audits and parse failing elements from JSON reports with jq or Node.js one-liners. - Accessibility Tree Inspection: Use browser snapshots to verify heading hierarchy, semantic landmarks, accessible names, and DOM reading order against visual layout. - Interactive Testing Snippets: Evaluate JavaScript snippets to find orphaned form inputs, measure tap target sizes, check color contrast ratios, and validate global page settings like lang and viewport. - Use Case: A QA engineer needs to certify a checkout flow for WCAG 2.1 AA. The skill runs a Lighthouse audit, walks keyboard focus through the modal dialog, and reports every unlabeled input and low-contrast element with remediation guidance. ## Quick Start Audit this page for WCAG AA accessibility violations and report all failing elements with fixes.

Frequently Asked Questions about a11y-debugging

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

FAQPage Schema
How do I audit a web page for WCAG AA accessibility compliance?▼

Run a Lighthouse accessibility audit in navigation mode, then parse the JSON report for audits with scores below 1. Follow up with accessibility tree snapshots to verify heading hierarchy, labels, and keyboard focus behavior.

How to test keyboard navigation and focus traps in a modal?▼

Send Tab and Shift+Tab key presses, then capture an accessibility tree snapshot to confirm which element holds focus. A modal must move focus inside on open and trap it until closed, with role="dialog" and aria-modal="true".

How do I find form inputs missing labels on a page?▼

Evaluate a JavaScript snippet that queries all input, select, and textarea elements and filters out any lacking a label[for], aria-label, aria-labelledby, or wrapping label element. The result lists orphaned inputs by tag, id, and name.

Can I check color contrast ratios without a browser extension?▼

Yes, first check native browser issues via console messages for low contrast reports. If none appear, evaluate a snippet that computes the luminance ratio between an element's text color and background color against the 4.5:1 WCAG AA threshold.

What are the limitations of automated accessibility contrast checks?▼

Simplified contrast scripts do not account for transparency, gradients, or background images, so results can be inaccurate on complex visuals. For those cases use visual screenshot inspection or inject a production-grade library like axe-core.