2526UFV2.4.6-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.6-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:
<body>
<h1>Blog</h1>
<div class="post">
<div class="title">Europa</div> <!-- No es un encabezado -->
<p>Descubre las mejores ciudades para visitar este verano.</p>
<p class="subtitle">Más información</p> <!-- Tampoco es un encabezado -->
<p>Recomendaciones de transporte, alojamiento y comida.</p>
</div>
</body>
Explicación del problema detectado:
El problema aparece cuando una página utiliza elementos visuales como <div> o clases CSS para simular títulos, pero sin aplicar la semántica HTML correspondiente mediante etiquetas como <h1>, <h2>, <h3> o niveles inferiores. El lector de pantalla no puede identificar qué partes del texto representan secciones, subsecciones o apartados, lo que provoca que la persona usuaria reciba el contenido como un bloque continuo sin puntos de orientación.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Este problema afecta de forma directa a personas con discapacidad cognitiva que dependen de una jerarquía clara para comprender el contenido sin distracciones o confusión, y también a personas ciegas o con baja visión que utilizan lectores de pantalla para saltar entre encabezados y orientarse en la página. Los lectores de pantalla permiten navegar por niveles de encabezado, y cuando estos no existen o están mal definidos, el usuario queda desorientado porque no hay puntos de referencia que indiquen cambios temáticos. La falta de encabezados bien descritos también afecta a personas que escanean visualmente la información en busca de apartados específicos, ya que no encuentran un patrón claro para localizar aquello que buscan. En todos estos casos, la ausencia o mala calidad de los encabezados provoca barreras de comprensión, navegación lenta o desordenada, y pérdida de contexto dentro de la página.
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>
<h1>Blog de Viajes</h1>
<article class="post">
<h2>Guía de viaje por Europa</h2>
<p>Descubre las mejores ciudades para visitar este verano.</p>
<h3>Información adicional</h3>
<p>Recomendaciones de transporte, alojamiento y comida.</p>
</article>
</body>
Explicación de la solución aplicada:
La solución consiste en utilizar correctamente la jerarquía de encabezados HTML, asignando <h1> al título principal de la página y descendiendo progresivamente con <h2>, <h3> y niveles inferiores según la estructura lógica del contenido. Al aplicar estas prácticas, la página se vuelve más comprensible para todos los usuarios, se reduce la carga cognitiva y se facilita una navegación rápida y eficaz tanto para quienes utilizan ayudas técnicas como para quienes leen el contenido de forma visual.
