Voice Over

Acessibilidade em iOS

Adicionar acessibilidade em uma aplicação iOS significa tornar sua utilização melhor para usuários com necessidades especiais. Mais importante do que aumentar o número de potenciais usuários para a aplicação, isso contribui para a redução da desigualdade entre as pessoas, possibilitando que todos tenham acesso aos mesmos recursos e oportunidades.

A melhor maneira de tornar um aplicativo acessível é planejando seu desenvolvimento pensando em todos os usuários. Dessa maneira, é possível desenvolvê-lo tendo em mente a melhor experiência para o usuário comum e para o usuário com alguma necessidade específica. Entretanto, também é possível ajustar um aplicativo já pronto, como veremos a seguir.

Pensando em acessibilidade, a Apple disponibiliza uma gama de recursos produzidos para este público em seus dispositivos. VoiceOver (para deficientes visuais), Acesso Guiado (para pessoas com dificuldade de aprendizagem) e Ajuste de Áudio (para deficientes auditivos) são alguns exemplos.

É importante dizer que todos esses recursos já estão presentes no próprio sistema operacional dos dispositivos. Sendo assim, o trabalho do programador é mínimo para tornar um aplicativo acessível.

Neste tutorial, você irá aprender como tornar seu aplicativo acessível para usuários que utilizam o Voice Over. Mais especificamente, irá facilitar a leitura dos elementos da tela de um aplicativo pelo VoiceOver. Para isso, utilizaremos um aplicativo já pronto e será necessário instalá-lo em um aparelho que possua o VoiceOver (para que seja possível testar a leitura da tela).

VoiceOver

VoiceOver é o leitor de tela dos dispositivos da Apple. Com ele, usuários com deficiência visual podem utilizar seu aparelho como qualquer outro usuário, executando exatamente as mesmas tarefas.

Para ativar o VoiceOver, siga os seguintes passos:

• Ajustes
• Geral
• Acessibilidade
• VoiceOver
• Ativar

Na mesma tela de ativação do VoiceOver é possível fazer vários ajustes. Para este tutorial não é necessário fazer nenhum ajuste específico. Para configurar o atalho do VoiceOver, siga os seguintes passos (este atalho será muito útil quando na realização dos testes que iremos realizar):

• Ajustes
• Geral
• Acessibilidade
• Atalhos de Acessibilidade (última opção da lista)
• Selecionar o VoiceOver

Agora, sempre que o botão home for pressionado três vezes o VoiceOver será automaticamente ativado caso esteja desativado, e vice versa.

Alguns Comandos do VoiceOver

Caso você já conheça e saiba utilizar o VoiceOver, pode seguir diretamente para o próximo tópico. Caso esteja conhecendo agora ou queira rever alguns comandos, segue a lista de gestos abaixo:

• Um toque em algum elemento da tela: seleciona o elemento e o lê em voz alta.
• Dois toques: pressiona o que está selecionado (corresponde à um toque comum quando o VoiceOver está inativo).
• Deslizar o dedo para esquerda ou para a direita: navega entre os elementos da tela.
• Deslizar o dedo para cima ou para baixo: executa função personalizada de algum elemento, quando disponível (como exemplo, você pode testar esse gesto em uma célula de uma tabela de um aplicativo que permite executar uma tarefa personalizada com a célula).
• Deslizar três dedos na tela: permite a navegação entre páginas e listas (como exemplo, você pode testar esse gesto para navegar entre as páginas de aplicativo presentes na tela inicial, ou para dar um scroll em uma lista com grande quantidade de dados).

VoiceOver e aplicações iOS

O Voice Over funciona a partir da hierarquia de elementos presentes na tela do aparelho. A cada vez que ele encontra um elemento, uma série de perguntas é feita, e as respostas, quando disponíveis, são transmitidas ao usuários — por meio da leitura em voz alta, ou apresentando na tela. Por padrão, todo elemento de tela do iOS (todo elemento “UI”) possui uma série de atributos de acessibilidade. Esses atributos são as respostas para as perguntas feitas pelo VoiceOver. A seguir, veja a relação de cada atributo e as perguntas respondidas por eles.

