Início » Blog » Acessibilidade » UX|UI design acessível: tudo o que você precisa saber

UX|UI design acessível: tudo o que você precisa saber

Fundo lilás. No centro a ilustração de um site com UX|UI design acessível

A internet é uma ferramenta revolucionária, que mudou a vida da sociedade desde que nasceu! Porém, infelizmente, mais de 99% de seus domínios não estão acessíveis para todas as pessoas no Brasil. Isso mesmo, ela tem facilitado o dia a dia de muitas pessoas, mas, por outro lado, ainda possui inúmeras barreiras de acesso e de comunicação, principalmente para as pessoas com deficiência. Para reduzir estas desigualdades, existe algo chamado UX|UI design acessível, que já está diminuindo os obstáculos digitais. Então, se você quer saber mais sobre o assunto, é só continuar aqui com a gente!

UX|UI design acessível: qual a sua importância?

Para começar a falar sobre isso, precisamos entender o que é UX|UI design. O “UX design” se refere à experiência do usuário, está ligado ao nível de satisfação de uma pessoa ao utilizar uma plataforma digital, um serviço ou produto. Aqui estamos falando sobre a emoção, o que o visitante sente ao entrar em contato com uma página, por exemplo.

Já o termo “UI design” significa “interface do usuário” e está relacionado à interface daquilo que será utilizado . Ou seja, o UI faz parte da experiência física da navegação, é como o usuário interage com o produto (site, aplicativo, máquina).

Mas o que isso tem a ver com acessibilidade digital? Bom, de acordo com uma pesquisa do IBGE realizada em 2019, cerca de 17,3 milhões de pessoas possuem algum tipo de deficiência no Brasil. Mesmo com a LBI (Lei Brasileira de Inclusão), que garante o direito delas  ao acesso à informação e exige que todos os sites, públicos e privados, estejam acessíveis, ainda assim, a acessibilidade é negligenciada pela grande maioria das pessoas responsáveis por ambientes virtuais.

A falta de acessibilidade digital impacta diretamente na experiência e interface do usuário (UX|UI design), pois sites e apps desenhados para as pessoas sem deficiência, possuem muitas barreiras de comunicação e de acessos no geral, que estão excluindo uma grande parcela da população. 

Isso ocorre porque, por exemplo, quando uma pessoa surda, que se comunica por meio da Libras (Língua Brasileira de Sinais), tenta navegar em uma página que não possui tradução em sua língua natural, ela vai encontrar grande dificuldade em compreender o conteúdo escrito em Português. 

Assim como para as pessoas cegas que navegam com o auxílio de leitores de tela, ferramentas de acessibilidade que realizam a leitura de todo o conteúdo online. É necessário que as imagens possuam boas descrições alternativas (ALT), do contrário, elas também não terão uma boa experiência, pois não compreenderão as informações visuais que estão sendo transmitidas ali. 

É aí que entra o UX|UI design acessível! Quando pensamos na experiência e na interface do usuário de forma completa e inclusiva, permitindo que todas as pessoas possam navegar com autonomia e conforto.

Dicas de UX|UI design acessível

