Espaçamento dos Alvos de Toque

O Que Verificamos

Elementos interativos devem ter uma dimensão mínima de 24 × 24 pontos, ou ter acolchoamento suficiente ao redor, de modo que, se um círculo com diâmetro de 24 pontos for colocado no centro do elemento, o círculo não intersecta 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.

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 tocável disponível abaixo do mínimo
• Passa: O elemento é menor que 24pt × 24pt, mas a acolchoamento ao redor dele é grande o suficiente para que um círculo de 24pt de diâmetro centralizado no elemento não intersecta nenhum alvo adjacente
• Passa: Sliders 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 tocá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 width e height parâmetros para pelo menos 24pt

No código:

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

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 ajustes de tamanho facilmente. Estes podem ser envolvidos em um View com layout flex, 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 impõem uma área de toque de 48pt por 48pt por padrão, o que geralmente proporciona 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 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)