Accessibility Auditor

The accessibility-auditor skill scans web pages for common WCAG violations, identifying issues with color contrast, missing alt text, and improper heading structures. It generates a detailed report highlighting specific elements that fail compliance standards to help developers fix them quickly.

When to use it

• Before deploying a new landing page to ensure it meets legal accessibility requirements.
• During code reviews to catch semantic HTML errors like missing aria-labels on interactive buttons.
• When auditing existing documentation sites to improve navigation for screen reader users.
• To validate forms and input fields against best practices for error message association.

Key capabilities

• Detects insufficient color contrast ratios between text and backgrounds.
• Identifies images missing alternative text descriptions.
• Flags inconsistent or skipped heading hierarchy (e.g., jumping from H2 to H4).
• Highlights missing lang attributes on HTML elements.
• Reports on non-descriptive link text that provides no context.

Example prompts

"Run an accessibility audit on this React component and list all WCAG 2.1 Level A violations." "Scan the provided HTML snippet for missing alt tags and suggest descriptive alternatives for each image." "Check if my navigation menu follows proper semantic structure and aria-attributes for keyboard navigation."

Tips & gotchas

This tool focuses on frontend code analysis; it cannot test dynamic JavaScript-rendered content that hasn't been executed in the browser environment. Always review the generated report manually, as automated scanners may miss complex context-specific issues like logical reading order in custom widgets.