accessibility-auditor_skill

Overview

This skill audits components and pages for WCAG 2.1 accessibility violations and produces actionable remediation guidance. It combines automated scans, manual checkpoints, and interactive pattern checks to prioritize fixes and validate results. Use it to verify ARIA usage, keyboard behavior, color contrast, labels, and semantic structure.

How this skill works

First, define the audit scope (component, page, or site). Run automated tools like axe-core and Lighthouse, then review manual WCAG checkpoints such as alt text, heading order, and focus management. Categorize findings by severity, provide code-level fixes and accessible patterns, and re-run tests to validate remediation.

When to use it

• When a user asks about accessibility, a11y, or WCAG compliance
• To audit a component, page, or entire site for accessibility issues
• When verifying ARIA attributes, labels, or screen reader behavior
• To test keyboard navigation, focus management, and interactive widgets
• Before releases to ensure accessibility regressions are caught

Best practices

• Run automated audits (axe-core, Lighthouse) and always verify results manually
• Include eslint-plugin-jsx-a11y in development to catch issues early
• Prioritize critical issues (missing labels, missing alt text, keyboard traps)
• Add accessibility checks to CI and require Lighthouse score ≥ 90 where possible
• Test with real screen readers (VoiceOver, NVDA) and perform keyboard-only flows

Example use cases

• Audit a product page and fix missing alt text and low contrast on CTAs
• Validate a modal implementation: focus trap, Escape to close, aria-modal
• Convert non-semantic clickable divs into buttons and add focus styles
• Review a dropdown for proper ARIA roles and arrow-key navigation
• Create an accessibility report for stakeholders with severity and fixes