Acessibilidade nos seus projetos. Bom para o negócio, bom para a sociedade

Rafael Chinaglia

Published in

TOTVS Developers

8 min readSep 29, 2022

Artigo escrito por Vini Ladeira e enviado por ele ao TOTVS Developers

imagem: https://www.handtalk.me/br/blog/acessibilidade-na-web/

Este artigo foi escrito e gentilmente cedido ao TOTVS Developers por Vini Ladeira, que Já foi assistente de coordenação de projetos de arte e educação, mediou oficinas gráficas e audiovisuais, criou projetos gráficos e produziu vídeos artísticos e institucionais. Hoje é Designer de UI e UX na Hand Talk, promovendo melhorias nos serviços digitais, além de participar ativamente do comitê de diversidade e inclusão da empresa, facilitando ações e projetos na melhoria da empresa para pessoas de grupos sub representados.

Introdução

Cursos de tecnologia, design e comunicação visual costumam ter em seus conteúdos iniciais o estudo da gestalt, que gosto de resumir como “o estudo daquilo que é colocado sob nossa percepção.” Adquirida da psicologia, essa teoria é composta por algumas regras que se aplicadas, podem garantir uma comunicação de sucesso.

Mas aplicar apenas esse estudo não é o suficiente para garantir que todas as pessoas, com todas as suas especificidades fisiológicas e culturais, tenham uma experiência de sucesso.

Esse artigo tem como principal objetivo trazer algumas recomendações básicas para designers, desenvolvedores, comunicadores e demais profissionais envolvidos na construção de um projeto digital sobre acessibilidade, que é a nossa oportunidade de garantir uma equidade de acesso para o maior número de pessoas, levando em conta a diversidade humana.

O conhecimento aqui compartilhado é fruto da minha experiência colaborando na Hand Talk ao longo de 3 anos. Você também poderá se aprofundar nos assuntos acessando as referências bibliográficas no final do artigo.

Garantindo boa visibilidade

De acordo com a OMS, o daltonismo atinge 8 milhões de pessoas no Brasil. 6 milhões de pessoas possuem baixa visão ou visão subnormal no Brasil, segundo o Ministério da Saúde. Se a gente somar esses dois números vamos ter uma cidade mais populosa que São Paulo, capital… e olha que já tem bastante gente nessa cidade, né?

Considerar esse público na hora de criar interações textual é importante. Caso contrário estaremos impedindo milhares de pessoas de interagir com nossos produtos ou obter uma informação de uma forma satisfatória.

Nessa primeira imagem o texto “Olhe” não tem um contraste satisfatório, ambas as cores — azul do fundo e branco das letras — tem bastante luminosidade e juntas não atingem o nível mínimo de acessibilidade segundo critérios da WCAG.

Na segunda imagem temos a mesma ilustração, mas o texto “Olhe” está maior e na cor roxo escuro. Já conseguimos ter uma leitura bem melhor e atingimos um nível duplo A de acessibilidade segundo a WCAG.

Na terceira imagem, a mesma ilustração com o texto na cor preta atinge o nível triplo A. Garantindo o maior nível de acessibilidade segundo a WCAG.

Para entender qual o nível de contraste dos layouts, utilize a calculadora de contraste da UFRGS disponível na bibliografia.

Só a cor não basta

Por mais que elas ajudem na estética e informando, as cores não podem ser o único item para contextualizar a pessoa usuária de que ela precisa se atentar a algo.

Nesse exemplo acima, no primeiro quadro há uma tela de Login em que o campo de senha está circulado com uma linha vermelha. Faz parte da nossa cultura utilizar a cor vermelha para locais que devemos dar maior atenção, por isso a linha vermelha sugere que devemos corrigir o segundo campo.

Nessas simulações temos um exemplo do mesmo layout visto por uma pessoa que não enxerga em cores ou tem um tipo de daltonismo.

A cor vermelha não deve ser o único meio para informar a senha incorreta, por isso que nesse próximo exemplo foi adicionado um símbolo de X junto de uma mensagem contextualizando o usuário, dizendo: Senha Incorreta.

Tá aí a importância de trazer mais de um elemento para transmitir a mesma mensagem. Não é redundância, é garantir que a mensagem foi passada. Esses pensamento por trás dessas decisões podem ser aplicados em outros contextos.

Letras, palavras, frases e parágrafos.

Começando pelo menor detalhe, ter atenção aos desenhos dos caracteres (letras e números) é um diferencial na hora de escolher a tipografia para o seu projeto.