Agora, que você já sabe sobre o que é e a importância de UX/UI design acessível, vamos aprender algumas formas de construí-lo na prática:

  • Instalar tradutores de Libras para realizar a tradução do texto para a Língua de Sinais, contribuindo para maior inclusão das pessoas que se comunicam através desta língua.
  • Incluir legenda e audiodescrição nos vídeos da sua página. Essa prática é acessível para todas as pessoas e não apenas para as pessoas com deficiência auditiva, por exemplo. 
  • Garantir que todas as imagens contem com uma boa descrição alternativa. Assim as pessoas cegas e com baixa visão, que usam leitores de tela, conseguirão absorver as informações que estão sendo transmitidas via imagem.
  • Evitar passar informações por meio de imagens e emojis. Esse hábito não é acessível para as pessoas cegas.
  • Desenvolver códigos acessíveis na programação do site. Isso também facilita o entendimento das pessoas cegas e com baixa visão que utilizam softwares de leitura de tela.
  • Incluir fontes com boa legibilidade. Textos com as fontes e tamanhos adequados possibilitam que todas as pessoas possam ler com conforto.
  • Possibilitar que o usuário altere o tamanho da fonte na interface do seu site.
  • Alto contraste. Pensar bem nas cores e averiguar se o contraste está adequado, não apenas beneficia as pessoas com deficiência visual, como também melhora o design para todas as pessoas.
  • Disponibilizar a personalização de contraste e luminosidade da interface.
  • Tomar cuidado com cores muito saturadas! Elas podem incomodar pessoas com autismo, por exemplo. 
  • Não exagerar nas animações. Elas podem distrair qualquer pessoa, especialmente as com dificuldade de atenção.
  • Criar uma área de toque (como botões clicáveis) de pelo menos 44 pixels. Isso auxilia pessoas com deficiência motora ou idosas.
  • Seguir as Diretrizes de Acessibilidade de Conteúdo da Web (WCAG). Essas diretrizes garantem mais acessibilidade para todas as pessoas, não apenas para as com deficiência.
  • Conferir se a sua solução é compatível com todos os tipos de tela.
  • Disponibilizar busca por comando de voz. Isso facilita a navegação para as pessoas cegas e também pessoas com paralisia cerebral, entre outras deficiências, além de também ser útil para qualquer pessoa que possa.
  • Garantir que seu layout siga uma sequência lógica e descomplicada.
  • Pensar na hierarquia de fontes e conteúdos também é uma boa prática para facilitar a navegação de todas as pessoas.
  • Evitar frases e textos complexos. Faça o exercício de pensar se pessoas semi-analfabetas conseguiriam entender a mensagem, ou se quando o conteúdo for traduzido para Libras, ele ainda fará sentido?

Um UX|UI design acessível é uma responsabilidade não apenas do time envolvido na programação, mas também de toda a empresa . É recomendado que pense em acessibilidade desde o início do projeto, pois é mais fácil de implementar as soluções mais adequadas do que quando ele já está finalizado.

Isso beneficia a quem?

Talvez você ainda esteja um pouco na dúvida de quem é o público que é beneficiado com a acessibilidade. Muitas pessoas acreditam que ela favorece apenas às pessoas com deficiência, mas isso é um grande equívoco!

Como falamos anteriormente, investir em um bom UX|UI design com certeza trará resultados muito positivos, pois impacta na usabilidade de todas as pessoas. Crianças, pessoas jovens, pessoas com e sem deficiência, e também idosos.  Mas não para por aí! As marcas também ganham com isso, pois websites que possuem design acessível, abrem suas portas para um público que antes não era visto e ainda garante um melhor posicionamento no Google Search. 

“O UX Design significa focar no usuário e torná-lo seu principal objetivo dentro do projeto. Ter uma atuação focada em acessibilidade significa tornar esse produto acessível para todas as pessoas, independente do contexto. Isso significa tornar seus projetos de fácil uso para todas as pessoas, incluindo as com deficiência. Pensar em acessibilidade não limita a criatividade, e ainda ajudará no processo de resolução de problemas. 

Usar boas práticas de acessibilidade não favorece apenas pessoas com deficiência. Pessoas sem deficiência podem ter alguma limitação temporária, ou até mesmo desenvolver alguma permanente. Por exemplo, se a pessoa estiver muito cansada, pode ter dificuldade de entender as informações, ou de enxergar os conteúdos por causa do excesso de luminosidade.

É importante projetar interfaces inclusivas pensando na arquitetura de informação, uso de cores, layout e design visual, formatação de texto, conteúdo e microcopy.” Afirma, Cybele Silva, Designer de UX|UI na Hand Talk.

UX|UI design acessível na prática

Promover uma boa experiência e interface do usuário envolve várias etapas. E se você quer saber por onde começar, conheça o Hand Talk Plugin

Uma solução de tradução em Libras que está quebrando barreiras de comunicação entre as pessoas surdas e ouvintes em centenas de páginas da internet. Ele conta com a ajuda do Hugo e da Maya, os simpáticos tradutores virtuais da Hand Talk! Incluir essa ferramenta de acessibilidade é um grande passo que contribui o UX|UI design acessível do seu site. Clique no banner para falar com a gente e saber mais!

Banner com fundo verde água
Voltar ao topo