Espaçamento dos Alvos de Toque

O Que Verificamos

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

A área de toque de um elemento interativo pode ser expandida além de seus limites visuais — por exemplo, anexando um reconhecedor de gestos com uma região de ativação maior. Após cuidadosa consideração, a Deque mantém que é uma prática recomendada alinhar os limites visuais e interativos do alvo. Isso oferece ao usuário final uma área clara para se engajar, aumentando a chance de sucesso. Portanto, esta regra também testa se os limites visuais dos elementos interativos atendem ao mínimo de 24pt.

Exemplo de Falha ❌

Touch target spacing é insuficiente

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

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

Exemplo de Sucesso ✅

Touch target spacing é suficiente

Cada controle tem pelo menos 24pt × 24pt, ou possui espaço ao redor suficiente para que um círculo de 24pt de diâmetro centralizado nele não intersecte qualquer alvo adjacente

Em Resumo

• Esta regra tem um impacto sério para os usuários
• Elementos interativos devem ter pelo menos 24pt × 24pt, OU estar posicionados de forma que um círculo de 24pt de diâmetro centralizado no elemento não se sobreponha a nenhum alvo adjacente
• Tanto os limites visuais quanto os interativos (área de toque) devem atender ao mínimo
• Sliders devem manter pelo menos 24pt de espaço ao longo de seu comprimento
• Controles pequenos e compactados são especialmente difíceis para usuários com limitações motoras

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 maior dificuldade em interagir com alvos pequenos que estão muito próximos para serem ativados de forma independente.

Confirme o Problema de Espaçamento dos Alvos de Toque

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

1. Dentro do Xcode, selecione Debug View Hierarchy
2. Selecione o elemento a ser testado
3. Abra o Painel de Inspetores se não estiver visível
4. Selecione o Inspetor de Tamanho
5. Observe a largura, altura e posição do elemento selecionado, em relação aos elementos interativos vizinhos

Um dos seguintes resultados se aplica:

• Passa: O elemento tem pelo menos 24pt × 24pt, e não há elementos sobrepostos que reduzam a área clicável disponível abaixo do mínimo
• Passa: O elemento é menor que 24pt × 24pt, mas o espaçamento ao redor é grande o suficiente para que um círculo de 24pt de diâmetro centralizado no elemento não intersecte qualquer alvo adjacente
• Passa: Os controles deslizantes mantêm pelo menos 24pt de espaço ao longo do comprimento do elemento
• Falha: O elemento é menor que 24pt × 24pt, com espaçamento insuficiente entre ele e 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 dos Alvos de Toque, garanta que cada elemento interativo tenha pelo menos 24pt × 24pt ou tenha margem suficiente para que um círculo de 24pt de diâmetro centralizado nele não intersecta nenhum alvo interativo adjacente.

UIKit

Defina a altura e a largura mínimas para 24pt e adicione margem entre elementos interativos vizinhos.

No storyboard:

1. Navegue até o elemento interativo
2. Abra o Painel de Inspetores se não estiver visível
3. Selecione o Inspetor de Tamanho
4. Em View, atualize os parâmetros width e height para pelo menos 24pt

No código:

Atualize o width e height das frame do elemento para pelo menos 24pt.

let button = UIButton(frame: CGRect(x: 10, y: 20, width: 24, height: 24))

SwiftUI

Use um modificador .frame no elemento interativo para definir a altura e largura mínimas.

Button("Next")
    .frame(minWidth: 24, minHeight: 24, alignment: .leading)

React Native

Ajuste a altura e largura dos elementos interativos e use as 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 propriedade gap para obter o espaçamento correto 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 do Material do Flutter impõem uma área de toque de 48pt por 48pt por padrão, o que geralmente proporciona um espaçamento adequado. Violações são mais prováveis com alvos de toque personalizados criados 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 solucionar este problema, exceto em casos raros onde as restrições de layout tornam isso genuinamente inviável. Saiba mais sobre ignorando regras.

Recursos

Páginas do Curso 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)