O que são alvos de toque?

Um alvo de toque é um elemento interativo em uma tela no qual o usuário clica com o mouse ou toca com o dedo. Por exemplo, botões, links, ícones ou campos de formulário têm alvos de toque porque você pode clicar e interagir com eles.

É importante que os elementos tenham alvo de toque suficiente para que todos os usuários cliquem com facilidade. Quando esses alvos são muito pequenos, eles se tornam uma barreira significativa à navegação, levando a toques “incompatíveis” e à frustração do usuário. Para todos os usuários, pequenos alvos de toque podem dificultar ou até mesmo impossibilitar o uso de um site. Projetando

Quem se beneficia com alvos de toque maiores?

Uma interface de usuário fácil de navegar beneficia a todos. Alvos de toque maiores podem beneficiar a todos e tornar os sites fáceis de usar para todos os usuários. Alvos de toque maiores podem garantir que os sites sejam acessíveis a todos os usuários. Alguns usuários específicos que um alvo de toque maior pode ajudar significativamente são:

• Usuários com deficiência motora:
  • Indivíduos com doenças como doença de Parkinson, paralisia cerebral ou artrite podem apresentar controle motor fino limitado, dificultando batidas precisas. Alvos de toque maiores reduzirão a taxa de erro e a necessidade de toques precisos. Em troca, isso tornará os sites mais fáceis de usar.
• Usuários com Deficiência Visual:
  • Aqueles com baixa visão podem ter dificuldade para ver os limites exatos de um botão. Alvos maiores tornam os elementos interativos mais fáceis de localizar e ativar.
• Usuários móveis:
  • As telas dos dispositivos móveis são pequenas e oferecem desafios únicos, ao contrário dos sites. Alvos maiores acomodam áreas onde a superfície do polegar é maior que o elemento digital.
• Deficiências Situacionais:
  • A acessibilidade nem sempre envolve condições permanentes. Pense em usar seu telefone enquanto usa luvas ou anda de ônibus acidentado. Alvos de toque maiores garantirão que todos os usuários possam clicar e interagir com os elementos com mais facilidade.

Padrão WCAG para alvos de toque

Para garantir que sua interface seja realmente acessível, você deve projetar e implementar alvos de toque de acordo com os critérios definidos pelas WCAG, Diretrizes de Acessibilidade de Conteúdo da Web. WCAG fornece a referência global para inclusão digital.

• Nível AA:
  • Os alvos de toque devem ter pelo menos 24 x 24 pixels CSS ou deve haver pelo menos 24 pixels de espaço entre os alvos.
• Nível AAA:
  • Pelo menos 44×44 pixels CSS. O padrão mais elevado proporciona interações ainda mais confortáveis ​​e indulgentes.

Exemplo de HTML/CSS

Abaixo está um exemplo de como garantir um ícone com alvo de toque suficiente. Embora o ícone seja pequeno, o botão em si atende aos requisitos de tamanho do alvo de toque. Criamos um novo estilo chamado estilo de ícone e atribuímos largura e altura mínimas. Usamos esse estilo em nosso ícone para garantir que alvos de toque suficientes fossem implementados para o ícone.

HTML:

CSS:

.icon-style {
  width: 48px;
  height: 48px;
  padding: 12px;
  background: none;
  border: none;
}

Conclusão

É importante que os elementos tenham alvo de toque suficiente para que todos os usuários cliquem com facilidade. Quando estes alvos são demasiado pequenos tornam-se uma barreira significativa à navegação. Para todos os usuários, pequenos alvos de toque podem dificultar ou até mesmo impossibilitar o uso de um site.

Acessibilidade é mais do que apenas evitar erros; trata-se de inclusão. Projetar para acessibilidade cria produtos melhores para todos.