Técnica HTML WCAG 2.2

H63Usar el atributo scope para asociar las celdas de encabezado con las celdas de datos en las tablas de datos

En resumen

Esta técnica explica cómo añadir el atributo scope (con los valores row, col, rowgroup o colgroup) a las celdas th de una tabla de datos para indicar si cada encabezado se aplica a una fila, a una columna o a un grupo de ellas. Es especialmente útil cuando los encabezados no están en la primera fila o columna, ya que permite a los lectores de pantalla anunciar el encabezado correcto al recorrer cada celda. Para tablas complejas, considere en su lugar la técnica H43 con id y headers.

Ejemplo práctico

Un horario de actividades de un polideportivo municipal es una tabla de datos simple en la que el dato clave de cada fila (la actividad) no está en la primera columna, sino en la segunda, después del número de orden.

Así no: Encabezado de fila marcado como celda de datos

El nombre de la actividad está en un td con strong, así que el navegador no lo trata como encabezado de fila. Al moverse por la columna «Hora» con un lector de pantalla se oye solo «19:30», sin saber a qué actividad corresponde.

<style>
  table { border-collapse: collapse; }
  caption { font-weight: bold; text-align: left; margin-bottom: 6px; }
  th, td { border: 1px solid #767676; padding: 4px 10px; text-align: left; }
</style>
<table>
  <caption>Horario de actividades dirigidas</caption>
  <tr><th>N.º</th><th>Actividad</th><th>Día</th><th>Hora</th></tr>
  <tr><td>1</td><td><strong>Pilates</strong></td><td>Lunes</td><td>18:00</td></tr>
  <tr><td>2</td><td><strong>Yoga</strong></td><td>Martes</td><td>19:30</td></tr>
  <tr><td>3</td><td><strong>Natación infantil</strong></td><td>Miércoles</td><td>17:00</td></tr>
</table>

Captura de pantalla del ejemplo incorrecto: Encabezado de fila marcado como celda de datos — Así se ve el ejemplo incorrecto.

La demostración contiene, a propósito, el error de accesibilidad que se explica.

Así sí: th con scope="col" y scope="row"

Las celdas de la primera fila son th scope="col" y la actividad de cada fila pasa a ser th scope="row". Así cada dato queda asociado a su columna y a su actividad aunque el encabezado de fila no esté en la primera columna.

<style>
  table { border-collapse: collapse; }
  caption { font-weight: bold; text-align: left; margin-bottom: 6px; }
  th, td { border: 1px solid #767676; padding: 4px 10px; text-align: left; }
</style>
<table>
  <caption>Horario de actividades dirigidas</caption>
  <tr><th scope="col">N.º</th><th scope="col">Actividad</th><th scope="col">Día</th><th scope="col">Hora</th></tr>
  <tr><td>1</td><th scope="row">Pilates</th><td>Lunes</td><td>18:00</td></tr>
  <tr><td>2</td><th scope="row">Yoga</th><td>Martes</td><td>19:30</td></tr>
  <tr><td>3</td><th scope="row">Natación infantil</th><td>Miércoles</td><td>17:00</td></tr>
</table>

Pruébelo aquí:

Cómo comprobarlo

Revisión del código

Para cada tabla de datos, identificar qué celdas actúan como encabezado de columna y de fila.
Comprobar que son th y que, cuando el encabezado de fila no está en la primera columna o la tabla no es trivial, llevan scope con el valor row, col, rowgroup o colgroup.

Lector de pantalla (NVDA o VoiceOver)

Entrar en la tabla (tecla T en NVDA) y situarse en la celda «18:00».
Bajar por la columna con Ctrl+Alt+flecha abajo (NVDA) o VO+flecha abajo (VoiceOver) y comprobar que en cada celda se anuncia la actividad de la fila.
Moverse en horizontal con Ctrl+Alt+flecha derecha y comprobar que se anuncia el encabezado de columna.

Debería anunciar: Al bajar a la celda de la hora del yoga, algo como «Yoga, fila 3, 19:30» (la redacción exacta depende del lector y la versión)

Herramientas del navegador

Abrir las herramientas de desarrollo (F12), pestaña Accesibilidad, y seleccionar la celda de la actividad.
Verificar que su función es rowheader y que las de la primera fila son columnheader.

Validación automática

axe DevTools comprueba con scope-attr-valid que los valores de scope son válidos y con th-has-data-cells que los th tienen celdas asociadas, pero no detecta que la actividad debería ser un encabezado de fila.
Una celda de datos que hace de encabezado solo se descubre revisando la tabla a mano.

Errores frecuentes en auditorías

Encabezados de columna o de fila hechos con td y negrita (strong, b o CSS) en lugar de th.
Escribir scope="column" o scope="fila", valores que no existen y que el navegador ignora.
Tablas con encabezados de varios niveles o celdas combinadas resueltas solo con scope, cuando necesitan id y headers o dividirse en tablas más simples.
Usar scope en celdas td, un uso obsoleto en HTML que no garantiza la asociación.

Técnica completa: traducción al español del texto del W3C

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es asociar las celdas de encabezado con las celdas de datos en tablas complejas usando el atributo scope. El atributo scope puede usarse para aclarar el alcance de cualquier celda que actúe como encabezado. El atributo scope identifica si la celda es un encabezado de una fila, de una columna o de un grupo de filas o de columnas. Los valores row, col, rowgroup y colgroup identifican, respectivamente, estos posibles alcances.

Esta técnica puede usarse en tablas de datos simples en las que el encabezado no está en la primera fila o columna, como la del ejemplo 1.

En las tablas simples que tienen los encabezados en la primera fila o columna, basta con usar los elementos th sin scope.

En las tablas complejas, use id y headers como se indica en Usar los atributos id y headers para asociar las celdas de datos con las celdas de encabezado en las tablas de datos.

A algunos usuarios puede resultarles más fácil trabajar con varias tablas simples que con una sola tabla más compleja. Los autores pueden plantearse si es posible convertir las tablas complejas en una o varias tablas simples.

Ejemplos

Un horario simple

En el siguiente ejemplo, la primera columna contiene los números de orden de las filas de la tabla, y la segunda columna contiene el valor clave de la fila. Por tanto, las celdas de la segunda columna pueden usar scope="row". Las celdas de la primera fila también se marcan con td y usan scope="col".

<table>
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <th scope="col">Name</th>
    <th scope="col">Phone Number</th>
    <th scope="col">City</th>
  </tr>
  <tr>
    <td>1.</td>
    <th scope="row">Charlotte Smith</th>
    <td>412-212-5421</td>
    <td>Pittsburgh</td>
  </tr>
  <tr>
    <td>2.</td>
    <th scope="row">Joetta Frere</th>
    <td>410-306-5400</td>
    <td>Baltimore</td>
  </tr>
  <tr>
    <td>3.</td>
    <th scope="row">David Walls</th>
    <td>281-511-6600</td>
    <td>New York</td>
  </tr>
</table>

Pruebas

Procedimiento

Para cada tabla de datos:

Comprobar que todos los elementos th tienen un atributo scope.
Comprobar que todos los atributos scope tienen el valor row, col, rowgroup o colgroup.

Resultados esperados

Todas las comprobaciones anteriores son verdaderas.

Recursos

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 H63 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.