2526UPSA2.4.1-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://www.wikiwcag.udl.cat/index.php/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>
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/productos">Productos</a></li>
<li><a href="/servicios">Servicios</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<h1>Contenido principal</h1>
<p>El usuario debe tabular por todos los enlaces del menú antes de llegar aquí.</p>
</main>
Explicación del problema detectado:
No hay mecanismo para saltar el menú de navegación repetido en todas las páginas. Los usuarios que navegan con teclado deben presionar Tab repetidamente para pasar por todos los enlaces del menú en cada página antes de acceder al contenido principal.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Las personas con movilidad reducida que usan navegación por teclado deben realizar un esfuerzo físico excesivo. Los usuarios de lectores de pantalla deben escuchar la navegación completa en cada página, lo que consume tiempo y genera frustración, especialmente en sitios con menús extensos.
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:
<body>
<a href="#main-content" class="skip-link">Saltar al contenido principal</a>
<header>
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/productos">Productos</a></li>
<li><a href="/servicios">Servicios</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main id="main-content">
<h1>Contenido principal</h1>
<p>Los usuarios pueden saltar directamente aquí presionando Tab y Enter.</p>
</main>
</body>
.css
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
text-decoration: none;
z-index: 1000;
}
.skip-link:focus {
top: 0;
}
Explicación de la solución aplicada:
Se añade un enlace visible solo al recibir foco con el teclado (Tab) que permite saltar directamente al contenido principal usando el identificador #main-content. El CSS oculta el enlace visualmente pero lo mantiene accesible para lectores de pantalla.
