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 seu redor para que, se um círculo com um diâmetro de 24dp for colocado no centro do elemento, o círculo não interseccione com outro alvo *nem* com o círculo para 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 uma análise cuidadosa, a Deque mantém que é uma boa prática alinhar os limites visuais e interativos do alvo. Isso oferece ao usuário final uma área clara para interagir para a melhor chance de sucesso. Portanto, esta regra também testa se os limites visuais dos elementos interativos atendem ao mínimo de 24dp.

Exemplo de Falha ❌

Touch target spacing é insuficiente

Esses controles estão muito próximos um do outro - um círculo de 24dp de diâmetro centrado em um se sobrepõe ao outro

Usuários com limitações motoras podem acidentalmente ativar o elemento errado

Exemplo de Sucesso ✅

Touch target spacing é suficiente

Cada controle tem pelo menos 24dp × 24dp, ou tem espaço circundante suficiente para que um círculo de 24dp de diâmetro centrado nele não interseccione com nenhum alvo adjacente

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 > Inspector de Layout)
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 tocável disponível abaixo do mínimo
• **Passa:** O elemento é menor que 24dp × 24dp, mas o espaçamento ao seu redor é grande o suficiente para que um círculo de 24dp de diâmetro centrado no elemento não interseccione com nenhum alvo adjacente
• **Passa:** Os controles deslizantes 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 tocá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ínima, e padding para adicionar espaçamento entre os 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 ajustes de tamanho facilmente. Estes podem ser envolvidos em um View com um layout flexível, usando a propriedade gap 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 impõem uma área de toque de 48pt por 48pt por padrão, o que geralmente fornece espaçamento adequado. 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 de Alvo de Toque tem um Impacto sério para os usuários. Recomendamos corrigir este problema, exceto em casos raros onde as restrições de layout tornam isso genuinamente 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
  • Compreendendo 2.5.8 AA - Tamanho do Alvo (Mínimo)