Building Accessible React Apps: ARIA Patterns, Headless UI, and Testing

# Building Accessible React Apps: ARIA Patterns, Headless UI, and Testing > A practical, production-focused guide for modern web development.  ## Table of contents 1. Overview 2. Architecture 3. Step-by-step Guide 4. Code Examples 5. Performance Checklist 6. Common Pitfalls 7. Resources ## Overview Modern web development continues to evolve rapidly. This article focuses on practical techniques you can apply today to improve user experience and developer velocity. ## Architecture A clean separation between server and client responsibilities is essential. Prefer server-side work for data fetching and security, and keep the client focused on interactivity. | Concern | Where it belongs | Why | | --- | --- | --- | | Data fetching | Server | Security, caching, consistency | | Rendering heavy lists | Server (streaming) | Time-to-first-byte and perceived speed | | Auth/session | Server | Sensitive logic and tokens | | Animations | Client | Smooth UX and user feedback | ## Step-by-step Guide 1. Measure current performance (Lighthouse, Web Vitals) 2. Eliminate render-blocking resources (fonts, CSS) 3. Stream above-the-fold content 4. Cache data by scope (request, route, app) 5. Defer non-critical JS 6. Monitor and regress-test in CI ## Code Examples ### Simple greet function ```javascript export function greet(name) { return 'Hello, ' + name + '!'; } console.log(greet('web')) ``` ### Accessible button component ```tsx type ButtonProps = React.ButtonHTMLAttributes & { variant?: 'primary' | 'ghost' }; export function Button({ variant = 'primary', children, ...props }: ButtonProps) { const base = 'inline-flex items-center justify-center rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'; const styles = variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600' : 'bg-transparent text-blue-700 hover:bg-blue-50 focus-visible:ring-blue-600'; return ( {children} ); } ``` ## Performance Checklist - Eliminate unnecessary client-side JS - Prefer streaming and partial hydration - Use responsive images and modern formats (AVIF/WebP) - Defer third-party scripts and measure their impact - Cache aggressively where safe ## Common Pitfalls - Mixing server-only logic in client components - Overusing client state where derivable from URL or server - Missing dependency arrays in hooks ## Resources - Related: react - Related: testing - Related: jest - Related: playwright - Related: accessibility - Web.dev guidance: https://web.dev/ - MDN web docs: https://developer.mozilla.org/ --- Thanks for reading!