2526UFV2.4.1-A-001

De WCAG Wiki

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: UFV
Curso académico: 2025-26

Enlace directo a la página del subcriterio en la wiki https://www.wikiwcag.udl.cat/index.php/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
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> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Contacto</a></li> <li><a href="#">Noticias</a></li> </ul> </nav> </header> <main> <h1>Contenido principal</h1> <p> Este es el contenido principal de la página, pero los usuarios que navegan con teclado deben recorrer siempre el menú completo antes de llegar a él. </p> </main>



Explicación del problema detectado:
La página contiene bloques de contenido repetidos, como el menú de navegación, que aparecen en todas las páginas del sitio web. No se proporciona ningún mecanismo que permita omitir estos bloques y acceder directamente al contenido principal. Esto obliga a los usuarios que navegan de forma secuencial a recorrer siempre los mismos elementos antes de llegar a la información relevante.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Este problema afecta especialmente a usuarios que utilizan el teclado para navegar y a personas que emplean lectores de pantalla. Estos usuarios se ven obligados a atravesar repetidamente los mismos bloques de contenido, lo que dificulta la navegación, aumenta el tiempo de acceso al contenido principal y genera una barrera de usabilidad y accesibilidad.


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:

<a href="#contenido-principal" class="skip-link"> Saltar al contenido principal </a> <header> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Contacto</a></li> <li><a href="#">Noticias</a></li> </ul> </nav> </header> <main id="contenido-principal"> <h1>Contenido principal</h1> <p> Este contenido puede alcanzarse directamente mediante el enlace "Saltar al contenido principal". </p> </main>



Explicación de la solución aplicada:
Se proporciona un enlace que permite saltar directamente al contenido principal de la página, evitando los bloques de contenido repetidos. Este mecanismo facilita una navegación más eficiente para los usuarios que utilizan teclado o tecnologías de apoyo