# Accessibility Patterns

WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization

- Repository: https://github.com/vibeeval/vibecosystem (541 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-08-08
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add vibeeval/vibecosystem --skill accessibility-patterns -g -a claude-code -y`
Codex: `npx skills add vibeeval/vibecosystem --skill accessibility-patterns -g -a codex -y`
Cursor: `npx skills add vibeeval/vibecosystem --skill accessibility-patterns -g -a cursor -y`
Gemini CLI: `npx skills add vibeeval/vibecosystem --skill accessibility-patterns -g -a gemini-cli -y`

## Description

WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Accessibility Patterns

## WCAG 2.2 AA Requirements

### Perceivable

| Kriter | Kural | Kontrol |
|--------|-------|---------|
| 1.1.1 | Non-text content alt text | `<img alt="description">` |
| 1.3.1 | Semantic HTML | Headings, landmarks, lists |
| 1.4.3 | Color contrast | 4.5:1 normal text, 3:1 large |
| 1.4.11 | UI component contrast | 3:1 borders, icons |

### Operable

| Kriter | Kural | Kontrol |
|--------|-------|---------|
| 2.1.1 | Keyboard accessible | Tab, Enter, Space, Escape |
| 2.4.3 | Focus order | Logical tab sequence |
| 2.4.7 | Focus visible | Visible focus indicator |
| 2.5.8 | Target size | Min 24x24px (44x44px önerilir) |

### Understandable

| Kriter | Kural | Kontrol |
|--------|-------|---------|
| 3.1.1 | Language of page | `<html lang="tr">` |
| 3.2.1 | On focus | No unexpected context change |
| 3.3.1 | Error identification | Clear error messages |
| 3.3.2 | Labels or instructions | Form labels visible |

## ARIA Patterns

```html
<!-- Dialog -->
<div role="dialog" aria-modal="true" aria-labelledby="title">
  <h2 id="title">Confirm</h2>
  <button aria-label="Close dialog">×</button>
</div>

<!-- Tabs -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel2">Tab 2</button>
</div>
<div role="tabpanel" id="panel1">Content 1</div>

<!-- Live region (dynamic updates) -->
<div aria-live="polite" aria-atomic="true">
  3 new messages
</div>
```

## Keyboard Navigation

```typescript
// Focus trap (modal/dialog)
function useFocusTrap(ref: RefObject<HTMLElement>) {
  useEffect(() => {
    const focusable = ref.current?.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    )
    const first = focusable?.[0] as HTMLElement
    const last = focusable?.[focusable.length - 1] as HTMLElement

The rest: https://github.com/vibeeval/vibecosystem/blob/HEAD/skills/accessibility-patterns/SKILL.md