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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 3 ediciones intermedias del mismo usuario)
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.1
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.4_Distinguible
|wcag_pauta_url=Principio_1/1.4_Distinguible
|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 class="discapacidad-item">
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
      <li><span class="label">Pauta:</span><span class="value">1.4 Facilitar ver y escuchar contenido</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
      <li><span class="label">Categoría:</span><span class="value">Interacción</span></li>
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
      <li><span class="label">Subcategoría:</span><span class="value">Hover / Focus</span></li>
</li>
    </ul>
 
  </section>
|wcag_lista_discapacidades=
  <section class="wcag-users">
[[Categoría:Discapacidad motriz]]
    <p>Usuarios más afectados</p>
[[Categoría:Discapacidad cognitiva]]
    <ul>
[[Categoría:Discapacidad baja visión]]
      <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>
 
      <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_texto_criterioOAW=
  </section>
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:
</article>
* 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.
</html>
* 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.
 
 
|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.
 
|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><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><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>
 
 
|wcag_recursos=
<strong> Consejos </strong>
<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=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
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>
<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>
 
 
|wcag_resultado_evaluacion=
El contenido emergente cumple las condiciones de descartable, desplazable y persistente.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
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>
</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;
}
 
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<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 actual - 12:38 6 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=3714»