Como iniciar a acessibilidade no Android

1. Introdução

logo_accessibility_color_2x_web_96dp.png

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.

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.

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 Screen Shot 2016-05-11 at 8.53.21 AM.png na barra de menus na parte de cima da tela. O app Counter será aberto. A página de destino tem esta aparência:

782e10ac891e76d4.png

  1. 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.

Scanner de acessibilidade na Play Store

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:

e79b056386dbc742.png

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.

fb39571ce90d713.png

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 fb39571ce90d713.png 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:

bdd8e1ce7558eb81.png

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:

fa2bf7446019bf2c.png

  1. 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:

b88532209a57e916.png

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.

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:

4c8476ac798a3089.png

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 +:

4bde82d712530aaf.png

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.

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.

fb39571ce90d713.png 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:

5b375bcb2af0d91d.png

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.

a2b9ac2003f260cf.png

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.

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

ee84419e9b6b5866.png

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.

Captura de tela mostrando os limites de layout na tela.

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

9dd9b146259ae346.png

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.

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

29debb90665c4fcc.png

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.

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: