Acessibilidade em Android (Parte 1): UI
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.
Visualização de conteúdos textuais
- 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.
Áreas de toque
Tenha em mente que tamanho de área de toque mínima para os elementos — como botões — tem de ser, pelo menos, 48x48dp.
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.
Descrição alternativa
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.
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.
Rótulos de componentes
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.
Recursos visuais além de cores
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?
Conheça os recursos de Acessibilidade no Android!
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.
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. :)
