frontend-a11y

SKILL.md

Frontend Accessibility Patterns

Practical accessibility patterns for React and Next.js. Covers the issues most commonly flagged in code review: missing form labels, incorrect ARIA usage, non-semantic interactive elements, and broken keyboard navigation.

When to Activate

Building or reviewing form components (<input>, <select>, <textarea>)

Creating interactive elements (modals, dropdowns, tooltips, tabs)

Using <div> or <span> with onClick

Adding aria-* attributes to any element

Implementing keyboard navigation or focus management

Receiving accessibility feedback from code review tools (CodeRabbit, ESLint a11y)

Building components that must support screen readers

Form Accessibility

Missing htmlFor / id pairing and disconnected error messages are the most common issues flagged in code review.

Label Connection