2526UFV1.1.3-F-001

De WCAG Wiki
Revisión del 18:33 11 ene 2026 de 202526UFV21 (discusión | contribs.) (El ejemplo incorrecto es inaccesible al usar solo espacios visuales sin estructura, mientras que el correcto usa etiquetas <table> semánticas que permiten a los lectores de pantalla interpretar y navegar los datos correctamente.)
(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-F
Universidad participante: UFV
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-F


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:
No se ha indicado ningún enlace.

2.1.2. Código HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Incorrect Example 1.1.3-F</title> </head> <body> <h3>Lista de Precios con uso incorrecto</h3> <pre> Producto Precio Stock ------------------------------ Teclado 20€ 50 Ratón 10€ 30 Monitor 150€ 10 </pre> </body> </html>



Explicación del problema detectado:

El problema principal es que la información se ha falseado visualmente para parecer una tabla utilizando únicamente espacios en blanco y caracteres de texto, en lugar de emplear las etiquetas HTML correspondientes (, ,
,
). El navegador interpreta este contenido simplemente como un bloque de texto plano o preformateado, sin reconocer la existencia de filas, columnas o celdas de datos.

​

Esta carencia impide que los productos de apoyo, como los lectores de pantalla, puedan transmitir la relación lógica entre los datos y sus encabezados. Un usuario con discapacidad visual no podrá navegar por las columnas ni consultar el encabezado de una celda específica, en su lugar, escuchará una secuencia lineal y desordenada de texto y números, lo que hace incomprensible la información y viola el criterio 1.3.1-F sobre información y relaciones. ​

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Este problema afecta principalmente a las personas ciegas o con baja visión que utilizan lectores de pantalla. Al no existir una estructura de la tabla, estas personas se enfrentan a una barrera de comprensión, ya que no pueden usar los comandos de navegación habituales para moverse entre celdas o solicitar que se les lea el encabezado de la columna actual, perdiendo totalmente el contexto. ​

También afecta a personas con discapacidades cognitivas y usuarios de dispositivos móviles o pantallas pequeñas. Si el contenido se redimensiona o se hace zoom, la alineación visual basada en espacios se rompe y el texto se descoloca, haciendo que la tabla visual ya no se vea como es debido y la información se vuelva ilegible.

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.


2.2.2 Código HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Correct Example 1.1.3-F</title> </head> <body> <h3>Lista de Precios (Bien hecha)</h3> <table border="1"> <caption>Inventario de Periféricos</caption> <tr> <th scope="col">Producto</th> <th scope="col">Precio</th> <th scope="col">Stock</th> </tr> <tr> <td>Teclado</td> <td>20€</td> <td>50</td> </tr> <tr> <td>Ratón</td> <td>10€</td> <td>30</td> </tr> <tr> <td>Monitor</td> <td>150€</td> <td>10</td> </tr> </table> </body> </html>



Explicación de la solución aplicada:

Este ejemplo se considera accesible porque utiliza la estructura semántica de HTML para definir tablas de datos, empleando las etiquetas , para las filas,
para los encabezados y para las celdas de datos. Así los navegadores y productos de apoyo reconocen inmediatamente que se trata de una tabla estructurada y no de texto decorativo, permitiendo establecer relaciones claras entre cada dato y su encabezado correspondiente.

​





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UFV1.1.3-F-001&oldid=4283»