Tornando o seu app acessível por todos no iOS.
Hoje, mais de 1 bilhão de pessoas possuem algum tipo de deficiência, ou seja 1 a cada 7 pessoas no planeta. São mais de 2 milhões de apps disponíveis na App Store, o que você faz para que seu app seja utilizado por todos?
Infelizmente não tenho tempo para isso…
É muito difícil e demorado implementar isso…
O sprint da equipe já esta bem apertado. Um dia quem sabe?
Calma! Não é algo tão complexo e demorado assim, o iOS possui funcionalidades automáticas e nativas para tornar o seu app acessível! 😉
O que vamos falar aqui é de boas práticas que podem aumentar o nível de acessibilidade em seu app, além de outras ferramentas que podem deixar o app nota 10 em acessibilidade! 😍
O iOS possui várias ferramentas de acessibilidade, você pode ver mais sobre elas aqui. A ferramenta a ser aprofundada nessa pequeno artigo é o Voice Over.
O VoiceOver é um leitor de tela baseado em gestos que permite usar o iPhone mesmo sem enxergar. Uma vez habilitado, você acessa o VoiceOver a partir de qualquer lugar do iOS com três cliques no botão de Início. Ouça a descrição de tudo que acontece na tela, da carga da bateria a quem está ligando ou até de qual app seu dedo está em cima. E você pode ajustar a velocidade e tom da voz.
Mão na massa!
Existem duas formas de tornar otimizar a acessibilidade de seus componentes, utilizando a aba de utilities nos arquivos de interface .storyboard ou utilizando o UIAccessibility nos arquivos .swift.
Porém em alguns casos, como ilustrado aqui, deverá haver implementações também nos arquivos .swift.
Alternativa dos Storyboards
Selecione os componentes individualmente em seu .storyboard e abra a aba de utilities no canto direito da aplicação (“Hide or show utilities”). Por final selecione o terceiro botão ("Show Identity Inspector")
Na seção mostrada a esquerda devemos efetuar as alterações para tornar o componente selecionado mais acessível.
O primeiro item deve ser selecionado quando você deseja que o componente seja considerado acessível.
No caso apresentado do Timer acessível precisamos nos garantir que todos os componentes em nossa UIViewController são acessíveis. Porém existiram vezes onde não será necessário considerar um componente acessível (se aplica a componentes estéticos que não são necessários para o uso do app)
O segundo item (label ou rótulo) deve receber um rótulo que vai ser falado pelo VoiceOver ao usuário, segue um exemplo:
UILabel — Label: Timer Acessível
UILabel — Label: 30
UIButton — Label: Iniciar Contador
Ele deve ser a descrição sobre o seu componente (se for um botão: a ação que o botão executa, se for um UILabel deve ser o texto mostrado por esse componente), também é interessante descrever um pouco mais o rótulo.
O terceiro item (hint ou dica) deve receber um texto que vai ser falado pelo VoiceOver ao usuário após o rótulo, segue um exemplo:
UILabel — Hint: Não possui hint (sem interação)
UILabel — Hint: Não possui hint (sem interação)
UIButton — Hint: Dê dois toques para iniciar o contador.
Deve ser uma breve dica de como interagir com esse componente. Geralmente essas dicas já estão nativamente atribuídas aos componentes do UIKit.
O quarto item (identifier ou identificador) não vai ser utilizado por nós já que sua principal utilidade está ligado com os testes de UI automatizados.
O quinto item (traits ou traços) é bem importante para nós, ele vai definir como o sistema reconhece o componente que queremos que seja acessível.
Existem 2 tipos de componentes em nossa UIViewController:
- UILabel: Seu traço por padrão é "Static Text".
- UIButton: Seu traço por padrão é “Button”.
UILabel — Traits: Static Text
UILabel — Traits: Updates Frequently
UIButton — Traits: Button — User Interaction Enabled
Devemos marcar que nosso contador atualiza frequentemente, já que seu número vai decrementando até chegar ao número 0.
Alternativa programática:
Você deverá ter um referência dos componentes em seu UIViewContoller para que todos que você deseja se tornem acessíveis.
Vamos começar pelo UILabel que temos o título de nosso contador acessível, começamos atribuindo o rótulo desse componente para o atributo accessibilityLabel e depois atribuindo o traço de texto estático para o atributo accessibilityTraits de nosso UILabel.
Em nosso outro UILabel teremos os números do contador que vão ser atualizados, logo precisamos ter a seguinte configuração:
Além disso, quando mudarmos o texto de nosso contador na função do timer devemos trocar o rótulo de acessibilidade de nosso UILabel:
Para o nosso UIButton devemos configurar o seguinte:
Finalmente, devemos mandar uma notificação para que possa ser falado o número que o contador se encontra enquanto vai decrementando:
Pronto! Já garantimos que o contador que criamos poderá ser usado pelos usuários que utilizam o Voice Over! 🎉
O bom de implementar programaticamente é que conseguimos fazer a localização da acessibilidade também, assim em qualquer idioma o seu app é acessível.
Código completo: https://github.com/giogus/timer_acessivel
Mais conteúdo sobre em:
https://developer.apple.com/documentation/uikit/accessibility/uiaccessibility
https://www.apple.com/br/accessibility/
https://developer.apple.com/videos/play/wwdc2017/215/
Qualquer dúvida comenta ae! Feito por Gus.
