Como iniciar a acessibilidade no Android

1. Introdução

Os apps Android precisam ser usados por todos, incluindo pessoas com necessidades de acessibilidade. As condições mais comuns que afetam o uso de um dispositivo Android por uma pessoa incluem cegueira ou baixa visão, surdez ou dificuldades auditivas, restrição de habilidades motoras, deficiências cognitivas e daltonismo. E essa é apenas uma lista parcial.

Neste codelab, você vai aprender sobre problemas comuns de acessibilidade nos apps. Mais especificamente, você vai se concentrar em três problemas:

1. Falta de rótulos
2. Áreas de toque inadequadas
3. Problemas de contraste entre o primeiro e segundo planos

Você vai aprender como esses problemas afetam usuários, como conferir se eles estão presentes nos seus apps e como podem ser corrigidos.

O codelab está dividido em etapas curtas. Cada uma delas se concentra em um aspecto específico de acessibilidade.

Público-alvo e pré-requisitos

Este codelab é destinado a desenvolvedores Android que querem entender como tornar os apps acessíveis para usuários com necessidades de acessibilidade. Não são necessários conhecimentos prévios de APIs ou diretrizes de acessibilidade.

Pré-requisitos:

1. Conhecimento básico de programação de apps Android.
2. Acesso a um dispositivo Android com Lollipop (API de nível 21) ou mais recente.
3. Instalação do app Scanner de acessibilidade pela Google Play Store.

Como este é um codelab introdutório, você não aprenderá a usar serviços de acessibilidade. Em vez disso, você desenvolverá um conhecimento conceitual de problemas comuns de acessibilidade usando o Scanner de acessibilidade. Acesse os links no fim do codelab para ver outras maneiras de testar serviços de acessibilidade, como o acesso com interruptor e TalkBack.

2. Etapas da configuração

O que você vai criar

Neste codelab, você trabalhará em um app existente, o Counter. Ele permite que usuários acompanhem, aumentem e diminuam uma contagem numérica. Ainda que o app seja simples, você vai ver que ele tem vários problemas de acessibilidade que dificultam a interação de vários usuários.

Durante este codelab você vai melhorar o app para que ele fique mais acessível. Suas melhorias vão ajudar usuários cegos e com baixa visão, assim como usuários com problemas de mobilidade e destreza. As correções no Counter vão proporcionar conhecimentos básicos sobre acessibilidade que poderão ser usados para melhorar seus apps.

Fazer o download do código

O código-fonte para a versão inicial do app está no GitHub. Clone o repositório e abra o Counter no Android Studio.

Neste codelab, você vai trabalhar na ramificação mestre. Se tiver dificuldades ou quiser consultar o código, veja a versão concluída do app na ramificação acessível.

Cada etapa deste codelab é estruturada para que você trabalhe em um recurso implementado de maneira menos acessível. Em cada etapa, você modifica o código e torna a tela ou o recurso mais acessível.

Como abrir o aplicativo de demonstração

1. Abra o projeto Counter no Android Studio. É preciso ter um dispositivo está conectado ao computador.
2. Pressione o ícone verde Play na barra de menus na parte de cima da tela. O app Counter será aberto. A página de destino tem esta aparência:

3. Conheça um pouco do app de demonstração usando os botões aumentar (+) e diminuir (-) para mudar a contagem.

Para vários usuários, é fácil usar esse app. Mas alguns problemas de acessibilidade o tornam desafiante para outros. Você vai conhecer melhor esses problemas neste codelab.

Primeiro, você vai configurar o Scanner de acessibilidade, a ferramenta que será usada para identificar problemas de acessibilidade.

3. Scanner de acessibilidade

O Scanner de acessibilidade é uma ferramenta criada pelo Google para sugerir melhorias de acessibilidade em apps Android, como aumento de áreas de toque pequenas, aumento de contraste e descrições de conteúdo. Elas possibilitam que pessoas com necessidades de acessibilidade possam usar os apps com mais facilidade.

Siga estas etapas para fazer o download e configurar o Scanner de acessibilidade:

1. Faça o download do Scanner de acessibilidade na Google Play Store.
2. Após instalar o Scanner de acessibilidade, navegue até Configurações > Acessibilidade no dispositivo**.** Localize e ative o Scanner de acessibilidade (toque em "**Permitir**" ou "**OK**" e, em seguida, em "**Iniciar autorização**" para concluir o fluxo de configuração).
3. Retorne ao app Counter. Sua tela estará assim:

