# Accessibility Patterns

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

- **Type:** Skill
- **Install:** `agentstack add skill-vibeeval-vibecosystem-accessibility-patterns`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [vibeeval](https://agentstack.voostack.com/s/vibeeval)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [vibeeval](https://github.com/vibeeval)
- **Source:** https://github.com/vibeeval/vibecosystem/tree/main/skills/accessibility-patterns

## Install

```sh
agentstack add skill-vibeeval-vibecosystem-accessibility-patterns
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Accessibility Patterns

## WCAG 2.2 AA Requirements

### Perceivable

| Kriter | Kural | Kontrol |
|--------|-------|---------|
| 1.1.1 | Non-text content alt text | `` |
| 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 | `` |
| 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

  Confirm
  ×

  Tab 1
  Tab 2

Content 1

  3 new messages

```

## Keyboard Navigation

```typescript
// Focus trap (modal/dialog)
function useFocusTrap(ref: RefObject) {
  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

    function handleKeyDown(e: KeyboardEvent) {
      if (e.key !== 'Tab') return
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus()
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus()
      }
    }
    ref.current?.addEventListener('keydown', handleKeyDown)
    first?.focus()
    return () => ref.current?.removeEventListener('keydown', handleKeyDown)
  }, [ref])
}
```

## Skip Links

```html
Skip to main content

...

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 100;
}
.skip-link:focus { top: 0; }

```

## Motion Preferences

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

## Testing

```bash
# axe-core (automated)
npx @axe-core/cli https://localhost:3000

# Lighthouse accessibility audit
lighthouse --only-categories=accessibility https://localhost:3000
```

## Checklist

- [ ] Semantic HTML (headings, landmarks, lists)
- [ ] Alt text on all images
- [ ] Color contrast 4.5:1 (text), 3:1 (UI)
- [ ] Keyboard navigable (tab order logical)
- [ ] Focus visible indicator
- [ ] Skip link to main content
- [ ] Form labels and error messages
- [ ] ARIA roles where needed
- [ ] prefers-reduced-motion respected
- [ ] axe-core test pass

## Anti-Patterns

- `` instead of ``
- Color-only information (add icon/text)
- Auto-playing video/audio
- Removing focus outline without replacement
- Using ARIA when native HTML suffices

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [vibeeval](https://github.com/vibeeval)
- **Source:** [vibeeval/vibecosystem](https://github.com/vibeeval/vibecosystem)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-vibeeval-vibecosystem-accessibility-patterns
- Seller: https://agentstack.voostack.com/s/vibeeval
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.