Aplicando o Kit de Testes de Acessibilidade Automatizados para Aplicativos Android (AATK) para o projeto do app Counter

Os aplicativos mobile podem ajudar as pessoas a realizar tarefas diárias. No entanto, pessoas com deficiência podem enfrentar várias barreiras ao usar os recursos desses dispositivos se eles não fornecerem acessibilidade adequada.

Os desenvolvedores de software desempenham um papel crucial na promoção de melhorias de acessibilidade digital, e os testes automatizados podem ajudá-los.

O Kit de Testes de Acessibilidade Automatizados para Aplicativos Android (AATK) consiste em uma coleção de testes de acessibilidade automatizados projetados para serem executados com o Robolectric. Isso permite que sejam executados como testes locais, sem a necessidade de um dispositivo físico ou emulado.

Este kit foi desenvolvido com foco nos problemas de acessibilidade mais comuns e nos widgets mais usados, onde muitos problemas de acessibilidade tendem a ocorrer.

O que você aprenderá

Ao realizar este codelab, você será capaz de:

configurar um projeto existente para usar o AATK
escrever alguns testes de acessibilidade com poucas linhas
executar os testes, identificando e corrigindo problemas de acessibilidade

Pré-requisitos

Não é necessário nenhum conhecimento prévio sobre acessibilidade ou testes automatizados para realizar este codelab. No entanto, assumimos que você:

possui o Android Studio instalado em seu ambiente de desenvolvimento
seja capaz de baixar o projeto do GitHub e abrir no Android Studio

O app Counter

Neste codelab, você trabalhará com um aplicativo existente, o Counter, derivado do Google Codelabs. Este aplicativo permite aos usuários rastrear, incrementar e decrementar uma contagem numérica. Embora o aplicativo seja simples, você descobrirá que ele tem alguns problemas de acessibilidade que podem dificultar que usuários com deficiência interajam com ele.

Você será orientado a executar três testes do AATK para identificar esses problemas rapidamente e corrigi-los. Além disso, você poderá escrever e executar outros testes por conta própria.

Clonando e abrindo o projeto

Você pode obter o código-fonte da versão inicial do aplicativo neste link. Clone o repositório e abra Counter no Android Studio.

Configure o projeto para usar o AATK

Siga os seguintes passos para preparar o projeto para adicionar testes de acessibilidade automatizados:

Edite o arquivo build.gradle da raíz, adicionando a seguinte linha na lista de repositories.
Onde encontro isso? Ao abrir o projeto no Android Studio, na visualização do Android (painel esquerdo), há uma seção Gradle Scripts. Dentro, há um arquivo chamado build.gradle (Project: Counter).
```
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
```
Configure seu arquivo build.gradle no nível do aplicativo para habilitar a execulção de testes com o Robolectric e o AATK, atualizando os testOptions e adicionando as dependências necessárias.
Onde encontro isso? Ao abrir o projeto no Android Studio, na visualização Android (painel esquerdo), há uma seção Gradle Scripts. Dentro, há um arquivo chamado build.gradle (Módulo: Counter.app), ou algo parecido.

Primeiro, adicione a diretiva testOptions com as seguintes linhas, dentro da diretiva android, assim:
```
android{
    ...
    testOptions {
        // Usado para testar elementos dependentes do Android na pasta de teste
        unitTests.includeAndroidResources  = true
        unitTests.returnDefaultValues = true
    }
}
```
Em seguida, adicione estas duas dependências como testImplementation:
```
dependencies {
    ...
    testImplementation 'org.robolectric:robolectric:4.9'
    testImplementation 'com.github.AALT-Framework:android-accessibility-test-kit:v1.0.0-alpha'
    ...
}
```

Depois de fazer essas alterações, sincronize seu projeto para garantir que elas entrem em vigor.

Criar a classe de teste

No Android Studio, abra o painel Project e encontre esta pasta:

com.example.android.accessibility.counter (test).

Clique com o botão direito na pasta counter e selecione New > Java Class
Nomeie como MainActivityTest. Assim você saberá que esta classe de teste se refere à MainActivity.

Configurar a classe de teste

Com a classe MainActivityTest gerada e aberta, comece a configurá-la para executar os testes AATK.

Anote o escopo da classe para executar com RoboletricTestRunner.
Declare um atributo privado para manter o rootView e o AccessibilityTestRunner.
Declare uma propriedade pública para o ErrorCollector.

Adicione um método setUp da seguinte forma:

@Before
public void setUp() {
    MainActivity activity = Robolectric.buildActivity(MainActivity.class).create().get();

    // Obtenha a view raiz da hierarquia de exibição
    rootView = activity.getWindow().getDecorView().getRootView();
    runner = new AccessibilityTestRunner(collector);
}