O Scanner de acessibilidade cria um botão de ação flutuante (FAB, na sigla em inglês) azul que fica sobreposto ao conteúdo na tela.

Você pode tocar no FAB para iniciar uma verificação de acessibilidade. Faremos isso daqui a pouco. Para mover o FAB para outra área da tela, mantenha-o pressionado e arraste.

4. Como analisar o app Counter

Nesta seção, você vai fazer uma auditoria de acessibilidade da tela usando o Scanner de acessibilidade:

1. Toque em para iniciar a verificação. Ao fazer isso, o Scanner de acessibilidade examina a IU da tela, realiza uma auditoria rápida de acessibilidade e prepara as sugestões de melhoria.
2. Veja o resultado de uma verificação. O código será semelhante a este:

O Scanner de acessibilidade destaca as visualizações que podem ter problemas de acessibilidade e oferece sugestões de como corrigir esses problemas.

Entenda as sugestões do Scanner de acessibilidade

O Scanner de acessibilidade tem cinco sugestões para melhorar a acessibilidade do Counter.

Contraste insuficiente

O Scanner de acessibilidade recomenda corrigir o contraste de cores na visualização que mostra a contagem atual.

1. Toque no campo de contagem, destacado em laranja no meio da tela, para ver a sugestão do Scanner:

2. Amplie a mensagem de erro e veja detalhes sobre como aplicar a sugestão do Scanner. O Scanner mostra as cores do primeiro e segundo planos, além das proporções de contraste sugeridas:

Por que o contraste de cores é importante para a acessibilidade? Usuários com baixa visão têm mais dificuldade para ler informações em uma tela quando não há contraste suficiente entre as cores do primeiro e segundo planos. Proporções baixas de contraste podem deixar a tela embaçada para alguns usuários, enquanto proporções mais altas deixam a tela mais nítida. Situações diferentes de luz podem aumentar as dificuldades criadas por proporções baixas de contraste.

Uma deficiência temporária ou situacional pode apresentar desafios para usuários que não consideram que têm uma necessidade de acessibilidade e que não usam tecnologias adaptativas.

Nesse exemplo, mesmo uma pessoa com boa visão pode perceber que, devido ao baixo contraste de cor, fica mais difícil de ler o campo de contagem à luz externa, o que torna o app menos acessível.

Esse tipo de recurso ajuda todos os usuários, e não apenas aqueles com necessidades de acessibilidade.

Falta de rótulos

O Scanner sinaliza os rótulos ausentes em - e + ImageButtons, o que impossibilita que usuários de leitores de tela entendam o propósito desses controles.

1. Toque nos erros associados aos botões - e + e leia as sugestões relacionadas aos rótulos ausentes:

Por que a falta de rótulos é um problema para a acessibilidade? Usuários cegos ou com baixa visão usam leitores de tela, como o TalkBack, para interagir com os dispositivos. O TalkBack anuncia o conteúdo da tela para os usuários, que podem interagir com ele. Quando um elemento não tem um texto associado (um ImageButton, por exemplo), o TalkBack não sabe como informar o propósito dele ao usuário. Em casos assim, o recurso pode anunciar títulos genéricos, como "Botão sem rótulo", o que não é útil para o usuário. Quando você fornece um rótulo descritivo adequado, o TalkBack pode anunciá-lo ao usuário.

Áreas de toque insuficientes

Além dos rótulos ausentes, o Scanner sugere aumentar a área de toque dos botões - e +:

Por que áreas de toque pequenas são um problema para a acessibilidade? Muitas pessoas têm dificuldade para focar em áreas de toque pequenas na tela. Isso pode acontecer por terem dedos grandes ou alguma condição médica que afeta as habilidades motoras delas. As áreas de toque pequenas também dificultam para os usuários de leitor de tela navegarem em apps movendo um dedo na tela, como durante o uso do recurso Explorar por toque no TalkBack.

Em algumas circunstâncias, áreas de toque inadequadas tornam apps menos acessíveis para todos os usuários, e não apenas aqueles com necessidades de acessibilidade.

