Acessibilidade no Android: insights do desenvolvedor e guia de implementação

Em todo o mundo, existem cerca de 285 milhões de pessoas com deficiência visual. Assim, ao projetar um novo aplicativo ou considerar uma reformulação do design, certamente é uma boa ideia ajustar seu aplicativo às necessidades desse amplo grupo de usuários. A personalização de aplicativos para deficientes visuais aprimora a experiência de todos os seus usuários. Quais são os outros motivos para considerar a melhoria da acessibilidade do seu aplicativo e como fazer isso? Por favor, encontre todas as respostas abaixo!

Como as pessoas com deficiência visual usam aplicativos?

Um leitor de tela é uma ferramenta para executar aplicativos (ou simplesmente navegar na tela do smartphone) para pessoas cegas e com deficiência visual. O leitor de tela mais popular para Android é o TalkBack . Com esta ferramenta, o usuário realiza a entrada por meio de gestos, como deslizar ou arrastar.

Normalmente, a saída é um feedback falado. No TalkBack , temos dois modos de entrada de gestos:

• Exploração de toque , onde você arrasta o dedo pela tela.
• Navegação linear , onde você desliza o dedo para a esquerda e para a direita até encontrar o item de seu interesse.

Depois de chegar ao item em que está interessado, você pode tocar duas vezes nele para ativá-lo. Quer saber mais sobre como executar o TalkBack? Por favor, leia o seguinte artigo.

Princípios de aplicativos acessíveis

Para permitir que pessoas com deficiência visual usem nosso aplicativo, primeiro precisamos entender os princípios que devemos seguir ao projetá-lo. Portanto, antes de passarmos para a seção de implementação, vamos discutir as suposições mais importantes.

Layout e tipografia

A parte visual do aplicativo é fundamental. Botões corretamente implementados e manipulação de texto são um dos fatores mais importantes que tornam o aplicativo acessível.

Alvos de toque

Os alvos de toque são partes da tela que respondem à interação do usuário. A principal recomendação é criar alvos de toque com resolução de pelo menos 48dp x 48dp. Você lerá mais sobre isso no próximo capítulo.

Cor e contraste

A World Wide Web criou diretrizes de acessibilidade de contraste de cores para ajudar e auxiliar os usuários com deficiências de cores. De acordo com a documentação, os aspectos críticos em relação à acessibilidade do contraste de cores são:

• Proporção : o texto e os elementos interativos devem ter uma proporção de contraste de cor de pelo menos 4,5:1.
• Cor como indicador : a cor não deve ser o único indicador de elementos interativos. Seria melhor se você também sublinhasse os links ao passar o mouse ou marcasse os campos obrigatórios com um asterisco.
• Daltonismo: o daltonismo vermelho/verde é o mais comum. Portanto, você deve evitar o verde no vermelho ou o vermelho no verde. Pela mesma razão, evite usar vermelho e verde para indicadores “ruins” e “bons”.

Tipografia

Os usuários podem aumentar o tamanho da fonte para melhorar a legibilidade . Em dispositivos Android, é uma opção de sistema usada com frequência, portanto, verifique se há espaço suficiente para fontes grandes e estrangeiras.

Texto de acessibilidade

O texto de acessibilidade é tanto texto visível (por exemplo, rótulos de elementos de interface do usuário, texto em botões, links e formulários) quanto descrições invisíveis (descrições de conteúdo, que podem fornecer mais informações sobre o componente descrito).

Quais são os casos de uso mais comuns de texto de acessibilidade ?

Tipos e estados de controle

Leitores de tela, como o TalkBack, podem anunciar automaticamente o tipo ou estado de um controle falando o nome do controle ou emitindo um som.

Indicando elementos pela ação

Os verbos de ação indicam o que um item ou link faz quando você toca nele e descrevem o que uma visualização faz.

Elementos com mudanças de estado

No caso de ícones que alternam entre valores ou estados, o leitor de tela descreve um ícone de acordo com a forma como ele é apresentado ao usuário. Para obter mais exemplos, leia a diretriz de design de materiais.

Resumo

