F95Contenido que aparece al pasar el ratón y se cierra al ir hacia él

Por qué es importante

Las personas con baja visión suelen usar un ampliador de pantalla (programa que agranda una parte de la pantalla, como una lupa). La zona ampliada sigue al puntero del ratón.

Cuando aparece un globo de ayuda, a menudo queda medio fuera de la zona ampliada. Para leerlo, la persona tiene que mover el puntero hacia él. Si el globo se cierra en cuanto el puntero sale del elemento que lo abrió, nunca podrá leerlo.

Pasa igual en los gráficos con datos: al mover el puntero hacia un globo, se pasa por otros puntos y se abren otros globos que lo sustituyen.

Cómo evitarlo

1. Mantenga visible el contenido mientras el puntero esté sobre el elemento que lo abre o sobre el propio contenido.
2. Coloque el contenido pegado al elemento, sin huecos. Si hay hueco, añada un pequeño retraso antes de cerrarlo.
3. En CSS, use un selector que cubra los dos casos, por ejemplo .ayuda:hover .globo, .globo:hover, o envuelva ambos en el mismo contenedor.
4. En gráficos, evite que otros puntos sustituyan el globo mientras la persona se acerca a él. Una opción es abrirlo con un clic.
5. Además, permita cerrarlo con Esc y muéstrelo también al recibir el foco del teclado.

Cómo comprobarlo

1. Pase el ratón por encima de cada elemento que muestre contenido extra: iconos de ayuda, menús, enlaces con globo, puntos de gráficos.
2. Mueva despacio el puntero desde el elemento hasta el contenido que ha aparecido.
3. Compruebe que el contenido no desaparece por el camino ni cuando el puntero está encima.
4. Repítalo con el zoom al 200 % o con la lupa del sistema, donde el problema se nota más.

Ejemplo

El globo sigue visible si el puntero está sobre el botón o sobre el propio globo, porque ambos están en el mismo contenedor.

<span class="ayuda">
  <button aria-describedby="g1">?</button>
  <span id="g1" role="tooltip" class="globo">
    Indique el número que figura en su factura.
  </span>
</span>

<style>
  .globo { display: none; }
  .ayuda:hover .globo,
  .ayuda:focus-within .globo { display: block; }
</style>