No caso dos botões aumentar/diminuir, a área de toque é pequena até mesmo para um usuário com habilidades motoras excelentes. Se alguém tocar rapidamente em um dos botões por alguns segundos, pode perceber que alguns dos toques não foram registrados. Se o usuário fizer isso enquanto anda, com uma precisão de toque reduzida, a experiência pode se tornar ainda mais desafiadora.

Lembre-se: esse tipo de recurso ajuda todos os usuários, não apenas aqueles com necessidades de acessibilidade.

Resumo

Você explorou apenas uma fração pequena das funcionalidades do Scanner de acessibilidade. Mas as sugestões que o Scanner de acessibilidade ofereceu, relacionadas a contraste de cor, rótulos de itens e áreas de toque, são comuns em apps Android. A aplicação dessas sugestões pode ajudar muito na acessibilidade dos seus apps. E, muitas vezes, as correções são simples.

Vamos começar a programar.

5. Como garantir um contraste de cor adequado

No Counter, o contraste de cor é simples de melhorar. A TextView que mostra a contagem usa um plano de fundo cinza-claro com texto cinza:

<TextView
   ...
   android:background="@color/lightGrey"
   android:textColor="@color/grey"
   ...
 />

Você pode remover o plano de fundo, escolher outro mais claro ou deixar o texto mais escuro. Neste codelab, vamos escolher uma cor mais escura para o texto. Veja algumas cores que foram definidas em colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   ...
   <color name="lightGrey">#EEEEEE</color>
   <color name="grey">#999999</color>
   <color name="darkGrey">#666666</color>
</resources>

Abra res/layout/activity_main.xml e mude android:textColor="@color/grey" para android:textColor="@color/darkGrey":

<TextView
   ...
   android:background="@color/lightGrey"
   android:textColor="@color/darkGrey"
   ...
 />

Agora, execute o app e veja o contraste melhorado:

Antes	Depois

A proporção de contraste agora é de 4.94:1, consideravelmente melhor que 2.45:1, que é o que tínhamos antes:

	Contexto	Cor do texto	Taxa de contraste
Antes	#EEEEEE	Cinza-claro (#999999)	2.45:1
Depois	#EEEEEE	Cinza-escuro (#666666)	4.94:1

Afinal, o que é um contraste adequado? As diretrizes de acessibilidade de conteúdo da Web recomendam uma proporção de contraste mínima de 4.5:1 para todo o texto. A proporção de 3.0:1 é considerada aceitável para textos grandes ou em negrito. Tente usar essas taxas, ou maiores, nos seus aplicativos.

O Scanner de acessibilidade ajuda a identificar problemas de contraste de cor em um app em funcionamento. No entanto, é melhor considerar esses problemas durante a criação da paleta de cores do seu app. Você pode usar um dos vários verificadores de contraste disponíveis on-line para conferir as suas proporções de contraste.

Pressione o FAB para iniciar outra verificação no Scanner de acessibilidade. Você verá que o app não tem mais sugestões relacionadas ao contraste de cor:

O Scanner de acessibilidade ainda tem quatro sugestões para melhorar a acessibilidade do Counter. Então, vamos continuar trabalhando nele.

6. Como adicionar rótulos ausentes

Como - e + ImageButtons não têm rótulos, um leitor de tela como o TalkBack não consegue comunicar adequadamente a semântica das visualizações para o usuário, anunciando simplesmente "Botão sem rótulo" quando um botão é focado.

Para corrigir esse problema, atribua uma android:contentDescription para cada botão:

<ImageButton
   android:id="@+id/subtract_button"
   ...

   android:contentDescription="@string/decrement" />

<ImageButton
   android:id="@+id/add_button"
   ...
   android:contentDescription="@string/increment" />

Use strings localizadas nas descrições de conteúdo. Assim, elas poderão ser adequadamente traduzidas. Para este codelab, as strings já foram definidas em res/values/strings.xml.

Agora, um leitor de tela pode anunciar o valor da contentDescription fornecida (adequadamente traduzida para o idioma local) quando o usuário foca nos botões.

Observação: neste codelab, você não vai aprender a ativar e usar o TalkBack. Em vez disso, continuaremos usando o Scanner de acessibilidade para auditar a acessibilidade do app. Para aprender a usar o TalkBack para depurar a acessibilidade dos seus apps, siga o codelab Acessibilidade básica do Android.

