WCAG 2.5.2: Cancelamento de Ponteiro

O que esta regra significa

WCAG 2.5.2 Cancelamento de Ponteiro se aplica a toda funcionalidade que é operada usando um único ponteiro — isso inclui cliques de mouse, toques em tela sensível ao toque, pressões de caneta (stylus) e qualquer outro dispositivo de entrada que ative um ponto na tela. Esse critério existe para garantir que ativações acidentais causadas por um toque ou pressão não intencional possam ser desfeitas antes de produzirem efeito.

Para que uma interação de ponteiro único esteja em conformidade com esse critério, ela deve satisfazer pelo menos uma das quatro condições a seguir definidas pela especificação WCAG:

• Sem evento de pressionar (down-event): A funcionalidade não é disparada no evento de pressionar (por exemplo, mousedown, touchstart ou pointerdown). A ativação acontece apenas no evento de soltar (up-event) (mouseup, touchend ou pointerup).
• Abortar ou desfazer: Um mecanismo está disponível para abortar a ação antes da conclusão ou para desfazer a ação depois que ela foi concluída.
• Reversão no evento de soltar: O evento de soltar reverte qualquer resultado que tenha sido disparado no evento de pressionar — por exemplo, um arraste que volta à posição original se o ponteiro for liberado fora do alvo.
• Exceção essencial: Disparar no evento de pressionar é essencial para a funcionalidade — por exemplo, um teclado de piano na tela em que o som deve começar no momento em que a tecla é pressionada. No entanto, essa exceção é muito restrita e se aplica apenas quando o momento exato do evento de pressionar é fundamentalmente necessário.

Em termos práticos de HTML e JavaScript, isso significa que desenvolvedores devem ter cuidado com o local onde anexam ouvintes de eventos. Usar mousedown, touchstart ou pointerdown para executar imediatamente e de forma irreversível uma ação — como enviar um formulário, excluir um registro ou navegar para fora de uma página — sem fornecer qualquer forma de cancelar ou desfazer essa ação é uma falha clara desse critério. O comportamento padrão do navegador para elementos nativos <button> e <a> já dispara a ativação no evento de soltar por padrão, o que significa que controles nativos corretamente implementados geralmente atendem a esse critério sem esforço adicional.

Componentes interativos personalizados construídos com JavaScript — como interfaces de arrastar e soltar, controles deslizantes baseados em gestos, controles de carrossel e mapas de imagem — são as fontes mais comuns de falha. Qualquer componente que vincule lógica irreversível a um ouvinte de evento de pressionar sem fornecer cancelamento ou reversão falha nesse critério.

Por que isso é importante

Cancelamento de Ponteiro é principalmente um critério projetado para proteger pessoas com deficiências motoras, mas seus benefícios se estendem a uma ampla gama de usuários, incluindo aqueles com tremores, espasticidade, controle motor fino limitado ou deficiências cognitivas que afetam atenção e precisão.

Considere uma pessoa com doença de Parkinson que está navegando em uma página de checkout de e-commerce em uma tela sensível ao toque. O tremor da mão pode fazer com que o dedo toque em um botão “Confirmar compra” que ela não pretendia acionar. Se a compra for disparada no momento em que o dedo toca a tela — no evento touchstart — a transação é processada imediatamente, sem oportunidade de cancelamento. Se a ativação estivesse vinculada ao evento touchend, a pessoa poderia deslizar o dedo para fora do botão antes de levantá-lo, cancelando a ação. Essa simples diferença entre vincular ao evento de soltar ou ao de pressionar pode significar a diferença entre uma experiência frustrante e uma experiência acessível para milhões de pessoas.

De acordo com a Organização Mundial da Saúde, aproximadamente 1,3 bilhão de pessoas no mundo vivem com algum tipo de deficiência, e deficiências motoras representam uma parte significativa dessa população. Além da deficiência, ativações acidentais são uma frustração comum para qualquer pessoa em um dispositivo com tela pequena, tornando esse critério relevante também para a usabilidade geral.

Deficiência cognitiva é outra consideração importante. Pessoas que processam informações mais lentamente podem pressionar um botão e depois perceber que selecionaram a opção errada. Se a ação for irreversível — disparada no evento de pressionar — elas não têm recurso. Um mecanismo de desfazer ou ativação no evento de soltar dá a essas pessoas o tempo de que precisam para confirmar sua intenção.

