What problem does it solve? Interfaces often ship with invisible accessibility failures: missing focus rings, unlabeled icon buttons, keyboard traps, and errors that screen readers never announce. This Skill gives you a systematic set of principles and review procedures to find and fix these issues in UI code before users hit them. ## Core Features & Use Cases - Fourteen Core Principles: Covers native elements first, visible focus rings, full keyboard support per ARIA APG, focus trapping in modals, minimum hit areas, form labels and error announcements, accessible names, reduced motion, live regions, alt text, semantic structure, and zoom/reflow survival. - Structured Review Output: Produces findings grouped by principle in a Severity/Location/Before/After/Why table, followed by a verification report and a Block/Needs changes/Approve verdict. - Common Mistakes Reference: Maps frequent anti-patterns (outline: none, div onClick, placeholder-as-label, positive tabindex) directly to their fixes. - Use Case: A developer asks for an accessibility review of a React settings page; the Skill walks the code as a keyboard-only and screen-reader user, flags an unlabeled icon button and a missing focus-visible style, and returns actionable before/after fixes with file and line citations. ## Quick Start Review the accessibility of my React components and report any keyboard, focus, or screen-reader issues with fixes.
