frontend-a11y
Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support.
- Kind
- Skill
- Works with
- Claude Code, Codex
- Languages
- TypeScript / JavaScript
- Source
- affaan-m/ECC @ d3b8a3e90890
- Path
- skills/frontend-a11y/SKILL.md
- License
- MIT
- Jobs
- Review, UI/UX work, Debugging
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# 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 ```tsx // BAD: label has no connection to input — screen readers cannot associate them <label>Email</label> <input type="email" /> // GOOD: htmlFor matches input id <label htmlFor="email">Email</label> <input id="email" type="email" /> ``` ### Required Fields ```tsx …