Saltar al contenido
Pon el foco
Criterios de Perceptible

PerceptiblePauta 1.4 Distinguible

1.4.13Contenido con hover o foco

Nivel AALo exige la normativa (EN 301 549).

Qué pide

Los tooltips o menús que aparecen al pasar el ratón o recibir foco se pueden cerrar, se puede mover el puntero sobre ellos y no desaparecen solos.

A quién ayuda: Personas con baja visión que usan zoom y personas con dificultades motoras.

Un caso real

Un icono de ayuda muestra un tooltip con las condiciones de un préstamo.

BienEl tooltip se cierra con Escape y se puede pasar el ratón por encima para leerlo.
MalEl tooltip tapa el campo que estás rellenando y desaparece si mueves el ratón.

Cómo aplicarlo en código

Ayuda que aparece con hover y con foco, y se puede cerrar

El contenido se puede cerrar con Esc sin mover el foco, se puede recorrer con el ratón sin que desaparezca y sigue visible hasta que la persona se va.

CorrectoHTML
<label for="iban">IBAN</label>
<input id="iban" class="con-ayuda" aria-describedby="ayuda-iban">
<p role="tooltip" id="ayuda-iban" class="ayuda">24 caracteres. Empieza por ES.</p>

<style>
  .ayuda { display: none; }
  .con-ayuda:hover + .ayuda,
  .con-ayuda:focus + .ayuda,
  .ayuda:hover { display: block; }
  .ayuda[hidden] { display: none !important; }
</style>

<script>
  const campo = document.getElementById("iban");
  const ayuda = document.getElementById("ayuda-iban");
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") ayuda.hidden = true;
  });
  campo.addEventListener("focus", () => (ayuda.hidden = false));
  campo.addEventListener("pointerenter", () => (ayuda.hidden = false));
</script>
IncorrectoHTML
<style>
  .ayuda { display: none; pointer-events: none; }
  /* Solo con ratón, desaparece al intentar leerla y no se puede cerrar */
  .con-ayuda:hover + .ayuda { display: block; }
</style>

Cómo comprobarlo

Prueba cada tooltip con ratón y teclado: Escape, mover el puntero y esperar.

Understanding 1.4.13 (W3C, en inglés)