UX Design e Acessibilidade: Um Guia Prático

Enquanto ferramenta de estudo e desenvolvimento que se baseia na experiência do usuário, o UX precisa ter aceso o alerta sobre acessibilidade como relação essencial atualmente. 

Para clarear melhor sobre o assunto, acompanhe esse Guia Prático que vai trazer algumas ferramentas e dicas para projetar com acessibilidade.

A natureza da acessibilidade

Falar sobre acessibilidade é abordar uma condição fundamental a todo e qualquer processo de inclusão, que impacta e se estende muito além das interfaces digitais.

Tornar uma ferramenta acessível tem por conceito transpor os entraves que representam barreiras, sejam elas de origem técnica, visual, física ou cognitiva, promovendo a efetiva participação de todas as pessoas na realização de uma atividade, utilização de um produto ou serviço, bem como nos diversos âmbitos da vida social, como educação, transporte, mobilidade, arte, desenvolvimento profissional, entre outros.

No design, temos a falsa impressão de que o conceito de acessibilidade apenas é necessário quando envolve pessoas com alguma deficiência.

Mas a realidade é que um design se torna mais completo quando pode ser utilizado por qualquer usuário, em qualquer lugar e a qualquer momento. 

Alguns recursos projetados para ajudar pessoas com alguma deficiência geralmente também ajudam outras pessoas. Como por exemplo as legendas nos vídeos de redes sociais que tem como principal função ajudar pessoas com dificuldades auditivas, mas também podem facilitar a navegação daquele usuário que está rolando o feed com o som desligado.

Quando priorizamos a acessibilidade como um parâmetro essencial, não estamos somente promovendo a inclusão, mas também estamos gerando valor e beneficiando todos os usuários. 

Acessibilidade é sobre pessoas

Antes de falarmos sobre ferramentas e processos para promover um design acessível, precisamos nos aprofundar em algumas definições que podem nos ajudar a compreender melhor as reais necessidades dos usuários para os quais estamos projetando uma solução.

Uma das principais diferenças que precisamos entender está entre os conceitos de Igualdade e Equidade.

• Igualdade está baseada em tratar todas as pessoas da mesma forma, entregando os mesmos recursos e suporte para todos, igualmente;
• Equidade parte do princípio de que não somos todos iguais e é preciso considerar esses desequilíbrios, adequando diferentes recursos e suportes de forma proporcional para garantir que todos tenham as mesmas oportunidades.

O objetivo de ambos os conceitos é o mesmo: promover justiça de oportunidades.

Entretanto, a forma como esse objetivo é alcançado varia com uma distinção fundamental:

Quando focamos na equidade, reconhecemos a diversidade de contextos, particularidades, dores e necessidades de cada grupo e podemos, a partir disso, alocar os recursos necessários para atingir o potencial máximo da ferramenta que estamos desenvolvendo.

No design, existem alguns processos que envolvem o mesmo objetivo de incluir e promover oportunidades, mas que também funcionam de formas diferentes:

Design Universal

Método que visa abordar os princípios do design padrão para incluir o maior número de pessoas de todas as idades e habilidades, criando uma solução única que não atende às necessidades específicas de qualquer deficiência em particular.

O design universal aborda questões de usabilidade e tem a intenção de ser inclusivo, utilizando princípios como flexibilidade, simplicidade e tolerância aos possíveis erros.

Mas tudo isso sem acomodar diferentes necessidades, podendo ser comparado às vestimentas de “tamanho único”, onde a ideia é possuir um único formato que deveria servir a todos, mas sabemos que isso não acontece efetivamente.

Design Inclusivo

Considera aspectos culturais, sociais, habilidades, raça, status econômico, linguagem, idade, gênero, entre outras necessidades.

O design inclusivo desenvolve produtos com o princípio de que solucionar um problema para um determinado grupo pode estender os benefícios para muitos outros.

Usabilidade e acessibilidade são alguns dos princípios do design inclusivo, que pode abrir o alcance da empresa para outros mercados, conforme recursos são desenvolvidos e soluções são criadas.

Design Equitativo

Essa abordagem inclui levar o design inclusivo um passo à frente. 

