Frontend A11y

This is the accessibility checklist you wish you had before your first code review flagged missing form labels and broken ARIA. It covers the patterns that actually come up in React and Next.js work: connecting labels to inputs with htmlFor, linking error messages with aria-describedby, making custom dropdowns keyboard navigable, and knowing when aria-label beats aria-labelledby. The examples are practical, like a complete login form with proper required field handling and a dropdown with arrow key navigation. It won't make you an a11y expert, but it will stop the most common violations before they hit PR comments. Activate it when building forms, modals, or anything interactive that isn't a plain button or link.

Install to Claude Code

npx -y skills add affaan-m/ecc --skill frontend-a11y --agent claude-code