Para ajudar pessoas com necessidades de acessibilidade a usar seu app, projete seu app para atender aos principais requisitos de acessibilidade.
Considerar os tamanhos mínimos de área de toque
Todos os elementos mostrados na tela que possam ser clicados, tocados ou com os quais é possível interagir de alguma outra forma precisam ser grandes o suficiente para uma interação confiável. Ao dimensionar esses elementos, certifique-se de defina o tamanho mínimo como 48 dp para seguir corretamente a especificação do Material Design diretrizes de acessibilidade.
componentes do Material Design, como Checkbox
, RadioButton
e Switch
.
Slider
e Surface
: definem esse tamanho mínimo internamente, mas apenas
quando o componente pode receber ações do usuário. Por exemplo, quando um Checkbox
tem
seu parâmetro onCheckedChange
definido com um valor não nulo, a caixa de seleção inclui
o padding tenha uma altura e largura de pelo menos 48 dp.
@Composable private fun CheckableCheckbox() { Checkbox(checked = true, onCheckedChange = {}) }
Quando o parâmetro onCheckedChange
é definido como nulo, o padding não é
incluído, porque não é possível interagir diretamente com o componente.
@Composable private fun NonClickableCheckbox() { Checkbox(checked = true, onCheckedChange = null) }
![](https://developer.android.com/static/develop/ui/compose/images/a11y-checkbox-no-padding.png?authuser=9&hl=pt)
Ao implementar controles de seleção, como Switch
, RadioButton
ou
Checkbox
, você normalmente aumenta o comportamento clicável para um contêiner pai, define
o callback de clique no elemento combinável para null
e adicione um toggleable
ou
selectable
ao elemento combinável pai.
@Composable private fun CheckableRow() { MaterialTheme { var checked by remember { mutableStateOf(false) } Row( Modifier .toggleable( value = checked, role = Role.Checkbox, onValueChange = { checked = !checked } ) .padding(16.dp) .fillMaxWidth() ) { Text("Option", Modifier.weight(1f)) Checkbox(checked = checked, onCheckedChange = null) } } }
Quando o tamanho de um elemento clicável é menor que o tamanho mínimo da área de toque, o Compose aumenta o tamanho dessa área. Ele faz isso expandindo tamanho da área de toque fora dos limites do elemento combinável
O exemplo a seguir contém um Box
clicável muito pequeno. Área de toque
é automaticamente expandida para além dos limites do Box
. Portanto, tocar
ao lado de Box
ainda aciona o evento de clique.
@Composable private fun SmallBox() { 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) .size(1.dp) ) } }
Para evitar possíveis sobreposições entre as áreas de toque de diferentes elementos combináveis, sempre
use um tamanho mínimo grande o suficiente para o elemento combinável. No exemplo, isso seria
significa usar o modificador sizeIn
para definir o tamanho mínimo para a caixa interna:
@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) ) } }
Adicionar etiquetas de clique
Você pode usar uma etiqueta de clique para adicionar um significado semântico ao comportamento de clique de uma função que pode ser composta. Os marcadores de clique descrevem o que acontece quando o usuário interage com o combinável. Os serviços de acessibilidade usam rótulos de clique para ajudar a descrever o app para usuários com necessidades específicas.
Defina a etiqueta de clique transmitindo um parâmetro no modificador clickable
:
@Composable private fun ArticleListItem(openArticle: () -> Unit) { Row( Modifier.clickable( // R.string.action_read_article = "read article" onClickLabel = stringResource(R.string.action_read_article), onClick = openArticle ) ) { // .. } }
Como alternativa, se você não tiver acesso ao modificador clicável, defina Clique na etiqueta no modificador semantics:
@Composable private fun LowLevelClickLabel(openArticle: () -> Boolean) { // R.string.action_read_article = "read article" val readArticleLabel = stringResource(R.string.action_read_article) Canvas( Modifier.semantics { onClick(label = readArticleLabel, action = openArticle) } ) { // .. } }
Descrever elementos visuais
Quando você define um elemento combinável Image
ou Icon
, não há
maneira automática para o framework do Android entender o que é o app
exibidos. Você precisa transmitir uma descrição textual do elemento visual.
Imagine uma tela em que o usuário pode compartilhar a página atual com amigos. Essa tela contém um ícone de compartilhamento clicável:
Com base apenas no ícone, o framework do Android não pode descrevê-lo para uma com deficiência. O framework do Android precisa de uma descrição textual adicional do no ícone.
O parâmetro contentDescription
descreve um elemento visual. Usar um tipo
já que ela é visível para o usuário.
@Composable private fun ShareButton(onClick: () -> Unit) { IconButton(onClick = onClick) { Icon( imageVector = Icons.Filled.Share, contentDescription = stringResource(R.string.label_share) ) } }
Alguns elementos visuais são meramente decorativos e você pode não querer comunicar
ao usuário. Ao definir o parâmetro contentDescription
como null
, você
indicar ao framework do Android que esse elemento não foi associado
ações ou estados.
@Composable private fun PostImage(post: Post, modifier: Modifier = Modifier) { val image = post.imageThumb ?: painterResource(R.drawable.placeholder_1_1) Image( painter = image, // Specify that this image has no semantic meaning contentDescription = null, modifier = modifier .size(40.dp, 40.dp) .clip(MaterialTheme.shapes.small) ) }
Cabe a você decidir se um determinado elemento visual precisa de uma
contentDescription
. Pergunte a si mesmo se o elemento transmite informações que
que o usuário vai precisar
para realizar a tarefa. Caso contrário, é melhor deixar
descrição.
Mesclar elementos
Os serviços de acessibilidade, como o TalkBack e o acesso com interruptor, permitem que os usuários coloquem o foco em diferentes elementos na tela. É importante que o foco nos elementos tenha a granularidade correta. Quando cada elemento combinável de baixo nível na tela é e focados de forma independente, os usuários têm que interagir muito para se mover pela tela. Se os elementos se mesclarem de forma muito agressiva, os usuários podem não entender quais elementos estão juntos
Quando você aplica um modificador clickable
a um elemento combinável, o Compose
mescla automaticamente todos os elementos que podem ser compostos. Isso também vale para
ListItem
elementos de um item de lista se mesclam, e a acessibilidade
serviços os veem como um elemento.
É possível definir um conjunto de funções que podem ser compostas que formem um grupo lógico, mas esse grupo não será clicável nem fará parte de um item de lista. Ainda é melhor ter acessibilidade serviços para vê-los como um elemento. Por exemplo, imagine um elemento combinável que mostra o avatar de um usuário, seu nome e algumas informações extras:
Você pode permitir que o Compose mescle esses elementos usando o mergeDescendants
.
no modificador semantics
. Dessa forma, os serviços de acessibilidade
seleciona apenas o elemento mesclado e todas as propriedades semânticas dos descendentes
são mesclados.
@Composable private fun PostMetadata(metadata: Metadata) { // Merge elements below for accessibility purposes Row(modifier = Modifier.semantics(mergeDescendants = true) {}) { Image( imageVector = Icons.Filled.AccountCircle, contentDescription = null // decorative ) Column { Text(metadata.author.name) Text("${metadata.date} • ${metadata.readTimeMinutes} min read") } } }
Os serviços de acessibilidade agora se concentram em todo o contêiner de uma só vez, mesclando seus conteúdos:
Adicionar ações personalizadas
Veja o seguinte item de lista:
Quando você usa um leitor de tela, como o TalkBack, para ouvir o que é exibido no ele primeiro seleciona o item inteiro e, em seguida, o ícone de favorito.
Em uma lista longa, isso pode ficar muito repetitivo. Uma abordagem melhor é
definir uma ação personalizada que permita que um usuário adicione o item aos favoritos. Observação importante
que você também tem que remover explicitamente o comportamento do ícone de favorito
para garantir que não seja selecionado pelo serviço de acessibilidade. Isso
usa o modificador clearAndSetSemantics
:
@Composable private fun PostCardSimple( /* ... */ isFavorite: Boolean, onToggleFavorite: () -> Boolean ) { val actionLabel = stringResource( if (isFavorite) R.string.unfavorite else R.string.favorite ) Row( modifier = Modifier .clickable(onClick = { /* ... */ }) .semantics { // Set any explicit semantic properties customActions = listOf( CustomAccessibilityAction(actionLabel, onToggleFavorite) ) } ) { /* ... */ BookmarkButton( isBookmarked = isFavorite, onClick = onToggleFavorite, // Clear any semantics properties set on this node modifier = Modifier.clearAndSetSemantics { } ) } }
Descrever o estado de um elemento
Um elemento combinável pode definir uma stateDescription
como semântica que o
O framework do Android usa para ler o estado em que o elemento combinável se encontra. Para
por exemplo, um elemento combinável alternável pode estar em um ambiente ou "desmarcada"
estado. Em alguns casos, convém substituir a descrição de estado padrão
rótulos que o Compose usa. Para isso, especifique explicitamente o estado
rótulos de descrição antes de definir um elemento combinável como alternável:
@Composable private fun TopicItem(itemTitle: String, selected: Boolean, onToggle: () -> Unit) { val stateSubscribed = stringResource(R.string.subscribed) val stateNotSubscribed = stringResource(R.string.not_subscribed) Row( modifier = Modifier .semantics { // Set any explicit semantic properties stateDescription = if (selected) stateSubscribed else stateNotSubscribed } .toggleable( value = selected, onValueChange = { onToggle() } ) ) { /* ... */ } }
Definir cabeçalhos
Às vezes, os apps mostram muito conteúdo em uma tela em um contêiner rolável. Por exemplo, uma tela pode mostrar todo o conteúdo de um artigo que o usuário está lendo:
Usuários com necessidades de acessibilidade têm dificuldade para navegar nessa tela. Para ajudar de navegação, indicam quais elementos são cabeçalhos. No exemplo anterior, cada o título da subseção pode ser definido como um cabeçalho para acessibilidade. Algumas serviços de acessibilidade, como o Talkback, permitem que os usuários naveguem diretamente de indo para o cabeçalho.
No Compose, para indicar que um elemento combinável é um cabeçalho, defina o
Propriedade semantics
:
@Composable private fun Subsection(text: String) { Text( text = text, style = MaterialTheme.typography.headlineSmall, modifier = Modifier.semantics { heading() } ) }
Processar elementos combináveis personalizados
Sempre que você substituir determinados componentes do Material Design no seu app por é necessário considerar a acessibilidade.
Digamos que você esteja substituindo o Material Checkbox
pela sua própria implementação.
Você pode se esquecer de adicionar o modificador triStateToggleable
, que processa
as propriedades de acessibilidade desse componente.
Como regra geral, observe a implementação do componente em a biblioteca do Material Design e imitar qualquer comportamento de acessibilidade que você encontrar. Além disso, use os modificadores do Compose Foundation, e não modificadores no nível da IU, porque eles incluem considerações de acessibilidade prontas.
Testar a implementação do componente personalizado com vários serviços de acessibilidade para verificar o comportamento dele.
Outros recursos
- Acessibilidade:conceitos e conceitos essenciais técnicas comuns a todo o desenvolvimento de apps Android
- Criar apps acessíveis:etapas principais para deixar seu app mais acessível
- Princípios para melhorar o app acessibilidade:os princípios-chave para ter em mente ao trabalhar para tornar seu app mais acessível
- Testes de acessibilidade: Princípios e ferramentas de teste para acessibilidade no Android