2526UPSA1.3.1-F-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_1/1.3_Adaptable/1.3.1-F
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:
<table border="1">
<tr>
<td><b>Producto</b></td>
<td><b>Precio</b></td>
</tr>
<tr>
<td>Manzanas</td>
<td>2€</td>
</tr>
<tr>
<td>Naranjas</td>
<td>3€</td>
</tr>
</table>
Explicación del problema detectado:
El problema es que no existe una asociación semántica o programática entre las celdas de encabezado (títulos de columna) y las celdas de datos que hay debajo. Aunque un usuario que ve la pantalla entiende que la primera fila son los títulos, el navegador y las tecnologías de asistencia no reciben esa información estructural.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas afectadas: Principalmente usuarios ciegos o con baja visión que utilizan lectores de pantalla (como JAWS, NVDA o VoiceOver).
Barreras:
Pérdida de contexto: Al navegar por la tabla, el lector de pantalla leerá el contenido de la celda (ej. "25,00 €"), pero no podrá anunciar automáticamente a qué columna pertenece (ej. "Precio").
Dificultad de comprensión: En tablas grandes o complejas, el usuario tiene que memorizar el orden de las columnas para saber qué dato está escuchando, lo cual genera una carga cognitiva muy alta y hace la información inaccesible.
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:
Producto
Precio
Manzanas
2€
Naranjas
3€
Explicación de la solución aplicada:
En esta solución se ha utilizado el marcado semántico correcto para tablas de datos.
Atributo scope: Se ha añadido el atributo scope="col" a estos encabezados. Esto indica explícitamente a los navegadores y productos de apoyo que dicho encabezado aplica a toda la columna verticalmente.
Gracias a este código, cuando un usuario de lector de pantalla navega por las celdas de datos (por ejemplo, "2€"), el software lee automáticamente el encabezado asociado ("Precio"), proporcionando el contexto necesario para entender el dato .
