2526UFV2.4.5-C-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.5-C
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Página larga sin índice -->
<h1>Informe Anual 2025</h1>
<p>Este es un documento muy extenso que requiere mucho scroll...</p>
<!-- Aquí habría mucho texto pero no lo pongo por hacer el ejercicio más sencillo visualmente. -->
<div style="height: 500px; background: #eee;">(Contenido de introducción...)</div>
<h2 id="resumen">1. Resumen Ejecutivo</h2>
<p>Detalles del resumen...</p>
<div style="height: 500px; background: #eee;">(Mucho texto del resumen...)</div>
<h2 id="finanzas">2. Resultados Financieros</h2>
<p>Datos económicos...</p>
<div style="height: 500px; background: #eee;">(Mucho texto de finanzas...)</div>
<h2 id="futuro">3. Proyecciones Futuras</h2>
<p>Planes para 2026...</p>
<div style="height: 500px; background: #eee;">(Mucho texto de futuro...)</div>
</body>
</html>
Explicación del problema detectado:
El problema principal es la ausencia total de un mecanismo de navegación interna, como una Tabla de Contenidos, en un documento extenso. El código presenta una estructura lineal muy larga donde la única forma de acceder a las secciones es mediante scroll continuo, sin ofrecer atajos o enlaces al inicio que permitan saltar a los apartados relevantes..
Esta falta de estructura de navegación obliga al usuario a consumir el contenido de manera secuencial para encontrar lo que busca, generando una experiencia ineficiente. Al no existir anclas o un índice inicial, se incumple el criterio 2.4.5-C, cuyo objetivo es precisamente permitir el acceso directo y rápido a partes específicas de documentos largos para evitar la desorientación y el esfuerzo innecesario.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Esta carencia afecta gravemente a personas con discapacidad motriz, para quienes el scroll excesivo supone un esfuerzo físico agotador, y a usuarios con discapacidad cognitiva, que pueden perder el contexto o la concentración al no tener un mapa mental de la estructura del documento. Además, los usuarios de lectores de pantalla se ven obligados a escuchar grandes bloques de contenido irrelevante para llegar a la sección deseada, perdiendo tiempo y autonomía en la navegación.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Página larga con índice -->
<h1>Informe Anual 2025</h1>
<nav aria-label="Tabla de contenidos">
<h3>Índice</h3>
<ul>
<li><a href="#resumen">1. Resumen Ejecutivo</a></li>
<li><a href="#finanzas">2. Resultados Financieros</a></li>
<li><a href="#futuro">3. Proyecciones Futuras</a></li>
</ul>
</nav>
<hr>
<p>Este es un documento muy extenso, pero ahora es fácil de navegar...</p>
<div style="height: 200px; background: #eef;">(Contenido de introducción...)</div>
<h2 id="resumen">1. Resumen Ejecutivo</h2>
<p>Detalles del resumen...</p>
<div style="height: 200px; background: #eef;">(Mucho texto del resumen...)</div>
<h2 id="finanzas">2. Resultados Financieros</h2>
<p>Datos económicos...</p>
<div style="height: 200px; background: #eef;">(Mucho texto de finanzas...)</div>
<h2 id="futuro">3. Proyecciones Futuras</h2>
<p>Planes para 2026...</p>
<div style="height: 200px; background: #eef;">(Mucho texto de futuro...)</div>
</body>
</html>
Explicación de la solución aplicada:
Este ejemplo es accesible gracias a la implementación de una Tabla de Contenidos estructurada dentro de una etiqueta semántica <nav> al inicio del documento. Esta lista contiene enlaces internos (anclas) que apuntan directamente a los identificadores únicos (id) de cada encabezado de sección, permitiendo a los usuarios saltar de forma inmediata al contenido específico que les interesa sin necesidad de realizar un desplazamiento vertical exhaustivo.
Esta solución cumple directamente con el criterio 2.4.5-C al proporcionar una vía alternativa y eficiente de navegación dentro de documentos extensos. Facilita enormemente la orientación y el acceso a la información, beneficiando especialmente a personas que navegan con teclado, usuarios de lectores de pantalla que pueden ver el índice auditivamente, y personas con dificultades de atención que requieren una visión general estructurada del contenido antes de profundizar en él.
