Support Centre

Transmita significado sem depender de cores

Gino
Gino
  • Atualizado

A cor é apenas  uma das muitas ferramentas visuais  que podem ser usadas para transmitir informações e orientar os leitores em um documento.  As Diretrizes de Acessibilidade de Conteúdo da Web  definem um documento ou página da Web acessível em parte pelo uso de cores.

Como a cor afeta a acessibilidade do documento?

Os leitores que são  daltônicos  , deficientes visuais ou usam ferramentas de acessibilidade como leitores de tela exigem mais do que  dicas de cores  para entender o conteúdo. Os leitores de tela  não indicam a cor  , portanto, se a cor for a única indicação usada para indicar o significado, um leitor de tela não a perceberá.

Por exemplo, pegue esta lista:

Uma lista com marcadores em um fundo azul claro, com cinco itens: Título do documento, Taxas de contraste de cores, Idioma do documento, Texto alternativo e Imagens de texto.  Os itens 'Título do documento' e 'Imagens de texto' aparecem em fonte vermelha.  O resto dos itens aparecem em uma fonte azul.

O primeiro e último itens, “Título do documento” e “Imagens de texto” aparecem em fonte vermelha, diferente dos outros três itens, que estão em fonte azul. Os itens em vermelho indicam que esses elementos estão ausentes, mas um leitor de tela não descreveria a cor para um leitor, deixando de fora informações importantes.

Certas cores - por exemplo, vermelho e verde - são comumente usadas para denotar informações, como "vermelho" para "errado" ou "verde" para "bom".

Mas depender apenas  da cor para transmitir o significado de algo exclui os leitores que não conseguem ver as cores.

Como uso outros elementos além da cor para transmitir significado?

Use elementos adicionais  , acessíveis a leitores de tela e outros leitores com deficiência visual, para descrever e esclarecer dados ou conteúdo que você está apresentando em seu design.

Vamos pegar a lista acima. Para torná-lo mais acessível, os itens vermelhos agora aparecem com o qualificador "ausente" ao lado deles, e os itens azuis aparecem ao lado de "confirmado", esclarecendo para leitores com deficiência ou ferramentas de acessibilidade como leitores de tela o que as cores significam.

 

A mesma lista acima aparece com cinco itens, agora descritos por qualificadores: Título do documento (ausente), Taxas de contraste de cores (confirmado), Idioma do documento (confirmado), Texto alternativo (confirmado), Imagens de texto (ausente).

Aqui está um exemplo de design com  baixa acessibilidade  em uma tabela de "faça e não faça" para criar conteúdo acessível:

Uma lista de seis pontos relacionados com 'Fazer' e 'Não fazer' acessíveis.  Os três pontos superiores aparecem em um fundo verde, com um ícone de uma marca de seleção branca em um círculo verde no lado esquerdo.  As próximas três linhas aparecem em um fundo vermelho, com um 'x' branco em um círculo vermelho ao lado delas.

Esta lista de seis pontos é apresentada usando  cores e ícones  para esclarecer quais dos itens estão corretos (bom para "fazer") e quais dos itens estão incorretos ("não faça").

Os três primeiros pontos:

  • Usar texto alternativo (alt)

  • Cabeçalhos e títulos da seção de tags

  • Use rações de contraste de cores para visibilidade

aparecem em um fundo verde, ao lado de um ícone de uma marca de seleção branca em um círculo verde. Visualmente, um leitor normal pode entender que esses itens estão corretos e representam os "Dos" na lista. Mas  um observador daltônico pode não perceber claramente o verde  , tornando o visual um tanto confuso.

Um leitor de tela seria capaz de ler o texto  nesses pontos, mas perderia o fundo verde claro.

O texto alternativo poderia descrever a marca de seleção branca em um círculo verde, mas não transmitiria claramente a posição do ícone em relação aos itens da lista.

Da mesma forma, um leitor de tela seria capaz de ler os próximos três pontos da lista:

  • Confie apenas na cor para indicar o significado

  • Descreva elementos decorativos com texto alternativo

  • Use imagens de texto para texto relacionado ao conteúdo

mas sem ser capaz de ver o fundo vermelho claro, ou entender onde o ícone do 'x' branco em um círculo vermelho aparece ao lado dele, o significado desses pontos "Não" se perde.

Vamos tentar novamente, com as mesmas informações, em um  formato mais acessível  :

Um desenho de tabela, com os mesmos seis pontos usados ​​acima, separados em duas colunas.  Na primeira coluna à esquerda, sob o cabeçalho 'Não', aparecem os seguintes pontos: Confie apenas na cor para indicar o significado, descreva elementos decorativos com texto alternativo, use imagens de texto para texto relacionado ao conteúdo.  Na segunda coluna, sob o cabeçalho 'Do', aparecem os seguintes pontos: Use texto alternativo (alt), marque cabeçalhos e títulos de seção, use taxas de contraste de cores para visibilidade.

Com os  cabeçalhos das colunas devidamente marcados  , taxas  de contraste de cores acessíveis  e um tamanho de fonte maior, as informações nesta tabela tornam-se mais acessíveis para leitores com deficiência visual, bem como leitores de tela. Com cada coluna indicando o contexto dos pontos listados, um leitor de tela pode ler qual é um "Faça" e qual é um "Não".

