Acessibilidade em Android (Parte 1): UI

Sandyara Peres
Jul 7, 2020 · 6 min read
Banner de Acessibilidade em Android, interfaces de usuário.
Banner de Acessibilidade em Android, interfaces de usuário.

Você pode ser um desenvolvedor júnior até sênior, mas se você sequer pensou em Acessibilidade no seu aplicativo, você está desenvolvendo para si e não para o usuário.

Tive que começar com essa “alfinetada” pois acessibilidade é sempre vista como “plus”, e não como essencial. Apesar da alfinetada, se você nunca pensou nisso, relaxa, desinformação — infelizmente—é normal. Nessa série vamos nos aventurar por aspectos de acessibilidade em design, desenvolvimento e testes para os Androiders. :)

Quem disse que desenvolvedor não tem que saber o básico de User Interface? Você é o cara responsável para falar pro designer se aquilo é possível fazer ou não, se algo é coerente com o sistema operacional ou não, ambos tem que conversar na squad! Por isso, trouxe alguns pontos de acessibilidade em UI — seja ela visual ou não — que alguns desenvolvedores precisam prestar atenção.

De maneiras gerais ao se tratar de acessibilidade e a hierarquia da informação na UI de um app, existem dois grandes pilares: o feedback e a navegação. Quando a navegação é fácil, os usuários entendem onde estão no seu app e o que é importante e para enfatizar quais informações são importantes de forma clareza, criam-se estratégias visuais e textuais envolvendo cor, forma, texto e movimento.

Feedback

O feedback se distingue em dois grupos: sendo ele visual — ícones, cores, rótulos — e de toque. Por exemplo: ao clicar em botão de envio de formulário e percebe-se que um dos campos está errado, é comum que tenha um ícone de “Atenção” junto com alguma alteração de cor (como a cor vermelha) a fim de destacar aquele campo, de preferência com um rótulo de dica explicando o motivo daquele campo estar errado. Já o de toque, como você sabe que clicou em um botão? Seja pela animação ou pela transição para uma outra página, ao menos você sabe o que está disponível para interação naquela determinada UI.

Navegação

A navegação engloba a facilidade e a agilidade do usuário em realizar um determinado objetivo durante a utilização do app, ou seja, quaisquer elementos devem ser fácil de serem localizados, a hierarquia desses elementos deve ser concisa e coerente, os passos necessários para completar uma ação deverão ser os mais curtos possíveis (ninguém merece levar 10 minutos para realizar um pagamento?!) e principalmente conseguir navegar por essa UI utilizando outros recursos, seja interruptores ou pelo TalkBack (ou quaisquer outros leitores de tela e tecnologias assistivas).

Mãos à obra

Utilizaremos como base alguns critérios da WCAG (Diretrizes de Acessibilidade para Conteúdo Web), recomendo dar uma olhada em todos os critérios, o guia de consulta rápida da WCAG que o Marcelo Sales (referência na área, hein!) elaborou de maneira bem simples vai lhe ajudar a entrar de cabeça nesse mundo.

  1. Verifique se os textos encontram-se com o contraste e tamanho adequado. Existem inúmeras ferramentas que realizam o cálculo da taxa de contraste, como por exemplo a da WebAim.
  • Se o texto for menor que 18sp ou se estiver em negrito e for menor que 14sp, a taxa de contraste de cores precisará ser de pelo menos 4,5:1.
  • Para qualquer outro texto, a taxa de contraste de cores deve ser de pelo menos 3,0:1.
Dois blocos verdes com a frase “Acessibilidade e Android”, sendo o da esquerda com contraste adequado e o da direita, não.
Dois blocos verdes com a frase “Acessibilidade e Android”, sendo o da esquerda com contraste adequado e o da direita, não.
Comparando quadros com contrates, o bloco da esquerda tendo contraste adequado, enquanto o da direita, não.

Tenha em mente que tamanho de área de toque mínima para os elementos — como botões — tem de ser, pelo menos, 48x48dp.

Botão de Lupa dentro de um quadrado indicando o tamanho de 32dp. Em volta, um quadrado tracejado indicando o tamanho de 48dp.
Botão de Lupa dentro de um quadrado indicando o tamanho de 32dp. Em volta, um quadrado tracejado indicando o tamanho de 48dp.
Mesmo que o tamanho de um ícone, por exemplo, tenha de ser 32x32dp, sua área de toque tem que ser respeitada.

