Accessibility Regression Auditor
Audit a UI change for accessibility regressions by combining automated checks with keyboard, focus, semantic, name-role-value, contrast, zoom, and screen-reader-oriented inspection. Use when reviewing a component or pull request, adding a dialog or form, changing navigation, or investigating an accessibility failure that a linter alone cannot explain.
npx agentscamp add skills/accessibility-regression-auditorInstall to ~/.claude/skills/accessibility-regression-auditor/SKILL.md
Audits changed interfaces through layered evidence: automated rules, native semantics, accessible names, keyboard order, focus transitions, status announcements, contrast, reflow, reduced motion, and representative assistive-technology behavior. It prioritizes user-blocking regressions and supplies a reproducible check for each finding.
Review the changed user journey, not just the component markup or automated score.
Workflow
- Define the affected journey. Identify changed pages, components, states, breakpoints, input methods, and user actions. Include loading, empty, error, validation, success, and disabled states.
- Run project-native automation. Use configured linters, component tests, browser tests, or accessibility scanners. Preserve tool versions, routes, rules, and raw violations. Treat automation as one evidence layer.
- Inspect semantics first. Prefer native controls and landmarks. Verify heading order, labels, descriptions, table relationships, lists, link purpose, and name-role-value. Flag ARIA that replaces or contradicts native behavior.
- Trace keyboard operation. Check reachability, visible focus, logical order, activation, escape behavior, focus trapping, roving tabindex where appropriate, and return of focus after dialogs or transient UI closes.
- Check dynamic communication. Verify validation errors, async completion, toasts, expanded state, live regions, and route changes are announced without stealing focus or repeating excessively.
- Review visual access. Check text and non-text contrast, focus indicators, 200% zoom, narrow reflow, text spacing, target size, motion preferences, and information conveyed only by color, position, hover, or animation.
- Exercise a representative assistive path. When browser or platform tools are available, inspect the accessibility tree and test the critical flow with a screen-reader-oriented sequence. Do not claim device coverage that was not performed.
- Prioritize and regress. Rank findings by blocked task and affected population. For deterministic defects, recommend the smallest automated regression check; retain manual steps for behavior automation cannot prove.
WARNING
A zero-violation automated scan is not a pass. A perfectly valid button named “button” can still make a workflow unusable.
Output
Provide the audited scope, environments and tools, findings with element or file evidence, affected interaction, severity, recommended remediation, and exact verification step. Separate automated, manual, and untested coverage.
Frequently asked questions
- Can an automated accessibility scanner find every issue?
- No. Automation catches many deterministic rule violations but cannot reliably judge logical focus order, meaningful labels, workflow completion, announcement timing, or whether keyboard users can recover from a state change.
- Does this skill certify WCAG compliance?
- No. It produces evidence-based findings for the reviewed scope. Formal conformance requires broader page and process coverage, documented methodology, and qualified human testing.
Related
- 9 Best Claude Skills for Frontend DevelopmentCompare Claude skills for accessibility, Web Vitals, React renders, bundles, localization, browser security, test data, tests, and caching.
- React Render ProfilerFind and fix wasteful React re-renders by classifying the cause — unstable prop/callback/object identities, context value churn, state lifted too high, expensive work in render, or unvirtualized lists — confirming it with a measurement, then applying the one targeted fix and re-measuring. Use when a React UI is janky, slow to type in, or re-renders far more than the data actually changed.
- Frontend DeveloperUse this agent to build UI — responsive layouts, components, accessibility, and design-system work. Examples — implementing a Figma design, fixing a11y issues, building a reusable component.
- Integration Test DesignerDesign integration tests that exercise components against REAL collaborators — actual database, queue, HTTP boundary — at a deliberately chosen seam, instead of a unit suite that mocks everything or a slow flaky full E2E. Use when bugs slip past green unit tests, when wiring or contracts between layers break in production, or when a mocked DB test passes but the real query/migration/serialization fails.
- Regression Test WriterTurn a reported bug into the smallest test that fails for the real reason before the fix and passes afterward. Use when reproducing a defect, reviewing a bug fix with no guard test, converting an incident into permanent coverage, or preventing a previously fixed edge case from returning.
- Web Vitals OptimizerDiagnose and fix Core Web Vitals — LCP, CLS, and INP — by treating real-user field data at p75 as the source of truth, using Lighthouse/WebPageTest only to find the at-fault element, script, or shift, then applying the one targeted fix per metric and re-measuring. Use when a page feels slow, scores poorly on PageSpeed/Lighthouse, or fails CWV in CrUX/RUM field data.
- Localization Readiness AuditorAudit an application or feature for localization readiness across extracted messages, interpolation, pluralization, date and number formatting, layout expansion, right-to-left behavior, sorting, search, assets, metadata, and test coverage. Use before adding a locale, reviewing hard-coded UI text, or investigating a feature that breaks outside English.