Este capítulo ensinou como o design deve ser adaptado para deficientes visuais e cegos. Até agora, cobrimos layout, tipografia e acessibilidade de texto . Agora vamos passar para os princípios de sua implementação.

Implementação de acessibilidade

Na seção a seguir, focarei nos principais aspectos da implementação da acessibilidade em seu aplicativo. Vamos começar!

Layout - Alvo de toque

Como mencionei na parte teórica, todo elemento clicável deve ter pelo menos 48dp/48dp.

Existem várias opções para fazer isso. Você poderia:

• Determine os valores para os atributos de largura e altura conforme recomendado (48dp/48dp)
• Adicione preenchimento ao redor dos ícones
• Especifique valores para os atributos: MinWidth e/ou minHeight
• Registre o TouchDelegate.

Veja um exemplo da documentação oficial do Google. Mostra o elemento que tem o tamanho recomendado do alvo de toque :

 <ImageButton 
   ...
   android:minWidth="40dp"
   android:minHeight="32dp"
   android:paddingLeft="4dp"

   android:paddingTop="8dp"
   android:paddingRight="4dp"
   android:paddingBottom="8dp" />

Texto de acessibilidade

Uma das maneiras de anexar o texto de acessibilidade aos elementos da interface do usuário é usar um atributo do Android chamado ContentDescription . Se você não fornecer um botão de imagem, por exemplo, a experiência de um usuário do TalkBack pode ser chocante.

Olhe para o exemplo:

 <!-- O valor da string a seguir é "Search". -->
<ImageView
   ...
   android:contentDescription="@string/search" />

Para elementos decorativos, como espaçadores e divisores, defina seu atributo “android:contentDescription” como "null" . Se seu aplicativo for compatível apenas com dispositivos que executam o Android 4.1 (API de nível 16) ou superior, você poderá definir os atributos “android:importantForAccessibility” como "no" .

Por favor, certifique-se de não incluir o tipo de controle ou estado de controle na descrição do seu conteúdo. O Android tem nativamente palavras como botões, selecionados, marcados, etc.

Técnicas de rotulagem

Abaixo, você encontra um conjunto de boas práticas para descrever os componentes da interface do usuário em seu aplicativo.

Componentes que descrevem uns aos outros

Se você tem um componente que permite fornecer alguns dados (por exemplo, EditText), é bom ter um objeto View que o descreva (por exemplo, TextView). É por isso que o atributo "android:labelFor" foi criado. Por favor, dê uma olhada no exemplo:

 <!-- O texto do rótulo seria "Nome:" -->
<TextView 
   ...
   andróide:
   android:labelFor="@+id/nameEntry"
   android:text="@string/name" />

<!-- O texto de acessibilidade será "Editar texto para o nome" -->
<EditText 
   ...
   andróide: />

<!-- O texto do rótulo seria "Sobrenome:" -->
<TextView 
   ...
   andróide:
   android:labelFor="@+id/surnameEntry"
   android:text="@string/sobrenome" />

<!-- O texto de acessibilidade será "Editar texto para o sobrenome" -->
<EditText 
   ...
   andróide: />

Coleção de elementos relacionados

Se seu aplicativo tiver elementos de interface do usuário naturalmente relacionados (como campos com informações sobre um livro), você poderá organizá-los em grupos usando um contêiner focalizável . Para fazer isso, defina o atributo “android:focusable” do objeto contêiner como true.

Ao fazer isso, o TalkBack pode apresentar as descrições de conteúdo dos elementos internos, uma após a outra, em um único anúncio. O agrupamento de conteúdo reduz a quantidade de deslizes que o usuário precisa fazer enquanto simplifica a saída de fala. Por favor, veja o exemplo:

 <LinearLayout 
   ...
   andróide:
   android:orientation="vertical"
   android:focusable="true">

   <TextView
	  ...
       andróide:
       android:text="@string/title"/>

   <TextView
	  ...
       andróide:
       android:text="@string/autor"/>

   <TextView
	  ...
       andróide:
       android:text="@string/pages"/>
</LinearLayout>

Obviamente, se o seu contêiner tiver visualizações aninhadas, você também poderá aplicar essa solução a elas. Isso tornará a navegação em seu aplicativo ainda mais acessível.