O método envolve projetar propositalmente para grupos historicamente excluídos, ignorados, marginalizados ou sem representatividade na indústria, visando adequar a solução diretamente para suas necessidades específicas. 

Um design equitativo entende que oportunidades iguais não acontecem por acaso, mas sim com muita intenção e foco, e isso pode ser alcançado através de reflexões como: que grupos não foram observados por este tipo de produto no passado?

 Considerando esses aspectos, é possível construir produtos ao mesmo tempo acessíveis e justos para todas as pessoas.

E para isso é preciso priorizar, testar, observar e incluir todos os conjuntos de seres humanos sub-representados pela nossa sociedade.

O que devemos considerar

Mais de 1 bilhão de pessoas no mundo vivem com alguma deficiência, seja ela de qualquer nível ou origem e isso também pode limitar ou impedir seu engajamento com a tecnologia. 

Embora as restrições sejam variáveis, algumas implicações de design podem ser similares.

Podemos contornar essas limitações e intensificar nossa percepção em torno da acessibilidade validando as suposições que temos sobre os usuários com o objetivo de estreitar nosso entendimento sobre seus problemas e necessidades e encaminhar nossas soluções para um público muito mais amplo.

Para isso, é importante considerar alguns aspectos e necessidades, como exemplo:

Dificuldades visuais

Usuários com condições como miopia, daltonismo, epilepsia ou pessoas cegas podem ter dificuldades com:

• Baixos contrastes;
• Informações ocultas em links;
• Cores como única identificação de ação;
• Layout complexo e conteúdo desorganizado;
• Separação entre a ação e seu contexto (como botões e campos de formulário);

Dificuldades motoras

Deficiências e limitações físicas, falta de força ou convulsões e espasmos podem dificultar atividades como:

• Uso do mouse com necessidade de precisão de click;
• Diferentes ações agrupadas ou muito próximas;
• Mensagens exibidas em curtos períodos de tempo (pop-ups);
• Digitação e rolagem excessivas;

Dificuldades auditivas

Com diferentes níveis de severidade, incluindo perda total da audição, os usuários com limitações auditivas podem ter problemas com:

• Conteúdo disponível apenas em áudio ou vídeo;
• Estrutura dependente de tamanho de texto e posicionamento;
• Longos blocos de conteúdo;
• Telefone como único meio de comunicação;

Dificuldades cognitivas

Usuários com dislexia, dificuldade de aprendizado ou autismo podem ter dificuldades com:

• Contrastes brilhantes;
• Figuras de linguagem e expressões idiomáticas;
• Palavras sublinhadas, em itálico ou em caixa alta;
• Memória de páginas ou ações anteriores;
• Depender de ortografia correta para realizar uma ação;
• Botões vagos ou imprevisíveis;

Limitações socioambientais e incidentais

“Todo mundo tem uma deficiência em algum momento ou outro, seja com um braço quebrado, grávida, sendo criança ou sendo mais velho.” (Michael Nesmith, Designer de Acessibilidade da Amazon)

Não podemos esquecer de avaliar as limitações que envolvem aspectos culturais, sociais, habilidades, raça, status econômico, linguagem, idade, gênero, lesões permanentes, ou restrições físicas/psicológicas circunstanciais que podem dificultar o acesso à tecnologia, como por exemplo:

 Dispositivos: Usuários com celulares antigos que precisam carregar web;

• Localização: Usuários que moram em zonas rurais sem acesso à internet ou que estão inseridos em diferentes culturas e linguagens e precisam entender o conteúdo disponível;
• Status econômico: Usuários com limitações de dados para internet que precisam de um carregamento mais leve das páginas;
• Tempo limitado: Usuários que precisam realizar ações remotas da forma mais rápida e eficiente possível;
• Idade: Crianças e idosos podem ter perspectivas diferentes de entendimento das ações e elementos de layout;
• Gênero: Em alguns casos, mulheres podem ter restrições de acesso e permissões a alguns serviços ou ter dificuldade de encontrar conteúdo confiável, podendo sofrer assédios e perseguições, entre outras dificuldades mais específicas que privilegiam algumas identidades em detrimento de outras. A desigualdade de gênero também acontece online e deve ser considerada.

The next billion users (NBU)

