# accessibility

This skill guides Claude Code through web accessibility reviews based on WCAG 2.1. Use it to inspect keyboard access, screen reader support, and interface elements.

- skill · `type=skill` · Claude Code · 325 installs
- Author: web-quality-skills
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/accessibility
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/accessibility

## What it does

The skill gives Claude Code guidance for reviewing web pages against WCAG 2.1. Its coverage includes image alternatives, color contrast, media captions, keyboard operation, visible focus, and the language declared for a page.

The guidance can help the agent spot issues and suggest code changes, such as naming an icon button for assistive technology or making a form error clear without relying on color alone. It also includes examples for modal focus, a link to the main content, and reduced-motion preferences.

These are review guidelines, not a guarantee that a site conforms to WCAG; the result depends on what the agent examines in the project. Install the skill in Claude Code with `npx claude-code-templates@latest --skill development/accessibility`.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/accessibility
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill accessibility -a claude-code
```

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

### Codex

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

### Cursor

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates accessibility
```

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

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/accessibility
```

### Windsurf (Devin Desktop)

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

### 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/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/accessibility

## When to use it
- find images that lack text alternatives
- check contrast for text and interface controls
- add keyboard handling to interactive elements
- make keyboard focus visible
- explain form errors without relying on color alone

## Example prompts
- Review this form page for WCAG 2.1 accessibility issues and suggest code changes.
- Find interface controls that cannot be operated from the keyboard.
- Check image alternatives and accessible names on icon buttons.

## 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

## Other versions with the same name
- [accessibility · addyosmani](https://affpapa.org/en/nevibecode/skills/web-quality-skills-accessibility.md) — 64100 installs
- [accessibility · affaan-m](https://affpapa.org/en/nevibecode/skills/affaan-m-accessibility.md) — 5100 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 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