Ações de acessibilidade

Quando seu aplicativo oferece suporte a ações como clique, toque longo ou deslize , você precisa ajustar essas ações para pessoas com deficiência visual. É nisso que vamos nos concentrar nesta parte do artigo.

Veja como você pode implementá-lo:

 ViewCompat.addAccessibilityAction(
   // Visualize para adicionar ação de acessibilidade
   itemVisualizar,
   // O rótulo que o serviço de acessibilidade lê
   getString(R.string.save)
) { _, _ ->
   // Comando de acessibilidade
   salvarItem()
   verdadeiro
}

Isso resulta no TalkBack anunciando “Toque duas vezes para arquivar” .

Com a ação de acessibilidade implementada, os usuários agora podem acessar a ação através do menu de ações. Falarei um pouco mais tarde sobre como navegar para este menu. Lembre-se: é essencial permitir que os usuários executem todos os fluxos em seu aplicativo com eficiência.

Widgets

Esta seção é curta, mas muito importante. Ao criar seu componente de interface do usuário, use ou estenda os widgets fornecidos pelo sistema que estão o mais abaixo possível na hierarquia de classes do Android. Os widgets fornecidos pelo sistema na hierarquia já possuem a maioria dos recursos de acessibilidade de que seu aplicativo precisa. Os principais incluem:

• Ações de acessibilidade
• Características
• Informações do estado.

Graças a isso, você não precisará escrever suporte total de acessibilidade para um componente do zero e reduzirá o risco de erro.

Navegação

TalkBack continua a crescer. Usamos dois menus de contexto (global e local) há pouco tempo para navegar em nosso sistema de smartphones. Agora, esses dois menus se tornaram um.

O menu de contexto é usado para dois propósitos principais:

• Como o nome sugere, é usado para navegação. Você pode navegar por palavras, cabeçalhos, links, linhas, conteúdo exclusivo ou outros pontos, dependendo das preferências ou capacidades do aplicativo.
• A segunda finalidade permite que o usuário altere as configurações e os controles do TalkBack rapidamente.

Neste menu, você pode encontrar um conjunto de ações (mencionadas na seção “ Ação de acessibilidade ” acima). Como você pode acessar este menu? É muito simples. Você só precisa deslizar para cima e fazer um gesto certo.

Teste de acessibilidade

Nos projetos que desenvolvi até agora, beneficiei principalmente dos três seguintes auxílios: Scanner de acessibilidade, Espresso e Lint. Claro, você tem muito mais ferramentas à sua disposição. Eu recomendo que você verifique-os por si mesmo. Você pode encontrar toda a documentação necessária aqui.

Scanner de acessibilidade

Essa ferramenta verifica a interface do usuário e fornece recomendações para melhorar a acessibilidade do aplicativo.

O Accessibility Scanner permite que qualquer pessoa, não apenas desenvolvedores, identifique de forma rápida e fácil alguns aprimoramentos comuns de acessibilidade, por exemplo, pequenos alvos de toque, erros de contraste para texto e imagens, descrições de conteúdo ausentes para widgets não rotulados, etc. Se você deseja começar a usar o Accessibility Scanner ou simplesmente para obter instruções mais detalhadas, leia a documentação a seguir.

Android Lint

Tenho certeza que a maioria de vocês conhece esta ferramenta do seu trabalho diário. O que vale lembrar é que o Android Studio também fornece avisos sobre vários problemas de acessibilidade e links para locais no código-fonte que contêm esses problemas.

Expresso

Espresso é uma biblioteca de teste do Android que permite testar sua interface de usuário de maneira rápida e fácil. Ele permite a interação com os componentes testados da interface do usuário do aplicativo e garante que determinados comportamentos ocorram ou que as condições sejam atendidas. Obviamente, como parte do suporte de acessibilidade, você pode habilitar e configurar o teste de acessibilidade .

Resumo

Tornar seu aplicativo acessível não apenas o abre para novos usuários. Ajuda a melhorar nossa vida diária e torna o mundo mais inclusivo. Espero que este artigo tenha ajudado você a aprender sobre acessibilidade. Para ler mais, não se esqueça de verificar a documentação oficial.