Tamanho do Alvo de Toque
Garanta que os controles interativos sejam grandes o suficiente para tocar com precisão
O Que Verificamos
Todos os elementos interativos devem ter um tamanho mínimo de 44pt por 44pt, para as áreas visual e tocável.
A área de clique de um elemento interativo pode ser potencialmente 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 que os limites visuais e interativos do alvo estejam alinhados. Isso fornece ao usuário final uma área clara para interagir, garantindo maior sucesso. Portanto, esta regra também verifica se os limites visuais dos elementos interativos atendem ao mínimo de 44pt.
Visão Geral
- Esta regra tem um impacto moderado para os usuários
- Todos os elementos interativos devem ter uma borda visual e tocável de pelo menos 44pt × 44pt
- Tanto os limites visuais quanto os interativos (área de clique) devem atender ao mínimo
- Controles pequenos são um problema de usabilidade para todos, e especialmente problemáticos 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 uma dificuldade maior em interagir e mirar em alvos pequenos.
Confirmar Problema de Tamanho do Alvo de Toque
Execute o aplicativo no Xcode e navegue até a tela que contém o elemento interativo a ser testado.
- Dentro do Xcode, selecione Hierarquia de Visualização de Depuração
- Selecione o elemento a ser testado
- Abra o Painel de Inspeção, se não estiver visível
- Selecione o Inspetor de Tamanho
- Observe a largura e a altura do elemento selecionado
Se a largura ou a altura for menor que 44pt, o elemento não atende a esta regra.
Corrigir Problemas
Para resolver problemas de Tamanho do Alvo de Toque, garanta que a borda visual de cada elemento interativo seja de pelo menos 44pt × 44pt. Tanto os limites visuais quanto a área de clique devem corresponder — expandir apenas a área de toque através de um reconhecedor de gestos não é suficiente.
Um problema encontrado por esta regra ocorre quando o frame de um controle ativo não tem uma altura e largura de 44pt ou mais.
UIKit
Defina a borda do elemento interativo para pelo menos 44pt × 44pt usando uma das abordagens a seguir.
No storyboard:
- Navegue até o elemento interativo
- Abra o Painel de Inspeção, se não estiver visível
- Selecione o Inspetor de Tamanho
- Sob
View, atualize owidtheheightos parâmetros para pelo menos 44pt
No código:
Atualize o width e height do elemento interativo's frame para pelo menos 44pt.
Isso pode ser definido através do inicializador e de uma borda específica:
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 44, height: 44))ou, pode ser configurado através de restrições de visualização. Se houver uma restrição atual no botão, vá em frente e atualize a largura e a altura para ser no mínimo 44 pontos. Caso contrário, você pode adicionar restrições:
// Update Height:
myButton.heightAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true
// Update Width:
myButton.widthAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = trueSwiftUI
Aplique um modificador .frame para expandir os controles para pelo menos 44pt × 44pt.
Campos de Texto
Observe que atualmente no SwiftUI não há uma maneira consistente de aumentar o tamanho da área tocável de um Campo de Texto, então um SwiftUI TextField retornará .INCOMPLETE para esta regra. Um relatório de radar foi arquivado com a Apple.
Botões
Use um modificador de estrutura no conteúdo do label parâmetro em vez de em todo o botão.
- Use o
Buttoninicializador baseado em rótulo, que tem 'action' como primeiro parâmetro e 'label' como segundo parâmetro, como mostrado abaixo.
Button(action: {
print("Button tapped")
}, label: {
Text("Tap here")
}
)- Adicione um modificador de estrutura ao conteúdo do parâmetro do Botão
label, especificando uma altura e largura de pelo menos 44.
Button(action: {
print("Button tapped")
}, label: {
Text("Tap here")
.frame(width: 80, height: 45)
}
)React Native
Use propriedades de tamanho específicas da plataforma para garantir que os controles atinjam o tamanho mínimo do alvo de toque.
Alguns componentes do React Native não são personalizáveis para permitir ajustes de tamanho, como o Button componente.
Se possível, verifique se todos os elementos interativos têm pelo menos 44pt por 44pt. Se não for possível, explore componentes alternativos que permitam ajustar o tamanho.
Dica: Ao usar controles personalizados, certifique-se de que a função de acessibilidade esteja configurada corretamente!
Flutter
Os widgets Material do Flutter (ElevatedButton, IconButton, etc.) impõem uma área mínima de toque de 48pt por 48pt automaticamente, portanto, eles atendem a este requisito por padrão. Violações normalmente ocorrem em alvos de toque personalizados construídos com GestureDetector, que não expandem a área de toque além do tamanho visual.
// Failing — tap target is only 24×24
GestureDetector(
onTap: () {},
child: Container(
width: 24,
height: 24,
color: Colors.blue,
child: const Icon(Icons.close, size: 16, color: Colors.white),
),
)
// Passing — tap target meets 44×44 minimum
GestureDetector(
onTap: () {},
child: Container(
width: 44,
height: 44,
color: Colors.blue,
child: const Icon(Icons.close, size: 24, color: Colors.white),
),
)Posso ignorar esta regra?
O tamanho do alvo de toque tem um impacto moderado para os usuários. Nos casos em que uma restrição de design impede o cumprimento do mínimo de 44pt — como um ícone de barra de ferramentas em uma interface muito densa — documente a decisão e explore alternativas antes de ignorar a regra. Saiba mais sobre ignorar regras.
Recursos
Páginas do Curso Deque University
Nota: O acesso completo aos recursos da Deque University requer uma assinatura.
Outros Recursos
- Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) 2.1, Recomendação do W3C
- Documentos de Compreensão do WCAG 2.1