Técnica HTML WCAG 2.2

H43Unir celdas y encabezados con id y headers en tablas complejas

Nombre oficial en el W3C: Usar los atributos id y headers para asociar las celdas de datos con las celdas de encabezado en las tablas de datos

En pocas palabras

En algunas tablas, cada dato depende de varios encabezados a la vez. Por ejemplo, un presupuesto por año y por área. En esos casos se da un id a cada celda de encabezado. Después, cada celda de datos indica en su atributo headers los id de todos sus encabezados.

Por qué es importante

Quien ve la tabla relaciona cada número con su fila y su columna mirando. El lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) necesita que esa relación esté en el código.

En tablas sencillas basta con <th> y scope. Pero si hay encabezados en varios niveles o celdas combinadas, el lector puede leer un dato sin decir a qué se refiere. Con headers, anuncia todos sus encabezados: «2026, Cultura, Gasto previsto, 120.000 €».

Cómo se hace

Úselo solo en tablas de datos complejas. Para tablas sencillas, prefiera <th> con scope.
Marque cada encabezado con <th> y dele un id único en la página.
En cada celda de datos <td>, añada headers con los id de sus encabezados, separados por espacios.
Incluya todos los encabezados que afectan a la celda: el de su fila, el de su columna y los de grupo.
Si puede, simplifique la tabla o divídala en varias. Una tabla sencilla es más fácil para todos.

Cómo comprobarlo

Con las herramientas del navegador (F12), compruebe que cada id de encabezado es único.
Revise que todos los valores de headers corresponden a un id que existe.
Compare con la tabla visible: cada celda debe citar todos sus encabezados, y solo esos.
Con un lector de pantalla, muévase por las celdas (Ctrl+Alt+flechas en NVDA) y escuche qué encabezados anuncia.

Ejemplo

Presupuesto municipal con un encabezado de grupo por año y dos columnas en cada año.

<table>
  <tr>
    <td></td>
    <th id="a26" colspan="2">2026</th>
  </tr>
  <tr>
    <td></td>
    <th id="prev">Previsto</th>
    <th id="real">Gastado</th>
  </tr>
  <tr>
    <th id="cult">Cultura</th>
    <td headers="a26 prev cult">120.000 €</td>
    <td headers="a26 real cult">98.500 €</td>
  </tr>
</table>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica H43 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica H43 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.