Voltar ao índice
Design e UI

Padrões de auditoria de acessibilidade WCAG 2.2

Orienta auditorias WCAG 2.2 com testes automatizados, verificação manual e recomendações para corrigir barreiras de acessibilidade.

Ver código no GitHub Instala diretamente do repositório-fonte.

O que esta skill faz

A skill organiza a avaliação pelos princípios perceptível, operável, compreensível e robusto, considerando níveis A, AA e AAA. Ela destaca problemas comuns de teclado, imagens, formulários, contraste, estrutura e mídia.

Quando usar

  • Auditar uma interface contra WCAG 2.2
  • Corrigir navegação inacessível por teclado
  • Revisar labels, alt text e hierarquia de títulos
  • Implementar componentes acessíveis
  • Preparar orientações de remediação

Como usar

  1. Defina páginas, fluxos e nível de conformidade desejado
  2. Revise o repositório e identifique componentes compartilhados
  3. Execute testes automatizados e registre ocorrências
  4. Faça verificação manual, inclusive por teclado e tecnologia assistiva
  5. Priorize correções e valide novamente os fluxos afetados

O que revisar antes de instalar

  • Testes automatizados não cobrem todos os critérios WCAG
  • Conformidade técnica não garante uma experiência perfeita para todas as pessoas
  • A skill fornece orientação, não certificação jurídica ou regulatória
  • Requisitos detalhados adicionais dependem do arquivo de referência citado

SKILL.md

---
name: wcag-audit-patterns
description: Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.
---

# WCAG Audit Patterns

Comprehensive guide to auditing web content against WCAG 2.2 guidelines with actionable remediation strategies.

## When to Use This Skill

- Conducting accessibility audits
- Fixing WCAG violations
- Implementing accessible components
- Preparing for accessibility lawsuits
- Meeting ADA/Section 508 requirements
- Achieving VPAT compliance

## Core Concepts

### 1. WCAG Conformance Levels

| Level   | Description            | Required For      |
| ------- | ---------------------- | ----------------- |
| **A**   | Minimum accessibility  | Legal baseline    |
| **AA**  | Standard conformance   | Most regulations  |
| **AAA** | Enhanced accessibility | Specialized needs |

### 2. POUR Principles

```
Perceivable:  Can users perceive the content?
Operable:     Can users operate the interface?
Understandable: Can users understand the content?
Robust:       Does it work with assistive tech?
```

### 3. Common Violations by Impact

```
Critical (Blockers):
├── Missing alt text for functional images
├── No keyboard access to interactive elements
├── Missing form labels
└── Auto-playing media without controls

Serious:
├── Insufficient color contrast
├── Missing skip links
├── Inaccessible custom widgets
└── Missing page titles

Moderate:
├── Missing language attribute
├── Unclear link text
├── Missing landmarks
└── Improper heading hierarchy
```

## Detailed patterns and worked examples

Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.

## Best Practices

### Do's

- **Start early** - Accessibility from design phase
- **Test with real users** - Disabled users provide best feedback
- **Automate what you can** - 30-50% issues detectable
- **Use semantic HTML** - Reduces ARIA needs
- **Document patterns** - Build accessible component library

### Don'ts

- **Don't rely only on automated testing** - Manual testing required
- **Don't use ARIA as first solution** - Native HTML first
- **Don't hide focus outlines** - Keyboard users need them
- **Don't disable zoom** - Users need to resize
- **Don't use color alone** - Multiple indicators needed