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

De WCAG Wiki
VisualWikitexto
Página creada con «aqui van ejemplos:»
 
Sin resumen de edición
 
(No se muestran 5 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
aqui van ejemplos:
{{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=
<li class="discapacidad-item">
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
  <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>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad baja visión]]
 
 
|wcag_texto_criterioOAW=
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.
 
 
|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 ilustrativo

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

 Última modificación
2526UPSA1.4.1.3-A-00120 diciembre 2025 19:04:26


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»