Acessibilidade na Web

Princípios WCAG

POUR · Níveis A/AA/AAA · WCAG 2.2

Os 4 Princípios — POUR

Toda a WCAG se organiza em torno de quatro princípios. Se qualquer um falhar, algum grupo de usuários não conseguirá acessar o conteúdo.

1. Perceptível (Perceivable)

Informações e componentes de interface devem ser apresentados de formas que os usuários possam perceber.

  • 1.1 Alternativas em Texto — texto alternativo para conteúdo não textual (imagens, ícones, CAPTCHAs)
  • 1.2 Mídia Baseada em Tempo — legendas, transcrições, audiodescrição para vídeos e áudios
  • 1.3 Adaptável — conteúdo apresentável de diferentes formas sem perder informação (estrutura semântica)
  • 1.4 Distinguível — facilitar distinção entre primeiro e segundo plano (contraste, redimensionamento, espaçamento)

2. Operável (Operable)

Componentes de interface e navegação devem ser operáveis por todos.

  • 2.1 Acessível por Teclado — toda funcionalidade disponível via teclado, sem armadilhas de foco
  • 2.2 Tempo Suficiente — usuários têm tempo suficiente para ler e agir (pausar timers, estender sessões)
  • 2.3 Convulsões e Reações — evitar conteúdo que pisca mais de 3× por segundo
  • 2.4 Navegável — skip links, títulos, breadcrumbs ajudam a encontrar conteúdo
  • 2.5 Modalidades de Entrada — facilitar operação além do teclado (gestos, movimento do dispositivo)

3. Compreensível (Understandable)

Informações e operação da interface devem ser compreensíveis.

  • 3.1 Legível — declare o idioma (lang="pt-br"); texto claro e compreensível
  • 3.2 Previsível — páginas funcionam de forma consistente; mudanças de contexto apenas por ação do usuário
  • 3.3 Assistência na Entrada — labels claros, erros descritivos com sugestões de correção

4. Robusto (Robust)

Conteúdo deve ser interpretado por ampla variedade de agentes de usuário, incluindo tecnologias assistivas.

  • 4.1 Compatível — maximize compatibilidade com tecnologias assistivas atuais e futuras
  • HTML válido e bem estruturado garante parsing correto por leitores de tela
  • Use role, name e value corretos em todos os componentes
  • Mensagens de status anunciadas via role="status" ou aria-live

Níveis de Conformidade

Cada critério de sucesso é classificado em um de três níveis, refletindo impacto para os usuários e viabilidade de implementação.

Comparação dos níveis A, AA e AAA
Nível Descrição Exigência Exemplo
A Conformidade mínima. Sem esses critérios o conteúdo é inacessível para algum grupo. Obrigatório — linha de base Imagem informativa com alt; toda funcionalidade por teclado
AA Recomendado para a maioria dos sites. Remove barreiras significativas. Padrão de mercado; exigido por ADA e LBI Contraste ≥ 4,5:1; cabeçalhos e labels em formulários
AAA Conformidade aprimorada. Nem sempre aplicável a todo o conteúdo. Aspiracional — recomendado para conteúdos críticos Contraste 7:1; linguagem de sinais em vídeos

Critérios mais importantes por nível

Nível A

  • 1.1.1 Conteúdo não textual
  • 1.3.1 Informações e Relações
  • 2.1.1 Teclado
  • 2.1.2 Sem armadilha de foco
  • 2.4.1 Ignorar Blocos (skip link)
  • 4.1.2 Nome, Função, Valor

Nível AA

  • 1.4.3 Contraste (mínimo)
  • 1.4.4 Redimensionar texto
  • 1.4.10 Reflow (zoom 400%)
  • 1.4.11 Contraste de não-texto
  • 2.4.7 Foco Visível
  • 3.3.3 Sugestão de Erro

Nível AAA

  • 1.4.6 Contraste aprimorado 7:1
  • 2.1.3 Teclado sem exceção
  • 2.2.3 Sem tempo
  • 2.4.9 Link como finalidade
  • 3.1.5 Nível de leitura
  • 3.3.6 Prevenção de erros

Novidades do WCAG 2.2 (outubro 2023)

9 novos critérios de sucesso com foco em usuários cognitivos, baixa visão e mobile. O critério 4.1.1 (Análise) foi removido por se tornar obsoleto.

AA

2.4.11 — Foco Não Obstruído (mínimo)

O indicador de foco não é completamente oculto por conteúdo do autor (sticky header, banners de cookie). Parte do foco pode ficar coberta.

AAA

2.4.12 — Foco Não Obstruído (aprimorado)

O indicador de foco nunca é oculto por conteúdo do autor — versão mais estrita, sem exceção de cobertura parcial.

AAA

2.4.13 — Aparência do Foco

O indicador de foco deve ter área ≥ perímetro do componente × 2 CSS px, com razão de contraste ≥ 3:1 entre estados com e sem foco.

AA

2.5.7 — Movimentos de Arraste

Toda funcionalidade que usa arraste pode ser operada com um único ponteiro sem arrastar, a não ser que seja essencial.

AA

2.5.8 — Tamanho do Alvo (mínimo)

Alvo de interação deve ter pelo menos 24×24 CSS px. Exceções para links inline e elementos com espaçamento compensatório.

AA

3.2.6 — Ajuda Consistente

Mecanismos de ajuda (chat, telefone, FAQ) que aparecem em múltiplas páginas devem manter a mesma ordem relativa.

AA

3.3.7 — Entrada Redundante

Informações já fornecidas na mesma sessão não são solicitadas novamente, salvo quando essencial ou por segurança.

AA

3.3.8 — Autenticação Acessível (mínimo)

Nenhuma etapa de autenticação exige teste cognitivo funcional (resolver puzzle, decorar sequência) sem alternativa acessível.

AAA

3.3.9 — Autenticação Acessível (aprimorado)

Nenhum teste cognitivo funcional em qualquer parte da autenticação — versão mais estrita, sem a exceção "essencial".