Acessibilidade como fator de UX
Um assunto muito importante e pouco falado na comunidade de profissionais é sobre acessibilidade. Mas antes de ir mais a fundo neste assunto, a acessibilidade é definida segundo a W3C como:
Acessibilidade: condição para utilização, com segurança e autonomia, total ou assistida, dos espaços, mobiliários e equipamentos urbanos, das edificações, dos serviços de transporte e dos dispositivos, sistemas e meios de comunicação e informação, por pessoa portadora de deficiência ou com mobilidade reduzida;
De uma forma geral, muitos profissionais ignoram este assunto por se tratar de uma pequena porcentagem dos usuários ter algum tipo de deficiência cognitiva, seja ela física, visual ou mental. Se pensarmos de forma simples pessoas que não tem nenhum tipo de deficiência consegue usar um site acessível mas no cenário inverso, não acontece da mesma forma.
Então como mudar este cenário?
Catequisar os stakeholders e profissionais sobre a importância da acessibilidade desde o início de qualquer projeto é um bom caminho. A possibilidade de aumento da fonte do site, mudança de cor, contraste e fontes para dislexos são bons pontos a se pensar. Não estou falando de complexos e grandes investimento em tecnologia para se aplicar estes pontos mas sim de boas práticas que naturalmente, irão melhorar a experiência dos dois tipos de usuários: deficientes e não deficientes.
Tamanho de fonte
Segundo a W3C devemos trabalhar com fontes em três níveis que são: A, AA e AAA. Os usuários que tem a visão reduzida talvez tenham dificuldades de leitura em uma página com a fonte pequena enquanto o dislexo talvez não consiga ler o texto se não existir uma versão do site com a fonte OpenDyslexic, que é própria para este público. Para imagens de textos e textos o nível AA é o mínimo recomendado
O aplicativo Bear trabalha com a Open Dyslexic para que dislexos possam criar textos sem problemas de leitura.
Contraste de cor
Seguindo essa lógica, os textos e imagens de texto no nível AA devem ter no mínimo 4.5:1 de taxa de contraste de cor. Isto quer dizer que a cor to texto tem que ter no mínimo 4.5x mais luminosidade do que a cor de fundo. Este cálculo é feito incluindo as pessoas de visão moderada e que não precisa de assistente de contraste e também de pessoas que tem daltonismo.
No cenário de nível AAA, o índice de contraste ideal vai para 7:1, ou seja, a luminosidade da cor deve ser 7x mais luminoso que a cor de fundo para as pessoas com visão entre 20/20 e 20/80 segundo o gráfico de Snellen. Pessoas que tem perca de visão acima de 20/80 precisam de tecnologia assistiva para aumentar o contraste e ampliação do texto.
Contraste de cor e texto
O tamanho do texto também é importante para definir a quantidade de contraste quedeve ser aplicado na fonte. Um exemplo de cor cinza com o valor de 150, 150, 150 em escala RGB funciona muito bem em fundo branco, mas apenas acima de 18 pontos de tamanho de fonte. Este formato passaria na conformidade do teste AA. Se usarmos a cor cinza com um valor 110, 110, 110 em escala RGB já funcionaria com qualquer tamanho de fonte e ainda seria compatível na conformidade AAA em fontes de 18 pontos. Os contrastes podem variar dependendo do tipo de família que estiver sendo usada. Por isso é bom pensar nas fontes com peso Light e Extra Light pois elas podem apresentar problemas de contraste.
É importante levar em consideração também as fontes que se utiliza degradê. Isto não limita a criatividade na hora de produzir algum projeto que tenha um forte apelo em cores e contraste. É preciso testar diferentes aplicações para ter certeza que está em conformidade de contraste.
Ferramentas de conformidade
Algumas ferramentas gratuitas estão disponíveis para testar a conformidade das fontes e cores do nosso projeto.
Colour Contrast Analyser
Este ferramenta tem algumas funcionalidades bem interessantes para uma versão gratuita. Além dos testes de conformidade, é possível testar os diferentes tipos de daltonismo aplicados no projeto e um comparativo deles, inclusive quem tem catarata. Tem para Mac OS e Windows.
Contrast Ratio
Esta ferramenta online permite testar diferentes cores em tempo real. Ela é bem útil por ser gratuita. Ela suporta valores RGBA e HLSA e suas combinações. A parte interessante é o suporte para testes com transparência de cores.
Color Safe
Esta ferramenta online permite criar combinações de cores para projetos acessíveis. Assim você pode escolher uma cor de fundo, uma fonte e o tamanho e ver qual melhor conformidade ela traz como resultado.
Achou útil?
Este artigo tem como base no post da Geri Coady no blog A List Apart. Demonstre seu ❤ e compartilhe conhecimento.
