{"slug":"vibeeval-accessibility-patterns","name":"accessibility-patterns","description":"WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization","long_description":"---\nname: accessibility-patterns\ndescription: WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization\n---\n\n# Accessibility Patterns\n\n## WCAG 2.2 AA Requirements\n\n### Perceivable\n\n| Kriter | Kural | Kontrol |\n|--------|-------|---------|\n| 1.1.1 | Non-text content alt text | `\"description\"` |\n| 1.3.1 | Semantic HTML | Headings, landmarks, lists |\n| 1.4.3 | Color contrast | 4.5:1 normal text, 3:1 large |\n| 1.4.11 | UI component contrast | 3:1 borders, icons |\n\n### Operable\n\n| Kriter | Kural | Kontrol |\n|--------|-------|---------|\n| 2.1.1 | Keyboard accessible | Tab, Enter, Space, Escape |\n| 2.4.3 | Focus order | Logical tab sequence |\n| 2.4.7 | Focus visible | Visible focus indicator |\n| 2.5.8 | Target size | Min 24x24px (44x44px önerilir) |\n\n### Understandable\n\n| Kriter | Kural | Kontrol |\n|--------|-------|---------|\n| 3.1.1 | Language of page | `` |\n| 3.2.1 | On focus | No unexpected context change |\n| 3.3.1 | Error identification | Clear error messages |\n| 3.3.2 | Labels or instructions | Form labels visible |\n\n## ARIA Patterns\n\n```html\n\n
\n

Confirm

\n \n
\n\n\n
\n \n \n
\n
Content 1
\n\n\n
\n 3 new messages\n
\n```\n\n## Keyboard Navigation\n\n```typescript\n// Focus trap (modal/dialog)\nfunction useFocusTrap(ref: RefObject) {\n useEffect(() => {\n const focusable = ref.current?.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n )\n const first = focusable?.[0] as HTMLElement\n const last = focusable?.[focusable.length - 1] as HTMLElement\n\n function handleKeyDown(e: KeyboardEvent) {\n if (e.key !== 'Tab') return\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault(); last.focus()\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault(); first.focus()\n }\n }\n ref.current?.addEventListener('keydown', handleKeyDown)\n first?.focus()\n return () => ref.current?.removeEventListener('keydown', handleKeyDown)\n }, [ref])\n}\n```\n\n## Skip Links\n\n```html\nSkip to main content\n\n
...
\n\n\n```\n\n## Motion Preferences\n\n```css\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n}\n```\n\n## Testing\n\n```bash\n# axe-core (automated)\nnpx @axe-core/cli https://localhost:3000\n\n# Lighthouse accessibility audit\nlighthouse --only-categories=accessibility https://localhost:3000\n```\n\n## Checklist\n\n- [ ] Semantic HTML (headings, landmarks, lists)\n- [ ] Alt text on all images\n- [ ] Color contrast 4.5:1 (text), 3:1 (UI)\n- [ ] Keyboard navigable (tab order logical)\n- [ ] Focus visible indicator\n- [ ] Skip link to main content\n- [ ] Form labels and error messages\n- [ ] ARIA roles where needed\n- [ ] prefers-reduced-motion respected\n- [ ] axe-core test pass\n\n## Anti-Patterns\n\n- `
` instead of `