2526UPSA2.4.11-A-001
Edición de la página como formulario
1. Información básica
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
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<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 oculto tras el menú</a>
</main>
Explicación del problema detectado:
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.
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 .
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas afectadas: Usuarios videntes que navegan solo con teclado (por discapacidad motriz) y usuarios de magnificadores de pantalla (baja visión).
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 .
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<style>
/* scroll-padding-top indica al navegador que deje espacio al hacer scroll */
html { scroll-padding-top: 120px; }
</style>
<header style="position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: #333; color: white;">
Menú Fijo
</header>
<main>
<a href="#" style="margin-top: 50px; display: block;">Enlace siempre visible</a>
</main>
Explicación de la solución aplicada:
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.
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 .
