Quando seu design é exibido em um dispositivo móvel, é necessário garantir que elementos interativos, como botões ou links, sejam grandes o suficiente e tenham espaço suficiente ao redor para que sejam fáceis de pressionar 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 alvo de toque é de cerca de 48 pixels independentes de dispositivo em um site com uma janela de visualização móvel configurada corretamente. Por exemplo, embora um ícone possa ter 24 px de largura e altura, você pode usar um padding adicional para aumentar a área para 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 ter certeza de que eles atendem ao tamanho mínimo.
Os alvos de toque também precisam ter um espaço de cerca de 8 pixels entre si, tanto horizontal quanto verticalmente, para que o dedo de um usuário pressionando um alvo de toque não toque acidentalmente em outro.
Como testar as áreas de toque
Se o alvo for texto e você tiver usado valores relativos, como em ou rem, para dimensionar o texto e qualquer padding,
use as Ferramentas do desenvolvedor para verificar se o valor computado 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 Computado, onde você pode inspecionar as várias partes da caixa
e conferir o tamanho de pixel delas.
No Firefox DevTools, há um painel de layout.
Nesse painel, você recebe o tamanho real do elemento inspecionado.
Como usar consultas de mídia para detectar o uso da tela touch
Em vez de simplesmente testar as dimensões da viewport e adivinhar que dimensões pequenas provavelmente são de smartphones ou tablets, que usam uma tela touchscreen, agora 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 das entradas detectadas é uma tela touchscreen (any-pointer).
Os recursos pointer e any-pointer vão retornar fine ou coarse.
Um ponteiro fino é alguém que usa um mouse ou trackpad,
mesmo que o 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 um tablet grande.
Se você estiver ajustando o CSS em uma consulta de mídia para aumentar o alvo de toque, o teste de um ponteiro grosseiro permite aumentar os alvos de toque para todos os usuários de tela sensível ao toque. Isso aumenta a área de toque, seja 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 o ponteiro, no artigo Fundamentos do Web design responsivo.