Do ponto de vista de negócios, reduzir envios acidentais de formulários, compras e exclusões melhora a satisfação das pessoas usuárias, reduz solicitações de suporte e diminui taxas de abandono de transações. Um modelo de interação de ponteiro acessível também reduz o risco de responsabilidade legal sob regulamentos de acessibilidade na Turquia e internacionalmente.

Regras relacionadas do Axe-core

WCAG 2.5.2 requer testes manuais e não pode ser avaliada de forma confiável apenas por verificadores automáticos de acessibilidade. Nenhuma regra automatizada específica do axe-core mapeia diretamente para esse critério. Eis por que a detecção automatizada é insuficiente:

• Por que a automação falha para cancelamento de ponteiro: Ferramentas automatizadas como axe-core podem analisar HTML e detectar certos problemas de ARIA ou estruturais, mas não podem determinar de forma confiável a intenção semântica e a reversibilidade de manipuladores de eventos JavaScript. Uma ferramenta pode detectar que existe um ouvinte de evento mousedown em um elemento, mas não pode determinar se esse ouvinte dispara uma ação irreversível, se um mecanismo de desfazer está presente em outro lugar da aplicação ou se o momento do evento de pressionar é realmente essencial para a funcionalidade. A combinação de comportamento em tempo de execução, estado da aplicação e contexto da pessoa usuária necessária para avaliar esse critério está além do escopo de uma análise automatizada estática ou baseada no DOM.
• O que testadores manuais devem observar: Testadores precisam interagir com cada controle interativo usando um dispositivo apontador e observar exatamente quando a ação é disparada — ao pressionar ou ao soltar. Eles também devem verificar se deslizar o ponteiro para fora do elemento antes de soltar cancela a ação e se algum mecanismo de desfazer ou abortar está acessível após a ativação.
• Sinais parciais da automação: Algumas ferramentas de lint ou regras personalizadas do axe podem sinalizar elementos com atributos onmousedown, ontouchstart ou onpointerdown como exigindo revisão, mas esses alertas exigem julgamento humano para determinar conformidade ou não conformidade. Trate qualquer alerta automatizado desse tipo como um gatilho para investigação manual, não como um relatório definitivo de falha.

Como testar

