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
b) Enlace de donde se ha obtenido la imagen:
https://www.marca.com/futbol/primera-division/calendario.html#jornada21
2.1.2. Código HTML:
<table class="tabla-calendario">
<tr>
<td class="equipo-local">Real Madrid</td>
<td class="resultado">2 - 1</td>
<td class="equipo-visitante">Barcelona</td>
</tr>
</table>
Explicación del problema detectado:
La tabla de resultados utiliza celdas de datos estándar (td) para presentar información que debería ser estructural. No hay encabezados (th) que indiquen qué es el local, el visitante o el resultado, dificultando la navegación por filas para ciegos.
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.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://es.wikipedia.org/wiki/Anexo:Tabla_estad%C3%ADstica_de_la_Copa_Mundial_de_F%C3%BAtbol
2.2.2 Código HTML:
<table class="wikitable sortable">
<thead>
<tr>
<th scope="col">Pos.</th>
<th scope="col">Selección</th>
<th scope="col">Temp.</th>
</tr>
</thead>
</table>
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, el software lee automáticamente el encabezado asociado, proporcionando el contexto necesario para entender el dato.
