React Accessibility (a11y)

Build accessible React applications.

Semantic HTML

```javascript // Good <button onClick={handleClick}>Click</button>

// Bad <div onClick={handleClick}>Click</div> ```

ARIA Labels

```javascript <button aria-label="Close menu"> <CloseIcon /> </button>

<nav aria-label="Main navigation"> <ul>...</ul> </nav> ```

Focus Management

```javascript function Modal({ isOpen, onClose }) { const closeButtonRef = useRef();

useEffect(() => { if (isOpen) { closeButtonRef.current?.focus(); } }, [isOpen]);

return ( <div role="dialog" aria-modal="true"> <button ref={closeButtonRef} onClick={onClose}> Close </button> </div> ); } ```

Keyboard Navigation

```javascript function Menu() { const handleKeyDown = (e) => { if (e.key === 'Escape') { closeMenu(); } if (e.key === 'ArrowDown') { focusNextItem(); } };

return <div onKeyDown={handleKeyDown}>...</div>; } ```

Testing Accessibility

```bash npm install jest-axe ```

```javascript import { axe } from 'jest-axe';

test('no accessibility violations', async () => { const { container } = render(<MyComponent />); const results = await axe(container); expect(results).toHaveNoViolations(); }); ```

Remember

- Use semantic HTML - Add ARIA when needed - Manage focus properly - Test with screen readers

> Next: Learn internationalization!