framework-accessibility
Framework-Specific Accessibility Patterns
React / Next.js
Common Pitfalls
| Pattern | Issue | Fix |
|---|---|---|
onClick on <div> |
Not keyboard accessible | Use <button> or add role="button", tabIndex={0}, onKeyDown |
dangerouslySetInnerHTML |
May inject inaccessible content | Audit injected HTML for ARIA, headings, alt text |
React.Fragment as root |
May break landmark tree | Ensure fragments don't interrupt landmark nesting |
Missing key on lists |
Can cause focus loss on re-render | Use stable keys (not array index) for interactive lists |
| Portal without focus trap | Focus can escape to background | Wrap portal content in FocusTrap component |
useEffect focus management |
Focus may not fire on mount | Use useRef + useEffect with proper dependency array |
Fix Templates
More from community-access/accessibility-agents
mobile-accessibility
Audit React Native, Expo, iOS, Android for accessibility. Review accessibilityLabel, accessibilityRole, accessibilityHint, touch targets (44x44pt min), screen reader support, and platform semantics.
150playwright-testing
Browser accessibility testing using Playwright and @axe-core/playwright. Keyboard scans, contrast verification, and accessibility tree snapshots.
148report-generation
Format accessibility audit reports with severity scoring (0-100, A-F grades), scorecard computation, and compliance exports including VPAT/ACR and remediation priorities.
147design-system
Validate design system tokens for WCAG AA/AAA contrast. Compute color token contrast, focus ring validation (WCAG 2.4.13), motion tokens, and spacing for touch targets across frameworks.
146lighthouse-scanner
Integrate Lighthouse CI accessibility audits. Detects configuration, parses results, maps findings to severity model, and tracks score regressions.
143markdown-accessibility
Audit and fix markdown for accessibility. Covers ambiguous links, anchors, emoji (remove/translate), Mermaid/ASCII templates, heading hierarchy, table descriptions, and severity scoring.
141