Integre a acessibilidade ao seu projeto
Objetivos de aprendizagem
Após concluir esta unidade, você estará apto a:
- Identificar as duas principais considerações sobre o uso da cor.
- Aplicar cores, contraste e proporções adequadas ao texto e aos ícones.
- Explicar o possível impacto que as animações podem ter na saúde do usuário.
A importância da cor
Na primeira unidade, você aprendeu como vários usuários entendem e navegam pela interface de usuário de maneira geral. Nesta unidade, nos aprofundaremos nos detalhes de design. A cor é frequentemente parte integrante do design. Ela pode ser usada para chamar a atenção, atribuir identidade de marca, comunicar significado e agrupar elementos, entre outros usos. Embora a cor tenha muitos benefícios de design, se não for usada adequadamente, poderá criar barreiras para pessoas com deficiências.
Há duas áreas principais a considerar em relação a cor e acessibilidade.
- Cor como geradora de significado
- Contraste entre cores adjacentes
Cor como significado
Embora a cor possa ser uma ótima ferramenta para dar sentido ao conteúdo na tela, é importante evitar usar somente cor para apresentar informações ou para solicitar uma ação. A imagem é uma lista de usuários de um aplicativo de chat e um exemplo do que não se deve fazer. A lista mostra a presença dos usuários indicada por um ícone de Wi-Fi verde quando ativos, um ícone Wi-Fi laranja quando inativos e um ícone Wi-Fi vermelho quando offline.
Até 1 em cada 12 homens e 1 em cada 200 mulheres são daltônicos e não seriam capazes de distinguir se seus contatos estão ativos ou inativos.
O designer, então, poderia usar ícones diferentes para status diferentes, com cores complementares às informações transmitidas por cada ícone: o ícone de Wi-Fi verde para ativo, o ícone de soneca cinza para inativo e ícone offline vermelho para offline.
Contraste de cor
A segunda consideração quando se projeta com cor é o contraste entre a cor do texto e o fundo sobre o qual o texto é exibido. Você e sua equipe de experiência de conteúdo estão criando um ótimo conteúdo, e você quer ter certeza de que a maioria dos usuários poderá vê-lo, incluindo pessoas com pouca visão e pessoas que não usam telas de retina de alta densidade.
De acordo com as Diretrizes de Acessibilidade de Conteúdo Web (WCAG) 2.0, a razão de contraste entre o texto e o fundo de um texto deve ser de pelo menos 4,5 para 1. Se sua fonte for pelo menos 24 px ou 19 px em negrito, o mínimo cai para 3 para 1.
Isto significa que quando o texto é 24 px, 19 px em negrito ou maior, o cinza mais claro que você pode usar sobre um fundo branco é #959595, que se parece com isto:
Para textos menores, o cinza mais claro que você pode usar sobre um fundo branco é #767676. Se você tem um fundo cinza, o texto precisa ser mais escuro, ficando mais ou menos assim:
De acordo com as WCAG 2.0, os logotipos ou elementos atualmente em um estado desativado estão isentos dessa norma. Isto inclui botões inativos ou itens de menu. O texto do espaço reservado de campos do formulário não está isento dessa norma.
Vale ressaltar que as regras WCAG 2.1 melhoradas introduzem mais requisitos de contraste de cores. Isso inclui requisitos de contraste para qualquer informação visual necessária a fim de identificar os componentes e estados da interface do usuário. Isso significa que agora há um requisito de proporção 3:1 para itens como limites de campo de entrada e botão, estados de foco e até mesmo partes visuais de um gráfico. Considere o campo de entrada de dados abaixo: 
A borda desse texto de entrada precisa ter pelo menos uma razão de contraste de 3:1 em relação ao fundo da página. Aqui, como a página é branca, a cor da borda não deve ser mais clara do que #959595.
Há muitas ferramentas para calcular a razão de contraste disponíveis online, em ferramentas de projeto e até mesmo em ferramentas de desenvolvedor de navegadores. Um de nossos favoritos é www.AreMyColorsAccessible.com.
Texto sobre fundos não sólidos
Quando se tem texto em cima de imagens ou algum fundo não sólido, como gradientes, muitas vezes fica difícil de ler. No mínimo, você precisa garantir que o texto atenda aos requisitos de contraste de cor pela parte da imagem mais próxima à cor do texto: Se o texto for claro, a parte mais clara da imagem; se o texto for escuro, a parte mais escura da imagem. No entanto, textos sobre fundos não sólidos podem afetar negativamente os usuários com deficiências cognitivas, como os disléxicos. É melhor colocar o texto sobre uma parte sólida da imagem ou adicionar um fundo sólido entre o texto e a imagem.
Aqui, o texto do cabeçalho Einstein (10+) está no topo da imagem das nuvens:
Uma solução melhor é mover o texto do cabeçalho Einstein (10+) para a parte azul sólida da imagem em vez de deixá-lo sobre a imagem das nuvens:
Se você preferir ter texto sobre fundos não sólidos, siga estas diretrizes para minimizar a carga visual e cognitiva sobre o usuário:
- Somente o texto de cabeçalho pode aparecer em fundos não sólidos. O texto deve ter no mínimo 18 px e idealmente apenas uma linha; cadeias de texto mais longas podem ser mais difíceis de navegar quando o fundo varia ligeiramente atrás de cada palavra ou linha.
- Os fundos gradientes só podem ser verticais (a cor na parte superior é diferente da cor na parte inferior). Evite gradientes horizontais, diagonais e radiais, que têm o potencial de mudar a cor de fundo para cada caractere em um texto.
- Defina sempre uma cor de fundo de reserva. Alguns usuários desligam as imagens de fundo devido a preocupações de acessibilidade, ou seja, verifique se, com a imagem de fundo desativada, o texto ainda pode ser lido e passar nos requisitos de contraste (4.5:1).
Para obter informações específicas sobre o peso da fonte, o embaçamento de texto e outras sugestões técnicas, consulte a Diretriz do Salesforce Lightning Design System (SLDS) para texto sobre fundos.
Melhorar a experiência do usuário com animações
A animação pode melhorar a experiência de usuários com deficiências cognitivas. Ela também pode ajudar a orientar os usuários dentro de uma interface de usuário ou a fim de chamar para ações e criar relações ou hierarquia entre elementos em uma página. Entretanto, a animação é uma faca de dois gumes e, se projetada impropriamente, pode causar dores de cabeça, náuseas, tonturas ou vertigem em usuários com distúrbios vestibulares. E, em alguns casos, a animação provoca convulsões em pessoas com epilepsia fotossensível.
O mais importante a ser lembrado é que embora um recurso inacessível possa impedir um usuário de perceber informações ou operar um produto, uma animação inacessível pode afetar negativamente a saúde de um usuário. As diretrizes WCAG têm dois requisitos cruciais que toda a Web precisa cumprir.
- Luz intermitente ou piscando. De acordo com as WCAG 2.3.2 Três flashes, evite qualquer animação que pisque mais de três vezes por segundo. Caso contrário, as animações que piscam rapidamente podem causar convulsões em alguns de seus usuários.
- Não mais de cinco segundos. De acordo com as WCAG 2.2.2 Pausar, parar, ocultar, qualquer animação que dure mais tempo ou se repita por mais de cinco segundos precisa incluir uma forma de ser pausada, interrompida ou oculta.
Não importa quão fantásticas e acessíveis sejam suas animações, o mais importante é que você permita que os usuários as desliguem. O Carrossel SLDS é um grande exemplo de um componente animado com botão de pausa.
Evitar o surgimento de tonturas
Há três fatores que podem contribuir para desencadear tonturas, dores de cabeça ou outras formas de desconforto em alguns usuários.
- Tamanho do movimento em relação ao tamanho da tela. A animação é grande ou pequena? Animações maiores podem ser mais inquietantes que as menores.
- Sentidos de movimento não correspondentes. Algumas animações movem objetos em sentidos opostos. Isto é comum em efeitos de paralaxe, quando o fundo rola para cima enquanto um usuário rola para baixo na página. Esses estilos de animação podem ser muito confusos para os usuários.
- Distância percorrida da forma percebida pelo usuário. Animações que tenham profundidade, como as que representam grandes paisagens, também podem desorientar os usuários.
Resumo
Cor, animação e movimento são técnicas de design importantes. Ao utilizar cores e animações, forneça meios visuais alternativos de comunicar informações que essas técnicas proporcionam. Ao utilizar animações, evite estilos de animação que causarão danos à saúde de alguns usuários.