a11y-debugging

What it does

This skill enables AI agents to inspect and debug web accessibility issues directly within the Chrome DevTools environment. It provides deep visibility into how browsers interpret HTML elements regarding screen reader support, keyboard navigation, and visual contrast compliance.

When to use it

• Investigating why a specific form field fails automated accessibility audits.
• Debugging complex dynamic content that loses focus management after JavaScript updates.
• Verifying color contrast ratios on custom UI components against WCAG standards.
• Analyzing the semantic structure of error messages for screen reader compatibility.

Key capabilities

• Direct integration with Chrome DevTools accessibility audit panels.
• Real-time inspection of ARIA attributes and roles in live browser contexts.
• Identification of missing or incorrect landmark regions in page layouts.
• Detection of keyboard trap scenarios within interactive widgets.

Example prompts

• "Run an accessibility audit on the current tab and list all elements flagged for missing labels."
• "Inspect the navigation menu's ARIA structure and suggest fixes for any broken focus order."
• "Check the color contrast of the primary call-to-action button against the background and report compliance status."

Tips & gotchas

Ensure the target website is fully loaded before initiating an audit, as dynamic content may not yet be rendered for analysis. This skill relies on Chrome DevTools; it cannot analyze accessibility in non-Chromium browsers or purely server-side rendered content without a browser instance.