Toda semana, milhões de pessoas acessam a internet pela primeira vez. 

Portanto, os produtos e serviços devem ter seu desenvolvimento centrado nesses usuários com a diretriz de fornecer uma boa experiência para todos. 

A Google tem feito um trabalho intensivo de pesquisa ao redor do mundo para entender melhor as percepções, dores e necessidades desses usuários com a tecnologia, a fim de construir produtos que garantam o acesso à informação sem restrições.

É importante entender que novos usuários podem ter um status econômico limitado, falta de formação educacional e podem viver em áreas menos desenvolvidas, sendo expostos a um acesso tecnológico restrito e com menos confiança ao manusear dispositivos.

Alguns princípios e boas práticas para um conteúdo acessível

Segundo WCAG 2.0 (Web Content Accessibility Guideline), podemos utilizar algumas abordagens para tornar conteúdo acessível, sobretudo torná-lo:

• Perceptível: providenciar a melhor forma de apresentar a informação, através de textos, mídias e layout alternativos (mais simples) ou separação de background, tornando o conteúdo mais simples de ser lido e ouvido;
• Operável: tornar todas as funcionalidades acessíveis pelo teclado, providenciar tempo para leitura e utilização de conteúdo, evitar animações extravagantes que possam causar desconfortos, convulsões ou competir com o conteúdo e providenciar ajuda para navegação e visualização de status do sistema;
• Compreensível: elaborar textos claros e concisos, ações previsíveis e prevenção de erros;
• Robusto: maximizar a compatibilidade com tecnologias atuais e futuras, incluindo assistência virtual;

Uma boa usabilidade também é fundamental para auxiliar não somente usuários com deficiências e limitações mas também, para tornar a experiência de todos os usuários mais assertiva, operável, agradável, útil e acessível. 

Um bom conjunto de práticas para melhorar a usabilidade e promover uma boa experiência está compilado nas 10 Heurísticas de Nielsen, ou princípios gerais para o design de interação.

Projetando com acessibilidade

A acessibilidade para produtos digitais já não é mais um diferencial competitivo, mas sim um fator fundamental que pode afetar diretamente no sucesso de um produto ou negócio.

A inclusão digital também já está prevista na LBI (Lei Brasileira de Inclusão) de 2016 e no Decreto nº6949 de 2009.

Tais normativas surgiram como forma de evitar barreiras tecnológicas, que dificultam ou impedem o acesso da pessoa com deficiência às tecnologias. 

Além disso, o algoritmo do Google, por exemplo, leva em consideração alguns fatores referentes à acessibilidade digital para colocar determinado produto em posição de relevância nas pesquisas.

Destacamos algumas estratégias e recomendações que podemos adotar para construir uma mentalidade voltada para produtos digitais acessíveis.

Isso em todas as etapas de concepção, visando contornar algumas das principais dificuldades e naturalmente implementar produtos cada vez mais inclusivos.

1 – Busque aprender sobre comunidades locais

Participe de meetups sobre acessibilidade com profissionais que tratam de regiões ou temáticas específicas para conhecer melhor os diferentes usuários e suas possíveis necessidades.

Existem comunidades online que trabalham especificamente para garantir a acessibilidade em diferentes dispositivos e sites.

Alguns grupos podem ajudar com consultorias online, como o Movimento Web para todos e o serviço de tecnologia assistiva da Universidade de Washington.

2- Expanda o conceito de comum nas representações com imagens

Explore diferentes etnias, estilos, habilidades físicas e classes sociais para elaborar personas e representar usuários em ilustrações e imagens.

Tenha atenção aos detalhes: você pode ilustrar uma pessoa canhota, por exemplo, e se certificar de que essa característica não interfira na boa usabilidade do produto.

3 -Teste com pessoas que possam ter alguma dificuldade

Inclua participantes com dificuldades nas personas, pesquisas e testes de usabilidade. 

ONGs e comunidades locais podem ajudar com essa ponte. Além disso:

• Familiarize-se com as configurações de acessibilidade do sistema operacional em que você está trabalhando;
• Teste novas funcionalidades com tecnologias assistivas e simule a navegação com as configurações ativas;

4 – Empodere os usuários sobre sua segurança e privacidade