• isAccessibilityElement: Bool : especifica se um elemento de tela deve ou não ser lido pelo VoiceOver.
• accessibilityLabel: String? : diz qual o nome do elemento. Recomenda-se que seja o menor possível, focando na funcionalidade do elemento. Por exemplo, no relógio, temos um botão com o sinal de “+” para configurar um novo alarme. Um bom nome para esse elemento (accessibilityLabel) seria “Adicionar”.
• accessibilityValue: String? : descreve o estado do elemento. Pode ser que tenhamos um elemento que esteja selecionado ou não, por exemplo.
• accessibilityTraits: UIAccessibilityTrait : diz qual a forma de interação com o elemento. Pode ser um botão, o qual o usuário pode PRESSIONAR (UIAccessibilityTraitButton), ou um campo de texto no qual o usuário pode DIGITAR, por exemplo.
• accessibilityHint: String? : descreve mais detalhadamente como o usuário pode interagir com um elemento. Esse atributo é usado quando os atributos accessibilityLabel e accessibilityValue não são suficientes para deixar claro a forma de interação com um elemento.
• accessibilityFrame: CGRect : serve para localizar o elemento (dizer onde ele está). Ele é usado pelo VoiceOver para realizar o contorno do elemento da tela. Por default, seu valor é o frame da view na qual o elemento se encontra. Recomenda-se mudar o valor desse atributo apenas em casos muito específicos.

Todo o trabalho que será realizado neste tutorial está baseado nesses 6 atributos. Iremos testar o aplicativo com o VoiceOver e identificar qual o melhor atributo a ser utilizado e de qual forma. Isso será suficiente para proporcionar uma boa experiência para um usuário do VoiceOver.

Mão na Massa

Para começar, baixe o projeto do tutorial neste link. Abra-o com o XCode e o teste em seu aparelho.

O projeto usado é um aplicativo para lista de compras. Através dele é possível cadastrar produtos e compras, bem como visualizar os produtos cadastrados, as compras a serem feitas, as compras já feitas e realizar uma compra pendente.

Melhorando a Acessibilidade da Tela de Lista de Produtos

Vamos começar pela lista de produtos. Na TabBar, selecione a opção “Produtos”. Ative o VoiceOver e teste.

O que vamos fazer para melhorar a acessibilidade desta tela é adicionar uma descrição no botão “Add”, e uma outra descrição para cada célula da TableView. Para isso, vá até o arquivo ProdutosTableViewController.swift, e antes da última chave (}) adicione o seguinte trecho de código:

Agora, encontre a função viewDidLoad() e em seu final adicione a chamada para a função que acabamos de criar.

Da próxima vez que o VoiceOver passar pelo botão “Add” ele irá ler o que já estava sendo lido, mais a descrição que acabamos de colocar. Teste novamente e veja o resultado.

Agora, vamos fazer exatamente a mesma coisa com as células da TableView, dizendo que é possível acessar mais detalhes sobre cada produto. Para isso, ainda no mesmo arquivo, antes da última chave (}), crie a seguinte função:

E faça a sua chamada no final da função override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell, antes de seu retorno.

Dá próxima vez que o VoiceOver passar pelas células da TableView ele irá ler o que já estava sendo lido, mais a descrição que acabamos de colocar.
Teste novamente e veja o resultado.

Melhorando Acessibilidade da Tela de Criação e Edição de Produto

Há duas maneiras de se ter acesso à essa tela: pressionando o botão “Add” que alteramos anteriormente, ou pressionando um dos produtos da lista para editar. Acesse a tela por um desses caminho e a teste usando o VoiceOver.

Temos um único problema: a imagem para colocar a foto do produto não está acessível. Para resolver esse problema, vá ao arquivo NovoProdutoViewController.swift e adicione o seguinte trecho de código, ante da última chave (}):

