Diferencia entre revisiones de «Principio 1/1.4 Distinguible/1.4.13-A»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
== '''1.4.13-A. Control de contenido emergente por hover o focus''' ==
{{CriterioWCAG
|id_wcag_criterio=1.4.13
|id_wcag_subcriterio=1.4.13-A
|wcag_titulo_criterio=1.4.13-A. Control de contenido emergente por hover o focus
|wcag_nivel=AA
|wcag_version=2.2
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.4_Facilitar_ver_y_escuchar_contenido
|wcag_pauta_url=Principio_1/1.4_Facilitar_ver_y_escuchar_contenido
|wcag_grupo=Interacción
|wcag_subgrupo=Hover/Focus


<!-- 
|wcag_discapacidades=
   Análisis interno:
<li class="discapacidad-item">
  Este criterio impacta principalmente a: Personas con discapacidad motriz y cognitiva 
   [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
   Problema grave: Si el contenido emergente por hover o focus desaparece o no se puede controlar, los usuarios con discapacidad motriz pueden no acceder al contenido, y los usuarios con discapacidad cognitiva pueden perder información importante, generando barreras graves a moderadas. 
   <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
-->
  <span class="gravedad gravedad-grave">Barrera grave</span>
<html>
</li>
<!-- criterio 1.4.13-A -->
<li class="discapacidad-item">
<article class="wcag-card">
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   <section class="wcag-info">
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
    <ul>
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
      <li><span class="label">Nivel:</span><span class="value">AA</span></li>
</li>
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
 
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
|wcag_lista_discapacidades=
      <li><span class="label">Pauta:</span><span class="value">1.4 Facilitar ver y escuchar contenido</span></li>
[[Categoría:Discapacidad motriz]]
      <li><span class="label">Categoría:</span><span class="value">Interacción</span></li>
[[Categoría:Discapacidad cognitiva]]
      <li><span class="label">Subcategoría:</span><span class="value">Hover / Focus</span></li>
 
    </ul>
|wcag_texto_criterioOAW=
  </section>
Cuando un componente de la interfaz recibe y luego pierde el foco (de puntero o teclado), y esto genera que un contenido adicional se haga visible y luego se oculte, se cumplen las tres condiciones siguientes:
  <section class="wcag-users">
 
    <p>Usuarios más afectados</p>
* '''Descartable''': el contenido puede cerrarse sin mover el puntero ni el foco (por ejemplo, pulsando ESC).
    <ul>
* '''Desplazable''': si se activó con puntero, el puntero puede moverse sobre el contenido sin que este desaparezca.
      <li><img src="/images/0/06/Motriz.png" alt="Icono discapacidad motriz" class="icono-discapacidad" /> Personas con discapacidad motriz – <span class="gravedad">Barrera grave</span></li>
* '''Persistente''': permanece visible hasta que el puntero o el foco se retira o se descarta.
      <li><img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" /> Personas con discapacidad cognitiva – <span class="gravedad">Barrera moderada</span></li>
 
    </ul>
|wcag_descripcion_resumida=
  </section>
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.
</article>
 
</html>
|wcag_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.
 
|wcag_importancia=
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.
 
|wcag_referencias=
<ul>
<li>SCR39: Ensuring hover content is dismissible, hoverable, and persistent</li>
<li>F95: Fallo por contenido en hover no accesible</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Usar rol ARIA <code>role="tooltip"</code> cuando aplique</li>
<li>Utilizar <code>:hover</code>, <code>:focus</code> y control mediante teclado</li>
<li>Proveer botón de cierre accesible y ESC para cerrar</li>
<li>No depender del atributo <code>title</code> del navegador</li>
</ul>
 
|wcag_tipo_evaluacion=Comprobación manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Activar tooltips, menús o contenido emergente mediante ratón y teclado.</li>
<li><span class="paso-badge">Paso 2.</span> Verificar que el contenido puede cerrarse fácilmente sin perder foco (ESC o botón cerrar).</li>
<li><span class="paso-badge">Paso 3.</span> Pasar el puntero sobre el contenido y verificar que no desaparece.</li>
<li><span class="paso-badge">Paso 4.</span> Comprobar que permanece visible hasta retirarlo o cerrarlo.</li>
</ol>
 
|wcag_resultado_evaluacion=
El contenido emergente cumple las condiciones de descartable, desplazable y persistente.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<strong>Correcto:</strong> Tooltip con botón cerrar y ESC habilitado, permanece visible mientras el cursor está encima y desaparece al salir.
</div>
 
<div class="accessibility-card-error">
<strong>Incorrecto:</strong> Tooltip que desaparece cuando el puntero entra en él o que solo puede cerrarse retirando el foco.
</div>
 
|wcag_otras_herramientas_evaluacion=
Navegación por teclado y pruebas manuales de movimiento del puntero.
}}

Revisión del 19:08 4 nov 2025

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)

  • Cuando un componente de la interfaz recibe y luego pierde el foco (de puntero o teclado), y esto genera que un contenido adicional se haga visible y luego se oculte, se cumplen las tres condiciones siguientes:
    • Descartable: el contenido puede cerrarse sin mover el puntero ni el foco (por ejemplo, pulsando ESC).
    • Desplazable: si se activó con puntero, el puntero puede moverse sobre el contenido sin que este desaparezca.
    • Persistente: permanece visible hasta que el puntero o el foco se retira o se descarta.

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: Ensuring hover content is dismissible, hoverable, and persistent
  • F95: Fallo por contenido en hover no accesible

Recursos de apoyo

  • 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 Comprobación manual

Procedimiento de evaluación

  1. Paso 1. Activar tooltips, menús o contenido emergente mediante ratón y teclado.
  2. Paso 2. Verificar que el contenido puede cerrarse fácilmente sin perder foco (ESC o botón cerrar).
  3. Paso 3. Pasar el puntero sobre el contenido y verificar que no desaparece.
  4. Paso 4. Comprobar que permanece visible hasta retirarlo o cerrarlo.

Resultado esperado

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

Ejemplo

Correcto: Tooltip con botón cerrar y ESC habilitado, permanece visible mientras el cursor está encima y desaparece al salir.

Incorrecto: Tooltip que desaparece cuando el puntero entra en él o que solo puede cerrarse retirando el foco.

Otras herramientas de evaluación

Navegación por teclado y pruebas manuales de movimiento del puntero.










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=3347»