Como criar interações digitais acessíveis

Bruna Villa
Academy@EldoradoCPS
9 min readJul 2, 2020

Acessibilidade é um assunto cada vez mais comentado, mas muito se limita a falar e ainda precisamos de mais ação. E isso se dá, principalmente, no contexto de produtos digitais, onde, a cada dia, descobrimos novas formas de interagir entre nós, com o mundo e com os aparelhos. Quando falamos em acessibilidade, falamos em considerar todos os potenciais utilizadores. Dessa forma, acessibilidade é um componente indispensável na usabilidade digital, e deve deixar de ser uma etapa posterior ao seu desenvolvimento, se transformando parte integrante de todo o processo de design.

Imagem por Raúl Gil via Dribbble.

Considerando que quase 24% da população brasileira possui algum tipo de deficiência, entre visual, auditiva, motora e intelectual, segundo o IBGE, temos cerca de 45 milhões de pessoas que podemos não estar atendendo via produtos digitais. Ou seja, não estamos falando de exceções. Além disso, para acessibilidade, não falamos apenas em pessoas com deficiências definitivas ou temporárias: diz respeito também a crianças, idosos, pessoas de níveis diferentes de alfabetização e capacidade cognitiva.

Acessibilidade não se resume a considerar usuários com deficiências físicas no desenvolvimento de produtos e serviços, se refere a garantir que todas as pessoas tenham acesso à eles. Além disso, o uso de produtos digitais não só deve ser acessível a essas pessoas pelo seu direito ao acesso, como esses meios podem ser facilitadores de atividades fisicamente difíceis de serem feitas, como ir ao banco.

O que é acessibilidade na interação digital

De acordo com o HIG (Human Interface Guidelines) da Apple, aproximadamente uma entre sete pessoas no mundo é deficiente ou possui especificidades que afetam a forma com que interagem com o mundo e com seus aparelhos. Pessoas podem apresentar estas características em qualquer idade, por qualquer duração, em diferentes níveis de severidade. Questões situacionais — como estar dirigindo um carro, andando num dia muito claro ou estudando em uma biblioteca muito silenciosa — podem afetar a forma com que quase todo mundo interage com seus smartphones.

Dessa forma, as ferramentas de acessibilidade ajudam um grande número de pessoas a interagir com seus aparelhos. Para muitos, acessibilidade é uma necessidade. Para outros, é praticidade. Por exemplo, legendas são necessárias para pessoas surdas total ou parcialmente, mas também são úteis para alguém que está assistindo um vídeo em um ambiente barulhento.

A partir disso, precisamos que haja uma mentalidade voltada a produtos digitais acessíveis. Na palestra “Projetando para a acessibilidade digital na Global Accessibility Awareness Day 2015 promovida pela UXPA São Paulo, Clécio Bachini — desenvolvedor e presidente do braço paulista da UXPA — afirmou que “a acessibilidade deveria ser tratada com a mesma naturalidade de outras fases, porém de forma não-trivial, perpassando transversalmente toda a gestão do projeto — planejamento, arquitetura da informação, implementação etc.” Segundo Clécio, é necessário envolver o time como um todo no processo de concepção da acessibilidade de um site, sistema ou aplicação para web.

É Lei, não é bondade.” Com essa citação, ele ressalta que acessibilidade não é uma questão que depende da boa vontade das pessoas, mas uma prática a ser adotada em nível federal, prevista pelo decreto nº 6949/2009. Além disso, Bachini afirma que o projeto não tem que ser “consertado” para acessibilidade — o que, convenhamos, costuma ser o mais comum. Ele deve ser pensado para acessibilidade, estando nos objetivos do projeto desde o início, e não algo a ser “remendado” posteriormente no produto.

Imagem por Caitlin Brisson.

Como gerar interações digitais acessíveis

Primeiro, considere as necessidades de todas as pessoas que podem usar seu produto. Para simplificar, existem quatro áreas da acessibilidade para se manter em mente, sobre seus usuários:

  • Visão: Uma pessoa pode ser cega, ter baixa visão ou possuir daltonismo, ou estar submetida a alguma situação que o ato de focar os olhos seja algo difícil;
  • Audição: Uma pessoa pode ser surda, ter perda parcial da audição ou ter dificuldade de ouvir sons a uma certa distância;
  • Física ou Motora: Uma pessoa com mobilidade reduzida pode ter dificuldade para segurar o aparelho ou tocar na interface;
  • Cognitiva ou Letramento: Uma pessoa pode ter dificuldade de lembrar uma sequência de passos, ou pode achar difícil administrar uma interface muito complexa, assim como pode não ser alfabetizada.

