2526UPSA2.4.5-C-000
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:
https://gabriellaliteraria.com/articulo-irresistible/
2.1.2. Código HTML:
<article class="main-article">
<header>
<h1>42 ideas para escribir un artículo irresistible</h1>
</header>
<section class="post-content">
<p>Es posible que este artículo tenga momentos algo extraños o delirantes...</p>
<h2>¡Ideas!</h2>
<h3>1. La guía para _____</h3>
<p>Este es el artículo definitivo. Busca algo que la gente necesite...</p>
<h3>2. Errores que cometen todos los _____</h3>
<p>Por desgracia, los titulares que despiertan ansiedad o miedo son los que mejor funcionan...</p>
<h3>3. X cosas que estás haciendo mal</h3>
<p>Con esta entrada vamos ya, directamente, a meter el dedo en la llaga...</p>
<!-- … muchas más secciones y contenido, pero sin índice ni tabla de contenidos … -->
</section>
</article>
Explicación del problema detectado:
El artículo es muy largo y no ofrece una tabla de contenidos ni enlaces internos que permitan ir directamente a cada sección. Aunque tiene muchos encabezados, no existe una vía que facilite saltar por las partes del contenido.
El subcriterio 2.4.5-C exige ofrecer mecanismos que ayuden a localizar información dentro de páginas extensas. En esta página solo es posible avanzar desplazándose continuamente y esto complica la navegación.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Sin una tabla de contenidos, a las personas con discapacidad cognitiva les cuesta más seguir la estructura del texto y pueden perderse con facilidad. Para quienes tiene discapacidad motriz, moverse por un artículo tan alargo supone que la navegación sea más cansada. Las personas con baja visión también lo tienen difícil, porque al usar zoom solo ven una parte pequeña de la pantalla y les cuesta encontrar la información que buscan.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://es.wikipedia.org/wiki/Cristiano_Ronaldo#Estad%C3%ADsticas
2.2.2 Código HTML:
<nav aria-label="Tabla de contenidos">
<h2>Contenidos</h2>
<ul>
<li>
<a href="#inicio">Inicio</a>
</li>
<li>
<a href="#Infancia_e_inicios">1. Infancia e inicios</a>
</li>
<li>
<a href="#Carrera_en_clubes">2. Carrera en clubes</a>
<ul>
<li>
<a href="#Sporting_C._P.">2.1 Sporting C. P.</a>
</li>
<li>
<a href="#Manchester_United_F._C.">2.2 Manchester United F. C.</a>
</li>
<li>
<a href="#Real_Madrid_C._F.">2.3 Real Madrid C. F.</a>
</li>
</ul>
</li>
<li>
<a href="#Selección_nacional">3. Selección nacional</a>
</li>
<li>
<a href="#Perfil_de_jugador">4. Perfil de jugador</a>
</li>
</ul>
</nav>
Explicación de la solución aplicada:
Wikipedia cumple este criterio porque incluye una tabla de contenidos al inicio de cada artículo largo. Esta tabla muestra las secciones en el mismo orden en el que aparecen en la página y permite saltar directamente a cualquiera de ellas mediante enlaces internos.
Esto facilita mucho la navegación. El usuario puede ir a la parte que necesita sin tener que ir por todo el texto. También mejora la experiencia de quienes usan teclado o lector de pantalla porque la tabla de contenidos se reconoce como una lista de enlaces y permite moverse por la estructura de forma rápida y clara.