Os ícones de marca de seleção e 'x' tornam-se decorativos e  não precisam ser descritos por texto alternativo  para que os leitores entendam o significado das informações na tabela. Da mesma forma, o código de cores (vermelho para "não faça" e verde para "faça") não é crucial para entender; o título no topo de cada coluna respectiva fornece essa informação.

Como faço para tornar os gráficos codificados por cores mais acessíveis?

Use  textura  , diferenças no  estilo de linha  ,  texto em gráficos (rotulagem direta)  ou diferentes tonalidades de cor para  melhorar a acessibilidade do gráfico  para usuários daltônicos. Os gráficos devem ser legíveis em preto e branco.

Use espaço (branco)  entre as colunas do gráfico e os dados  para facilitar a compreensão.

Pegue os dois gráficos abaixo, mostrando os mesmos dados relacionados às preferências dos entrevistados da pesquisa por diferentes tipos de frutas:

Imagem de um gráfico de barras, sob o título 'Por que o código de cores não está acessível?'  O gráfico é intitulado 'Preferências de frutas' e mostra quatro grupos de barras verticais saindo do eixo X.  O eixo Y mostra um intervalo de 0 a 35.

No primeiro gráfico (foto acima), o título "Preferências de frutas" indica o tópico. As colunas são agrupadas por tipo de fruta e cada grupo de barras é rotulado: maçã, laranja, morango e melancia.

As cores da barra representam as preferências: azul para "curtir", laranja para "neutro" e verde para "não gostar", clarificado pela legenda na parte inferior do eixo X do gráfico.

O número de entrevistados em cada categoria de preferência e tipo de fruta é indicado pela altura de cada barra, com números em intervalos de 5 visíveis ao longo do eixo Y.

No segundo gráfico (foto abaixo), a composição das colunas e seu agrupamento por tipo de fruta (rotulado no eixo X), bem como os incrementos de dados no eixo Y, são os mesmos do primeiro gráfico.

A cor de cada barra é a mesma do gráfico acima, mas as barras também são diferenciadas por padrões únicos:

  • Padrão azul  e  diamante para "curtir"

  • Padrão de listras laranja  e  diagonais para "neutro"

  • Verde  e  padrão de treliça para "não gostar"

Imagem do mesmo gráfico de barras, intitulado 'Fruit Preferences'.  Além dos elementos descritos acima, cada barra do gráfico de barras (agrupadas por tipo de fruta) também é rotulada com a preferência e número de respondentes, que aparece na parte superior de cada barra respectiva.  Da esquerda para a direita: Maçãs - 25 Gostos, 13 Neutros, 18 Não Gostos.  Laranjas - 25 Gostos, 18 Neutros, 13 Não Gostos.  Morangos - 23 Gostos, 20 Neutros, 13 Não Gostos.  Melancias - 15 Gostos, 30 Neutros, 11 Não Gostos.

No segundo gráfico, os rótulos acima de cada barra também tornam os dados mais claros e fáceis de ler.

Nesta comparação lado a lado dos gráficos (foto abaixo), as cores foram convertidas em tons de cinza para simular como alguém com deficiência visual pode ler os gráficos.

 

Os dois gráficos de barras descritos acima, retratados lado a lado.  As cores foram convertidas em tons de cinza para facilitar a percepção da comparação entre as barras coloridas e as barras padronizadas.

É mais fácil distinguir entre as três colunas de cada agrupamento no gráfico com as barras que possuem um padrão.

O mesmo vale para os gráficos de linhas na comparação lado a lado abaixo:

Dois gráficos de linha com os mesmos dados, exibidos lado a lado.  A primeira está acima do cabeçalho 'Gráfico de linhas inacessíveis'.  O segundo aparece acima do cabeçalho “Gráfico de Linhas Acessíveis”.  Ambos os gráficos são intitulados 'Sistema Operacional Preferencial'.  Os eixos X exibem um intervalo de anos começando em 1990 e terminando em 2003;  os eixos Y são rotulados como “Porcentagem de usuários” e vão de 0 a 100. Três linhas aparecem em cada gráfico.  A primeira linha, “Windows”, passa de algo em torno de 10% dos usuários em 1990 para cerca de 85% dos usuários em 2003. A segunda linha, Linux, começa em 0% por volta de 1999 e sobe para cerca de 10% em 2003. A terceira linha linha, Macintosh, começa em 85% em 1990 e cai para cerca de 5% em 2003.

No " Gráfico  de linhas inacessíveis   ", as cores que representam cada sistema operacional (vermelho para "Windows", verde para "Linux" e azul para "Macintosh") são difíceis de distinguir visualmente, especialmente para alguém com daltonismo.

No " Gráfico  de Linhas Acessíveis   ", cada linha recebe um padrão diferente, bem como uma cor (azul escuro e traços longos para "Windows", verde escuro e sólido para "Linux", vermelho e pequenos traços para "Macintosh") para fazer são mais fáceis de distinguir. Cada linha também é rotulada, tornando mais fácil para os visualizadores identificar as linhas sem precisar consultar a legenda.

Adicione um padrão a qualquer gráfico  em seu design acessível para tornar mais fácil para os leitores diferenciar entre diferentes conjuntos de dados.

 

Esse artigo foi útil?

Usuários que acharam isso útil: 2 de 3

Tem mais dúvidas? Envie uma solicitação