Acessibilidade digital: Cores, componentes e ferramentas
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.
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:
- WebAIM Color Contrast Checker: Verificador de contraste de cores.
- Inclusive Components: Um blog sobre componentes que são acessiveis.
- Color Oracle: Programa para simular daltonismo no Windows.
- Vox Product Accessibility Guidelines: Um Checklist sobre acessibilidade para designers, desenvolvedores e analistas de produtos.
- AXE Google Chrome Extension: Extensão do chrome para medir o nível de acessibilidade do seu site.
- NoCoffe Vision Simulator: Extensão para o Chrome para simular diferentes tipos de daltonismo.
Se você conhece outra ferramenta bacana, compartilha com a gente nos comentários!