Alguns usuários precisam de ajuda para realizar atividades que exigem input de dados privados, como pagar contas e criar contas, por exemplo. 

Deixe-os confortáveis para dividir informações pessoais dando mais transparência às opções de privacidade.

• Posicione as opções e controles de privacidade em espaços claros e fáceis de encontrar;
• Explique claramente sobre o uso de dados do seu produto;
• Acione canais de comunicação para receber feedbacks e tirar dúvidas específicas.

5 – Estruture um bom HTML

Valide se o conteúdo está publicado diretamente no HTML para permitir que a tecnologia assistiva interprete corretamente as informações necessárias para adaptação e transcrição de conteúdo.

Algumas ferramentas podem ajudar nesse processo:

• The WC3 Markup Validation Service:

Ajuda a validar a linguagem para encontrar erros que podem impedir que leitores de texto traduzam o conteúdo.

• ARIA Landmark Roles:

ARIA é uma especificação que significa “Accessible Rich Internet Applications”, que aprimora os atributos do HTML para facilitar o escaneamento de textos.

• Testes de Acessibilidade:

Os testes e plugins verificam a acessibilidade do seu site, comparando com um banco de dados e com diretrizes baseadas na WCAG.

Dessa forma se obtém uma classificação de acessibilidade que facilita o contorno de possíveis erros.

Outras ferramentas que ajudam a testar: Site improve, Ases web e Wave.

6 – Projete para dispositivos modestos e baixas conexões

Reconheça que alguns usuários podem ter dispositivos mais velhos e com tecnologia limitada de armazenamento e/ou acesso a internet e:

• Teste seu layout com uma resolução de 480 x 800 px;
• Reduza o tamanho do seu aplicativo e ofereça uma versão light, quando possível;
• Controle processos para minimizar o uso da bateria de dispositivos móveis;
• Disponibilize o conteúdo off-line e ofereça indicadores de progresso;
• Renderize o conteúdo progressivamente;
• Teste seu produto em modo avião para simular baixa conectividade;
• Minimize as atualizações para alterações relevantes e explique para o usuário o que foi aprimorado;
• Permita que o usuário teste seu produto de forma gratuita;
• Teste seu produto em modo retrato e paisagem;
• Dê um zoom para checar se seu design tem alguma quebra de layout acima de 200%;

7 – Priorize o uso do teclado

Algumas pessoas podem ter dificuldades para utilizar o mouse e precisam de ferramentas que exijam um baixo esforço físico. Para isso:

• Considere projetar para telas móveis e touch screens e teste a navegação por todo o conteúdo através do teclado ou comando de voz;
• Agrupe as ações em áreas específicas da tela, diminuindo assim o movimento em diversas áreas e regiões;
• Permita que o usuário personalize as configurações, preferências e meios de comunicação sempre que possível.

8 – Minimize erros e comunique o status do sistema

Também conhecidas como 1ª e 5ª Heurísticas de Nielsen: previna os possíveis erros de navegação e forneça ajuda para fazer e desfazer ações.

• Crie avisos de fácil compreensão, que possam ser notados e diminua a carga cognitiva através de pop-ups de confirmação ou avisos informativos;
• Permita a ação de desfazer, de forma fácil e rápida;
• Inclua botões de ação e notificações dentro do contexto do fluxo;
• Apresente feedback do sistema e mantenha a comunicação com o usuário antes, durante e depois de completar alguma tarefa;

9 – Atenção ao diagramar seu layout

Mantenha um layout simples, consistente, linear e lógico para auxiliar leituras dinâmicas e pessoas com dificuldades cognitivas e elimine complexidades desnecessárias.

• Utilize legendas e transcrições para descrever imagens;
• Forneça um espaçamento apropriado para uso, alcance e manipulação de componentes, independentemente do tamanho do corpo do usuário, postura ou mobilidade – o tamanho médio da impressão digital do dedo indicador de um adulto é de 1,6 a 2 cm, aproximadamente 60 a 76 px.
• O tamanho mínimo recomendado para um elemento clicável deve ser de 48x48px;
• Forneça atalhos;

10 – Atenção ao elaborar sua paleta de cores