Jesse Hausler, especialista em acessibilidade na Salesforce Experience and Design, em seu artigo “7 Things Every Designer Needs to Know about Accessibility”, levanta dois exemplos muito importantes para interações acessíveis em web:

  • Apresente uma indicação visual de foco do teclado. Seu foco mostra para os usuários o que é “clicável” e ajuda a identificar o que um elemento é. Esses indicadores de foco, que são fundamentais para o sucesso dos usuários que controlam tudo com o teclado ou com outras tecnologistas assistivas, estão em grande parte ausentes da web. Se você remove o foco padrão, substitua ele por alguma coisa melhor do que o que o seu navegador fornece.
  • Não faça com que as pessoas precisem passar o mouse para encontrar itens escondidos: esse um princípio que atende principalmente pessoas com deficiências motoras. Isso inclui usuários que fazem uso apenas do teclado, e também aqueles que usam ferramentas de reconhecimento de voz. Se um link ou botão não pode ser visto pelo assistente de navegação, não pode ser verbalmente “clicado”. Se alguém que está navegando pelo teclado não consegue ver que um botão existe na página, como podemos esperar que navegue até o espaço vazio onde o botão vai aparecer?
Foco padrão dos browsers após atualização do Safari. Imagem por Mikael Ainalem via Twitter.

Além disso, o Guia de Interações Humanas da Apple traz algumas recomendações para interações acessíveis em aplicativos mobile, como:

  • Os botões e áreas de controle não podem ser pequenos demais, pois torna difícil a seleção para pessoas com dificuldades motoras;
  • Ao utilizar controles e gestos, dê preferência aos originais da plataforma, com os quais o usuário já está familiarizado. Também procure dar mais de uma opção para um ação ser realizada, além do gesto escolhido.
  • Além de respostas visuais, utilize os feedbacks táteis existentes em seu aparelho. Porém, é importante ficar atento ao uso consistente dos feedbacks para que seu usuário não fique confuso ou incomodado.
  • Permita inputs por fala, além de escrita. Permita que os inputs e ações rápidas possam ser feitas pelo assistente por controle de voz, caso exista.

Também é relevante ressaltarmos que os smartphones vêm desenvolvendo suas próprias ferramentas de interação acessíveis, que podem ser configuradas para o seu aplicativo. Ainda falando do iOS, temos diversas ferramentas como Audio Description, Speak Screen, Switch Control, Assistive Touch, a Siri, e o VoiceOver — o leitor de tela para pessoas cegas e de baixa visão. Outros sistemas possuem outras tecnologias assistivas, e as especificações semânticas que viabilizam isso durante a codificação chamam-se ARIA (Accessible Rich Internet Applications). É importante lembrar que esses são recursos e reforços que devem ser dosados ao longo do código durante a implementação, e que devem ser configurados para seu aplicativo, pois a configuração automática do sistema do smartphone pode não ser adequada.

VoiceOver e Siri no iOS — via Apple.

É importante falarmos também sobre animações e movimentos. Um efeito paralaxe, por exemplo, é um efeito de movimento que ajuda a criar a percepção de profundidade entre o primeiro plano e o plano de fundo ao mover o aparelho, como na Home Screen do iPhone. Esses efeitos podem ser divertidos e imersivos para a experiência, mas, para algumas pessoas, podem ser confusos e causar enjoo. Dessa forma, no iOS existem configurações de tela que as pessoas podem ativar se elas são sensíveis a movimento, como animações personalizadas, paralaxe, vídeos ou gifs com autoplay e até transições de tela. Durante o WWDC20, o engenheiro de acessibilidade da Apple Drew Haas ressaltou a importância de configurarmos os nosso aplicativos para respeitar essa configuração de redução de movimento, quando ativada:

“Adoramos utilizar efeitos que tragam a experiência do software para a vida real, mas é nosso dever ouvir e respeitar as configurações dos usuários que os desativarem. […] Isso é muito importante porque conseguir usar um app que é inclusivo é simples mas empoderador. Quando você faz design com acessibilidade em mente, você empodera todas as pessoas que usam seu aplicativo.”, afirma.

Acessibilidade Toolkit: o Guia da WCAG

Existem vários pontos sobre os quais precisamos pensar quando falamos em acessibilidade digital, e os principais pontos estão reunidos na WCAG (Web Content Accessibility Guidelines). A WCAG é “a base para que você tenha produtos digitais verdadeiramente inclusivos e acessíveis”. A fim de tornar seu conteúdo mais simples de ser assimilado, o designer Marcelo Sales desenvolveu o Toolkit da Acessibilidade, no qual é possível acessar os 78 critérios de sucesso para uma interface acessível.

