Técnica HTML WCAG 2.2

H43Usar los atributos id y headers para asociar las celdas de datos con las celdas de encabezado en las tablas de datos

En resumen

En tablas de datos complejas, donde una celda depende de varios encabezados de fila o de columna, esta técnica pide dar un id a cada celda de encabezado y listar esos id en el atributo headers de cada celda de datos. Así los lectores de pantalla pueden anunciar todos los encabezados que corresponden a cada dato, incluso cuando th y scope no bastan. No debe aplicarse a tablas de maquetación.

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es asociar cada celda de datos (de una tabla de datos) con los encabezados que le corresponden. Esta técnica añade un atributo headers a cada celda de datos (elemento td). También añade un atributo id a toda celda que se use como encabezado de otras celdas. El atributo headers de una celda contiene una lista de los atributos id de las celdas de encabezado asociadas. Si hay más de un id, se separan con espacios.

Esta técnica se usa cuando las celdas de datos están asociadas a más de un encabezado de fila o de columna. Permite que los lectores de pantalla lean los encabezados asociados a cada celda de datos cuando las relaciones son demasiado complejas para identificarlas solo con el elemento th o con el elemento th y el atributo scope. El uso de esta técnica también hace que estas relaciones complejas sean perceptibles cuando cambia el formato de presentación.

Esta técnica no se recomienda para las tablas de maquetación, ya que su uso implica una relación entre celdas que carece de sentido cuando las tablas se usan para maquetar.

Ejemplos

Una tabla con varias filas de encabezados

<table>
  <tr>
    <th rowspan="2" id="h">Homework</th>
    <th colspan="3" id="e">Exams</th>
    <th colspan="3" id="p">Projects</th>
  </tr>
  <tr>
    <th id="e1" headers="e">1</th>
    <th id="e2" headers="e">2</th>
    <th id="ef" headers="e">Final</th>
    <th id="p1" headers="p">1</th>
    <th id="p2" headers="p">2</th>
    <th id="pf" headers="p">Final</th>
  </tr>
  <tr>
    <td headers="h">15%</td>
    <td headers="e e1">15%</td>
    <td headers="e e2">15%</td>
    <td headers="e ef">20%</td>
    <td headers="p p1">10%</td>
    <td headers="p p2">10%</td>
    <td headers="p pf">15%</td>
  </tr>
</table>

Pruebas

Procedimiento

Comprobar si se trata de una tabla de maquetación: determinar si el contenido guarda relación con otro contenido tanto de su columna como de su fila. Si la respuesta es «no», la tabla es una tabla de maquetación. Si la respuesta es «sí», la tabla es una tabla de datos.
En las tablas de datos, comprobar que toda celda asociada a más de un encabezado de fila o de columna contiene un atributo headers que enumera el id de todos los encabezados asociados a esa celda.
En las tablas de datos en las que alguna celda contiene un atributo id o headers:
1. Comprobar que cada id enumerado en el atributo headers de la celda de datos coincide con el atributo id de una celda que se usa como elemento de encabezado.
2. Comprobar que el atributo headers de una celda de datos contiene el atributo id de todos los encabezados asociados a dicha celda.
3. Comprobar que todos los id son únicos (es decir, que no hay dos elementos en la página con el mismo id).

Resultados esperados

Si la tabla es una tabla de maquetación, ninguna celda contiene atributos headers ni id.
Si la tabla es una tabla de datos y alguna celda contiene un atributo id, las comprobaciones n.º 3.1, n.º 3.2 y n.º 3.3 son verdaderas.
Si la tabla es una tabla de datos y alguna celda está asociada a más de un encabezado de fila o de columna, la comprobación n.º 2 es verdadera.

Recursos

HTML: atributos comunes a los elementos td y th.

Cómo lo comprobamos en ADDAW

En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica H43 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.