Principio 1/1.4 Distinguible/1.4.13-A

De WCAG Wiki

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

Discapacidades afectadas

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

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

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.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

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

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.4_Distinguible/1.4.13-A&oldid=3714»