2525UPSA1.3.1-Q-000

De WCAG Wiki
Revisión del 16:41 18 dic 2025 de 202526UPSA07 (discusión | contribs.) (Uso de etiquetas de párrafo (<p>) para simular encabezados visuales, lo que oculta la estructura jerárquica a las tecnologías de asistencia. Esta práctica impide la navegación rápida y dificulta gravemente la orientación de personas ciegas o con discapacidad cognitiva.)
(difs.) ← Revisión anterior | Revisión actual (difs.) | Revisión siguiente → (difs.)

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.