E faça a chamada da função criada no fim do viewDidLoad().
Nessa função estamos dizendo que a imagem do produto é um elemento acessível (logo, ele será lido pelo VoiceOver) e que ele representa a foto do produto. Também estamos dizendo que ele é um botão, para que o usuário saiba que é possível pressioná-lo, melhorando assim a sua experiência ao usar o aplicativo (na verdade, o que está acontecendo, é o acionamento de uma função atrelada a um gesto, que por sua vez faz parte da imagem).
Como esta mesma tela também é usada para alterar os dados de um produto, também estamos colocando uma descrição personalizada de como interagir com o elemento.

Teste novamente e veja o resultado.

Melhorando Acessibilidade da Tela de Lista de Compras a Fazer

Volte da tela de criação e edição de produto. Na TabBar, selecione a opção “Compras a fazer”. Ative o VoiceOver e teste.

O que vamos fazer para melhorar a acessibilidade desta tela é adicionar uma descrição no botão “Add”, e uma outra descrição para cada célula da TableView.

Para isso, vá até o arquivo ComprasAFazerTableViewController.swift, e antes da última chave (}) adicione o seguinte trecho de código:

Agora, encontre a função viewDidLoad() e em seu final adicione a chamada para a função que acabamos de criar acima.

Da próxima vez que o VoiceOver passar pelo botão “Add” ele irá ler o que já estava sendo lido, mais a descrição que acabamos de colocar. Teste novamente e veja o resultado.

Agora, vamos fazer exatamente a mesma coisa com as células da TableView, dizendo que é possível acessar mais detalhes sobre cada produto. Para isso, ainda no mesmo arquivo, antes da última chave (}), crie a seguinte função:

E faça a sua chamada no final da função override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell, antes de seu retorno.

Dá próxima vez que o VoiceOver passar pelas células da TableView ele irá ler o que já estava sendo lido, mais a descrição que acabamos de colocar.
Teste novamente e veja o resultado.

Melhorando Acessibilidade de Criação de Nova Compra

Na tela de lista de compras a fazer, pressione o botão “Add” (+). Ative o VoiceOver e teste.

Essa tela apresenta um campo para o nome da compra e a lista de produtos cadastrados. Para criar um novo item da compra é preciso pressionar um dos produtos da lista e indicar a quantidade que se vai compra.

O que vamos fazer para melhorar a acessibilidade é personalizar o conteúdo que está sendo lido em cada célula da TableView, e adicionar uma descrição a mesma, dizendo que é necessário pressionar duas vezes para adicionar a quantidade que se deseja comprar de cada produto.

Primeiro, vamos criar uma função que adiciona a descrição às células. No arquivo NovaCompraViewController.swift, ante da última chave (}) adicione o seguinte trecho de código:

E faça a chamada da função criada no final da função override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell, antes de seu retorno.

Dá próxima vez que o VoiceOver passar pelas células da TableView ele irá ler o que já estava sendo lido, mais a descrição que acabamos de colocar.
Teste novamente e veja o resultado.

Perceba que quando passa pela célula, o VoiceOver está lendo primeiro os labels descritivos, e depois os dados. O ideal seria que ele lesse o label descritivo e em seguida o dado respectivo. Isso está acontecendo porque o label descritivo e o label do dado em si são diferentes.

Esse é um defeito típico de aplicações que não foram desenvolvidas com a preocupação de ter acessibilidade. O ideal, seria ter apena um label que possuísse a descrição do dado, junto ao dado descrito. Assim, o VoiceOver sempre leria a descrição do dado e em segui o dado em si.

Mas não vamos fazer essa refatoração, porque seria muito trabalhoso e as possibilidades de causar grandes defeitos no nosso aplicativo são grandes. Para resolver este problema, dentro da função que criamos anteriormente, antes da chave de fechamento (}), adicione o seguinte trecho de código:

Isso fará com que os labels descritivos não sejam mais lidos pelo VoiceOver. Teste novamente o aplicativo.

Mas ainda não terminamos com ela. Agora, adicione o seguinte trecho de código:

Sua função agora deve estar assim:

