Diferencia entre revisiones de «2526UPSA2.4.11-A-001»

De WCAG Wiki
VisualWikitexto
202526UPSA21 (discusión | contribs.)
alumnos
18 ediciones
Página creada con «{{ActividadWCAG |id_criterio=2.4.1 - Saltar bloques (Nivel: A) |id_subcriterio=2.4.1-A |id_universidad=UPSA |curso_academico=2025-26 |enlace=https://wikiwcag.udl.cat/Principio_2/2.4_Navegable/2.4.1-A |noa_barrera_evidencia_html=<nowiki> <header style="position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: #333; color: white;"> Menú Fijo (Tapa lo que hay debajo) </header> <main> <a href="#" style="margin-top: 50px; display: block;">Enlace…»
 
202526UPSA21 (discusión | contribs.)
alumnos
18 ediciones
Sin resumen de edición
 
Línea 5: Línea 5:
|curso_academico=2025-26
|curso_academico=2025-26
|enlace=https://wikiwcag.udl.cat/Principio_2/2.4_Navegable/2.4.1-A
|enlace=https://wikiwcag.udl.cat/Principio_2/2.4_Navegable/2.4.1-A
|noa_barrera_evidencia_img=2526UPSA2.4.11-A-0019.png
|noa_barrera_evidencia_url=https://www.elmundo.es/
|noa_barrera_evidencia_html=<nowiki>
|noa_barrera_evidencia_html=<nowiki>
<header style="position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: #333; color: white;">
<footer class="ue-c-main-navigation__footer">
  Menú Fijo (Tapa lo que hay debajo)
    <ul class="list-corporative">
</header>
        <li><a href="https://www.elmundo.es/cookies.html">Política de cookies</a></li>
        <li><a href="https://www.elmundo.es/privacidad/">Política de privacidad</a></li>
    </ul>
</footer>


<main>
<aside id="banda_suscripcion" class="banda_suscripcion premium" style="position: fixed; bottom: 0; z-index: 9999; height: 80px; width: 100%; background: white;">
  <a href="#" style="margin-top: 50px; display: block;">Enlace oculto tras el menú</a>
    <a href="/suscripcion">Suscríbete ahora</a>
</main>
</aside>
 
<div id="didomi-host" style="position: fixed; bottom: 0; z-index: 2147483647;">
    </div>
</nowiki>
</nowiki>
|noa_barrera_explicacion=El problema ocurre cuando un componente de la interfaz de usuario, como una cabecera fija ("sticky header") o un banner de cookies, se superpone visualmente al elemento que recibe el foco del teclado.
|noa_barrera_explicacion=La página presenta un banner de gestión de suscripcion posicionado de forma fija (position: fixed) en la parte inferior de la ventana. Al navegar mediante teclado por el pie de página, el indicador de foco se coloca en enlaces que quedan visualmente ocultos detrás de este banner opaco.
 
|noa_barrera_usuarios=El usuario que navega por teclado pierde la referencia visual de su posición en la página. Al no ver qué elemento tiene el foco, no puede interactuar con seguridad, lo que genera confusión y bloquea el acceso a los enlaces del pie de página (como "Contacto" o "Aviso Legal").
En este ejemplo, cuando el usuario tabula hasta el enlace, el navegador hace "scroll" hasta él, pero como la cabecera está fija en la parte superior (position: fixed), el enlace queda oculto detrás de ella. El elemento tiene el foco, pero es totalmente invisible para el usuario .
|acc_barrera_evidencia_img=2526UPSA2.4.11-A-001.png
|noa_barrera_usuarios=Personas afectadas: Usuarios videntes que navegan solo con teclado (por discapacidad motriz) y usuarios de magnificadores de pantalla (baja visión).
|acc_barrera_evidencia_url=https://www.bbc.com/news
 
Barreras:
 
Desorientación: El usuario sabe que ha movido el foco, pero no ve dónde está en la pantalla.
 
Errores de navegación: Al no ver qué elemento está seleccionado, el usuario no sabe qué va a activar si pulsa "Enter", impidiendo una navegación efectiva y autónoma .
|acc_barrera_evidencia_html=<nowiki>
|acc_barrera_evidencia_html=<nowiki>
<style>
<footer role="contentinfo" class="orb-footer">
  /* scroll-padding-top indica al navegador que deje espacio al hacer scroll */
    <div class="orb-footer-inner">
  html { scroll-padding-top: 120px; }
        <ul>
</style>
            <li><a href="/aboutthebbc">About the BBC</a></li>
 
        </ul>
<header style="position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: #333; color: white;">
    </div>
  Menú Fijo
</footer>
</header>
 
<main>
  <a href="#" style="margin-top: 50px; display: block;">Enlace siempre visible</a>
</main>
</nowiki>
</nowiki>
|acc_barrera_explicacion=La solución implementa la propiedad CSS scroll-padding-top. Esta propiedad define un desplazamiento ("offset") en la parte superior del área de visualización.
|acc_barrera_explicacion=La BBC opta por un diseño donde no existen barras fijas persistentes que cubran el área de contenido principal o el pie de página. Si existen avisos, estos desplazan el contenido en lugar de flotar sobre él, garantizando que cualquier elemento que reciba el foco del teclado sea siempre visible para el usuario.
 
De esta forma, cuando el navegador realiza un desplazamiento automático para mostrar el elemento enfocado, se detiene antes de llegar al borde superior (dejando 120px de margen en este caso). Esto garantiza que el elemento con el foco nunca quede oculto detrás de la cabecera fija y sea siempre visible para el usuario .
}}
}}

