5.1.2.12 - Requisitos para interação por toque
Descrição
Toda interação deve ser suportada por um único toque na tela. Caso existam aplicações que exijam múltiplos toques ou gestos específicos, deve existir uma forma de permitir que o usuário consiga executar a mesma ação com toque único
Exemplo
Uma aplicação que usa um “carrossel” de imagens e/ou blocos de texto que podem ser trocados com o deslizar do dedo pela tela pode ser acionada por botões nas laterais do carrossel para exibir a imagem seguinte ou a anterior.
Desempenho funcional
Componentes aplicáveis
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Projete interações que possam ser realizadas com um único toque na tela. Se sua aplicação exige múltiplos toques ou gestos complexos, ofereça alternativas que permitam aos usuários executarem as mesmas ações com um simples toque, tornando a experiência mais acessível e inclusiva.
Gestos complexos com alternativa de um toque
Deslizar, pinçar ou arrastar precisam de botões equivalentes.
Certo: Carrossel com botões
anotação de especificação
Carrossel que desliza com o dedo e tem botões "Anterior" e "Próximo".
Errado: Só gesto
anotação de especificação
Mapa que só aproxima com movimento de pinça.
Implemente no código a funcionalidade que permita todas as interações serem realizadas com um único toque, mesmo em casos onde múltiplos gestos são suportados. Forneça alternativas para garantir que usuários com diferentes capacidades motoras possam completar as ações de forma eficiente.
Equivalente de toque único
Toda ação por gesto deve existir também como botão.
Certo: Zoom por botões
<button aria-label="Aproximar mapa">+</button> <button aria-label="Afastar mapa">−</button>Leitor de tela anuncia: "Aproximar mapa, botão"
Errado: Só pinça
mapa.addEventListener("gesturechange", zoom); // sem botõesLeitor de tela anuncia: nenhum controle para quem não faz pinça
Aprenda a fazer com conteúdos selecionados para você
Assegure que a equipe projete e desenvolva a aplicação para suportar interações com um único toque, garantindo que os usuários tenham uma experiência de uso acessível, especialmente aqueles com dificuldades motoras ou que utilizam tecnologias assistivas.
Mapeie gestos da aplicação
Cada gesto precisa de alternativa de toque único.
Checklist do requisito 5.1.2.12: gestos
- botões laterais
Carrossel (deslizar)
gesto
- botões de zoom
Mapa (pinça)
gesto
- pendente
Lista (arrastar para excluir)
gesto
2 de 3 gestos com alternativa, 1 pendente de revisão.
Testar comandos de toque único
Realize testes para verificar se todas as ações podem ser feitas com um toque único e se respondem corretamente. Certifique-se de que não haja perda de funcionalidade ao usar a alternativa simplificada.
Avaliar com tecnologias assistivas
Verifique se os comandos de toque único são compatíveis com recursos de acessibilidade, como leitores de tela, e se a experiência do usuário não é prejudicada.
Observar a experiência do usuário
Peça feedback de usuários que utilizam tecnologias assistivas ou possuem limitações motoras para confirmar que a navegação por toque único atende às necessidades de todos.
Implementar testes automáticos e manuais
Utilize testes manuais para validar a experiência do usuário e automáticos para garantir que alterações futuras na aplicação não quebrem a funcionalidade de toque único.
Use só toques simples
Tente fazer tudo sem deslizar, pinçar ou arrastar.
Certo: Tudo com um toque
Toque em Próximo → imagem seguinte
Toque em Aproximar → mapa ampliado
Toque em Excluir → item removido
Nenhuma função exige gesto.
Errado: Gesto obrigatório
Imagem seguinte só deslizando
Zoom só com pinça
botões inexistentes
Quem tem limitação motora fica de fora.
Explique claramente aos usuários como interagir com a aplicação caso seja solicitado ao usuário uma interação que não é o toque simples (como movimento com pinça usando os dedos). Considere ter um meio alternativo que utiliza toque simples para esse tipo de interação.
Explique o gesto e a alternativa
Quando citar um gesto, diga também o botão equivalente.
Certo: Duas formas
texto de ajuda
"Deslize para o lado ou use os botões Anterior e Próximo."
Todos conseguem.
Errado: Só o gesto
texto de ajuda
"Deslize para ver mais."
Exclui quem não consegue deslizar.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.