WCAG de forma simples!

Já pensou estudar a WCAG de forma simples e sem textão? Se você está em busca de simplicidade no entendimento das diretrizes de acessibilidade, está no lugar certo.

Este material faz parte do projeto Acessibilidade Toolkit link externo, cuja ideia original é disponibilizar todos os critérios de sucesso de forma simplificada e em formato de cartões manipuláveis.

Cartões de critérios de sucesso WCAG espalhados em uma mesa.

WCAG - Guia de Consulta Rápida

Dicas para usar a busca:

  • Quer encontrar diretrizes relacionadas a vídeos? Digite "vídeo";
  • Quer saber quais diretrizes se referem a cores? Digite "cores";
  • Quer ver apenas as diretrizes do princípio Operável? Digite "operável".
  • Enfim... divirta-se... :)
Filtrar cartões e exibir apenas nível:
  • 1.1.1 - Conteúdo não textual [A]

    Perceptível

    Alternativas em texto

    Todo conteúdo “não textual” deve oferecer uma alternativa em texto para identificação do conteúdo.

    Nota: a menos que a imagem seja decorativa ou se encaixe em algumas exceções (ver diretriz completa).

  • 1.2.1 - Apenas áudio ou apenas vídeo (pré-gravado) [A]

    Perceptível

    Multimídia baseada em tempo

    Deve ser fornecida uma alternativa para o conteúdo apresentado:

    Apenas áudio: fornecer uma transcrição descritiva do conteúdo em texto

    Apenas vídeo: fornecer áudio alternativo e/ou uma transcrição descritiva do conteúdo em texto

  • 1.2.2 - Legendas (pré-gravado) [A]

    Perceptível

    Multimídia baseada em tempo

    Devem ser fornecidas legendas para todo conteúdo que contenha áudio pré-gravado (somente áudio ou vídeo com faixa de áudio).

  • 1.2.3 - Audiodescrição ou mídia alternativa (pré-gravado) [A]

    Perceptível

    Multimídia baseada em tempo

    Deve ser fornecida audiodescrição ou uma transcrição descritiva do conteúdo em texto para todo conteúdo em vídeo pré-gravado.

    Nota: as diretrizes 1.2.3, 1.2.5 e 1.2.8 se sobrepõe umas as outras.

  • 1.2.4 - Legendas (ao vivo) [AA]

    Perceptível

    Multimídia baseada em tempo

    Devem ser fornecidas legendas para todo conteúdo que contenha áudio ao vivo (somente áudio ou vídeo com faixa de áudio).

  • 1.2.5 - Audiodescrição (pré-gravado) [AA]

    Perceptível

    Multimídia baseada em tempo

    Deve ser fornecida audiodescrição para todo conteúdo em vídeo pré-gravado.

    Nota: a menos que a imagem seja decorativa ou se encaixe em algumas exceções (ver diretriz completa).

    Nota: ver em conjunto com diretriz 1.2.7.

  • 1.2.6 - Língua gestual [AAA]

    Perceptível

    Multimídia baseada em tempo

    Deve ser fornecida interpretação em língua gestual (exemplo: Libras) para todo conteúdo que contenha áudio pré-gravado.

  • 1.2.7 - Audiodescrição extendida (pré-gravado) [AAA]

    Perceptível

    Multimídia baseada em tempo

    Se houver casos em que não é possível manter uma faixa de audiodescrição em conjunto com o áudio original do vídeo (exemplo: sobreposição da falas), deve-se fornecer uma alternativa onde seja possível pausar o vídeo, reproduzir a audiodescrição e em seguida retomar o vídeo.

  • 1.2.8 - Mídia alternativa (pré-gravado) [AAA]

    Perceptível

    Multimídia baseada em tempo

    Deve ser fornecida uma transcrição descritiva do conteúdo em texto para todo conteúdo em vídeo pré-gravado.

    Nota: as diretrizes 1.2.3, 1.2.5 e 1.2.8 se sobrepõe umas as outras.

  • 1.2.9 - Apenas áudio (ao vivo) [AAA]

    Perceptível

    Multimídia baseada em tempo

    Deve ser fornecida uma transcrição descritiva em texto para todo conteúdo apresentado ao vivo.

  • 1.3.1 - Informações e Relações [A]

    Perceptível

    Multimídia baseada em tempo

    A estrutura e as relações entre os componentes da tela devem fazer sentido tanto para a visão quanto para a audição.

    Nota: código semanticamente correto atende completamente a diretriz.

  • 1.3.2 - Sequência com significado [A]

    Perceptível

    Adaptável

    A ordem de leitura do conteúdo e a navegação pelos componentes deve ser lógica e intuitiva.

  • 1.3.3 - Características sensoriais [A]

    Perceptível

    Adaptável

    Qualquer tipo de instrução não deve depender apenas de forma, tamanho, localização visual ou som.

  • 1.4.1 - Utilização de cores [A]

    Perceptível

    Discernível

    Cores não devem ser utilizadas como única maneira de transmitir conteúdo ou distinguir elementos visuais.

  • 1.4.2 - Controle de áudio [A]

    Perceptível

    Discernível

    Deve ser fornecido um mecanismo para pausar, deixar mudo ou ajustar o volume para qualquer áudio que toque automaticamente por mais do que 3 segundos.

  • 1.4.3 - Contraste (mínimo) [AA]

    Perceptível

    Discernível

    Textos devem ter uma relação de contraste entre primeiro e segundo plano de ao menos 4.5:1.

    Nota: textos em tamanhos de fontes maiores (a partir de 18pt ou 14pt bold) podem ter uma relação de contraste de ao menos 3:1.

  • 1.4.4 - Redimensionar texto [AA]

    Perceptível

    Discernível

    O conteúdo deve ser legível e funcional mesmo quando o tamanho do texto for ampliado para até 200%.

  • 1.4.5 - Imagens de texto [AA]

    Perceptível

    Discernível

    Evitar o uso de textos em imagens a não ser que sejam essenciais (exemplo: marcas e logos) ou que possam ser personalizadas pelo usuário.

  • 1.4.6 - Contraste (melhorado) [AAA]

    Perceptível

    Discernível

    Textos devem ter uma relação de contraste entre primeiro e segundo plano de ao menos 7:1.

    Nota: textos em tamanhos de fontes maiores (a partir de 18pt ou 14pt bold) podem ter uma relação de contraste de ao menos 4.5:1.

  • 1.4.7 - Som baixo ou sem som de fundo [AAA]

    Perceptível

    Discernível

    Qualquer tipo de som que não seja voz em um áudio ou vídeo pré-gravado, deverá ser baixo o suficiente (ou inexistente) para que o usuário não tenha dificuldade de compreensão.

  • 1.4.8 - Apresentação visual [AAA]

    Perceptível

    Discernível

    Garantir que a reorganização, a formatação, a mudança de cores e/ou a ampliação mantenham a legibilidade de textos.

  • 1.4.9 - Imagens de texto (sem exceção) [AAA]

    Perceptível

    Discernível

    Evitar o uso de textos em imagens a não ser que sejam essenciais (exemplo: marcas e logos).

  • 2.1.1 - Teclado [A]

    Operável

    Acessível por teclado

    Toda funcionalidade deve estar disponível para utilização com teclado. A menos que a funcionalidade não possibilite o controle apenas por teclado.

  • 2.1.2 - Sem bloqueio de teclado [A]

    Operável

    Acessível por teclado

    Deve ser possível navegar de e para todos os elementos sem qualquer tipo de bloqueio de teclado.

  • 2.1.3 - Teclado (sem exceção) [AAA]

    Operável

    Acessível por teclado

    Toda funcionalidade deve estar disponível para utilização com teclado.

  • 2.2.1 - Ajustável por limite de tempo [A]

    Operável

    Tempo suficiente

    Se uma aplicação possui um limite de tempo, o usuário deve ter opções para desligar ou ajustar o tempo. A não ser que seja uma situação onde o tempo seja essencial.

    Nota: levar em consideração a diretriz 3.2.1.

  • 2.2.2 - Colocar em pausa, parar ou ocultar [A]

    Operável

    Tempo suficiente

    Qualquer componente com movimento automático que dure mais do que 5 segundos e seja apresentado em conjunto com outro conteúdo, pode ser pausado, parado ou ocultado pelo usuário.

  • 2.2.3 - Sem limite de tempo [AAA]

    Operável

    Tempo suficiente

    Nenhuma funcionalidade deve possuir limite de tempo para que uma ação seja executada.

  • 2.2.4 - Interrupções [AAA]

    Operável

    Tempo suficiente

    Qualquer tipo de interrupção no conteúdo que possa confundir o usuário deve possuir um mecanismo que permita o seu desligamento ou adiamento.

    Nota: a não ser que envolva uma emergência que preserve a saúde, segurança ou bens.

  • 2.2.5 - Nova autenticação [AAA]

    Operável

    Tempo suficiente

    Caso uma sessão autenticada expire, qualquer usuário logado deve ser capaz de continuar sua atividade sem qualquer perda de dados, ao se efetuar uma nova autenticação no ambiente.

  • 2.3.1 - Três flashes ou abaixo do limite [A]

    Operável

    Ataques epiléticos

    Nenhum conteúdo da página deve piscar mais do que 3 vezes por segundo, a não ser que os flashes estejam em baixo contraste ou possuam pouco vermelho.

  • 2.3.2 - Três flashes [AAA]

    Operável

    Ataques epiléticos

    Nenhum conteúdo da página deve piscar mais do que 3 vezes por segundo.

  • 2.4.1 - Ignorar blocos [A]

    Operável

    Navegável

    Um mecanismo deve ser fornecido para ignorar blocos de conteúdo que são repetidos em diferentes telas e fluxos.

    Nota: essa diretriz poderá ser considerada atendida nos casos em que haja uma adequada estrutura de cabeçalhos. Ver diretrizes 2.4.2 e 2.4.10.

  • 2.4.2 - Página com título [A]

    Operável

    Navegável

    Páginas ou telas devem possuir um título que descreva claramente a finalidade.

  • 2.4.3 - Ordem do foco [A]

    Operável

    Navegável

    A navegação através de um teclado por elementos focáveis deve fazer sentido para o usuário, sendo lógica e sequencial.

    Nota: em uma visão ocidental, o foco dos elementos deve ocorrer da esquerda para a direita e de cima para baixo.

  • 2.4.4 - Finalidade do link (em contexto) [A]

    Operável

    Navegável

    A finalidade de cada link deve ser determinada a partir do texto do próprio link ou a partir do contexto no entorno.

  • 2.4.5 - Várias formas [AA]

    Operável

    Navegável

    O usuário sempre deve ter opções e formas diferentes para acessar ou localizar um determinado conteúdo.

  • 2.4.6 - Cabeçalhos e rótulos [AA]

    Operável

    Navegável

    Títulos de conteúdos e rótulos de formulários devem descrever claramente a finalidade dos elementos ou agrupamentos sem que haja ambiguidade em seu entendimento.

  • 2.4.7 - Foco visível [AA]

    Operável

    Navegável

    Deve ser possível identificar visualmente e facilmente qual elemento da página ou tela tem o foco no momento.

  • 2.4.8 - Localização [AAA]

    Operável

    Navegável

    Deve ser fornecido um meio para o usuário se orientar entre os conteúdos de um mesmo conjunto de páginas ou telas (exemplo: breadcrumb).

  • 2.4.9 - Finalidade do link (apenas link) [AAA]

    Operável

    Navegável

    A finalidade de cada link deve ser determinada a partir do texto do próprio link.

  • 2.4.10 - Cabeçalhos da seção [AAA]

    Operável

    Navegável

    Sempre que possível, deve-se fornecer títulos em diferentes sessões e níveis, permitindo que o usuário identifique facilmente a hierarquia das informações em um determinado conteúdo.

    Nota: este critério abrange exclusivamente conteúdo textual, não confundir com diretriz 4.1.2.

  • 3.1.1 - Idioma da página [A]

    Compreensível

    Legível

    O idioma do conteúdo deve ser definido em cada uma das páginas ou telas da aplicação.

  • 3.1.2 - Idioma das partes [AA]

    Compreensível

    Legível

    O idioma de um determinado trecho ou frase contendo idioma diferente do original da página ou tela atual, deve ser definido e corretamente identificado.

  • 3.1.3 - Palavras invulgares [AAA]

    Compreensível

    Legível

    Ao se utilizar palavras técnicas ou jargões, deve-se fornecer um glossário ou algo semelhante que possa informar seu significado.

  • 3.1.4 - Abreviações [AAA]

    Compreensível

    Legível

    Abreviações e/ou acrônimos devem ser identificados diretamente no conteúdo ou por meio de uma forma que possibilite a apresentação de sua definição por extenso.

  • 3.1.5 - Nível de leitura [AAA]

    Compreensível

    Legível

    Caso um determinado conteúdo seja tão complexo a ponto de um usuário com ensino fundamental completo* não ser capaz de entender, será necessário a sua revisão ou a utilização de conteúdo complementar que facilite o seu entendimento.

    Nota: *baseado em níveis internacionais (UNESCO)

  • 3.1.6 - Pronúncia [AAA]

    Compreensível

    Legível

    Deve-se fornecer um mecanismo que identifique a pronúncia correta de determinadas palavras que podem gerar ambiguidade no entendimento fora do contexto.

  • 3.2.1 - Em foco [A]

    Compreensível

    Previsível

    Quando um componente recebe foco, nenhum tipo de mudança contextual que possa confundir o usuário deve ser efetuada.

  • 3.2.2 - Em entrada [A]

    Compreensível

    Previsível

    Quando há a interação com um campo de formulário ou controle, nenhum tipo de mudança contextual que possa confundir o usuário deve ser efetuada, a não ser que ele seja informado dessa mudança de alguma forma.

  • 3.2.3 - Navegação consistente [AA]

    Compreensível

    Previsível

    Componentes de navegação de um mesmo site ou aplicação que são exibidos em telas diferentes, devem ser apresentados sempre na mesma posição em relação aos demais componentes (exemplo: tabbar em um aplicativo).

  • 3.2.4 - Identificação consistente [AA]

    Compreensível

    Previsível

    Componentes de navegação de um mesmo site ou aplicação que são exibidos em telas diferentes, mas possuem a mesma funcionalidade, devem ser identificados sempre da mesma forma (exemplo: um campo de busca).

  • 3.2.5 - Alteração a pedido [AAA]

    Compreensível

    Previsível

    Qualquer alteração de contexto na tela que possa desorientar o usuário somente deverá ocorrer após uma ação de confirmação do próprio usuário.

  • 3.3.1 - Identificação do erro [A]

    Compreensível

    Assistência a entrada

    Qualquer tipo de erro ao se preencher dados em formulários, devem ser facilmente identificados de forma específica e clara para o usuário. O acesso aos campos com erros também deve ser simplificado.

    Nota: ver em conjunto com diretrizes 3.3.2 e 3.3.3.

  • 3.3.2 - Rótulos e instruções [A]

    Compreensível

    Assistência a entrada

    Rótulos (labels) devem identificar de forma clara e correta os respectivos campos de formulários. Sempre que possível, instruções ou dicas de preenchimento dos campos devem ser fornecidas.

    Nota: ver em conjunto com diretrizes 3.3.1 e 3.3.3.

  • 3.3.3 - Sugestão de erro [AA]

    Compreensível

    Assistência a entrada

    Deve-se fornecer sugestões simples de se compreender para que o usuário consiga corrigir facilmente erros de preenchimento.

    Nota: ver em conjunto com diretrizes 3.3.1 e 3.3.2.

  • 3.3.4 - Prevenção de erro (legal, financeiro, dados) [AA]

    Compreensível

    Assistência a entrada

    Sempre que o usuário puder acrescentar via formulário, qualquer informação que envolva responsabilidade jurídica ou transação financeira, bem como alterações em dados já existentes, deve-se possibilitar o cancelamento do envio ou a verificação e/ou confirmação dos dados.

  • 3.3.5 - Ajuda [AAA]

    Compreensível

    Assistência a entrada

    Caso um rótulo (label) não seja suficiente para explicar o preenchimento de um determinado campo, uma ajuda contextualizada deve ser fornecida.

    Nota: ver também diretriz 3.3.2.

  • 3.3.6 - Prevenção de erro (todos) [AAA]

    Compreensível

    Assistência a entrada

    Sempre que o usuário puder acrescentar qualquer informação via formulário, deve-se possibilitar o cancelamento do envio ou a verificação e/ou confirmação dos dados.

  • 4.1.1 - Análise (código) [A]

    Robusto

    Compatível

    Erros significativos de validação ou análise de semântica de código devem ser evitados.

  • 4.1.2 - Nome, função, valor [A]

    Robusto

    Compatível

    Os nomes, as funções, os valores e também os estados dos componentes devem ser corretamente identificados por tecnologias assistivas.

    Nota: código semântico fornece naturalmente boa parte dessas informações.