1. Varredura automatizada (levantamento inicial): Execute axe DevTools ou Lighthouse na página para identificar elementos interativos e quaisquer vinculações de eventos personalizados sinalizadas para revisão manual. No Chrome DevTools, use o painel Elements para inspecionar ouvintes de eventos anexados a botões, links e controles personalizados — procure manipuladores mousedown, touchstart ou pointerdown em elementos que disparam ações irreversíveis.
2. Teste com ponteiro de mouse — cancelamento com clicar e arrastar: Para cada botão interativo, link e controle personalizado na página, pressione e mantenha pressionado o botão do mouse sobre o elemento e, em seguida, arraste o ponteiro para fora do limite do elemento antes de soltar. Se a ação for disparada enquanto o botão estiver pressionado (antes de soltar), isso é uma falha. Se arrastar para fora impedir que a ação seja disparada ao soltar, isso é uma aprovação para as condições de reversão no evento de soltar ou de ausência de evento de pressionar.
3. Teste em dispositivo de toque: Em um dispositivo com tela sensível ao toque ou emulador de navegador (modo de dispositivo do Chrome DevTools), toque e mantenha pressionado cada elemento interativo e, em seguida, deslize o dedo para fora antes de levantar. Se a ação for disparada imediatamente ao toque (antes de levantar o dedo), isso é uma falha, a menos que o momento do evento de pressionar seja essencial. Verifique se levantar o dedo fora do elemento não dispara a ação.
4. Verificação de controle por teclado: Embora esse critério seja especificamente sobre interações de ponteiro, verifique se todos os elementos interativos também são operáveis por teclado. Pressione Tab para focar cada elemento e Enter ou Space para ativá-lo, confirmando que o elemento é alcançável e funcional sem um ponteiro — isso apoia o quadro mais amplo de acessibilidade.
5. Verificação de mecanismo de desfazer/abortar: Para ações vinculadas a eventos de pressionar (em que a exceção essencial pode se aplicar), confirme que existe um mecanismo claro de desfazer ou abortar e que ele é acessível a todas as pessoas usuárias, incluindo aquelas que usam tecnologias assistivas. Por exemplo, após uma ação de arrastar e soltar, existe um botão “desfazer” alcançável por teclado e leitor de tela?
6. Teste combinado de leitor de tela e ponteiro (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): Ative elementos interativos usando tanto o ponteiro quanto o cursor virtual do leitor de tela. Confirme que ações disparadas pelo ponteiro são consistentes com ações disparadas pelo leitor de tela e que nenhuma ação irreversível imediata é disparada de forma inesperada.
7. Revisão de código: Pesquise na base de código por vinculações de ouvintes de eventos: addEventListener('mousedown', addEventListener('touchstart', addEventListener('pointerdown' e atributos inline onmousedown, ontouchstart. Para cada ocorrência, avalie se o manipulador dispara uma ação irreversível e se alguma das quatro condições da WCAG é satisfeita.

Como corrigir

Ação irreversível em mousedown — Incorreto

<!-- FAIL: Delete fires immediately on mousedown, no cancellation possible -->
<button onmousedown='deleteRecord(recordId)'>Delete Record</button>

<script>
function deleteRecord(id) {
  // Record is deleted immediately on button press, before the user releases
  fetch('/api/records/' + id, { method: 'DELETE' });
}
</script>

Ação irreversível em mousedown — Correto

<!-- PASS: Delete fires on click (up-event), native button behavior -->
<button onclick='deleteRecord(recordId)'>Delete Record</button>

<!-- Even better: provide confirmation dialog as an additional abort mechanism -->
<button onclick='confirmDelete(recordId)'>Delete Record</button>

<script>
function confirmDelete(id) {
  // User can cancel via the dialog — satisfies the Abort or Undo condition
  if (confirm('Are you sure you want to delete this record? This cannot be undone.')) {
    fetch('/api/records/' + id, { method: 'DELETE' });
  }
}
</script>

Gesto de toque dispara em touchstart — Incorreto

<!-- FAIL: Action fires immediately on touchstart, no opportunity to abort -->
<div id='buy-btn'>Buy Now</div>

<script>
document.getElementById('buy-btn').addEventListener('touchstart', function() {
  // Purchase initiated immediately when finger touches the element
  initiatePurchase();
});
</script>

Gesto de toque dispara em touchstart — Correto

<!-- PASS: Use a native button and bind to click, which fires on touchend -->
<button id='buy-btn'>Buy Now</button>

<script>
// The 'click' event on a native button fires on the up-event (touchend/mouseup)
// giving users the ability to cancel by sliding their finger away before releasing
document.getElementById('buy-btn').addEventListener('click', function() {
  initiatePurchase();
});
</script>

Arrastar e soltar personalizado sem reversão no evento de soltar — Incorreto

<!-- FAIL: Item is moved to new position on pointerdown, not on pointerup -->
<div class='draggable' onpointerdown='moveItemToTarget(this)'>
  Drag me
</div>

Arrastar e soltar personalizado com reversão no evento de soltar — Correto

<!-- PASS: Item moves to target only when pointer is released over the drop zone -->
<!-- If user drags away before releasing, item returns to original position -->
<div
  class='draggable'
  draggable='true'
  ondragstart='handleDragStart(event)'
>
  Drag me
</div>
<div
  class='drop-zone'
  ondragover='event.preventDefault()'
  ondrop='handleDrop(event)'
  aria-label='Drop zone'
>
  Drop here
</div>

<script>
function handleDragStart(event) {
  // Only records intent; does not move the item yet
  event.dataTransfer.setData('text/plain', event.target.id);
}
function handleDrop(event) {
  event.preventDefault();
  // Item is moved only on drop (up-event equivalent)
  // If user releases outside drop zone, item returns to origin — up-reversal satisfied
  const id = event.dataTransfer.getData('text/plain');
  event.currentTarget.appendChild(document.getElementById(id));
}
</script>

Erros comuns

• Vincular ações irreversíveis como envio de formulário, exclusão de registro ou navegação a eventos mousedown ou pointerdown em vez de click, que dispara no evento de soltar e permite cancelamento ao arrastar para fora por padrão.
• Usar touchstart para disparar compras, confirmações ou alterações de dados em interfaces de e-commerce ou bancárias, em que um contato momentâneo do dedo não deve ser tratado como intenção confirmada da pessoa usuária.
• Presumir que, porque um botão usa um elemento nativo <button>, todo o JavaScript anexado a ele é automaticamente compatível — um ouvinte mousedown adicionado via addEventListener ainda viola esse critério se disparar uma ação irreversível.
• Invocar diálogos modais, sobreposições ou mudanças de navegação em página inteira no evento de pressionar de um ponteiro, o que desorienta pessoas que não pretendiam ativar o controle e não têm como reverter o curso.
• Implementar controles deslizantes ou de faixa personalizados que confirmam um valor no servidor em pointerdown em vez de esperar por pointerup ou por uma ação de confirmação separada.
• Confiar no diálogo padrão confirm() do navegador como o único mecanismo de desfazer para uma ação de evento de pressionar sem testar se tecnologias assistivas conseguem acessar e operar o diálogo de forma confiável antes que a ação destrutiva seja concluída.
• Não fornecer qualquer feedback visual ou programático de que uma ação de evento de pressionar está pendente, tornando impossível para as pessoas entenderem que poderiam abortar movendo o ponteiro para fora antes de soltar.
• Tratar a exceção essencial de forma muito ampla — por exemplo, alegar que um botão de “compra rápida” precisa disparar em mousedown por questão de velocidade, quando não existe nenhuma restrição real de tempo e a alegação é uma conveniência de produto, não uma necessidade funcional.
• Não testar em dispositivos de entrada por mouse e por toque — uma interface pode usar corretamente eventos de soltar para interações com mouse, mas ainda assim vincular ações irreversíveis a touchstart em um caminho de código específico para mobile.
• Implementar funcionalidade de desfazer que só é acessível via atalho de teclado (por exemplo, Ctrl+Z) sem fornecer um controle equivalente na tela, deixando pessoas que usam apenas ponteiro sem mecanismo de cancelamento após uma ativação em evento de pressionar.

Relação com os regulamentos de acessibilidade da Turquia

A Circular Presidencial 2025/10 da Turquia, publicada no Diário Oficial nº 32933 em 21 de junho de 2025, estabelece requisitos obrigatórios de acessibilidade na web alinhados com os padrões WCAG 2.2. Sob essa circular, a conformidade com critérios de Nível A — incluindo WCAG 2.5.2 Cancelamento de Ponteiro — é legalmente exigida para uma ampla gama de entidades públicas e privadas que operam serviços digitais na Turquia.

A circular abrange um amplo espectro de organizações. Instituições públicas e órgãos governamentais devem alcançar conformidade total de Nível A dentro de um ano a partir da data de publicação da circular. Entidades do setor privado abrangidas pela regulamentação — incluindo plataformas de e-commerce, bancos e instituições financeiras, hospitais e prestadores de serviços de saúde, empresas de telecomunicações com 200.000 ou mais assinantes, agências de viagem, empresas de transporte privado e escolas privadas autorizadas pelo Ministério da Educação Nacional (MoNE) — recebem um prazo de dois anos para conformidade.

Para essas entidades abrangidas, deixar de implementar corretamente o Cancelamento de Ponteiro acarreta risco regulatório real. Considere uma plataforma turca de e-commerce cuja página de checkout móvel dispara a confirmação de pagamento em touchstart — tal implementação constituiria uma violação direta da WCAG 2.5.2 e, por extensão, da Circular Presidencial. Pessoas que iniciam acidentalmente uma compra nessa plataforma devido a tremor, deficiência motora ou simples toque equivocado teriam base legal para alegar que a plataforma falhou em suas obrigações de acessibilidade.

Além da conformidade regulatória, organizações turcas devem reconhecer que Cancelamento de Ponteiro não é apenas um item técnico de checklist, mas um princípio de design fundamental que protege a capacidade das pessoas de interagir de forma segura e intencional com serviços digitais. Implementar ativação no evento de soltar e mecanismos de desfazer em componentes interativos — de carrinhos de compras e sistemas de agendamento de consultas a ferramentas de gestão de documentos — demonstra um compromisso com design inclusivo que beneficia todas as pessoas, não apenas aquelas com deficiência.

Organizações sujeitas à circular devem conduzir auditorias sistemáticas de seus padrões de tratamento de eventos JavaScript, particularmente em páginas otimizadas para mobile e componentes interativos personalizados, para identificar e corrigir quaisquer ativações em eventos de pressionar que não tenham mecanismos de cancelamento ou reversão. Documentar esses esforços de remediação também apoiará as obrigações de relatório de conformidade que podem ser exigidas sob as disposições de fiscalização da circular.