O último trecho de código faz com que o VoiceOver leia o label descritivo junto com o dado que ele descreve, assim como deve ser.
Teste novamente e veja o resultado.

Melhorando Acessibilidade da Tela de Lista Itens de Compra

Para ter acesso à tela de lista de itens de uma compra, vá até a lista de compras pendentes e selecione uma compra. Ative o VoiceOver e teste.
O único problema de acessibilidade que encontramos nessa tela é igual ao que resolvermos anteriormente: os labels descritivos das células estão sendo lidos separadamente dos dados.

Para resolver esse problema, vamos criar uma função no fim do arquivo ItensTableViewController.swift, antes da última chave (}):

E chamá-la no final da função override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell, antes de seu retorno.

Perceba que a função criada executa exatamente a mesma tarefa da função que criamos anteriormente, sendo que não há um botão “Add” para adicionar uma descrição.

Teste novamente e veja o resultado.

Melhorando Acessibilidade de Realização de Compra

Na tela de lista de itens de compra, pressione o botão “Comprar”. Ative o VoiceOver e teste.

Essa tela apresenta a lista de itens da compra selecionada. Para finalizar a compra é preciso entrar com o preço unitário de cada produto de cada item. Para isso, é necessário clicar no item que se deseja inserir o preço.
Temos os seguintes problemas de acessibilidade:

• Não há uma indicação de que é preciso pressionar duas vezes para inserir o preço unitário do produto.
• Nas células da TableView, os labels descritivos e os labels dos dados estão sendo lidos separadamente, assim como nas telas anteriores, com a diferença de que aqui as células possuem mais dados.
• Existe um label descritivo com o seguinte conteúdo: “Total: R$”, que está sendo lido separadamente do preço total da compra.
• A cada vez que o preço unitário de um produto é inserido, o total da compra é atualizado, e o texto que o VoiceOver vai ler também deve ser atualizado para o total da compra.

Acesse o arquivo ComprarViewController.swift, e siga os passos.
No fim do arquivo, antes da última chave (}), adicione o seguinte trecho de código:

E faça a chamada da função criada no final da função override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell, antes de seu retorno.

Essa função adiciona a descrição à célula da TableView, dizendo que é preciso pressionar duas vezes para adicionar o preço unitário, e também personaliza o conteúdo que está sendo lido, assim como feito nas telas anteriores.

Teste novamente e veja o resultado.

Agora, adicione o seguinte trecho de código, depois da marcação de acessibilidade que foi criada anteriormente:

O trecho de código adicionado cria duas funções. Uma que desabilita o label descritivo do total, e outra que atualiza o texto que será lido pelo VoiceOver ao passar pelo valor total da compra.

Ambas as funções devem ser chamadas no viewDidLoad(), sendo que a segunda (updateTotalAccessibility()), deve ser chamada em um local especifico — isso porque essa mesma tela também é usada para ver os detalhes de uma compra que já foi realizada.

Para isso, altere o seu viewDidLoad(), para que ele fique assim:

Por último, queremos que toda vez que o valor total da compra for atualizado, o texto que o VoiceOver vai ler também seja atualizado. Assim, sempre que um novo preço unitário for inserido, a função updateTotalAccessibility() também deve ser chamada.

Para fazer isso, procure em seu código a função pegarPreco(alertAction: UIAlertAction), e adicione a chamada ao seu final. Essa função é uma função aninhada responsável por pegar o valor do preço unitário que foi digitado pelo usuário.

Ela deve estar assim agora:

Teste novamente e veja o resultado.

Com isso, terminamos o nosso tutorial. Agora, usuários que utilizam o VoiceOver poderão facilmente usar o nosso aplicativo.

Para baixar a versão final do projeto, com acessibilidade, acesse este link.

Lição de casa

Agora que você já sabe trabalhar com os atributos do VoiceOver para melhorar a acessibilidade da aplicação, fica como lição de casa melhorar a acessibilidade das telas de Lista de Compras feitas, e Detalhes de Compra Feita.

Boa sorte e bons estudos.