Referência

WCAG são as diretrizes que fundamentam as recomendações básicas para se construir conteúdos na web de forma acessível a todos os usuários independentemente de suas deficiências e/ou habilidades. Atualmente estão na versão 2.0 e foram construídas de forma que fossem independentes de qualquer tecnologia criada e que também fossem facilmente testáveis e validadas.

Como são organizados os critérios de sucesso nos cartões?

Os cartões apresentados neste site representam todos os 61 critérios de sucesso propostos pela WCAG. Eles estão organizados de forma que seja facilmente identificados com as seguintes informações:

  • Código do critério de sucesso;
  • Título do critério de sucesso;
  • Nível de Conformidade (A, AA ou AAA);
  • Princípios (separados por cores);
  • Recomendações;
  • Descrição resumida;
  • Link para descrição completa do critério de sucesso.

Links para saber mais...

Faça o download!

Este material faz parte do projeto Acessibilidade Toolkit link externo, cuja ideia original é disponibilizar todos os critérios de sucesso de forma simplificada e em formato de cartões manipuláveis.

Se estiver interessado em conhecer todo o processo criativo e de desenvolvimento, leia este artigo link externo.

Você pode utilizar este toolkit de forma livre para imprimir, traduzir, editar, customizar, redistribuir e fazer o que quiser com o material, desde que cite a fonte e o redistribua utilizando a mesma licença de uso link externo.

Download via GitHub

versão atual: 1.0.0 (changelog link externo)

Contribua com o projeto!

Originalmente o material está disponibilizado em português brasileiro (pt-br).
No entanto, a tradução do material para qualquer idioma é livre. Por favor, contribua!

This project is initially in brazilian portuguese (pt-br). Feel free to contribute translations.