Espaçamento de Alvos Táteis

Saiba como estamos usando inteligência artificial para esta regra!

O Que Verificamos

Elementos interativos devem ter uma dimensão mínima de 24dp por 24dp, ou ter espaço suficiente ao redor para que, se um círculo com diâmetro de 24dp for colocado no centro do elemento, o círculo não se interseccione com outro alvo *nem* com o círculo de outro alvo.

A área de toque de um elemento interativo pode potencialmente ser expandida além de seus limites visuais - por exemplo, usando um TouchDelegate para aumentar a região de toque ativa. Após cuidadosa consideração, a Deque mantém que a melhor prática é alinhar os limites visuais e interativos do alvo. Isso fornece ao usuário final uma área clara para interagir, aumentando suas chances de sucesso. Portanto, esta regra também verifica se os limites visuais dos elementos interativos atendem ao mínimo de 24dp.

Resumo

• Esta regra tem um impacto sério para os usuários
• Elementos interativos devem ter pelo menos 24dp × 24dp, OU serem posicionados de forma que um círculo com diâmetro de 24dp, centralizado no elemento, não se sobreponha a nenhum alvo adjacente
• Tanto os limites visuais quanto os interativos (área clicável) devem atender ao mínimo
• Deslizadores devem manter pelo menos 24dp de espaço ao longo de seu comprimento

Impacto para os Usuários

Em um dispositivo de toque, controles pequenos são um problema de usabilidade para todos. Além disso, pessoas com limitações motoras têm mais dificuldade em interagir com alvos pequenos que estão muito próximos para serem ativados de forma independente.

Confirmar Problema de Espaçamento de Alvos Táteis

Execute o aplicativo e navegue até a tela que contém o elemento a ser testado.

1. No Android Studio, abra o **Layout Inspector** (Ferramentas > Layout Inspector)
2. Selecione o elemento a ser testado na árvore de componentes ou na tela
3. No painel **Atributos** , observe a largura, altura e posição do elemento selecionado em relação aos elementos interativos vizinhos
4. Se necessário, identifique a densidade de pixels do dispositivo para confirmar os valores dp

Aplica-se um dos seguintes resultados:

• **Passa:** O elemento tem pelo menos 24dp × 24dp, e não há elementos sobrepostos que reduzam a área clicável disponível abaixo do mínimo
• **Passa:** O elemento é menor que 24dp × 24dp, mas o espaçamento ao redor dele é grande o suficiente para que um círculo com diâmetro de 24dp, centralizado no elemento, não se interseccione com nenhum alvo adjacente
• **Passa:** Os deslizadores mantêm pelo menos 24dp de espaço ao longo do comprimento do elemento
• **Falha:** O elemento é menor que 24dp × 24dp, com espaçamento insuficiente entre ele e os elementos interativos adjacentes
• **Falha:** Um elemento interativo vizinho reduz a área clicável do elemento testado abaixo do limite mínimo

Corrigir Problemas

Para resolver problemas de Espaçamento de Alvos Táteis, certifique-se de que cada elemento interativo tenha pelo menos 24dp × 24dp ou espaço suficiente ao redor para que um círculo com diâmetro de 24dp, centralizado nele, não se interseccione com nenhum alvo interativo adjacente.

XML

Defina minimumHeight e minimumWidth para 24dp, e adicione margem entre os elementos interativos vizinhos.

No código:

Button button = findViewById(R.id.an_accessible_button_yay);
button.setMinimumHeight(24);
button.setMinimumWidth(24);

Na definição de layout:

<Button
     android:id="@+id/an_accessible_button_yay"
     android:minimumHeight="24dp"
     android:minimumWidth="24dp"
     android:text="@string/batman_likes_accessible_buttons" />

Compose

Use Modifier.defaultMinSize para definir uma altura e largura mínimas, e padding para adicionar espaçamento entre elementos interativos vizinhos.

Button(
    modifier = Modifier
        .defaultMinSize(minWidth = 24.dp, minHeight = 24.dp)
        .padding(start = 24.dp, top = 24.dp),
    onClick = { }
) {
    Text(stringResource(id = R.string.button))
}

React Native

Ajuste a altura e a largura dos elementos interativos e use propriedades de layout para adicionar espaçamento entre eles.

const styles = StyleSheet.create({
    button: {
        alignItems: 'center',
        backgroundColor: 'lightblue',
        width: 24, 
        height: 24
    }
});

Certos elementos não permitem facilmente ajustes de tamanho. Estes podem ser envolvidos em um View com um layout flexível, usando a gap propriedade para obter o espaçamento adequado entre os elementos:

<View style={{ flex: 1, flexDirection: 'column', gap: 24 }}>
   <Slider
      step={1.0}
      maximumValue={100}
      style={{ width: 200, height: 60 }}
      value={sliderValue}
      accessible={true}
      onValueChange={setSliderValue}
      onSlidingStart={sliderValue => {
        setSliderValue(sliderValue);
      }}
      onSlidingComplete={sliderValue => {
        setSliderValue(sliderValue);
      }}
      accessibilityValue={{ now: "value: " + a11yValue }}
   />
</View>

Flutter

Os widgets Material do Flutter garantem uma área de toque de 48pt por 48pt por padrão, o que geralmente oferece um espaçamento adequado. As violações são mais prováveis com alvos de toque personalizados construídos usando GestureDetector, onde o espaçamento deve ser gerenciado manualmente.

// Passing — spacing added between targets
Row(
  spacing: 8.0,
  children: [
    GestureDetector(                                                          
      onTap: () {},
      child: Container(                                                       
        width: 20,                                                          
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_up, size: 14, color: Colors.white),
      ),                                                                      
    ),
    GestureDetector(                                                          
      onTap: () {},                                                         
      child: Container(
        width: 20,
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_down, size: 14, color: Colors.white),
      ),                                                                      
    ),
  ],                                                                          
)                                                                           

Posso Ignorar Esta Regra?

O Espaçamento do Alvo de Toque tem um Impacto sério para os usuários. Recomendamos corrigir esse problema, exceto em casos raros onde as restrições de layout o tornem realmente inviável. Saiba mais sobre ignorar regras.

Recursos

Páginas do Curso da Deque University

• WCAG 2.2 - 2.5.8 Alvo de Toque (AAA)

Nota: O acesso completo aos recursos da Deque University requer uma assinatura.

Outros Recursos

• Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.2, Recomendação W3C
  • Critério de Sucesso 2.5.8 - Tamanho do Alvo (Mínimo)
• Documentos de Compreensão WCAG 2.2
  • Compreensão 2.5.8 AA - Tamanho do Alvo (Mínimo)