Em uma UI, o designer pode ter colocado botões muitos próximos uns aos outros, o que dificulta na hora de desenvolver gerando conflito entre os elementos. É considerado uma área de toque considerável:

  • A soma dos valores de android:paddingLeft, android:minWidth e android:paddingRight é maior ou igual a 48 dp.
  • A soma dos valores de android:paddingTop, android:minHeight e android:paddingBottom é maior ou igual a 48 dp.

Se existem imagens relevantes para o entendimento da informação, é necessário estar acompanhada de uma legenda, a imagem ter um contraste adequado com o fundo e, principalmente, uma descrição alternativa com o android:contentDescription.

Os textos alternativos traduzem uma UI visual para uma UI baseada em texto, assim garantindo uma boa experiência de usuários que utilizam leitores de tela.

Duas programadoras usando um computador: uma delas está programando enquanto outra olha atentamente ao seu código.
Duas programadoras usando um computador: uma delas está programando enquanto outra olha atentamente ao seu código.
Para a imagem, um exemplo de descrição alternativa: “Duas programadoras usando um computador: uma delas está programando enquanto outra olha atentamente ao seu código no monitor.”

As informações precisam ser objetivas e completas. O que torna a experiência de um usuário utilizando o TalkBack ao focar em um botãomais completa?

  • Ligar, botão.
  • Ligar para a Central de Atendimento, botão.

Se você respondeu a segunda opção, está totalmente certo! O que puder reproduzir visualmente (como, ao invés de “Comprar” apenas, substituir por “Adquirir assinatura/mês”), ótimo! Mas colocar visualmente o botão com a descrição de “Ligar para a Central de Atendimento” nesse caso pode não agradar além de tornar a leitura mais cansativa, logo, não hesite em usar a tag android:contentDescription a fim de complementar a informação.

Não se esqueça do nativo. Em uma UI, verifique se vale a pena criar um componente do zero ou utilizar algum recurso nativo como um Toggle Button a fim de não esquecer de quaisquer recursos de acessibilidade como rótulos.

Infelizmente é comum ao utilizar uma biblioteca ela não estar 100% acessível, imagine um botão sem ser nativo que ao ser focado por um leitor de tela, é lido “Enviar formulário, sem rótulo”, o usuário precisa saber se é um texto, um botão, uma lista e o rótulo é o que vai dizer que elemento é aquele, por isso, tenha cuidado!

Além de não atrapalhar a experiência do usuário: imagina incluir comportamentos ou componentes característicos do iOS em um app Android? Isso deixaria mesmo os usuários habituados com o sistema operacional confortáveis? Entre em acordo com o designer.

Falamos de cores e contraste mas pense além delas! Ajudando usuários com quaisquer deficiências visuais relacionadas a cores, use indicador para distinguir os elementos da UI, sejam textos de apoio ou ícones. Se tiver interesse, que tal experimentar navegar em alguns sites utilizando a extensão do Chrome que simula alguma dessas deficiências?

Pergunta: “1. Qual o nome da décima versão do sistema operacional Android?”, selecionado resposta errada “Android Quindim”
Pergunta: “1. Qual o nome da décima versão do sistema operacional Android?”, selecionado resposta errada “Android Quindim”
Além de usar os recursos de cores (é comum associarmos a cor vermelha como ‘erro’, ‘perigo’), juntei recursos iconográficos além de um texto de apoio para evidenciar o erro.

Nada melhor que entender a experiência de um usuário que utilize o leitor de tela, por exemplo, que saber utilizar o mesmo! Ao ativar pela primeira vez, o usuário é encaminhado para um tutorial de uso do mesmo.

Experimente alterar tamanhos de fonte, inversão e correção de cores, alteração de controles, enfim, temos vários! Se liga na ajuda de Acessibilidade no Android do Google para ter uma noção do que é possível.

Parte do menu de recursos de Acessibilidade no Android 10.
Parte do menu de recursos de Acessibilidade no Android 10.
Menu de Acessibilidade (Accessibility Suite) no Android Q acessado através da opção Configurações. Caso não tenha essa opção, talvez seja necessário instalar o Accessibility Suite via PlayStore.

Saiba mais

No canal Android Developores bem como na própria documentação possuem referências de Acessibilidade voltado para desenvolvedores que fazem questão de incluir alguns princípios de Design.

Mas também separei uns links de materiais legais sobre Acessibilidade e a criação de interfaces de usuário — incluindo o Material Design — e claro que também estamos falando de experiência de usuário!

A gente se vê na próxima. :)

Android Dev BR

Artigos em português sobre Android, curados pela comunidade…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store