Principio 1/1.4 Distinguible/1.4.13-A

1.4.13-A. Control de contenido emergente por hover o focus

1_Perceptible 1.4_Distinguible

• Nivel: AA
• Versión: 2.1
• Principio: 1_Perceptible
• Pauta: 1.4_Distinguible
• Grupo: Interacción
• Subgrupo: Hover/Focus

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

• Motriz – Barrera grave
• Cognitiva – Barrera moderada
• Baja visión – Barrera moderada

Enunciado del criterio (Observatorio de Accesibilidad Web)

• Si cuando un elemento recibe o pierde el puntero (p. ej. hover del ratón) o el foco del teclado (focus) se muestra u oculta algún contenido adicional, entonces se debe cumplir lo siguiente:
  • Debe haber disponible un mecanismo que permita descartar el contenido adicional sin necesidad de mover el puntero o cambiar el foco del teclado a no ser que el contenido adicional informe acerca de un error en la entrada de datos o no tape o reemplace otro contenido.
  • Si el puntero puede mostrar el contenido adicional, entonces el puntero se puede mover sobre el contenido adicional sin que éste desaparezca.
  • El contenido adicional debe permanecer visible hasta que se retire el puntero o el foco del teclado o bien el usuario lo descarte (por el primer punto) o su información no siga siendo válida.

Comprensión del criterio

Descripción resumida

Cualquier contenido que aparezca al pasar el cursor (hover) o al recibir el foco (focus) debe ser controlable, no obstruir la interacción y permanecer visible el tiempo necesario. El usuario debe poder mover el ratón sobre él, descartar el contenido fácilmente y mantenerlo visible hasta que lo cierre o mueva foco/ratón.

Objetivo

Facilitar el acceso a la información que aparece al pasar el puntero o enfocar un elemento, evitando que desaparezca de forma inesperada o bloquee contenido esencial.

Importancia de cumplir el criterio

Cuando tooltips, submenús o avisos aparecen y desaparecen sin control, pueden impedir la interacción, dificultar la lectura y frustrar tareas críticas, especialmente para personas que usan teclado, tienen temblores, necesitan más tiempo para procesar información o pueden activar elementos por error.

Referencias WCAG

• SCR39: Making content on focus or hover hoverable, dismissible, and persistent
• F95: Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable

Recursos de apoyo

Consejos

• Usar rol ARIA role="tooltip" cuando aplique
• Utilizar :hover, :focus y control mediante teclado
• Proveer botón de cierre accesible y ESC para cerrar
• No depender del atributo title del navegador

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Navegar a través de la página utilizando el ratón o el teclado para que todos los elementos vayan recibiendo el foco.
2. Paso 2. Si se muestra algún contenido adicional, verificar que:
   • a. Si el contenido adicional tapa a otro elemento, existe un modo de descartarlo sin mover el ratón o cambiar el foco del teclado (excepto si se trata de un informe de error).
   • b. Se puede mover el ratón sobre el contenido adicional sin que este desaparezca.
   • c. El contenido adicional solo desaparece cuando el usuario lo descarte o cuando su información deje de ser válida.

Resultado esperado

El contenido emergente cumple las condiciones de descartable, desplazable y persistente.

Ejemplo

El usuario puede llegar al contenido con foco, no desaparece al mover el ratón al botón, y puede cerrarse moviendo el foco/ratón.

<button class="info-btn" aria-describedby="msg-info">
  Más info
</button>
<div id="msg-info" class="tooltip" role="tooltip">
  Información adicional accesible.
</div>

.tooltip {
  display: none;
  position: absolute;
  border: 1px solid;
  padding: .5rem;
  background: #fff;
}

.info-btn:focus + .tooltip,
.info-btn:hover + .tooltip {
  display: block;
}

Otras herramientas de evaluación

• Prueba con ratón: situar el cursor sobre elementos que muestran contenido emergente y comprobar que permanece visible al mover el puntero dentro del contenido y que puede cerrarse fácilmente.
• Navegación por teclado: usar Tab y teclas de navegación para activar contenido emergente, mantenerlo visible y cerrarlo sin perder el foco.
• Inspección del navegador: revisar el código para verificar que el contenido emergente es accesible mediante foco (no solo hover) y que no obstruye funcionalidad ni contenido importante.
• Pruebas con lectores de pantalla: (NVDA, JAWS, VoiceOver) confirmar que el contenido emergente es anunciado adecuadamente y no interfiere con la navegación secuencial.

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.13-A. Control de contenido emergente por hover o focus

Loading comments...