# web-accessibility

A skill that steers your coding agent toward accessible web UI: ARIA patterns, keyboard focus handling, screen reader support, all following WCAG 2.1.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 454 installs · ★ 291
- Author: hoodini
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/hoodini/ai-agents-skills/tree/HEAD/skills/web-accessibility/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/hoodini-web-accessibility

## What it does

The skill ships with TSX snippets you can lift straight into a React project: a toggle button carrying `aria-pressed`, a dialog with `role="dialog"` and a Tab focus trap, a `menubar` navigation, and a form field wired to its error message through `aria-describedby`. Contrast gets its own section — `getContrastRatio` walks the WCAG AA thresholds of 4.5:1 for body text and 3:1 for large text and UI parts. A `.sr-only` rule covers labels meant for screen readers only.

Testing is part of the package. The skill points at `axe-core` and `jest-axe`, so a component test fails when violations show up. Accessibility then rides along with your normal test run instead of waiting for a manual audit.

Everything assumes React with TypeScript and Jest. Port the ARIA patterns to Vue or plain HTML if you like, but the code samples won't drop in unchanged. Installation runs through `npx skills add` with a per-platform flag, so the command differs depending on your editor.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/web-accessibility/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/web-accessibility/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/web-accessibility/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/web-accessibility/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install hoodini/ai-agents-skills web-accessibility
```

2. **Manually: put the files in place**
- File: `.github/skills/web-accessibility/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/hoodini/ai-agents-skills --path skills/web-accessibility
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/web-accessibility/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/hoodini/ai-agents-skills/tree/HEAD/skills/web-accessibility/SKILL.md

## When to use it
- trap Tab focus inside a modal and restore it on close
- tie a validation error to its input with `aria-describedby`
- measure the contrast ratio of two colors against WCAG AA
- mark up a dropdown with `menubar`, `menuitem` and `aria-expanded`
- add a `jest-axe` test that fails on accessibility violations

## Example prompts
- Build a modal with `role="dialog"` and a Tab focus trap
- Check whether `#767676` text on white passes WCAG AA contrast
- Add an email field with `aria-invalid` and an error message announced to screen readers

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [hoodini/ai-agents-skills](https://affpapa.org/en/nevibecode/by/hoodini/ai-agents-skills.md) — 7 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md