Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building any interactive UI component or form.

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 ](https://github.com/focus trap/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. Anti Patterns Checklist Before submitting any interactive component for review: [ ] Every <input , <select , and <textarea has a connected <label via htmlFor / id [ ] Error messages are linked with aria describedby and marked role="alert" [ ] No onClick on <div or <span without role , tabIndex , and onKeyDown [ ] Icon only buttons have aria label [ ] Decorative images use alt="" and aria hidden="true" [ ] Modals restore focus on close (for full focus trapping with Tab/Shift+Tab cycling, use a library like focus trap react ) [ ] Dynamic content updates use aria live [ ] prefers reduced motion is respected for animations Related Skills frontend patterns — general React component and state patterns design system — design token and component consistency motion foundations and motion patterns : animation patterns with accessibility considerations

frontend-a11y