Contenido al pasar el cursor o al recibir el foco

Qué exige este criterio

Cuando aparece contenido adicional —un tooltip, un popover, un submenú— porque el usuario ha pasado el cursor por encima o ha enfocado un elemento, dicho contenido debe cumplir tres reglas. Puede ocultarse: el usuario puede cerrarlo sin desplazar el puntero ni el foco (habitualmente mediante la tecla Escape). Puede alcanzarse con el puntero: si el usuario mueve el puntero desde el elemento activador hacia el contenido revelado, este permanece visible. Persiste: no se cierra por tiempo de espera hasta que el usuario lo descarta o el elemento activador pierde el foco.

Cómo cumplirlo

• Conecte la tecla Escape al cierre de cualquier tooltip o popover que se abra al pasar el cursor o al recibir el foco.
• Asegúrese de que el elemento tooltip en sí sea accesible con el ratón: no lo posicione de modo que, al moverse hacia él, se dispare un evento mouseout en el activador.
• No cierre automáticamente los tooltips tras un tiempo de espera mientras el usuario siga con el cursor encima o el foco en el activador.
• Use aria-describedby para asociar el activador con el elemento emergente, de modo que los lectores de pantalla anuncien el contenido.
• Construya los popovers con el atributo HTML popover o con una biblioteca contrastada (Popper.js, Floating UI, Radix UI), ya que ambos opciones gestionan estas reglas.
• En los submenús desplegables, reserve una pequeña zona de tolerancia entre el elemento del menú padre y el submenú para que el puntero pueda cruzarla sin que se produzca el cierre.

Fallos frecuentes

• Tooltips solo con CSS mediante :hover con un espacio entre el activador y el tooltip: el puntero entra en el espacio, se dispara mouseout y el tooltip desaparece.
• Tooltips que se cierran automáticamente a los 2 segundos aunque el usuario siga con el cursor encima.
• Sin controlador de tecla Escape: los usuarios de teclado no pueden ocultar un tooltip activado por foco sin salir del campo.
• Menús desplegables que se cierran en el momento en que el puntero se desplaza fuera del elemento padre, antes de alcanzar los elementos hijo.
• Popovers activados por foco que ocupan el área visible y no pueden ocultarse con Escape, permaneciendo visibles indefinidamente.

Por qué importa

Este criterio lo incumplen con mayor frecuencia los tooltips desarrollados a medida y los menús desplegables solo con CSS. La solución es adoptar una biblioteca que ya gestione la posibilidad de ocultarlos y de alcanzarlos con el puntero, o auditar el código personalizado frente a las tres reglas. Es una corrección de alto impacto: el contenido de tipo hover suele estar presente en muchos lugares de una interfaz compleja, por lo que resolverlo una sola vez en un componente compartido elimina una deuda de auditoría importante.