Flutter: dicas para acessibilidade no seu aplicativo
Um aplicativo inclusivo pode ser um grande diferencial seja para ganhar um novo cliente ou então um novo admirador. Promover a acessibilidade é de extrema importância não somente para lugares físicos, mas também para todo ambiente digital.
Porque ter um aplicativo acessível?
Vamos lá com alguns dados, irei colocar as referências no fim da publicação
Do total da população brasileira, 23,9% (45,6 milhões de pessoas) declararam ter algum tipo de deficiência. Entre as deficiências declaradas, a mais comum foi a visual, atingindo 3,5% da população. Em seguida, ficaram problemas motores (2,3%), intelectuais (1,4%) e auditivos (1,1%).
Segundo a Organização Mundial da Saúde, as principais causas de cegueira no Brasil são: catarata, glaucoma, retinopatia diabética, cegueira infantil e degeneração macular.
Segundo dados do IBGE de 2010, no Brasil, das mais de 6,5 milhões de pessoas com alguma deficiência visual:
- 528.624 pessoas são incapazes de enxergar (cegos);
- 6.056.654 pessoas possuem baixa visão ou visão subnormal (grande e permanente dificuldade de enxergar);
Outros 29 milhões de pessoas declararam possuir alguma dificuldade permanente de enxergar, ainda que usando óculos ou lentes.
Ou seja, é importante se colocar no lugar do outro e ter empatia, a quantidade de pessoas que podem precisar do seu aplicativo e não conseguir usar porque você não se atentou a alguns detalhes pode ser um grande diferencial pro seu negócio.
Pontos de atenção para acessibilidade
Screen reader captam todos os textos que estão na tela, porém tem alguns pontos que precisam de um cuidado para que o screen reader interprete corretamente as informações, sendo eles:
- Imagens e botões somente com ícones
- Tamanho de botões
Vamos esmiuçar estes elementos para ficarem mais claros para você
Imagens e botões somente com ícone
Notou alguma diferença entre as imagens? Provavelmente não, porém quem é deficiente e usa screen reader percebe a diferença. A primeira imagem está sem semanticLabel que é equivalente ao alt do html. Sem o preenchimento da propriedade semanticLabel o interpretador não saberá informar ao usuário o que está na imagem e o usuário possivelmente ficará perdido.
Outro ponto deste tópico é o floatingButton no canto direito inferior, observe que o botão não possui nenhuma escrita apenas o ícone, neste caso também o screen reader informará ao usuário quando ele pressionar apenas "Botão", sem informar ao screen reader para que serve o botão, o usuário também ficará perdido. Neste caso, os botões possuem o atributo semanticLabel e também o tooltip, você pode usar qualquer um dos dois pois haverão o mesmo efeito no screen reader.
Quer testar? Abaixo um código funcional de como funciona o uso de semanticLabel e tooltip, basta copiar e colar no seu main.dart
Após substituído seu main, você precisará ativar o screen reader do dispositivo. No Android temos o talkback e no iOS temos o voiceOver, ative e veja como funciona o semanticLabel.
Tamanho de botões
Este é outro ponto de atenção muito importante a área touch do botão, como vemos na imagem acima temos dois botões, um com o tamanho de 40dp e outro com o tamanho de 24dp, para a composição de layout é difícil termos ícones ou textos muito grandes pois acaba prejudicando a UI do aplicativo, porém isso não impede que a área pressionável seja maior. Ao fornecer áreas de toque maiores, você facilita para os usuários navegarem no seu aplicativo.
Outro ponto de atenção ao tratar com botões é o espaçamento entre eles, é importante manter uma distância entre dois botões algo entre 5dp a 10dp, imagine você possuir um e-commerce, na tela de carrinhos ter dois botões, um de finalizar compra e outro de limpar carrinho, imagina que sem querer o usuário pressiona o botão de limpar carrinho e não tiver nenhuma mensagem do tipo "Você tem certeza que deseja limpar o carrinho?", possivelmente você perderia essa compra por causa de um detalhe fácil de resolver.
