Principio 1/1.3 Adaptable/1.3.1-H

De WCAG Wiki

1.3.1-H. Asociación entre celdas

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • En las tablas de datos se deben asociar adecuadamente las celdas de encabezado con las celdas de datos.

Comprensión del criterio

Descripción resumida

En tablas complejas (más de un nivel de encabezados), es necesario asociar con codigo HTML correcto las celdas de encabezado con las celdas de datos mediante atributos como <scope>, <id> y <headers>, para garantizar que los productos de apoyo comprendan las relaciones entre datos.

Objetivo

Permitir que los lectores de pantalla anuncien correctamente los encabezados asociados a cada celda de datos, facilitando la interpretación de tablas complejas.

Importancia de cumplir el criterio

Sin la asociación correcta, los usuarios que dependen de tecnologías de apoyo no pueden entender la relación entre los encabezados y los datos, generando confusión y pérdida de información esencial.

Referencias WCAG

Recursos de apoyo

Consejos
  • Intentar simplificar la tabla antes de asociar manualmente las celdas
  • Asignar <ID> único a cada <TH> y referenciar en cada <TD>
  • Verificar asociaciones con herramientas y lector de pantalla

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar tablas complejas con múltiples encabezados.
  2. Paso 2. Usando la herramienta de inspección de código del navegador, comprobar que se utilicen los elementos necesarios para asociar adecuadamente las celdas de encabezado con las celdas de datos (ej. atributo <scope> o con los atributos de WAI-ARIA <rowheader> o <columnheader>).

Resultado esperado

Las celdas de encabezado están asociadas programáticamente con las celdas de datos, permitiendo interpretar correctamente las relaciones en la tabla.

Ejemplo

Tabla con un marcado HTML semantico adecuado. 

<th id="col1">Año</th>
<th id="col2">Ventas</th>
<td headers="col1 col2">2024 — 500 unidades</td>

Ejemplo con <scope>. 

<th scope="col">Año</th>
<th scope="col">Ventas</th>
<td>2024</td>
<td>500</td>

Otras herramientas de evaluación

  • Inspección del navegador: comprobar el codigo fuente que hay en elementos tabla
  • Lector de pantalla: (NVDA, JAWS, VoiceOver) Comprobar si al leer una tabla, se see de forma comprensible para el usuario, indicando a que dato de la columna corresponde el dato de la fila.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-H. Asociación entre celdas

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.1-H&oldid=3405»