SCR39Hacer que el contenido que aparece al pasar el puntero o al recibir el foco pueda recibir el puntero, se pueda descartar y sea persistente

Aplicabilidad

La técnica es aplicable a cualquier tecnología que permita mostrar contenido adicional al pasar el puntero por encima.

Descripción

El contenido adicional que se muestra cuando el usuario mueve el puntero sobre un elemento activador o lleva el foco del teclado a dicho activador (por ejemplo, una ventana emergente) debe permanecer visible para dar tiempo a los usuarios a leerlo e interactuar con él, y debe permitir que el usuario mueva el puntero sobre el contenido adicional.

Las personas con baja visión que magnifican la pantalla a menudo solo ven una pequeña parte de la pantalla a la vez (su ventana gráfica). Esto significa que el contenido adicional puede no ser completamente visible en la ventana gráfica actual y que los usuarios quizá necesiten mover el ratón sobre el contenido adicional para leerlo. Por tanto, quienes desarrollan la web deben asegurarse de que el contenido adicional permanezca visible cuando el puntero se desplaza desde el activador hasta el contenido adicional (normalmente adyacente). El contenido adicional también debe poder descartarse sin mover el foco, de modo que los usuarios puedan leer el contenido que queda tapado por el contenido adicional.

Ejemplos

<p>This is the 
   <a class="a-and-tooltip" id="parent" href="index.html">trigger
   <span id="popup" role="tooltip">And this additional text 
    gives additional context on the trigger term
   </span>
  </a>.
   Text and popup are <strong>in one link (a)</strong> element.
</p>

[role="tooltip"] {
  display: none;
  padding: 0.5em;
  background:white;
  color: black;
  border:solid black 2px;
  width:10em;
}
.a-and-tooltip {
  position: relative;
}
[role="tooltip"] {
  position: absolute;
  left:0;
  top:1em;
}

// trigger and popup inside the same link
var parent = document.getElementById("parent");
parent.onmouseover = function() {
  document.getElementById("popup").style.display = "block";
}
parent.onmouseout = function() {
  document.getElementById("popup").style.display = "none";
}
parent.onfocus = function() {
  document.getElementById("popup").style.display = "block";
}
parent.onblur = function() {
  document.getElementById("popup").style.display = "none";
}
// hide when ESC is pressed
document.addEventListener("keydown", (e) => {
  if ((e.keyCode || e.which) === 27)
    document.getElementById("popup").style.display = "none";
});

Pruebas

Técnicas relacionadas

• F95: Fallo del criterio de conformidad 1.4.13 debido a que el contenido que se muestra al pasar el puntero no admite que se pase el puntero sobre él