Quando seu design é mostrado em um dispositivo móvel, é preciso garantir que os elementos interativos, como botões ou links, sejam grandes o suficiente e tenham espaço suficiente ao redor para facilitar o pressionamento sem sobreposição acidental a outros elementos. Isso beneficia todos os usuários, mas é especialmente útil para pessoas com deficiência motora.
Um tamanho mínimo recomendado para a área de toque é de cerca de 48 pixels independentes de dispositivo em um site com uma janela de visualização para dispositivos móveis definida corretamente. Por exemplo, embora um ícone possa ter apenas 24 px de largura e altura, você pode usar mais padding 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 o tamanho da área de toque do dedo de uma pessoa.
Na demonstração, adicionei padding a todos os links para garantir que eles atendam ao tamanho mínimo.
Áreas de toque também precisam ter um espaço de cerca de oito pixels entre si, na horizontal e na vertical, para que o dedo do usuário, pressionando um ponto de toque não toque acidentalmente em outro ponto de toque.
Testar suas áreas de toque
Se o destino for um texto e você tiver usado valores relativos, como em ou rem, para dimensionar o texto e qualquer preenchimento,
use o DevTools para verificar se o valor calculado dessa área é grande o suficiente.
No exemplo abaixo, estou usando em para o texto e o padding.
Inspecione o a do link
e, no Chrome DevTools, mude para o painel Computed, onde você pode inspecionar as várias partes da caixa
e ver em que tamanho de pixel elas são resolvidas.
No Firefox DevTools, há um painel Layout.
Nesse painel, você verá o tamanho real do elemento inspecionado.
Como usar consultas de mídia para detectar uso de tela touch
Em vez de simplesmente testar as dimensões da janela de visualização e adivinhar que as pequenas dimensões provavelmente são smartphones ou tablets, que, por sua vez, usam uma tela touchscreen, há maneiras mais robustas de adaptar seu design com base nos recursos 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 recursos pointer e any-pointer vão retornar fine ou coarse.
Um ponteiro fino será alguém usando um mouse ou trackpad,
mesmo que esse mouse esteja conectado por Bluetooth a um smartphone.
Um ponteiro coarse indica uma tela touchscreen,
que pode ser um dispositivo móvel, mas também pode ser uma tela de laptop ou tablet grande.
Se você estiver ajustando o CSS em uma consulta de mídia para aumentar a área de toque, testar a presença de um ponteiro grosseiro permite aumentar as áreas para todos os usuários dessa tela. Dessa forma, será possível ter uma área de toque maior, seja o smartphone 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 o ponteiro, no artigo Conceitos básicos do Web design responsivo.