Segundo Sales, “a aplicação inicial foi pensada para a utilização em exercícios de card sorting, onde as pessoas envolvidas em projetos digitais poderiam facilmente identificar gaps e atividades que precisariam contemplar durante o desenvolvimento dos projetos. Mas, na prática, um toolkit neste formato (cards) pode ser utilizado como fonte rápida de consulta de diretrizes, disseminação de conhecimento, facilitador de discussões, identificador de funcionalidades ou até mesmo como um checklist.”

Uma curiosidade sobre o Toolkit da Acessibilidade é que os próprios cards foram estudados para serem o mais inclusivos possível. Desde a fonte escolhida, a Tiresias Infofont, produzida por John Gill e criada especialmente a pedido do RNIB (Royal National Institute of Blind People), até a divisão dos princípios feita não só por cores, mas também por padrões específicos. Legal, né?

A divisão dos princípios foi feita não só por cor, mas também por padrões, para respeitar as guidelines de acessibilidade. Imagem por Marcelo Sales.

O material está disponível aqui para download, e é livre para uso!

Como saber se essas pessoas vão conseguir utilizar seu produto

Primeiro: ouça, pergunte, entreviste! Principalmente se você está fazendo um produto voltado a pessoas com deficiência — o que você pensa que pode ser útil pode, na verdade, atrapalhá-las ou colocá-las em perigo. Durante o desenvolvimento de um projeto mobile voltado para mulheres, na etapa de adaptar as ferramentas de leitura de tela e constraste para o aplicativo, fomos conversar com mulheres cegas e de baixa visão. Descobrimos que, muitas vezes, as pessoas tentam ajudá-las movimentando-as sem perguntar se havia necessidade, tomando rumos que elas não queriam ou fazendo-as perder seus pontos de referência, deixando-as desconfortáveis, perdidas ou em perigo. E podemos fazer o mesmo com nossos produtos.

É muito comum também perguntarmos mas não ouvirmos: a escuta ativa e a empatia são as chaves para entender a outra pessoa e desenvolver produtos, ferramentas e interações que realmente as atenda, sem partir do princípio que nós, que não possuímos essa vivência, sabemos o que é melhor e o que vai atendê-las. Nessa mesma experiência, descobrimos que o nosso produto seria de grande relevância por realmente ajudá-las, mas de um jeito totalmente diferente do que imaginamos inicialmente e, além disso, que precisávamos implementar algumas features para que elas se sentissem confortáveis e seguras para utilizar nosso aplicativo. Nós nunca saberíamos se não tivéssemos conversado com essas mulheres — ninguém pode falar por elas.

Segundo: teste! Sempre que possível, é importante testar a solução com os recursos utilizados pelas pessoas com deficiência, procurando se aproximar ao máximo do seu ambiente. Nada substitui o feedback delas próprias para alimentar o trabalho de design. É importante estudar sobre as pessoas com deficiência antes de realizar os testes, para quebrar seus preconceitos e informações baseadas em “achismos”, assim como entender sua pluralidade e diversidade, evitando colocá-las todas em uma caixa. Além disso, é essencial dispor de todas as ferramentas necessárias para se ter a melhor comunicação possível, como a contratação de intérprete de Libras, e uma possível locomoção até os espaços que elas utilizam.

Acessibilidade além das interfaces digitais

Acessibilidade tem a ver com permitir o acesso ou uso de produtos, serviços e informações. O design é uma ótima maneira de tornar isso tudo possível, mas acessibilidade vai muito além de interfaces digitais.

Não adianta a sua interface ser acessível se o seu produto ou serviço não o é. Vamos imaginar: desenvolvemos um aplicativo acessível para pessoas com deficiência motora, para comprar e usar bilhete de metrô, mas o acesso à plataforma de embarque é feito apenas por escadas, sem opção de rampas. Parece absurdo, não é? Agora vamos um pouco mais além: o seu produto pode ser acessível, mas ele faz sentido para essas pessoas? O seu aplicativo de caronas tem um assistente de leitura de tela funcionando perfeitamente, mas as pessoas cegas se sentem confortáveis ou seguras em usar este serviço? Existem features que ainda precisam ser implementadas para que essas pessoas realmente utilizem seu aplicativo?

E por último: o seu produto pode ser acessível, mas ele é realmente inclusivo? Ou o restaurante no qual a pessoa vai utilizar o aplicativo para pedir o prato irá constrangê-lo de alguma forma? É muito importante o papel que nós designers temos, sempre que possível, de nos preocupar em transformar as interações reais dos nossos produtos em interações acessíveis e inclusivas.

É importante ressaltar que esse artigo teve como foco o desenvolvimento no campo do Design de Interação. Para uma discussão mais ampla, indico a leitura dos textos escritos pelo Thales Silva e pelo Victor Mozetto, que discutem design de experiência e interface.

--

--

Bruna Villa
Academy@EldoradoCPS

Apple Developer Academy student, Designer and art lover ❤