Mapa WCAG 2.2 - por tema

Este diagrama agrupa todos os critérios de sucesso das Diretrizes de Acessibilidade de Conteúdo para Web (WCAG), por tema, na versão 2.2, níveis A e AA.

Ele ilustra os vínculos práticos entre cada critério que podem não estar aparentes nos nomes das diretrizes. Por exemplo, todos os critérios que podem ser testados usando um teclado estão em uma linha.

A estrutura é amplamente baseada na árvore de decisão da WCAG, que apresenta mais detalhes sobre como testar cada critério.

Outras versões

Mapa

Mapa das diretrizes de acessibilidade de conteúdo da Web que se assemelha a um mapa de trens subterrâneos. Uma descrição mais completa segue a imagem.

Descrição

O mapa se assemelha a um mapa de metrô, mostrando 55 critérios de sucesso como estações distribuídas ao longo de 7 linhas.

Cada marcador de estação mostra se um critério é de nível A ou AA. Os 4 princípios da WCAG são representados como zonas que se deslocam para fora do centro usando linhas cinzas finas:

Cada linha é descrita em detalhes nas próximas seções. Alguns nomes de critérios são ligeiramente simplificados.

Teclado

Esses critérios garantem que a funcionalidade funcione de forma previsível com um teclado, tendo estados de foco visíveis.

A linha é azul sólida. Ela vai do oeste para o norte.

Número Critério de sucesso Nível Intercâmbios
1.4.13 Conteúdo em foco por mouse ou teclado AA
2.1.1 Teclado A nenhum
2.1.2 Sem bloqueio do teclado A nenhum
2.1.4 Atalhos de teclado por caractere A nenhum
2.4.1 Contornar blocos A nenhum
2.4.3 Ordem do foco A nenhum
2.4.7 Foco visível AA
2.4.11 Foco não obscurecido novo AA nenhum
3.2.1 Em foco A nenhum
3.2.2 Em entrada A
4.1.2 Nome, função, valor A

Zoom e legibilidade

Estes critérios garantem que o texto é:

A linha é vermelha escura com duas linhas brancas internas. Ela segue para oeste a partir do oeste do centro.

Número Critério de sucesso Nível Intercâmbios
1.4.3 Contraste AA
1.4.5 Imagens de texto AA
1.4.4 Redimensionar texto AA nenhum
1.4.10 Realinhar AA
1.4.12 Espaçamento de texto AA nenhum
1.4.13 Conteúdo em foco por mouse ou teclado AA

Sensorial

Esses critérios evitam que o conteúdo dependa de sentidos específicos:

A linha é amarela com uma borda preta. Ela corre principalmente do noroeste para o leste, voltando para si mesma a partir das Características Sensoriais.

Número Critério de sucesso Nível Intercâmbios
2.4.7 Foco visível AA
1.4.11 Contraste não textual AA nenhum
1.4.3 Contraste AA
1.4.1 Uso de cores A nenhum
1.4.5 Imagens de texto AA
1.1.1 Conteúdo não textual A
1.3.3 Características sensoriais A
1.2.1 Apenas áudio/vídeo A nenhum
1.2.2 Legendas (pré-gravadas) A nenhum
1.2.4 Legendas (ao vivo) AA nenhum
1.2.5 Audiodescrição AA nenhum
1.2.3 Audiodescrição ou mídia alternativa A nenhum
1.4.2 Controle de áudio A nenhum
2.2.1 Tempo ajustável A
2.2.2 Colocar em pausa, parar, ocultar A nenhum
2.3.1 Três flashes ou abaixo do limite A nenhum

Código e rótulos

Esses critérios tornam o conteúdo compatível com a tecnologia assistiva por serem:

Formulários têm um conjunto adicional de critérios.

A linha é preta com uma borda branca. Ela vai principalmente do sul para o norte.

Número Critério de sucesso Nível Intercâmbios
3.1.2 Idioma das partes AA nenhum
3.1.1 Idioma da página A nenhum
2.4.2 Página com título A
1.1.1 Conteúdo não textual A
1.3.1 Informações e relações A nenhum
1.3.2 Sequência com significado A nenhum
2.4.4 Finalidade do link A nenhum
2.4.6 Cabeçalhos e rótulos AA nenhum
2.5.3 Rótulo em nome A
3.3.2 Rótulos ou instruções A
3.2.2 Em entrada A
4.1.2 Nome, função, valor A
4.1.3 Mensagens de status AA

Formulários

Esses critérios ajudam a garantir formulários utilizáveis que:

A linha é verde com uma única linha branca interna. Ela vai principalmente do leste do centro até o norte. Ele volta a se repetir a partir da Identificação de Entrada com Propósito.

Número Critério de sucesso Nível Intercâmbios
2.2.1 Tempo ajustável A
1.3.3 Características sensoriais A
1.3.5 Identificar o propósito de entrada AA nenhum
2.5.3 Rótulo em nome A
3.3.2 Rótulos ou instruções A
3.2.2 Em entrada A
4.1.2 Nome, função, valor A
4.1.3 Mensagens de status AA
3.3.1 Identificação do erro A nenhum
3.3.3 Sugestão de erro AA nenhum
3.3.4 Prevenção de erros AA nenhum
3.3.7 Entrada redundante novo A nenhum
3.3.8 Autenticação acessível novo AA nenhum

Gestos

Esses critérios garantem a funcionalidade:

A linha é ciano com uma borda preta e uma linha interna preta. Ela corre em um loop no sudoeste.

Número Critério de sucesso Nível Intercâmbios
1.4.13 Conteúdo em foco por mouse ou teclado AA
1.3.4 Orientação AA nenhum
1.4.10 Realinhar AA
2.5.1 Gestos de acionamento A nenhum
2.5.2 Cancelamento de acionamento A nenhum
2.5.4 Atuação em movimento A nenhum
2.5.7 Movimentos de arrastar novo AA nenhum
2.5.8 Tamanho do alvo novo AA nenhum

Site completo

Esses critérios precisam ser testados em todo o local, para garantir:

A linha é rosa com duas linhas pretas internas. Ela vai do sul ao sudeste.

Número Critério de sucesso Nível Intercâmbios
2.4.2 Página com título A
2.4.5 Várias formas AA nenhum
3.2.3 Navegação consistente AA nenhum
3.2.4 Identificação consistente AA nenhum
3.2.6 Ajuda consistente novo A nenhum

Alternativas e agradecimentos

Muito obrigado a Bruno Pulis e Ana Cuentro pela tradução em português do Brasil e ao Johannes Lehner por nos conectar!

Outras versões e mensagens de agradecimento estão na página do mapa AA em inglês.

Licença

Obrigado pela visita! Este trabalho está licenciado sob a Creative Commons: CC BY-NC 4.0CC logoattribution icon - personnon-commercial icon - dollar sign crossed out

Fico feliz que qualquer pessoa possa usar ou adaptar este mapa, mas, por favor: