Um checklist interativo da WCAG 2.2 com os 55 critérios de sucesso de nível A e AA, cada um com um significado simples, um teste e uma correção, mais um verificador de contraste de cores WCAG.
Um checklist WCAG para a maioria dos sites cobre os 55 critérios de sucesso de nível A e AA da WCAG 2.2 (o 4.1.1 Análise sintática foi removido). Verificações principais: contraste de texto de pelo menos 4.5:1 (3:1 para texto grande), uso completo pelo teclado, foco visível, campos com rótulo, legendas e alvos de pelo menos 24 por 24 pixels CSS.
A WCAG 2.2 em resumo
Esta é a versão prática de uma revisão de acessibilidade: todos os critérios de sucesso de nível A e AA da WCAG 2.2, agrupados por princípio, cada um com o que significa em palavras simples, como testar em poucos minutos e uma correção em código quando o código ajuda. Marque os itens à medida que avança, filtre por nível ou princípio e imprima o resultado.
Estar em conformidade com o nível AA significa atender a 55 critérios: 31 de nível A e 24 de nível AA. A WCAG 2.2 tem 86 critérios no total quando se contam os 31 itens de nível AAA, depois que o 4.1.1 Análise sintática foi declarado obsoleto e removido.
O critério 1.4.3 pede 4.5:1 entre o texto normal e o fundo, e 3:1 para texto grande, ou seja, pelo menos 18 pontos (24 pixels CSS) ou 14 pontos em negrito (cerca de 18.66 pixels CSS). O critério 1.4.11 pede 3:1 para ícones, bordas de campos e indicadores de foco.
Nenhum checklist pode prometer isso. As leis variam por país e setor, e algumas se baseiam na WCAG 2.1 ou em normas próprias. Use esta página para encontrar e corrigir barreiras, e procure orientação jurídica para questões de conformidade.
A WCAG 2.2 adicionou nove critérios, seis deles de nível A ou AA: Foco não obscurecido (mínimo), Movimentos de arrastar, Tamanho do alvo (mínimo), Ajuda consistente, Entrada redundante e Autenticação acessível (mínimo). Ela também removeu o 4.1.1 Análise sintática.
Cada cor é convertida em luminância relativa linearizando os canais vermelho, verde e azul e ponderando-os por 0.2126, 0.7152 e 0.0722. A taxa é a luminância mais clara mais 0.05, dividida pela mais escura mais 0.05, o que dá um valor de 1:1 a 21:1.
Oculto até receber foco, depois aparece no topo. Pressione Tab dentro do resultado para vê-lo.
focus-visible mostra o anel para quem usa teclado. A cor do contorno deve chegar a 3:1 em relação ao fundo.
scroll-padding reserva espaço para que elementos focados que rolam para a área visível não fiquem escondidos sob a barra.
Aumente o padding de botões de ícone pequenos até 24 por 24 pixels CSS. 44 pixels é o alvo AAA mais rigoroso e mais gentil no celular.
Cole isto nas ferramentas de desenvolvedor. Estes são os valores que o critério cita; o conteúdo deve continuar legível com eles aplicados.
A mensagem é texto, fica ao lado do campo, diz como corrigir e está ligada com aria-describedby.
Uma região role=status é anunciada de forma educada quando seu texto muda, sem mover o foco.
Parar o movimento automático para quem pede menos movimento também ajuda no critério Pausar, parar, ocultar.
Valores de autocomplete corretos e nenhum bloqueio de colar permitem que as pessoas façam login sem lembrar de uma senha.
Imagens, ícones e controles têm uma alternativa em texto; a decoração fica oculta.
Confira cada alt de img, nome de botão de ícone e resumo de gráfico.
Conteúdo só de áudio tem transcrição; vídeo sem som tem transcrição ou faixa de áudio.
Encontre cada podcast ou clipe sem som e procure sua alternativa.
Vídeos gravados com som têm legendas sincronizadas.
Reproduza os vídeos com legendas ligadas; confira a precisão, não só a presença.
Informação só visual no vídeo é descrita ou oferecida em texto.
Assista de olhos fechados; algo importante se perde?
Transmissões ao vivo com áudio têm legendas.
Confira se o player ou serviço ao vivo suporta legendas em tempo real.
Vídeos gravados têm audiodescrição quando o visual carrega significado.
Procure uma versão descrita ou uma narração que cubra o texto na tela.
Títulos, listas, tabelas e rótulos são marcados no código, não só estilizados.
Inspecione títulos, listas, cabeçalhos de tabela e associações de rótulos.
A ordem de leitura no código corresponde ao sentido.
Desligue o CSS ou use o modo de navegação de um leitor de tela e leia de cima para baixo.
As instruções não dependem só de forma, cor, tamanho, posição ou som.
Procure no texto frases como o botão redondo ou à direita.
O conteúdo funciona em retrato e paisagem, a menos que uma delas seja essencial.
Gire um celular ou emule as duas orientações.
Campos de dados pessoais declaram seu propósito para que os navegadores possam preencher automaticamente.
Confira se os campos de nome, e-mail, telefone e endereço têm valores de autocomplete.
A cor nunca é a única forma de mostrar significado, estado ou um link.
Veja em escala de cinza; erros e links ainda se distinguem?
Som que toca sozinho por mais de 3 segundos pode ser pausado ou silenciado.
Carregue cada página com o som ligado.
O contraste do texto é de pelo menos 4.5:1, ou 3:1 para texto grande.
Meça os pares de texto e fundo com o verificador de contraste abaixo.
O texto pode ser ampliado a 200 por cento sem perda de conteúdo ou função.
Dê zoom de 200 por cento; nada cortado ou sobreposto.
Usa-se texto real em vez de imagens de texto, exceto logos.
Procure banners e botões que são imagens.
O conteúdo cabe em 320 pixels CSS de largura sem rolagem nos dois sentidos.
Dê zoom de 400 por cento com 1280 pixels de largura.
Ícones, bordas de campos, anéis de foco e partes de gráficos chegam a 3:1.
Meça bordas e ícones em relação aos elementos vizinhos.
Nada quebra quando os espaçamentos de linha, parágrafo, letra e palavra aumentam.
Aplique o bookmarklet de espaçamento de texto ou a sobrescrita de CSS abaixo.
Tooltips podem ser dispensados, receber o ponteiro e permanecem até que você se afaste.
Passe o mouse sobre um tooltip, mova para dentro dele, pressione Escape.
Tudo funciona só com o teclado.
Desconecte o mouse e conclua cada tarefa.
O foco sempre consegue sair de qualquer componente.
Entre com Tab em widgets, embeds e diálogos e saia com Tab.
Atalhos de uma tecla podem ser desligados, remapeados ou só funcionar com foco.
Liste os atalhos que usam uma letra ou número sem tecla modificadora.
Limites de tempo podem ser desligados, ajustados ou estendidos.
Encontre timeouts de sessão e etapas com tempo.
Conteúdo que se move, pisca ou se atualiza sozinho pode ser pausado.
Procure carrosséis, letreiros e fundos animados.
Nada pisca mais de três vezes por segundo.
Revise vídeos e animações em busca de efeito estroboscópico.
Um link para pular ou landmarks permitem saltar blocos repetidos.
Pressione Tab uma vez ao carregar e procure Pular para o conteúdo.
Cada página tem um título que a descreve.
Leia os títulos das abas do navegador pelo site.
O foco se move em uma ordem que preserva o sentido e o uso.
Navegue com Tab e observe os saltos.
O texto do link, com seu contexto, diz para onde ele leva.
Liste todos os links; aponte os Clique aqui e Leia mais soltos.
Há mais de uma forma de encontrar uma página, como menu e busca ou mapa do site.
Confira se há busca, um mapa do site ou um menu completo.
Títulos e rótulos descrevem seu tema ou propósito.
Leia só a estrutura de títulos; ela faz sentido?
O indicador de foco do teclado é visível.
Navegue com Tab; você sempre deve ver onde está.
Um elemento focado não fica totalmente escondido por barras fixas ou banners.
Navegue com Tab com um banner de cookies e um cabeçalho fixo visíveis.
Gestos de trajeto ou multiponto têm uma alternativa com um único ponteiro.
Confira se interações de pinça, deslizar e desenhar têm botões.
As ações disparam ao soltar, ou podem ser abortadas ou desfeitas.
Pressione, arraste para fora, solte; nada deve ser acionado.
O nome acessível contém o texto do rótulo visível.
Compare os rótulos visíveis com os nomes calculados nas ferramentas de desenvolvedor.
Recursos de sacudir ou inclinar têm uma alternativa por botão e podem ser desligados.
Procure recursos que usam o movimento do dispositivo.
Tudo o que se faz arrastando também pode ser feito com cliques ou toques simples.
Teste sliders, listas ordenáveis e mapas sem arrastar.
Os alvos têm pelo menos 24 por 24 pixels CSS, ou são espaçados para que um círculo de 24 pixels não se sobreponha a outros, com exceções.
Meça ícones pequenos e controles inline.
A página declara seu idioma principal.
Confira o atributo lang no elemento html.
Trechos em outro idioma são marcados com lang.
Encontre citações ou frases em outros idiomas.
Focar um elemento não muda o contexto.
Leve o foco com Tab a cada controle; nada deve ser enviado nem navegar.
Mudar uma configuração não muda o contexto sem aviso.
Mude selects e radios; observe se há navegação inesperada.
A navegação repetida mantém a mesma ordem relativa.
Compare os menus em várias páginas.
Componentes com a mesma função têm o mesmo rótulo.
Compare os controles de busca, carrinho e download entre páginas.
Opções de ajuda que se repetem aparecem na mesma ordem relativa.
Compare onde ficam os links de contato, chat ou ajuda em cada página.
Erros de entrada são identificados e descritos em texto.
Envie formulários vazios e com dados inválidos.
Os campos têm rótulos ou instruções onde é preciso inserir dados.
Confira se todo campo tem um rótulo visível e dicas de formato.
Quando a correção é conhecida, a mensagem de erro a sugere.
Leia o texto do erro; ele diz como corrigir o que foi digitado?
Envios importantes podem ser revertidos, revisados ou confirmados.
Percorra o checkout e a exclusão de conta.
Informações já inseridas em um processo são preenchidas ou podem ser selecionadas.
Procure campos de endereço ou e-mail repetidos em um mesmo fluxo.
O login não exige um teste de memória ou quebra-cabeça sem alternativa, e colar é permitido.
Tente colar uma senha; confira se há uma opção sem quebra-cabeça.
Controles personalizados expõem nome, função e estado às tecnologias assistivas.
Inspecione widgets personalizados na árvore de acessibilidade.
Mensagens de status são anunciadas sem mover o foco.
Acione adicionar ao carrinho ou resultados de busca e escute.
Perceptível
Operável
Compreensível
Robusto
Checklist interativo WCAG 2.2 A e AA
Imprimir ou salvar como PDF
Filtrar por nível
Filtrar por princípio
Todos os níveis
Nível {level}
Todos os princípios
{ticked} de {shown} critérios exibidos marcados. As marcações ficam guardadas só enquanto esta aba estiver aberta.
Teste:
Passa
Falha
Seletor de {label}
Hex de {label}
Verificador de contraste de cores WCAG
Usa a fórmula de luminância relativa das definições da WCAG 2.2. Informe cores hex de seis dígitos.
Texto
Fundo
Amostra de texto normal, 16 pixels regular.
Amostra de texto grande, 24 pixels.
Taxa de contraste {ratio}:1
Informe duas cores hex válidas, como #1f2937.
Resultado em relação aos limites AA
Uso
Exige
Resultado
Texto normal (1.4.3)
Texto grande (1.4.3)
Ícones, bordas, anéis de foco (1.4.11)
Texto normal, AAA (1.4.6)
Comece grátis · Sem cartão de crédito