Revisión actual - 21:53 21 ene 2026

Edición de la página como formulario

1. Información básica

Id del criterio: 2.4.1 - Saltar bloques (Nivel: A)
Título del subcriterio: 2.4.1-A
Universidad participante: UPSA
Curso académico: 2025-26

Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_2/2.4_Navegable/2.4.1-A


2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://www.elmundo.es/

2.1.2. Código HTML:

<footer class="ue-c-main-navigation__footer"> <ul class="list-corporative"> <li><a href="https://www.elmundo.es/cookies.html">Política de cookies</a></li> <li><a href="https://www.elmundo.es/privacidad/">Política de privacidad</a></li> </ul> </footer> <aside id="banda_suscripcion" class="banda_suscripcion premium" style="position: fixed; bottom: 0; z-index: 9999; height: 80px; width: 100%; background: white;"> <a href="/suscripcion">Suscríbete ahora</a> </aside> <div id="didomi-host" style="position: fixed; bottom: 0; z-index: 2147483647;"> </div>



Explicación del problema detectado:
La página presenta un banner de gestión de suscripcion posicionado de forma fija (position: fixed) en la parte inferior de la ventana. Al navegar mediante teclado por el pie de página, el indicador de foco se coloca en enlaces que quedan visualmente ocultos detrás de este banner opaco.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
El usuario que navega por teclado pierde la referencia visual de su posición en la página. Al no ver qué elemento tiene el foco, no puede interactuar con seguridad, lo que genera confusión y bloquea el acceso a los enlaces del pie de página (como "Contacto" o "Aviso Legal").

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://www.bbc.com/news


2.2.2 Código HTML:

<footer role="contentinfo" class="orb-footer"> <div class="orb-footer-inner"> <ul> <li><a href="/aboutthebbc">About the BBC</a></li> </ul> </div> </footer>



Explicación de la solución aplicada:
La BBC opta por un diseño donde no existen barras fijas persistentes que cubran el área de contenido principal o el pie de página. Si existen avisos, estos desplazan el contenido en lugar de flotar sobre él, garantizando que cualquier elemento que reciba el foco del teclado sea siempre visible para el usuario.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UPSA2.4.11-A-001&oldid=4335»