Execute o Scanner de acessibilidade novamente. Não há mais sugestões relacionadas a rótulos ausentes.

7. Como aumentar áreas de toque

O Scanner de acessibilidade continua sugerindo que os botões - e + precisam ter uma área de toque maior. Nesta etapa, seguiremos essa sugestão.

Os dois botões no Counter são pequenos (24dp x 24dp). No geral, o tamanho adequado para a área de toque de itens focáveis precisa ser, pelo menos, de 48dp x 48dp. Se for possível criar uma área ainda maior, melhor. Ao aumentar a área de toque de 24dp x 24dp para 48dp x 48dp, ela é expandida por um fator de 4.

Você tem várias opções para aumentar a área de toque dos botões. Por exemplo, você pode escolher uma destas opções:

• Adicionar padding em volta dos ícones.
• Adicionar um minWidth e/ou minHeight (os ícones ficarão maiores).
• Registrar um TouchDelegate.

Antes de mudar alguma coisa, vamos entender melhor como a área de toque dos botões pode ser medida.

Ferramentas e limites do layout

Para esta etapa, confira se as Opções do desenvolvedor estão ativadas no dispositivo.

Acesse Configurações > Sistema > Opções do desenvolvedor. Na categoria Desenho, ative Mostrar limites de layout. Agora, sua tela mostrará os limites de clipes, margens etc. para cada visualização.

Agora, observe os limites de layout na tela do Counter, com foco nos dois botões**:**

A área de toque se estende apenas aos limites do layout dos ícones, e o Scanner de acessibilidade já informou que a área de toque (24dp x 24dp) é pequena demais. Vamos aumentar a área dos dois botões.

Em res/layout/activity_main.xml, podemos ver as seguintes definições para os dois botões:

<ImageButton
   android:id="@+id/add_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   ... />

<ImageButton
   android:id="@+id/subtract_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
  ... />

Adicione um pouco de padding a cada visualização:

<ImageButton
   ...
   android:padding="@dimen/icon_padding"
   ... />

<ImageButton
   ...
   android:padding="@dimen/icon_padding"
  ... />

O valor de @dimen/icon_padding está definido como 12dp (veja res/dimens.xml). Quando o padding é aplicado, a área de toque do controle se torna 48dp x 48dp (24dp + 12dp em cada direção).

Execute o app novamente para confirmar os novos limites de layout:

Antes	Depois

Volte para a categoria Configurações > Opções do desenvolvedor > Desenho, encontre a opção Mostrar limites de layout e a desative.

Execute o Scanner de acessibilidade novamente. Desta vez, a análise será concluída sem sugestões:

Parabéns, você concluiu todas as etapas. Você tornou seu app mais acessível.

8. Limitações do Scanner de acessibilidade

Ainda que ferramentas como o Scanner de acessibilidade possam ajudar a fazer melhorias significativas na acessibilidade do seu app, elas não substituem testes manuais.

A acessibilidade precisa ser observada holisticamente. O Scanner de acessibilidade, por exemplo, informa que um rótulo está ausente, mas não pode dizer se o rótulo faz sentido. No geral, o Scanner de acessibilidade não consegue determinar se a interface do usuário transmite informações semânticas de maneira simples e clara. Além disso, o Scanner de acessibilidade não consegue informar o suporte de um app a várias formas de interação (toque ou voz), ou mesmo se os usuários podem concluir com sucesso os casos de uso mais comuns. Mas o Scanner de acessibilidade fornece uma introdução à acessibilidade, sendo uma ferramenta de acessibilidade valiosa a ser considerada.

O Scanner de acessibilidade é uma introdução à acessibilidade, mas lembre-se sempre de testar com usuários reais.

Como desativar o Scanner de acessibilidade

Navegue para Configurações > Acessibilidade e defina o Scanner de acessibilidade como Desativado.

9. Links e recursos

Abordamos vários tópicos relacionados à acessibilidade no Android. Veja alguns links e recursos para explorar:

• Para continuar aprendendo sobre a acessibilidade no Android, acesse developer.android.com.
• Para saber mais sobre serviços de acessibilidade, acesse a Central de Ajuda de Acessibilidade no Android, onde você pode encontrar documentação sobre o TalkBack, BrailleBack, Acesso por voz, Acesso com interruptor e outros recursos de acessibilidade do Android.
• Leia sobre acessibilidade no Material Design.