Receber por email
← Voltar para o catálogo

a11y-check

Accessibility audit against WCAG 2.1 AA. Checks semantic HTML, ARIA, keyboard navigation, color contrast, screen reader compatibility.

35estrelas
Atualizado há 4 meses

Ver no GitHub ↗ Licença: MIT

Como adicionar

/plugin marketplace add haabe/mycelium

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/a11y-check/svg)](https://www.skillteca.com.br/skills/a11y-check)
#ai

Skills relacionadas

Ver todas de Segurança →

Alerta por categoria

Receba novas skills de Segurança toda segunda

1 email curto, só com as skills novas de Segurança. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

Accessibility Audit

Evaluate user-facing work against WCAG 2.1 AA. Accessibility is a design constraint, not a polish step (Downe Principle 11).

WCAG 2.1 AA Checklist by Principle

1. Perceivable

  • [ ] All images have meaningful alt text (or alt="" for decorative)
  • [ ] Video has captions; audio has transcripts
  • [ ] Color is never the sole indicator of meaning
  • [ ] Color contrast: 4.5:1 normal text, 3:1 large text
  • [ ] Content is readable at 200% zoom without horizontal scroll
  • [ ] Text spacing can be adjusted without loss of content

2. Operable

  • [ ] All interactive elements reachable via keyboard (Tab/Shift+Tab)
  • [ ] Visible focus indicators on all focusable elements
  • [ ] No keyboard traps (can always Tab away)
  • [ ] Skip navigation link for repetitive content
  • [ ] Page titles are descriptive and unique
  • [ ] Focus order matches visual order
  • [ ] Touch targets are at least 44x44 CSS pixels

3. Understandable

  • [ ] Language of page is declared (lang attribute)
  • [ ] Form inputs have associated labels
  • [ ] Error messages identify the field and describe the fix
  • [ ] Instructions don't rely solely on sensory characteristics
  • [ ] Navigation is consistent across pages

4. Robust

  • [ ] Valid HTML (no duplicate IDs, proper nesting)
  • [ ] ARIA used correctly (roles, states, properties)
  • [ ] Custom components expose name, role, value to assistive tech
  • [ ] Status messages use aria-live regions

Automated Testing Tools (by stack)

| Stack | Tool | Command | |-------|------|---------| | React/Web | axe-core | npx axe <url> or axe-core in tests | | Any web | Lighthouse | npx lighthouse <url> --only-categories=accessibility | | Any web | pa11y | npx pa11y <url> | | CI/CD | axe-linter | Add to CI pipeline |

Common Violations and Fixes

| Violation | Fix | |-----------|-----| | Missing alt text | Add descriptive alt or alt="" for decorative | | Low color contrast | Increase contrast ratio to 4.5:1 minimum | | Missing form labels | Add <label for="id"> or aria-label | | No focus indicator | Add :focus-visible styles, never outline: none | | Non-semantic buttons | Use <button> not <div onclick> | | Missing heading hierarchy | Use h1-h6 in order, don't skip levels | | Auto-playing media | Add pause/stop controls, respect prefers-reduced-motion |

When to Run

  • During development: after every UI component
  • Before PR: full automated scan
  • Before release: manual screen reader test of critical journeys
  • After design changes: re-audit affected components

Sensitive Context Note

For products handling sensitive user contexts (health, finance, domestic violence, government services), also review trauma-informed design principles in ${CLAUDE_PLUGIN_ROOT}/domains/quality/CLAUDE.md. Source: Hussain (Chayn), built on SAMHSA's 6 Principles (2014).

Neurodiversity Considerations

For information-dense or learning-oriented products, supplement WCAG with the Neurodiversity Design System (neurodiversity.design, Soward). Its 8 principle categories with neurotype-to-UI-element matrix address cognitive accessibility needs that WCAG does not fully cover (e.g., font shapes for dyslexia, number formatting for dyscalculia, animation controls for ADHD).

Compartilhar X LinkedIn