# Accessibility Specialist

> |

- **Type:** Skill
- **Install:** `agentstack add skill-felvieira-claude-skills-fv-22-accessibility-specialist`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [felvieira](https://agentstack.voostack.com/s/felvieira)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [felvieira](https://github.com/felvieira)
- **Source:** https://github.com/felvieira/claude-skills-fv/tree/main/skills/22-accessibility-specialist

## Install

```sh
agentstack add skill-felvieira-claude-skills-fv-22-accessibility-specialist
```

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

## About

# Accessibility Specialist

Acessibilidade nao e um check cosmetico de ultima hora — e um conjunto de requisitos verificaveis (WCAG 2.2 AA) que decidem se 15-20% dos usuarios conseguem usar o produto. Esta skill traz rigor dedicado sem depender de UI/UX, Frontend ou SEO improvisarem.

## Governanca Global

Esta skill segue `GLOBAL.md`, `policies/execution.md`, `policies/handoffs.md`, `policies/quality-gates.md`, `policies/token-efficiency.md`, `policies/verification-before-completion.md` (toda claim de "acessivel" precisa de evidencia: axe limpo, teste de teclado, ou screen reader) e `policies/stack-flexibility.md`.

### Gate contra constituicao

Quando `memory/constitution.md` define eixo UX/acessibilidade:
- nenhum componente interativo novo passa sem navegacao por teclado completa
- contraste minimo AA (4.5:1 texto normal, 3:1 texto grande/UI) e gate, nao sugestao
- se o eixo marca WCAG AA como CRITICAL, violacao de nivel A/AA bloqueia o merge

## Quando Usar

- revisar acessibilidade de um fluxo, tela ou componente antes de merge
- auditar um app existente contra WCAG 2.2 AA e priorizar gaps
- validar teclado, screen reader, contraste e semantica de um formulario complexo
- definir requisitos a11y para uma feature nova (antes da implementacao, nao depois)

## Quando Nao Usar

- substituir UI/UX ou Frontend na implementacao base (esta skill revisa e especifica, nao reescreve tudo)
- tratar a11y como verniz final — chamada tarde, vira retrabalho caro
- conformidade legal formal (VPAT/ACR) — isso exige auditor certificado humano; esta skill prepara o terreno

## Entradas Esperadas

- fluxo/componente alvo + estados de UI (loading, error, empty, disabled, expanded)
- stack e biblioteca de componentes (Radix, MUI, shadcn, headless, custom)
- nivel alvo (WCAG 2.2 A, AA — default AA; AAA so se exigido)

## Saidas Esperadas

- findings priorizados por impacto x esforco, cada um com criterio WCAG citado (ex: "1.4.3 Contrast")
- correcoes concretas (snippet de codigo / atributo ARIA), nao "melhorar acessibilidade"
- handoff claro para Frontend (implementar), QA (regredir) ou UI/UX (repensar design)

## As 4 categorias de teste (faca as 4, nao so a automatica)

Ferramentas automaticas pegam ~30-40% das violacoes WCAG. As outras exigem mao e ouvido.

| Metodo | Cobre | Como |
|---|---|---|
| **Automatico** | contraste, alt faltando, label faltando, ARIA invalido, ordem de heading | `axe-core` (via `@axe-core/playwright`, jest-axe, ou extensao Axe DevTools); Lighthouse a11y |
| **Teclado** | foco, ordem, traps, ativacao, skip links | Desconecte o mouse. `Tab`/`Shift+Tab`/`Enter`/`Space`/`Esc`/setas pelo fluxo inteiro |
| **Screen reader** | nome/role/estado anunciados, live regions, contexto | NVDA (Win, gratis) ou VoiceOver (Mac, `Cmd+F5`); navegue por landmarks e headings |
| **Zoom / reflow** | 200%-400% zoom sem perda de conteudo, reflow a 320px | Browser zoom + viewport estreito; sem scroll horizontal em texto |

## Checklist WCAG 2.2 AA — os criterios que mais quebram

**Perceivable**
- [ ] **1.1.1** Todo `` com `alt` (decorativa → `alt=""`); icone-botao com label acessivel
- [ ] **1.4.3** Contraste texto ≥ 4.5:1 (≥ 3:1 para ≥ 24px ou ≥ 19px bold)
- [ ] **1.4.11** Contraste de UI nao-texto (borda de input, icone, foco) ≥ 3:1
- [ ] **1.4.4 / 1.4.10** Texto escala a 200% e faz reflow a 320px sem scroll horizontal
- [ ] **1.3.1** Estrutura semantica: headings hierarquicos (sem pular de h1 → h4), listas reais, `` com ``

**Operable**
- [ ] **2.1.1** Tudo operavel por teclado; **2.1.2** sem keyboard trap
- [ ] **2.4.3** Ordem de foco logica (segue a leitura visual)
- [ ] **2.4.7** Foco visivel sempre (nunca `outline: none` sem substituto)
- [ ] **2.4.11** (2.2 novo) Elemento focado nao fica escondido atras de sticky header/footer
- [ ] **2.5.8** (2.2 novo) Alvo de toque ≥ 24x24 CSS px (ou espacamento equivalente)
- [ ] **2.4.1** Skip link para o conteudo principal

**Understandable**
- [ ] **3.3.2** Todo campo de form com `` associado (`htmlFor`/`id`), nao so placeholder
- [ ] **3.3.1** Erro de validacao identificado em texto (nao so cor) e ligado ao campo (`aria-describedby`)
- [ ] **3.2.3** Navegacao consistente entre paginas

**Robust**
- [ ] **4.1.2** Componente custom expoe name/role/value corretos (use HTML nativo antes de ARIA)
- [ ] **4.1.3** Mudancas dinamicas anunciadas via `aria-live` (toast, erro, contador)

**Motion**
- [ ] **2.3.3** `prefers-reduced-motion` respeitado em toda animacao nao-essencial

## Exemplos concretos

**Icone-botao sem nome acessivel (1.1.1 / 4.1.2)**
```html

...

...
```

**Erro de form so por cor (1.4.1 / 3.3.1)**
```html

Email invalido: falta o @
```

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

**Regra de ouro ARIA:** HTML nativo > ARIA. `` ja e focavel, clicavel por teclado e tem role. Um `` exige reimplementar `Enter`/`Space` na mao — e quase sempre faz errado.

## Anti-padroes frequentes

- `outline: none` sem `:focus-visible` substituto → teclado fica invisivel
- placeholder usado como label → some ao digitar, contraste baixo, screen reader inconsistente
- `aria-label` em elemento nao-interativo (ignorado) ou duplicando texto visivel
- `tabindex` positivo (`tabindex="3"`) → quebra a ordem natural, vira pesadelo de manutencao
- modal sem focus trap nem retorno de foco ao trigger no fechamento
- carrossel/autoplay sem pause e sem respeitar reduced-motion

## Evidencia de Conclusao

- axe-core rodado sem violacoes serias/criticas (anexar contagem)
- fluxo principal percorrido 100% por teclado, com foco visivel — descrever o caminho
- screen reader interpreta nome/role/estado dos controles-chave
- gaps restantes priorizados (impacto x esforco) com criterio WCAG citado

## Handoff

- **Frontend (04)** implementa as correcoes de codigo/ARIA
- **QA (05)** adiciona teste `jest-axe`/`@axe-core/playwright` para regredir
- **UI/UX (02)** repensa o design quando o problema e estrutural (contraste de paleta, alvo pequeno)
- Seguir `policies/handoffs.md` e, quando util, `templates/accessibility-check.md`

## Source & license

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

- **Author:** [felvieira](https://github.com/felvieira)
- **Source:** [felvieira/claude-skills-fv](https://github.com/felvieira/claude-skills-fv)
- **License:** Apache-2.0

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-felvieira-claude-skills-fv-22-accessibility-specialist
- Seller: https://agentstack.voostack.com/s/felvieira
- 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%.