Acessibilidade
Acessibilidade significa que pessoas com deficiência podem perceber, operar e compreender o trabalho. Isso inclui deficiências permanentes, temporárias e situacionais. A maioria das falhas começa como uma decisão de design que ninguém tomou: nenhum estilo de foco desenhado, nenhum estado de erro, nenhum texto alternativo, nenhum nível de cabeçalho. Esta skill transforma essas decisões em uma lista de verificação.
A matemática de contraste, APCA e deficiência de visão de cores estão em color → contrast-and-dark-mode.md. Os tamanhos de alvo de toque das plataformas estão em media-specs → digital-platforms.md. Idosos, alfabetização, dislexia e cultura estão em cognitive-psychology → audience-and-culture.md. Os mínimos de tipografia estão em typography → legibility-by-medium.md.
Regras não negociáveis
- Mire no WCAG 2.2 AA a menos que um contrato ou lei mencione outra versão. Isso também satisfaz 2.1 AA e 2.0 AA, exceto por 4.1.1 Parsing, que a 2.2 removeu. Todos os requisitos WCAG são [E2].
- Projete cada estado. Padrão, hover, foco, ativo, selecionado, desabilitado, erro, carregamento e vazio, em ambos os modos de cor. Um estado não desenhado é um bug de acessibilidade.
- Foco visível em toda parte. Padrão interno: contorno sólido de 2 px, deslocamento de 2 px, 3:1 contra cores adjacentes (atende AAA 2.4.13). Nunca use
outline: nonesem uma substituição. Cabeçalhos fixos não devem esconder o item focalizado (2.4.11). - Alvos ≥ 24×24 px CSS (2.5.8 AA), ou espaçados para agir como tal. Os mínimos da plataforma são maiores (44pt iOS, 48dp Android), portanto use-os em UIs de toque.
- Nunca pisque e respeite movimento reduzido. No máximo 3 flashes por segundo. Controles de pausa para qualquer movimento com duração superior a 5s. Honre
prefers-reduced-motioncomo uma regra interna (2.3.3). - Tudo pelo teclado; nada apenas por arrastar, passar o mouse ou memória. Alternativas de toque único para arrastar (2.5.7). Sem quebra-cabeças ou transcrição no login (3.3.8). Não peça para as pessoas redigitarem dados (3.3.7).
- Formulários: rótulos visíveis (placeholders não são rótulos), instruções antes do campo, erros em texto que digam como corrigi-los e validação que espera até que o usuário tenha saído do campo. Use tokens
autocompletepara dados pessoais (1.3.5). - Alternativas textuais por propósito. Siga a árvore de decisão de alt do W3C: imagens decorativas recebem
alt="", imagens funcionais descrevem a ação, imagens complexas recebem uma descrição longa. Sem imagens de texto. - Corrija barreiras universais antes de personalizar. Linguagem clara, layout previsível, formulários tolerantes e controle do usuário ajudam usuários cognitivos, idosos, com baixa alfabetização, segunda língua e estressados de uma só vez [E2].
- Ferramentas automatizadas não são um veredito. Ferramentas individuais detectaram 17–41% dos tipos de barreira na auditoria do governo do Reino Unido de 2017. Teste manualmente e com pessoas com deficiência.
- Notas legais são orientação, não aconselhamento jurídico. Verifique as datas antes de citá-las. Várias mudaram em 2026.
Lista de verificação do designer (passagem de especificação)
- Níveis de cabeçalho, marcos e ordem de leitura/foco anotados (kits de anotação:
motion-media-and-forms.md§7). - Cada elemento interativo: nome, função, todos os estados, estilo de foco, tamanho do alvo.
- Cada imagem: texto alternativo ou marcada como decorativa. Gráficos têm um equivalente em texto ou tabela.
- Cada formulário: rótulos, texto de ajuda, mensagens de erro escritas, campos obrigatórios marcados,
autocompleteanotado. - Contraste verificado para texto, limites de UI, foco e ícones em ambos os modos (
color). - Movimento: variante de movimento reduzido especificada. Sem flashes. Controle de pausa para movimento longo.
- Vídeo: legendas, além de audiodescrição ou uma transcrição.
- Layout se redimensiona a 320 px CSS. O texto sobrevive ao zoom de 200% e às substituições de espaçamento 1.4.12 (
layout-composition). - Ajuda e contato em um lugar consistente (3.2.6). Login sem testes de memória (3.3.8).
- Revisão de linguagem clara em todo o texto (
inclusive-and-cognitive.md§5).
Resumo legal (verificado em outubro de 2026, verifique novamente antes de citar)
| Onde | Regra | Padrão | Datas |
|---|---|---|---|
| UE | Ato Europeu de Acessibilidade | EN 301 549: V3.2.1 citado agora; V4.1.1 (WCAG 2.2 AA) publicado em setembro de 2026, citação no Jornal Oficial pendente | Aplica-se a partir de 28 de junho de 2025 |
| Governo estadual/local dos EUA | Regra ADA Título II (2024) | WCAG 2.1 AA | Prorrogado abril de 2026: 26 de abril de 2027 (≥50k habitantes), 26 de abril de 2028 (menores, distritos especiais) |
| Empresas dos EUA | ADA Título III | Jurisprudência, geralmente WCAG 2.x AA | Impulsionado por litígios |
| Federal dos EUA | Seção 508 | WCAG 2.0 AA (web, documentos, software) | Desde 2018 |
| Setor público do Reino Unido | PSBAR 2018 | WCAG 2.2 AA + declaração de acessibilidade | Em vigor |
| Federal do Canadá | Lei do Canadá Acessível | CAN/ASC-EN 301 549:2024 | Meta 2040 |
| Brasil | LBI art. 63 | ABNT NBR 17225 (2025); eMAG 3.1 (federal) | Em vigor |
| Japão | Lei de Discriminação por Deficiência | JIS X 8341-3:2016 | Acomodação obrigatória no setor privado desde abril de 2024 |
WCAG 2.2 também é ISO/IEC 40500:2025. WCAG 3 ainda é um Working Draft e está a anos de distância.
Por mídia
| Mídia | Foco |
|---|---|
| Aplicativos nativos | 1.3.4 orientação, 1.4.4 Tipo Dinâmico/escala de fonte, 2.5.x ponteiro e alvos, 3.3.x entrada, 4.1.2 nome/função/valor |
| Web | Tudo. 1.4.10 reformatação, 1.4.12 espaçamento e 2.4.11 foco não obscurecido quebram com mais frequência. |
| PDF, slides | Tags, cabeçalhos, ordem de leitura, contraste, títulos de página, idioma |
| Posts em redes sociais | Campos de texto alternativo, legendas em vídeo, nenhum significado apenas com cor, texto repetido na legenda, sem piscar |
| Impresso, OOH | WCAG não se aplica diretamente, mas sua lógica de contraste e cor é uma boa prática. Regras de distância estão em media-specs. |
Arquivos de referência — quando abrir
| Arquivo | Abrir quando |
|---|---|
references/wcag-22-in-practice.md | Verificando qualquer critério de sucesso; escrevendo uma especificação; as adições da 2.2 em detalhes; critérios AAA que valem a pena adotar; aplicabilidade por mídia. |
references/inclusive-and-cognitive.md | Método de design inclusivo, espectro de personas, números de prevalência para citar, deficiências situacionais, acessibilidade cognitiva (COGA), linguagem clara, usuários neurodivergentes, localização/RTL básica, lista de verificação de inclusão. |
references/motion-media-and-forms.md | Movimento e flashes, código de movimento reduzido, legendas/audiodescrição/transcrições, texto alternativo e imagens complexas, especificações de foco e teclado, links de pular, formulários e erros, autocomplete, toque/ponteiro, anotações para leitores de tela e kits. |
references/legal-and-testing.md | Perguntas legais por jurisdição, qual padrão projetar, cobertura de ferramentas, WebAIM Million 2026, lista de verificação de teste manual, teste com usuários com deficiência, lista de verificação de passagem de especificação do Figma, declarações de acessibilidade, VPAT/ACR. |