É muito comum alguns desenhos de letras serem iguais. Isso reduz o trabalho do tipógrafo e dá mais unidade visual. Mas do outro lado da balança, famílias tipográficas que tem pouca variação de desenhos de caractere, podem prejudicar a leitura para pessoas com dislexia ou síndrome de irlen, pessoas com esses diagnósticos percebem uma movimentação ou vibração nos textos.

pra quê bode na Ilha?

A frase acima pode ser muito útil para escolher sua fonte tipográfica.

Observe as letras “p”, “q”, “b” e “d” minúsculas. Se elas forem o mesmo desenho rotacionado e espelhado, a fonte não é amigável para pessoas com dislexia.

Na palavra “Ilha” a mesma repetição está nas letras “i” maiúsculo, “l” minúsculo e a parte ascendente do “h” (ascendente aqui é a primeira linha do que atinge o ponto mais alto do caractere).

Acima, temos dois parágrafos de texto, o primeiro não está tão amigável, já o segundo está mais acessível, acompanha comigo que te conto o que foi corrigido:

O contraste intenso vibra muito nos olhos, cansando a vista mais rapidamente. Faça escolhas mais moderadas, como um preto 90% sobre fundo cinza claro.

O bloco justificado tem linhas de tamanhos iguais, isso faz a pessoa perder a referência de qual foi a última linha que ela leu. Além disso, essa formatação gera espaçamentos irregulares entre as palavras, trazendo mais desconforto visual. Alinhe o texto à esquerda, cada linha terá seu próprio tamanho e os espaçamentos irregulares serão eliminados. Seu texto ficará com fluxo melhor e mais agradável.

A falta da quebra de linha torna o texto muito denso e pesado, como um bloco de concreto. Quebre o texto em parágrafos mais curtos.

Todas as dicas acima irão mitigar os efeitos de confusão visual para pessoas com dislexia ou irlen.

Para além do visual

Pessoas cegas ou com baixa visão podem preferir navegar pelas interfaces utilizando softwares como NVDA, Orca ou Voice Over, que fornecem uma leitura em formato de voz, tornando a navegação baseada em retornos auditivos.

Mantenha uma ordem lógica nas informações disponíveis tanto na camada de código quanto na camada visual do projeto. Ou seja, mantenha uma estrutura coesa de níveis de títulos (H1, H2, H3), parágrafos, links e botões.

Em textos de botões e links, forneça de forma sucinta o que vai acontecer caso o usuário os acione. Por exemplo: Utilize “Cadastre-se em nossos contatos” ao invés de apenas “Clique aqui”. Isso vai dar mais contexto e previsibilidade na navegação quando a pessoa estiver navegando via tecla TAB, que navega entre os itens clicáveis.

Para todas as imagens importantes para a apreensão do conteúdo forneça uma descrição alternativa por meio do atributo “Alt” dentro da tag da imagem. Assim, quando o leitor de telas selecionar a imagem, irá ler em voz alta o texto definido dentro do atributo “Alt”.

Tolerância ao erro

Considerar contextos de imprecisão motora nos faz pensar que nem todo mundo consegue tocar ou clicar no exato ponto visual delimitado por um texto ou botão.

Uma boa prática pra deixá-los acessíveis é definir uma área de no mínimo 48px de altura e largura, onde esse botão estará contido, a área pode ser visível ou não. Assim, a gente não exige do usuário que clique exatamente em cima do texto ou ícone do botão para ativá-lo.

Cuidado, conteúdo sensível.

Conteúdos piscantes em alta frequência podem ser perigosos. Muito utilizado em botões para atrair atenção, além de prejudicar a atenção de pessoas com Dislexia e TDAH pode gerar episódios de convulsão em pessoas com epilepsia. Não é a toa que filmes que contém esse recurso precisam de um aviso de gatilho para as pessoas ficarem sabendo disso antes de assistir.

Conclusão

Essas são apenas algumas boas práticas que já podemos aplicar em novos projetos e corrigir em projetos já existentes.

A Lei Brasileira de Inclusão obriga todas as empresas que atuam no Brasil a garantir acessibilidade em seus ambientes digitais. O desrespeito a essa lei impede milhares de brasileiros de consumir serviços e acessar informações, além sujar a imagem pode gerar multas financeiras para a empresa.

Nossa missão como tecnologistas deve incluir todos os perfis de usuários possível como forma de alcançar escalabilidade e inclusão digital. É bom para os negócios, e é bom para a sociedade.