1.4.13 Contenido en hover o foco

Criterio

¿Qué es el contenido en hover o foco?

Este criterio regula el comportamiento de cualquier elemento de interfaz que muestra contenido adicional al interactuar con él mediante el puntero (hover) o el teclado (focus). Los ejemplos más comunes son los tooltips (etiquetas flotantes de información), los menús desplegables, los popovers y los submenús de navegación.

El criterio se aplica a contenido que el autor ha programado para que aparezca y desaparezca. Los tooltips nativos del navegador (como el atributo title) están exentos porque su comportamiento lo controla el agente de usuario.

Las 3 condiciones del criterio

Para cumplir este criterio, el contenido emergente debe satisfacer las tres condiciones simultáneamente:

Flujo de interacción

¿Por qué importa?

Las personas que usan software de ampliación de pantalla (como ZoomText o el zoom del sistema operativo) a menudo trabajan con una porción pequeña de la pantalla visible. Cuando un tooltip aparece, puede estar fuera de su campo de visión ampliado. Para verlo, necesitan mover el puntero hacia donde está el tooltip —y si el tooltip desaparece al salir del activador, nunca podrán leerlo.

La condición flotable soluciona exactamente esto: permite que el puntero entre en el tooltip para acercarse a él con el zoom sin que desaparezca.

La condición descartable es esencial para usuarios de teclado y ayuda a quienes usan control por voz o navegación por teclado, ya que un tooltip que cubre contenido importante puede bloquearlo visualmente. Pulsar Escape es la convención esperada.

La condición persistente protege a usuarios con dificultades motoras que tardan más en leer o necesitan más tiempo para reaccionar antes de que el contenido desaparezca.

¿Quién se ve afectado?

Principalmente, los usuarios de software de ampliación de pantalla que necesitan mover el cursor sobre el tooltip para poder verlo ampliado. También los usuarios que necesitan más tiempo para leer el contenido antes de que desaparezca, usuarios con temblores o dificultades motoras que puedan salir accidentalmente del área activadora y usuarios de teclado que navegan por la interfaz usando Tab y necesitan poder descartar contenido que bloquea la vista.

Implementación

Estructura semántica recomendada con ARIA

  Más información

Comportamiento JavaScript requerido

const btn = document.querySelector('[aria-describedby="tooltip-ayuda"]');
const tooltip = document.getElementById('tooltip-ayuda');

// Mostrar al hacer hover o focus
btn.addEventListener('mouseenter', showTooltip);
btn.addEventListener('focus', showTooltip);

// Ocultar al salir — pero esperar a ver si el puntero entra en el tooltip
btn.addEventListener('mouseleave', (e) => {
  // Solo ocultar si el destino NO es el propio tooltip
  if (!tooltip.contains(e.relatedTarget)) {
    hideTooltip();
  }
});

// El tooltip también debe mantener visible mientras el puntero esté dentro
tooltip.addEventListener('mouseleave', hideTooltip);

// Tecla Escape descarta el tooltip (condición "descartable")
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') hideTooltip();
});

function showTooltip() {
  tooltip.removeAttribute('hidden');
  btn.setAttribute('aria-expanded', 'true');
}

function hideTooltip() {
  tooltip.setAttribute('hidden', '');
  btn.setAttribute('aria-expanded', 'false');
}

Excepciones a conocer

Técnicas

El W3C documenta las siguientes técnicas para superar este criterio:

• SCR39 — Hacer que el contenido adicional al hacer hover o foco sea descartable, flotable y persistente mediante JavaScript.
• ARIA: role="tooltip" — Usar el rol tooltip de ARIA para identificar semánticamente el contenido de ayuda flotante y asociarlo al activador con aria-describedby.

La implementación más robusta combina el rol ARIA tooltip, el atributo aria-describedby, el manejo de eventos mouseenter/mouseleave/focus/blur con verificación del destino del cursor y el cierre con Escape.

Errores documentados

• F95 — El contenido adicional al hacer hover o foco no cumple las tres condiciones del criterio de éxito 1.4.13.

Los casos de fallo más comunes son: tooltips que desaparecen al mover el puntero fuera del activador antes de que el cursor llegue al tooltip; tooltips que no pueden cerrarse con Escape; y tooltips que desaparecen automáticamente tras unos segundos.

Criterios relacionados

• 3.2.1 Enfocado — Prohíbe los cambios de contexto al recibir foco. Un tooltip que desencadena una redirección al hacer focus violaría este criterio además de 1.4.13.
• 2.4.7 Foco visible — Exige que el indicador de foco sea visible. Si el tooltip cubre el indicador de foco al aparecer, podría haber conflicto con este criterio.
• 2.4.3 Orden de enfoque — El orden de tabulación debe ser lógico. Un tooltip que es focusable debe insertarse en el orden de foco de forma predecible.