validating-accessibility_skill

Overview

This skill validates UI accessibility against WCAG 2.2 Level AA and common best practices. It automates checks for color contrast, keyboard navigation, ARIA attributes, focus visibility, reduced motion, labels, and semantic structure. Use it to find accessibility regressions, guide fixes, and verify compliance after updates. The workflow includes targeted agents to explore code, confirm WCAG rules, and perform final validation.

How this skill works

The skill spawns a small agent team to locate components, verify the latest WCAG 2.2 requirements, and inspect existing ARIA patterns in the codebase. It runs automated contrast checks (4.5:1 for normal text, 3:1 for large text and UI), keyboard-focus verification, ARIA attribute audits, and reduced-motion detection. After fixes are applied, a validation agent re-runs checks and reports remaining issues with concrete remediation suggestions. Results map directly to actionable items developers can use to patch components.

When to use it

• Before release to ensure WCAG 2.2 AA compliance
• During accessibility audits or sprint QA passes
• When adding or refactoring UI components (buttons, forms, dialogs)
• After visual or interaction changes that might affect focus, contrast, or motion
• When preparing documentation or bug reports for accessibility issues

Best practices

• Test with keyboard only and confirm logical tab order
• Use semantic HTML first; add ARIA only when necessary
• Ensure 4.5:1 contrast for normal text and 3:1 for large text/UI controls
• Provide visible focus indicators (e.g., focus-visible:ring-2) and do not remove outlines without replacement
• Respect prefers-reduced-motion and provide motion-safe fallbacks

Example use cases

• Audit a component library for color contrast and missing alt text
• Validate modal dialogs and custom widgets for keyboard focus and ARIA roles
• Scan forms to confirm labels, aria-describedby usage, and error messaging accessibility
• Verify that icon-only buttons have aria-label or accessible names
• Run a post-fix validation to confirm all reported issues are resolved