Diferencia entre revisiones de «2526UPSA1.3.1-F-001»
Página creada con «{{ActividadWCAG |id_criterio=1.3.1 - Información y relaciones (Nivel: A) |id_subcriterio=1.3.1-F |id_universidad=UPSA |curso_academico=2025-26 |enlace=https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-F |noa_barrera_evidencia_html=<nowiki> <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>…» |
Sin resumen de edición |
||
| Línea 5: | Línea 5: | ||
|curso_academico=2025-26 | |curso_academico=2025-26 | ||
|enlace=https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-F | |enlace=https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-F | ||
|noa_barrera_evidencia_img=2526UPSA1.3.1-F-001.png | |||
|noa_barrera_evidencia_url=https://www.marca.com/futbol/primera-division/calendario.html#jornada21 | |||
|noa_barrera_evidencia_html=<nowiki> | |noa_barrera_evidencia_html=<nowiki> | ||
<table | <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> | </table> | ||
</nowiki> | </nowiki> | ||
|noa_barrera_explicacion= | |noa_barrera_explicacion=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. | ||
|noa_barrera_usuarios=Personas afectadas: Principalmente usuarios ciegos o con baja visión que utilizan lectores de pantalla. | |||
|acc_barrera_evidencia_img=2526UPSA1.3.1-F-0010.png | |||
|noa_barrera_usuarios=Personas afectadas: Principalmente usuarios ciegos o con baja visión que utilizan lectores de pantalla | |acc_barrera_evidencia_url=https://es.wikipedia.org/wiki/Anexo:Tabla_estad%C3%ADstica_de_la_Copa_Mundial_de_F%C3%BAtbol | ||
|acc_barrera_evidencia_html=<nowiki> | |||
<table class="wikitable sortable"> | |||
<thead> | |||
<tr> | |||
<th scope="col">Pos.</th> | |||
<th scope="col">Selección</th> | |||
|acc_barrera_evidencia_html=<table | <th scope="col">Temp.</th> | ||
<tr> | </tr> | ||
</thead> | |||
</table> | |||
</nowiki> | |||
</ | |||
</ | |||
|acc_barrera_explicacion=En esta solución se ha utilizado el marcado semántico correcto para tablas de datos. | |acc_barrera_explicacion=En esta solución se ha utilizado el marcado semántico correcto para tablas de datos. | ||
| Línea 51: | Línea 37: | ||
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. | 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 | 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. | ||
}} | }} | ||
Revisión actual - 21:26 21 ene 2026
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.