Busque utilizar bons contrastes e cores simples para a identidade visual de seu produto e considere permitir a alteração de contraste entre fundo e texto. 

Além disso, cores podem carregar significados diferentes para diferentes culturas, portanto pesquise e teste bastante antes de lançar seu produto.

• Um bom contraste obedece a proporção de 4,5:1 para textos normais e 3:1 para títulos (ou textos maiores que 18px);
• Teste seu produto em telas dimerizadas ou na luz do sol e use plugins para simular e escanear a perspectiva de usuários com baixa visão e daltonismo;
• Utilize elementos visuais em conjunto com as cores para indicar ações, status ou contextos: parear textos e ícones com as cores pode ajudar o usuário a reconhecer padrões e decidir ações mais facilmente.

11- Atenção ao formatar textos

Linguagem 

• Considere traduções para diferentes idiomas e teste na sua interface;
• Evite jargões e termos técnicos;
• Escreva de forma simples e clara, utilizando palavras e expressões de fácil compreensão;

Formatação

• Faça uma combinação harmônica entre formas, cores e textos e use imagens para auxiliar na compreensão do conteúdo;
• Aumente o tamanho de componentes e fontes de texto legíveis para acessibilidade visual;
• Resuma o conteúdo para textos curtos, divididos em subtítulos, frases e marcadores simples;
• Mantenha o alinhamento a esquerda;

Links

• Forneça grandes áreas clicáveis;
• Coloque títulos auto descritivos;

12 – Abuse das tecnologias disponíveis

Existem muitas ferramentas disponíveis no mercado para auxiliar na elaboração de design inclusivo. 

Busque sempre desenhar páginas leves, com rápido carregamento e informe-se sobre as atualizações de ferramentas para utilizar sempre que possível.

Algumas ferramentas disponíveis são:

• Dispositivos de áudio ou sintetizadores de voz;
• Leitores de tela com destaque de frases;
• Dispositivos táteis;
• Comandos de voz;
• Mouse com controle por movimento da cabeça ou boca ou identificação de ponto focal;
• Assistência visual através de chamadas de vídeo;
• Tradução em libras.

13 – Não pare por aqui!

Elencamos uma série de estratégias para ajudar a pensar seu projeto em relação à acessibilidade, mas você não precisa engessar essa lista! 

O caminho ideal envolve entender o problema que precisa ser resolvido, pesquisar e entender os usuários afetados por este problema e utilizar as melhores ferramentas disponíveis para cada ponto que precisa ser validado.

Isso pode incluir estratégias de negócio, frameworks de design, tempo e esforço de desenvolvimento e custo, bem como outros fatores que precisam ser colocados dentro do seu planejamento. 

Portanto, pesquise, participe de eventos e se informe a respeito desse tema!

Um design inclusivo pode abrir portas importantíssimas para que usuários ao redor do mundo tenham participação no desenvolvimento das tecnologias que os circundam. 

Ao projetar de forma acessível, tomando decisões intencionais e contextualizadas, podemos empoderar pessoas a viver de forma mais independente, afinal, o acesso à tecnologia deve estar disponível para todos.

Alguns canais que podem ajudar:

• web pra todos

• guia wcag

• Canais do Marcelo Sales

Mais referências de leitura:

https://medium.com/tableless/acessibilidade-no-design-de-interação-exemplos-e-recomendações-86c059ef9e2f

https://design.google/library/designing-global-accessibility-part-1/

https://www.interaction-design.org/literature/article/10-principles-of-accessibility

https://www.sciencedirect.com/topics/medicine-and-dentistry/social-model-of-disability

UX Design e Acessibilidade sempre no centro dos projetos da Accurate

Na Accurate, todos os projetos têm em suas ações um design centrado no usuário, garantindo não só a sua qualidade, como eficiência.

Venha ser um talento na Accurate e fazer parte desse desenvolvimento, acesse a nossa página de carreiras e veja as vagas disponíveis.

Não deixe também de acompanhar o Blog da Accurate e compartilhar esse conteúdo com seus amigos. 

Nos acompanhe também nas Redes Sociais! Tem sempre conteúdo novo por lá: Facebook, Instagram, Twitter, Linkedin e YouTube.

Artigo escrito por: Evelyn Matos e Karoline Benatti.