2526UFV2.4.6-A-001

De WCAG Wiki

Edición de la página como formulario

1. Información básica

Id del criterio: 2.4.6 - Encabezados y etiquetas (Nivel: AA)
Título del subcriterio: 2.4.6-A
Universidad participante: UFV
Curso académico: 2025-26

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

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:

<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
o clases CSS para simular títulos, pero sin aplicar la semántica HTML correspondiente mediante etiquetas como

,

,

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.