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 4: Línea 4:
|wcag_titulo_criterio=1.4.13-A. Control de contenido emergente por hover o focus
|wcag_titulo_criterio=1.4.13-A. Control de contenido emergente por hover o focus
|wcag_nivel=AA
|wcag_nivel=AA
|wcag_version=2.2
|wcag_version=2.1
|wcag_principio=1_Perceptible
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_principio_url=Principio_1
Línea 21: Línea 21:
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –  
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –  
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>
</li>
Línea 27: Línea 32:
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad baja visión]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
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:
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.


* '''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.


|wcag_descripcion_resumida=
|wcag_descripcion_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.
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.


|wcag_objetivo=
|wcag_objetivo=
Línea 46: Línea 55:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>SCR39: Ensuring hover content is dismissible, hoverable, and persistent</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/client-side-script/SCR39 SCR39: Making content on focus or hover hoverable, dismissible, and persistent]</span></li>
<li>F95: Fallo por contenido en hover no accesible</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/failures/F95 F95: Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Usar rol ARIA <code>role="tooltip"</code> cuando aplique</li>
<li>Usar rol ARIA <code>role="tooltip"</code> cuando aplique</li>
Línea 58: Línea 69:
</ul>
</ul>


|wcag_tipo_evaluacion=Comprobación manual
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<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 1.</span>
<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>
Navegar a través de la página utilizando el ratón o el teclado para que todos los elementos vayan recibiendo el foco.
<li><span class="paso-badge">Paso 3.</span> Pasar el puntero sobre el contenido y verificar que no desaparece.</li>
</li>
<li><span class="paso-badge">Paso 4.</span> Comprobar que permanece visible hasta retirarlo o cerrarlo.</li>
<li><span class="paso-badge">Paso 2.</span>
Si se muestra algún contenido adicional, verificar que:
<ul>
<li>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).</li>
<li>b. Se puede mover el ratón sobre el contenido adicional sin que este desaparezca.</li>
<li>c. El contenido adicional solo desaparece cuando el usuario lo descarte o cuando su información deje de ser válida.</li>
</ul>
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 73: Línea 92:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<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.
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.
 
<pre class="wcag-codigo-html">
<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>
</div>
</pre>
<pre class="wcag-codigo-html">
.tooltip {
  display: none;
  position: absolute;
  border: 1px solid;
  padding: .5rem;
  background: #fff;
}
.info-btn:focus + .tooltip,
.info-btn:hover + .tooltip {
  display: block;
}


<div class="accessibility-card-error">
</pre>
<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=
|wcag_otras_herramientas_evaluacion=
Navegación por teclado y pruebas manuales de movimiento del puntero.
<ul>
<li>'''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.</li>
<li>'''Navegación por teclado''': usar <kbd>Tab</kbd> y teclas de navegación para activar contenido emergente, mantenerlo visible y cerrarlo sin perder el foco.</li>
<li>'''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.</li>
<li>'''Pruebas con lectores de pantalla''': (NVDA, JAWS, VoiceOver) confirmar que el contenido emergente es anunciado adecuadamente y no interfiere con la navegación secuencial.</li>
</ul>
}}
}}

Revisión del 10:57 5 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)

  • 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=3451»