Acessibilidade digital: Cores, componentes e ferramentas

Hugo Costa
Jan 17 · 6 min read
Fonte: Marinha Brasileira: https://www.marinha.mil.br/saudenaval/inclus%C3%A3o-social-da-pessoa-com-defici%C3%AAncia

Acessibilidade é um tema importante e essencial para todos os desenvolvedores e designers de plantão !

Antes de começar a falar mais sobre acessibilidade, eu gostaria de desmistificar uma coisa, que eu mesmo antes de estudar mais sobre o assunto, não reconhecia.

Acessibilidade afetas TODOS os usuários, não afeta apenas aqueles que possuem alguma deficiência estereotipada.

Como acessibilidade é um tema muito abrangente e importante, eu vou abordar apenas certos aspectos sobre o tópico, sendo que esses temas todos os desenvolvedores e designers precisam conhecer e se preocupar. Os temas que irão ser abordados nesse artigo são:

  • O que é acessibilidade e por quê acessibilidade é importante ?
  • Acessibilidade das cores
  • Componentes acessíveis
  • Ferramentas para ajudar a tornar seu produto acessível

O que é acessibilidade e por quê acessibilidade é importante ?

Acessibilidade digital se refere a uma prática de construir produtos e conteúdos digitais que podem ser acessados por todas as pessoas, incluindo pessoas que possuem algumas deficiências visuais, motoras, de fala e cognitivas.

Vamos nos concentrar em deficiências visuais, pois são os usuários que são mais afetados em relação a acessibilidade.

Se você está trabalhando em um produto que pode ser acessado por pessoas de diferentes países, como por exemplo o Airbnb, e você está ignorando a acessibilidade, você está deixando de entregar a melhor experiência do seu produto para 1,3 bilhões de pessoas, segundo a World Health Organization (WHO), isso mesmo que você leu ! Entre essas pessoas, 188,5 milhões de pessoas possuem comprometimento leve da visão, 217 milhões possuem comprometimento moderado, 36 milhões são cegos e 826 milhões de pessoas vivem com deficiências visuais diversas.

Nesse artigo eu vou tratar a maioria dos afetados por deficiência visual, com exceção dos cegos, pois é um conteúdo muito grande e importantíssimo que merece um conteúdo exclusivo. Portanto vou levar em consideração pessoas com problemas de visão diversos, como daltonismo e usuários com limitações da visão baixa e moderado.

Acessibilidade das cores

As cores são os principais problemas em produtos digitais, tanto para deficientes visuais, quanto para usuários comuns, pois as cores são influenciadas por diversos fatores e ambientes, como por exemplo um monitor com alto contraste, visualizar uma tela em um ambiente externo com muitas claridade, problemas não corriqueiros de visão, como dores de cabeça, sensibilidade a luz e muitos outros…

Como escolher as cores certas para acessibilidade?

O primeiro passo é tomar cuidado com o contraste entre cores, pessoas com comprometimento de visão muitas vezes acha difícil ler algum texto que possui um fundo que possui contraste baixo.

A W3C propõe níveis de acessibilidade, sendo A (baixa acessibilidade), AA (moderado) e AAA (alto).

De acordo com W3C, a relação de contraste (“contrast ratio”) entre o texto e a cor de fundo deve ser no mínimo 4.5 para 1 (nível AA), e quanto maior a fonte e maior a densidade da mesma essa relação de contraste se torna maior. Se sua fonte possui 18px ou 14 px em negrito a relação de contraste mínima cai para 3 para 1.

Algumas ferramentas te ajudam a medir essa relação de contraste entre cores, eu particularmente gosto de usar a Web AIM Color Contrast .

Daltonismo, segundo a Colour Blind Awareness afeta aproximadamente 1 a cada 12 homens (8%) e 1 a cada 200 mulheres, isso equivale a 4,5% de toda população mundial.

Diferentes visões e tipos de daltonismo

Devido a esses dados é super importante verificar a combinações de cores de textos e fundos para pessoas que são daltônicas, para realizar isso eu uso uma extensão do navegador Google Chrome chamada NoCoffee Vision Simulator. Existem diversos tipos de daltonismo, mas o mais comum é o Daltonismo Tricomático, onde as cores mais afetadas são vermelho, verde e azul.

Componentes acessíveis

Cores andam juntos com componentes, portanto leve seu aprendizado com cores acessíveis para esse assunto também.

Link

Muitas vezes tiramos o ‘traço’ ou text-decoration de um hyperlink para deixar o design mais ‘moderno’, isso dificulta muito a visualização e identificação para pessoas com visão comprometida, portanto evite ao máximo fazer isso!

Uma coisa tão simples que pode fazer muita diferença !

Placeholder

Fazer o design de um formulário as vezes pode ser complicado, queremos deixar o mais bonito e usual possível para nossos usuários, mas muitas vezes fazemos certas coisas que não são inclusivas, por exemplo, o uso exclusivo de placeholder para descrever o campo de input.

Na maioria das vezes os textos em placeholder são cinzas bem claros, diferenciando levemente do background, apenas para dar contexto, para pessoas comuns isso não é um grande problema, mas pensa em alguém que possui alguma limitação na visão.

Sempre prefira utilizar <label> para descrever um campo, sendo que esse Label fique acima ou ao lado do input de texto. Caso contrário, um usuário talvez não consiga ler e entender o que precisa ser preenchido no formulário.

Botões

Muitas vezes confiamos apenas em cores para destacar e simbolizar a ação de um botão, como por exemplo um botão na cor vermelha escrito “deletar”, dependendo do contraste da fonte com o fundo esse botão pode não ser acessível, então minha dica é:

Não confiar apenas em cores para representar botões de qualquer natureza, diferenciar botões com tamanhos, fontes e ícones.

Alertas

Alertas são constantemente representados com cores, vermelha para erro, e verde para sucesso. Muitas pessoas que são daltônicas vão associar cores diferentes a esses alertas. Portanto usar algum prefixo como “Sucesso” ou “Erro” ou até ícones, pode fazer uma grande diferença para o usuário:

Gráficos

Quando falamos de representação de dados, gráficos são muito importantes para diferenciar categorias, natureza de dados e etc, uma falha muito comum que eu cometo até hoje é confiar apenas em cores. Mas para uma pessoa com certa limitação é um pesadelo. Para solucionar esse problema, podemos pensar em adicionar alguns fundos e texturas diferentes. Por exemplo:

Uma pessoa daltônica pode ver assim:

Portanto vocês conseguem reparar a diferença que texturas podem fazer!

Ferramentas:

Existem algumas ferramentas que podem te ajudar a fazer essas análises e também ajudar a deixar seu produto acessível, vou listar algumas delas abaixo:

Se você conhece outra ferramenta bacana, compartilha com a gente nos comentários!

Referências:

Training Center

Conectamos pessoas que querem aprender algo relacionado a desenvolvimento de software com gente que pode guiá-las.

Hugo Costa

Written by

22 anos, Desenvolvedor Front-end, estudante de Engenharia de Software, apaixonado por compartilhar conhecimento, inovação, produtividade!

Training Center

Conectamos pessoas que querem aprender algo relacionado a desenvolvimento de software com gente que pode guiá-las.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade