Fallo Común F95 de WCAG 2.1: Contenido en Hover que no permite interacción

Jano Llorca Lis

La accesibilidad web garantiza que todos los usuarios, incluidos aquellos con discapacidades visuales o motoras, puedan interactuar con el contenido de una página de manera efectiva. Sin embargo, un error frecuente es la implementación incorrecta de contenido emergente al pasar el cursor (hover), que desaparece antes de que el usuario pueda interactuar con él.

Este problema incumple el Criterio de Conformidad 1.4.13 de WCAG 2.1 (Contenido en Hover o Enfoque), ya que impide a ciertos usuarios, como aquellos que usan ampliadores de pantalla o tecnologías de asistencia, acceder a información adicional de forma efectiva.

En este artículo exploraremos el Fallo F95, su impacto en la accesibilidad y las mejores prácticas para corregirlo.

Acerca de este fallo

El Fallo F95 ocurre cuando el contenido que se muestra al pasar el cursor (hover) desaparece antes de que el usuario pueda mover el puntero sobre él para interactuar. Esto afecta a personas con discapacidades visuales que usan herramientas de magnificación y a usuarios con movilidad reducida que requieren más tiempo para mover el puntero con precisión.

Escenarios comunes de este fallo:

Tooltips o información emergente en botones.
Gráficos interactivos con información sobre puntos de datos.
Menús desplegables que desaparecen si el cursor se mueve de manera imprecisa.

De acuerdo con el criterio 1.4.13 de WCAG 2.1, el contenido emergente debe:

Permanecer visible si el usuario mueve el puntero sobre él.
Poder cerrarse fácilmente sin mover el cursor de manera compleja.
Ser accesible con tecnología de asistencia.

Ejemplos

Ejemplo incorrecto 1: Tooltip que desaparece al mover el puntero

<!DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Ejemplo Incorrecto</title>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltip-text {
visibility: hidden;
background-color: black;
color: white;
text-align: center;
padding: 5px;
border-radius: 4px;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.2s;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<p>Pasa el cursor sobre el botón:</p>
<div class=»tooltip»>
<button>Info</button>
<span class=»tooltip-text»>Texto emergente</span>
</div>
</body>
</html>

🔴 Problema: El tooltip desaparece en cuanto el usuario intenta mover el cursor sobre el texto emergente, lo que lo hace inaccesible para usuarios con amplificadores de pantalla o con dificultades motoras.

Solución correcta: Tooltip accesible

<!DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Ejemplo Correcto</title>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltip-text {
visibility: hidden;
background-color: black;
color: white;
text-align: center;
padding: 5px;
border-radius: 4px;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.2s;
}
.tooltip:hover .tooltip-text,
.tooltip:focus-within .tooltip-text {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<p>Pasa el cursor sobre el botón o presiona Tab:</p>
<div class=»tooltip»>
<button aria-describedby=»tooltip1″>Info</button>
<span id=»tooltip1″ class=»tooltip-text»>Texto emergente accesible</span>
</div>
</body>
</html>

✅ ¿Qué mejora?:

El contenido sigue visible al mover el cursor sobre el tooltip.
Se usa focus-within para permitir interacción con teclado.
Se proporciona aria-describedby para lectores de pantalla.

Ejemplo incorrecto 2: Gráficos con información emergente inaccesible

En gráficos interactivos, algunas veces los tooltips desaparecen al mover el puntero, lo que impide que los usuarios lean la información detallada.

Solución correcta: Mantener el contenido visible y accesible

Usar aria-describedby para describir los puntos de datos a los lectores de pantalla.
Permitir la interacción con el tooltip al usar teclado.
Implementar eventos de mouseenter y focus en vez de solo hover.

Errores comunes y cómo evitarlos

Errores frecuentes:

Tooltips que desaparecen en cuanto el cursor se mueve.
Menús desplegables que no permiten desplazarse dentro del contenido.
Gráficos interactivos donde los tooltips cambian o desaparecen al mover el cursor.

Cómo evitar estos errores:

Asegurar que el contenido emergente siga visible al interactuar con él.
Proporcionar métodos alternativos de acceso (como focus).
Implementar eventos mouseenter en lugar de solo hover.
Utilizar aria-describedby para mejorar la accesibilidad.

Preguntas frecuentes sobre el fallo F95

¿Por qué es un problema que el contenido desaparezca al mover el cursor?

Porque los usuarios con ampliadores de pantalla o dificultades motoras no pueden interactuar con el contenido antes de que desaparezca.

¿Cómo afecta este error a las tecnologías de asistencia?

Los lectores de pantalla y las herramientas de magnificación pueden no detectar el contenido si desaparece demasiado rápido.

¿Qué debo hacer si mi tooltip desaparece al mover el cursor?

Asegúrate de que el contenido emergente sea interactivo y permanezca visible cuando el usuario pase el puntero sobre él.

Recursos relacionados

Pruebas y validación

Procedimiento

Mueve el cursor sobre elementos con contenido emergente.
Verifica si el contenido sigue visible al mover el puntero sobre él.
Usa la navegación con teclado (Tab) para comprobar accesibilidad.
Prueba con herramientas de accesibilidad (WAVE, axe DevTools).

Resultados esperados

El contenido emergente permanece visible mientras el cursor está sobre él.
Puede cerrarse de manera accesible sin interacciones complejas.
Es accesible mediante teclado y lectores de pantalla.

El Fallo F95 impide que los usuarios interactúen con contenido emergente en hover, afectando la accesibilidad. Implementar soluciones adecuadas garantiza una mejor experiencia para todos los usuarios.

💡 ¡Revisa tu sitio y mejora su accesibilidad hoy mismo! 🚀

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.