Quando seu design é exibido em um dispositivo móvel, você deve garantir que os elementos interativos, como botões ou links, sejam grandes o suficiente, e espaço suficiente ao redor deles, para facilitar o pressionamento deles sem sobreposição acidental a outros elementos. Isso beneficia todos os usuários, mas é especialmente útil para pessoas com uma deficiência motora.
O tamanho mínimo recomendado da área de toque é de cerca de 48 pixels independentes do dispositivo. em um site com uma janela de visualização para dispositivos móveis configurada corretamente. Por exemplo, embora um ícone possa ter apenas 24 px de largura e altura, é possível usar padding adicional para aumentar o tamanho da área de toque em até 48 px. A área de 48 x 48 pixels corresponde a cerca de 9 mm, que é aproximadamente do tamanho da área de toque do dedo de uma pessoa.
Na demonstração, adicionei padding a todos os links para ter certeza de que eles atendem ao tamanho mínimo.
As áreas de toque também devem ter oito pixels de distância umas das outras, horizontal e verticalmente, para que o dedo de um usuário pressionando um ponto de toque não toque acidentalmente em outro ponto de toque.
Como testar as áreas de toque
Se o destino for texto e você tiver usado valores relativos como em ou rem para dimensionar o texto e qualquer padding,
use o DevTools para verificar se o valor calculado dessa área é grande o suficiente.
No exemplo abaixo, estou usando em para meu texto e padding.
Inspecione o a do link.
e, no Chrome DevTools, alterne para o painel Computed, onde é possível inspecionar as várias partes da caixa
e ver qual tamanho
de pixel eles chegam.
No Firefox DevTools, há um painel Layout.
Nesse painel, você vai ver o tamanho real do elemento inspecionado.
Como usar consultas de mídia para detectar o uso de telas touch
Em vez de simplesmente testar as dimensões da janela de visualização e adivinhar que pequenas dimensões provavelmente são celulares ou tablets, o que, por sua vez, usam uma tela sensível ao toque, há maneiras mais robustas de adaptar seu design com base nas capacidades reais do dispositivo.
Um dos recursos de mídia que agora podemos testar com consultas de mídia
é se a entrada principal do usuário é uma tela touchscreen (pointer) e
se qualquer uma das entradas detectadas no momento é uma tela touchscreen (any-pointer).
Os atributos pointer e any-pointer vão retornar fine ou coarse.
Um bom ponteiro será alguém usando um mouse ou trackpad,
mesmo que esse mouse esteja conectado via Bluetooth a um celular.
Um ponteiro coarse indica uma tela touchscreen,
que pode ser um dispositivo móvel, mas também pode ser uma tela de laptop ou um tablet grande.
Se você estiver ajustando o CSS em uma consulta de mídia para aumentar a área de toque, o teste de um ponteiro aproximado permite aumentar os pontos de toque para todos os usuários de tela touch. Isso aumenta a área de toque, não importa se o dispositivo é um smartphone ou um dispositivo maior.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Saiba mais sobre os recursos de mídia de interação, como ponteiro no artigo Princípios básicos do Web design responsivo.