Agent skill · software engineering · affaan-m
frontend-a11y
Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building or reviewing forms, modals, dropdowns, tooltips, or tabs, fixing a11y lint or code-review findings, or wiring up keyboard navigation and focus management.
Why this skill is useful
Provides specific accessibility patterns and code examples for React and Next.js that enhance the AI's ability to generate compliant UI components.
What it needs
About 6k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
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 Required Fields Error Messages Complete Accessible Form Semantic HTML Use the element that matches the intent. Screen readers and keyboard users depend on native semantics. ARIA Attributes Use ARIA only when native HTML semantics are insufficient. Wrong ARIA is worse than no ARIA. aria-label vs aria-labelledby aria-describedby aria-live for Dynamic Content aria-expanded and aria-controls Keyboard Navigation Every interactive element must be reachable and operable by keyboard alone. Custom Dropdown Focus Management Focus must move logically when UI state changes — especially for modals and route transitions. Modal Focus Restoration This example covers initial focus and restoration. For a full focus trap (Tab/Shift+Tab cycling within the modal), use a library like focus-trap-react which handles edge cases like dynamic content and nested portals. Images and Icons Reduced Motion Respect users who have requested reduced motion in their OS settings. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/frontend-a11y--bfb07c