2525UPSA1.3.1-Q-000

De WCAG Wiki

Edición de la página como formulario

1. Información básica

Id del criterio: 1.3.1 - Información y relaciones (Nivel: A)
Título del subcriterio: 1.3.1-Q
Universidad participante: UPSA
Curso académico: 2025-26

Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-Q



2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://www.w3.org/WAI/demos/bad/before/survey.html

2.1.2. Código HTML:

<p class="headline">Citylights Survey</p> <p class="headline"><font size="4">This Week's Survey: More city parks - a pain or a gain?</font></p>



Explicación del problema detectado:

Se están simulando encabezados mediante etiquetas de párrafo

y atributos de formato visual como class="headline" y . Aunque visualmente el texto aparece grande y destacado, no existe una estructura semántica real. Para un navegador o una tecnología asistiva, estos elementos son simples párrafos de texto plano sin jerarquía. Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas ciegas: Utilizan lectores de pantalla para navegar. Una de sus estrategias principales es saltar entre encabezados para entender de qué trata la página antes de leerla entera. Al ser párrafos, el lector no los reconoce como puntos de navegación, obligando al usuario a leer todo el documento línea por línea para encontrar el título. Personas con discapacidad cognitiva: Se benefician de estructuras claras. Si el usuario utiliza herramientas para simplificar la vista de la página (modos de lectura), estas herramientas fallarán al no encontrar una estructura de encabezados lógica. Barrera de Relación: No se establece una relación de jerarquía entre el título del formulario ("Citylights Survey") y las preguntas que contiene.


2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://www.w3.org/WAI/demos/bad/after/survey.html


2.2.2 Código HTML:

<h1>Citylights Survey</h1> <h2 class="header">This Week's Survey: More city parks - a pain or a gain?</h2>



Explicación de la solución aplicada:
Uso de encabezados h1 y h2 para una vista más clara y accesible de los titulos.