Skip to main content
Validación HTML

No se permite el atributo “ontouchstart” en el elemento “div” en este punto.

Acerca de este problema HTML

El atributo ontouchstart es un manejador de eventos inline que algunos desarrolladores usan para detectar cuando un usuario toca un elemento en un dispositivo con pantalla táctil. Sin embargo, a diferencia de los atributos manejadores de eventos estándar como onclick, onmousedown, o onkeydown, el atributo ontouchstart no está definido en la especificación HTML. El validador W3C lo marca porque solo se permiten atributos explícitamente listados en la especificación en un elemento dado.

El evento touchstart en sí mismo es un evento legítimo definido en la especificación Touch Events — es la forma de atributo HTML inline (ontouchstart) la que no es reconocida como un atributo válido por el estándar HTML. Esta distinción es importante: puedes escuchar eventos touchstart perfectamente, solo que no a través de un atributo inline en un elemento HTML.

Por qué esto es un problema

  • Cumplimiento de estándares: Usar atributos no estándar produce HTML inválido, lo que puede causar problemas con pruebas automatizadas, auditorías de accesibilidad y pipelines de gestión de contenido que exigen validación.
  • Accesibilidad: Depender únicamente de eventos táctiles excluye a usuarios que navegan con teclado, ratón o tecnología asistiva. Los manejadores que solo funcionan con tacto pueden hacer que los elementos interactivos sean completamente inaccesibles para usuarios que no usan tacto.
  • Mantenibilidad: Los manejadores de eventos inline mezclan comportamiento con marcado, haciendo el código más difícil de mantener y depurar comparado con listeners de eventos JavaScript centralizados.
  • Inconsistencias del navegador: Aunque la mayoría de navegadores móviles soportan el evento touchstart, la forma de atributo inline no está garantizada para funcionar consistentemente en todos los entornos.

Cómo solucionarlo

  1. Elimina el atributo inline ontouchstart de tu elemento HTML.
  2. Usa addEventListener en JavaScript para adjuntar el listener del evento touchstart programáticamente.
  3. Considera también manejar eventos click o pointerdown para que la interacción funcione para todos los tipos de entrada — ratón, teclado, tacto y stylus. La API Pointer Events (pointerdown, pointerup, etc.) es un enfoque moderno y unificado que cubre entrada de ratón, tacto y lápiz en un único modelo de eventos.

Ejemplos

❌ Inválido: Atributo inline ontouchstart

<div ontouchstart="handleTouch()">Tócame</div>

Esto provoca el error de validación porque ontouchstart no es un atributo reconocido en la especificación HTML.

✅ Válido: Usando addEventListener para touchstart

<div id="touch-target">Tócame</div>
<script>
  document.getElementById("touch-target").addEventListener("touchstart", function(event) {
    // Manejar interacción táctil
  });
</script>

El evento touchstart se adjunta a través de JavaScript, manteniendo el HTML válido y limpio.

✅ Válido: Usando Pointer Events para soporte de entrada cruzada

<button id="action-btn" type="button">Tócame o haz clic</button>
<script>
  document.getElementById("action-btn").addEventListener("pointerdown", function(event) {
    // Maneja entrada de ratón, tacto y lápiz
  });
</script>

Usar pointerdown en lugar de touchstart proporciona un único manejador que funciona en todos los tipos de entrada. Nota también el uso de un elemento <button>, que es enfocable y accesible nativamente, haciéndolo una mejor opción que un <div> para elementos interactivos.

✅ Válido: Soportando tacto y no-tacto con listeners separados

<div id="interactive-area" role="button" tabindex="0">Interactúa conmigo</div>
<script>
  var el = document.getElementById("interactive-area");

  el.addEventListener("touchstart", function(event) {
    // Manejar interacción específica de tacto
  });

  el.addEventListener("click", function(event) {
    // Manejar interacción de ratón y teclado
  });
</script>

Si debes usar un <div> como elemento interactivo, añade role="button" y tabindex="0" para accesibilidad, y adjunta listeners tanto de touchstart como de click para cubrir todos los métodos de entrada.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.