Verificação HTML: Atributo "ontouchstart" não é permitido no elemento "div" neste ponto.

Sobre este problema HTML

O atributo ontouchstart é um manipulador de eventos inline que alguns programadores usam para detetar quando um utilizador toca num elemento num dispositivo com ecrã tátil. No entanto, ao contrário dos atributos de manipulador de eventos padrão como onclick, onmousedown, ou onkeydown, o atributo ontouchstart não está definido na especificação HTML. O validador W3C sinaliza-o porque apenas os atributos explicitamente listados na especificação são permitidos num determinado elemento.

O próprio evento touchstart é um evento legítimo definido na especificação Touch Events — é a forma de atributo HTML inline (ontouchstart) que não é reconhecida como um atributo válido pelo padrão HTML. Esta distinção é importante: pode absolutamente ouvir eventos touchstart, apenas não através de um atributo inline num elemento HTML.

Porque isto é um problema

Conformidade com padrões: Usar atributos não padronizados produz HTML inválido, o que pode causar problemas com testes automatizados, auditorias de acessibilidade e pipelines de gestão de conteúdo que aplicam validação.
Acessibilidade: Confiar apenas em eventos de toque exclui utilizadores que navegam com teclado, rato ou tecnologia assistiva. Manipuladores apenas para toque podem tornar elementos interativos completamente inacessíveis para utilizadores que não usam toque.
Manutenibilidade: Manipuladores de eventos inline misturam comportamento com marcação, tornando o código mais difícil de manter e depurar em comparação com ouvintes de eventos JavaScript centralizados.
Inconsistências entre navegadores: Embora a maioria dos navegadores móveis suporte o evento touchstart, a forma de atributo inline não é garantida para funcionar consistentemente em todos os ambientes.

Como corrigir

Remova o atributo inline ontouchstart do seu elemento HTML.
Use addEventListener em JavaScript para anexar o ouvinte de eventos touchstart programaticamente.
Considere também manipular eventos click ou pointerdown para que a interação funcione para todos os tipos de entrada — rato, teclado, toque e stylus. A API Pointer Events (pointerdown, pointerup, etc.) é uma abordagem moderna e unificada que cobre entrada de rato, toque e caneta num único modelo de eventos.

Exemplos

❌ Inválido: Atributo inline `ontouchstart`

<div ontouchstart="handleTouch()">Toque em mim</div>

Isto gera o erro de validação porque ontouchstart não é um atributo reconhecido na especificação HTML.

✅ Válido: Usar `addEventListener` para `touchstart`

<div id="touch-target">Toque em mim</div>
<script>
  document.getElementById("touch-target").addEventListener("touchstart", function(event) {
    // Manipular interação de toque
  });
</script>

O evento touchstart é anexado através de JavaScript, mantendo o HTML válido e limpo.

✅ Válido: Usar Pointer Events para suporte multi-entrada

<button id="action-btn" type="button">Toque ou clique em mim</button>
<script>
  document.getElementById("action-btn").addEventListener("pointerdown", function(event) {
    // Manipula entrada de rato, toque e caneta
  });
</script>

Usar pointerdown em vez de touchstart fornece um único manipulador que funciona em todos os tipos de entrada. Note também o uso de um elemento <button>, que é nativamente focalizável e acessível, tornando-o uma melhor escolha que um <div> para elementos interativos.

✅ Válido: Suportar tanto toque como não-toque com ouvintes separados

<div id="interactive-area" role="button" tabindex="0">Interaja comigo</div>
<script>
  var el = document.getElementById("interactive-area");

  el.addEventListener("touchstart", function(event) {
    // Manipular interação específica de toque
  });

  el.addEventListener("click", function(event) {
    // Manipular interação de rato e teclado
  });
</script>

Se deve usar um <div> como elemento interativo, adicione role="button" e tabindex="0" para acessibilidade, e anexe ouvintes tanto touchstart como click para cobrir todos os métodos de entrada.