Criar aplicativos mais acessíveis

Procure fazer com que seu app Android possa ser usado por todos, incluindo pessoas com necessidades de acessibilidade.

Pessoas com problemas de visão, daltonismo, dificuldades auditivas, comprometimento motor, deficiências cognitivas e muitas outros tipos de deficiência usam dispositivos Android. Ao desenvolver apps com a acessibilidade em mente, você melhora a experiência do usuário para pessoas com necessidades de acessibilidade.

Esta página traz orientações para a implementação dos principais elementos de acessibilidade, para que todos consigam usar seu app de forma mais fácil. Para orientações mais detalhadas sobre como tornar seu app mais acessível, consulte Princípios para melhorar a acessibilidade do app.

Aumentar a visibilidade do texto

Recomendamos que a taxa de contraste de cores nos conjuntos de texto do app seja superior ao limite específico. O contraste é a diferença no brilho percebido entre a cor do texto e a cor do plano de fundo atrás do texto. O limite exato depende do tamanho da fonte do texto e se o texto aparece em negrito:

  • Se o texto for menor que 18 sp ou se estiver em negrito e for menor que 14 sp, use cores de primeiro e segundo plano que resultem em uma taxa de contraste de cores de pelo menos 4, 5:1.
  • Em todos os demais textos, defina a taxa de contraste de cores como pelo menos 3:1.

A imagem a seguir mostra dois exemplos de contraste de cores entre o texto e o plano de fundo:

Dois exemplos da palavra "Texto" em planos de fundo coloridos. O exemplo à esquerda tem baixo contraste de cores entre o texto e o plano de fundo, enquanto o exemplo à direita tem contraste de cores suficiente.
Figura 1. Inferior ao contraste de cores recomendado (à esquerda) e suficiente (à direita).

Para verificar o contraste de cores entre o texto e o plano de fundo no seu app, use um verificador de contraste de cores on-line ou o app Scanner de acessibilidade.

Usar controles grandes e simples

A interface do app é mais fácil de usar se os controles forem mais fáceis de ver e tocar. Para interfaces de toque, recomendamos que cada elemento da interface interativo tenha uma área focalizável, ou tamanho de área de toque, de pelo menos 48 dp x 48 dp. Quanto maior, melhor.

No Jetpack Compose, muitos componentes do Material integrados, como Button, IconButton, e ListItem já aplicam esse tamanho mínimo. No entanto, ao criar elementos interativos personalizados, você precisa definir o tamanho.

No snippet a seguir, um pequeno elemento da interface é tornado acessível ao receber uma área de toque maior:

@Composable
private fun LargeBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
        )
    }
}
AccessibilitySnippets.kt

Para mais informações sobre tamanhos de área de toque, consulte Tamanhos mínimos de área de toque.

Descrever cada elemento da interface

Inclua uma descrição da finalidade de cada elemento da interface do app. Na maioria dos casos, essa descrição é incluída no atributo contentDescription do elemento, como mostrado no snippet de código a seguir:

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Share,
            contentDescription = stringResource(R.string.label_share)
        )
    }
}
AccessibilitySnippets.kt

Não é necessário fornecer um contentDescription para composables Text. Os serviços de acessibilidade do Android (como o TalkBack) anunciam automaticamente o texto.

Ao adicionar descrições aos elementos de interface do seu app, lembre-se das seguintes práticas recomendadas:

  • Use descrições para transmitir a finalidade e o resultado da interação, não os detalhes visuais. Use a propriedade semântica Role (como Role.Button ou Role.Switch) para expor o tipo de um elemento de interface. Dessa forma, os leitores de tela podem anunciar o elemento corretamente.

  • Evite redundâncias nas descrições. Por exemplo, se um determinado botão ativar a ação "enviar" no app quando selecionado, defina a descrição do botão como "Submit", e não "Submit button".

  • Cada descrição deve ser única. Assim, ao encontrar uma descrição de elemento repetida, o usuário do leitor de tela vai conseguir reconhecer que o foco está em um elemento que já esteve focalizado anteriormente. Em particular, cada item em uma lista, como LazyColumn, precisa ter uma descrição diferente, refletindo o conteúdo exclusivo de um determinado item, como o nome de uma cidade em uma lista de locais.

  • Use a API hideFromAccessibility para marcar elementos puramente decorativos para que os serviços de acessibilidade possam ignorá-los. Se um elemento da interface tiver um parâmetro contentDescription, mas for puramente decorativo (como um Icon que faz parte de outro elemento da interface), transmita null para evitar a rotulagem redundante. Para casos de uso mais elaborados, consulte Mesclagem e limpeza.

  • Teste seu código para garantir que a descrição do conteúdo seja entregue conforme o esperado. O Android Lint, os testes do Compose e as ferramentas de teste manual e automatizada podem sinalizar problemas comuns e expor problemas na implementação.

Outros recursos

Para saber mais sobre como tornar seu app mais acessível, consulte estes recursos extras:

Codelabs

Vídeos

Conteúdo das visualizações