25261.3.1-H-000

De WCAG Wiki

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-H
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-H



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.boe.es/boe/dias/2024/01/02/

2.1.2. Código HTML:

<table border="1"> <tr> <td>Sección</td> <td>Departamento</td> <td>Título</td> <td>Referencia</td> </tr> <tr> <td>II</td> <td>Ministerio de Asuntos Exteriores</td> <td>Resolución de 21 de diciembre de 2023</td> <td>BOE-A-2024-87</td> </tr> <tr> <td>II</td> <td>Ministerio de la Presidencia</td> <td>Orden de 22 de diciembre de 2023</td> <td>BOE-A-2024-88</td> </tr> </table>



Explicación del problema detectado:

La página del BOE presenta un listado de disposiciones con información estructurada que actúa como una tabla de datos. Sin embargo, no existe una asociación semántica explícita entre los encabezados y los datos mediante elementos de tabla (, scope o headers). Esto provoca que las tecnologías de apoyo no puedan identificar correctamente la relación entre los distintos campos de información, incumpliendo el subcriterio 1.3.1-H.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Este problema supone una barrera grave para personas con discapacidad visual total o sordoceguera que utilizan lectores de pantalla, ya que la información se presenta de forma lineal y sin contexto estructural, impidiendo comprender correctamente cada disposición publicada.


2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://www.ine.es/jaxiT3/Datos.htm?t=2853


2.2.2 Código HTML:

<table border="1"> <caption>Población por sexo y edad</caption> <thead> <tr> <th scope="col">Edad</th> <th scope="col">Hombres</th> <th scope="col">Mujeres</th> </tr> </thead> <tbody> <tr> <th scope="row">0-14</th> <td>3.200.000</td> <td>3.100.000</td> </tr> <tr> <th scope="row">15-64</th> <td>16.500.000</td> <td>16.800.000</td> </tr> <tr> <th scope="row">65+</th> <td>4.200.000</td> <td>5.000.000</td> </tr> </tbody> </table>



Explicación de la solución aplicada:

Este es un ejemplo accesible porque la tabla utiliza correctamente celdas de encabezado () para identificar tanto las columnas como las filas. Los atributos scope="col" y scope="row" permiten asociar explícitamente cada celda de datos con su encabezado correspondiente, facilitando que los lectores de pantalla interpreten correctamente la estructura y el contenido de la tabla. De esta forma, se cumple el subcriterio 1.3.1-H de las WCAG.