` for landmarks. Screen readers use these to navigate the page.
## ARIA Patterns
```tsx
function Modal({ isOpen, onClose, title, children }) {
if (!isOpen) return null;
return (
e.key === "Escape" && onClose()}
>
{title}
{children}
);
}
function Tabs({ tabs, activeIndex, onChange }) {
return (
{tabs.map((tab, i) => (
))}
{tabs.map((tab, i) => (
{tab.content}
))}
);
}
```
## Keyboard Navigation
```tsx
function handleArrowKeys(
event: React.KeyboardEvent,
currentIndex: number,
totalItems: number,
onSelect: (index: number) => void
) {
let newIndex = currentIndex;
switch (event.key) {
case "ArrowRight":
case "ArrowDown":
newIndex = (currentIndex + 1) % totalItems;
break;
case "ArrowLeft":
case "ArrowUp":
newIndex = (currentIndex - 1 + totalItems) % totalItems;
break;
case "Home":
newIndex = 0;
break;
case "End":
newIndex = totalItems - 1;
break;
default:
return;
}
event.preventDefault();
onSelect(newIndex);
}
```
All interactive elements must be reachable via keyboard. Tab for focus navigation, Enter/Space for activation, Arrow keys for within-component navigation.
## Form Accessibility
```tsx
function SignupForm() {
return (
);
}
```
## Color and Contrast
```css
:root {
--text-primary: #1a1a1a; /* 15.3:1 on white */
--text-secondary: #595959; /* 7.0:1 on white */
--text-on-primary: #ffffff; /* Ensure 4.5:1 on brand color */
--border-focus: #0066cc; /* Visible focus ring */
}
*:focus-visible {
outline: 3px solid var(--border-focus);
outline-offset: 2px;
}
.error-message {
color: #d32f2f;
/* Don't rely on color alone - add icon or text prefix */
}
.error-message::before {
content: "Error: ";
font-weight: bold;
}
```
WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text (18px bold or 24px regular).
## Anti-Patterns
- Using `div` and `span` for clickable elements instead of `button` or `a`
- Removing focus outlines without providing an alternative indicator
- Relying on color alone to convey information (red for error, green for success)
- Using `aria-label` when visible text already labels the element
- Auto-playing media without a pause mechanism
- Missing skip navigation link for keyboard users
## Checklist
- [ ] All interactive elements keyboard-accessible (Tab, Enter, Escape, Arrows)
- [ ] Semantic HTML landmarks used (`nav`, `main`, `article`, `section`)
- [ ] Images have descriptive `alt` text (or `alt=""` for decorative)
- [ ] Color contrast meets WCAG AA (4.5:1 normal text, 3:1 large text)
- [ ] Focus indicators visible on all interactive elements
- [ ] Form inputs have associated `