# Vue A11y

> Accessibility (a11y) for Vue 3 apps. Semantic templates, ARIA component patterns (modal, tabs, menu, combobox), focus management with Teleport and router navigation, accessible forms and errors, automated testing with axe. Use when building UI components, reviewing for accessibility, WCAG compliance, keyboard navigation, or screen reader support.

- **Type:** Skill
- **Install:** `agentstack add skill-kimjinwoo4-vue-skills-vue-a11y`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [KIMJINWOO4](https://agentstack.voostack.com/s/kimjinwoo4)
- **Installs:** 0
- **Category:** [Search](https://agentstack.voostack.com/c/search)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [KIMJINWOO4](https://github.com/KIMJINWOO4)
- **Source:** https://github.com/KIMJINWOO4/vue-skills/tree/main/skills/vue-a11y

## Install

```sh
agentstack add skill-kimjinwoo4-vue-skills-vue-a11y
```

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

## About

# Vue Accessibility Skill

> Target: WCAG 2.2 AA. Priority order: semantic HTML > keyboard support > focus management > ARIA. ARIA is the last resort, not the first tool — `` beats `` plus three handlers.

## Non-negotiables for every component

1. Interactive = focusable + keyboard-operable (``, ``, `` give this free).
2. Every input has a ``; every image an `alt` (empty `alt=""` for decorative).
3. Visible focus indicator — never `outline: none` without a replacement (`:focus-visible`).
4. Click targets ≥ 24×24px; color is never the only signal.
5. State changes announce themselves: errors, async results, route changes (live regions / focus moves).

## SPA-specific traps (Vue)

| Trap | Fix |
|------|-----|
| Route change is silent to screen readers | Announce + move focus — [focus-management](references/focus-management.md) |
| Modal via Teleport, focus escapes behind it | Focus trap + `inert`/`aria-modal` — [focus-management](references/focus-management.md) |
| `v-if` swaps content without announcement | `aria-live` region or focus the new content |
| Custom `` dropdown/tab/menu widgets | Use the ARIA pattern — [aria-components](references/aria-components.md) |
| Validation errors only shown as red text | `aria-describedby` + `aria-invalid` wiring — see `vue-forms` skill + [aria-components](references/aria-components.md) |

## Reference Map

| Topic | Description | Path |
|------|-------------|------|
| **ARIA components** | Modal, tabs, menu, combobox, disclosure, toast patterns in Vue | [aria-components](references/aria-components.md) |
| **Focus management** | Teleport modals, focus traps, route announcements, skip links | [focus-management](references/focus-management.md) |
| **Testing** | vitest-axe, Playwright audits, eslint-plugin-vuejs-accessibility | [testing-a11y](references/testing-a11y.md) |

## Source & license

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

- **Author:** [KIMJINWOO4](https://github.com/KIMJINWOO4)
- **Source:** [KIMJINWOO4/vue-skills](https://github.com/KIMJINWOO4/vue-skills)
- **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-kimjinwoo4-vue-skills-vue-a11y
- Seller: https://agentstack.voostack.com/s/kimjinwoo4
- 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%.