Neste ponto, seu MainActivityTest deve estar assim:

@RunWith(RobolectricTestRunner.class)
public class MainActivityTest {
    private View rootView;
    private AccessibilityTestRunner runner;

    @Rule
    public ErrorCollector collector = new ErrorCollector();

    @Before
    public void setUp() {
        MainActivity activity = Robolectric.buildActivity(MainActivity.class).create().get();

        // Obtenha a view raiz da hierarquia de exibição
        rootView = activity.getWindow().getDecorView().getRootView();
        runner = new AccessibilityTestRunner(collector);
    }
}

Adicione um método de teste para cada teste de acessibilidade que deseja executar. Começaremos com a verificação da taxa de contraste de cores.

Crie um teste para verificar a taxa de contraste de cores

Uma taxa de contraste adequada ajuda os usuários a identificar melhor o conteúdo do aplicativo. Uma relação de contraste de pelo menos 4,5:1 deve ser usada.

Você pode utilizar o teste de taxa de contraste do AATK (TestAdequateContrastRatio) da seguinte forma:

Adicione um método de teste. Procure seguir boas convenções para nomenclatura de testes. Por exemplo: deve_UsarTaxaDeContrasteAdequada

Chame o método runAccessibilityTest do executor do kit, passando como parâmetro a view raíz e uma nova instância do teste desejado.

    @Test
    public void deve_UsarTaxaDeContrasteAdequada(){
        runner.runAccessibilityTest(rootView, new TestAdequateContrastRatio());
    }

Execute seu teste. Clique com o botão direito do mouse sobre o nome do método e selecione Run MainActivityTest.deve_UsarTaxaDeContrasteAdequada
No painel Run, clique duas vezes em deve_UsarTaxaDeContrasteAdequada para ver os resultados. Você notará a mensagem de erro, a identificação View, a taxa esperada e a taxa atual.
O que isso significa? No Counter, é fácil melhorar o contraste de cores. O TextView exibindo a contagem usa um plano de fundo cinza claro e uma cor de texto cinza. Você pode remover o plano de fundo, escolher um plano de fundo mais claro ou escolher uma cor de texto mais escura. Neste codelab, você escolherá uma cor de texto mais escura.
Abra o arquivo res/layout/activity_main.xml, encontre o TextView e altere android:textColor="@color/grey" para android:textColor="@color/darkGrey".
Os nomes dessas cores são uma predefinições desse projeto de exemplo. Para ver todas as cores pré-definidas, verifique o arquivo res/values/colors.xml.
Volte ao item 3 para refazer o teste e ver se ele passou.

Agora que já criou seu primeiro teste, você pode adicionar outros. A seguir, iremos sugerir mais dois exemplos. Consulte a documentação do AATK para consultar todos os testes disponíveis.

Crie um teste para verificar conteúdos não textuais sem descrição alternativa

Todo conteúdo não textual deve ter uma descrição de texto alternativa. Isso permite que um leitor de tela possa identificar corretamente o conteúdo.

Para esse teste, você irá utilizar o teste de texto alternativo do AATK (TestMustHaveAlternativeText), assim como fez para o teste de contraste.

Adicione um método de teste. Por exemplo: deve_ConterAlternativaTextual

Chame o método runAccessibilityTest do executor do kit, passando como parâmetro a view raíz e uma nova instância do teste desejado.

    @Test
    public void deve_ConterAlternativaTextual(){
        runner.runAccessibilityTest(rootView, new TestMustHaveAlternativeText());
    }

Execute seu teste. Verifique os resultados. Realize as correções. Reexecute o teste.
Dica: No Counter, os controles - e + não tem rótulos. 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.

Crie um teste para verificar o tamanho dos alvos de toque

Todos os elementos de interação devem ter no mínimo 48x48dp.

Para esse teste, você irá utilizar o teste de texto alternativo do AATK (TestTouchTargetSize), assim como fez para os testes anteriores.

Adicione um método de teste. Por exemplo: deve_AlvoDeToquePossuirTamanhoMinimo

Chame o método runAccessibilityTest do executor do kit, passando como parâmetro a view raíz e uma nova instância do teste desejado.

    @Test
    public void deve_AlvoDeToquePossuirTamanhoMinimo(){
        runner.runAccessibilityTest(rootView, new TestTouchTargetSize());
    }

Execute seu teste. Verifique os resultados. Realize as correções. Reexecute o teste.

Dica: 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).

Obrigado por sua participação!

Lembre-se de retornar ao questionário para concluir última etapa desta pesquisa.