SCR39Hacer legible y cerrable el contenido que aparece al pasar el ratón o enfocar

Por qué es importante

Una persona con baja visión que usa un ampliador de pantalla (programa que agranda una parte de la pantalla) solo ve un trozo cada vez. Para leer un globo de ayuda tiene que mover el ratón hasta él. Si el globo desaparece al salir del botón, no puede leerlo.

• Si el contenido se cierra solo tras unos segundos, quien lee despacio se queda a medias.
• Si tapa otra parte de la página, por ejemplo un campo de un formulario de cita previa, hace falta poder cerrarlo sin perder la posición.

Cómo se hace

1. Coloque el elemento que lo activa y el contenido emergente dentro de un mismo contenedor. Muéstrelo mientras el puntero esté sobre cualquiera de los dos.
2. Evite huecos entre el activador y el contenido emergente, para que el puntero no lo cierre al cruzar.
3. No use temporizadores para ocultarlo. Debe seguir visible hasta que la persona se vaya o lo cierre.
4. Permita cerrarlo con Esc sin mover el ratón ni el foco (el elemento que recibe lo que se teclea).
5. Muéstrelo también cuando el activador reciba el foco con el teclado, no solo con el ratón.

Cómo comprobarlo

1. Pase el ratón por el activador y llévelo despacio hasta el contenido emergente. No debe desaparecer.
2. Deje el ratón quieto un buen rato. El contenido debe seguir visible.
3. Con el ratón aún encima, pulse Esc. El contenido debe cerrarse.
4. Llegue al activador con el tabulador. El contenido debe aparecer, quedarse visible y cerrarse con Esc sin perder el foco.

Ejemplo

Script para un globo de ayuda que sigue visible sobre sí mismo y se cierra con Esc.

// El contenedor incluye el botón y el globo de ayuda
const caja = document.querySelector('.ayuda');
const globo = caja.querySelector('[role="tooltip"]');
const mostrar = () => { globo.hidden = false; };
const ocultar = () => { globo.hidden = true; };

caja.addEventListener('mouseenter', mostrar);
caja.addEventListener('mouseleave', ocultar); // sigue visible sobre el globo
caja.addEventListener('focusin', mostrar);
caja.addEventListener('focusout', ocultar);
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') ocultar(); // se cierra sin mover el ratón ni el foco
});