Técnica HTML WCAG 2.2

H51Usar marcado de tabla para presentar información tabular

En resumen

Esta técnica indica que, cuando la información tiene relaciones en dos dimensiones (filas y columnas), debe marcarse con una tabla HTML real (table, tr, th y td) en lugar de simularla con tabulaciones, espacios o el elemento pre. Así los lectores de pantalla pueden anunciar los encabezados de cada celda y las relaciones se conservan aunque cambie la presentación. Úsela en horarios, listados de precios, calendarios y cualquier dato tabular.

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es presentar la información tabular de un modo que conserve las relaciones existentes dentro de la información, incluso cuando los usuarios no pueden ver la tabla o se cambia el formato de presentación. La información se considera tabular cuando existen relaciones lógicas entre texto, números, imágenes u otros datos en dos dimensiones (vertical y horizontal). Estas relaciones se representan mediante columnas y filas, y las columnas y las filas deben ser reconocibles para que las relaciones lógicas puedan percibirse.

El uso del elemento table con los elementos hijos tr, th y td hace que estas relaciones sean perceptibles. Técnicas como insertar tabulaciones para crear columnas o usar el elemento pre son puramente visuales, y las relaciones lógicas que solo se sugieren visualmente se pierden si el usuario no puede ver la tabla o si se cambia la presentación visual.

Las tablas simples suelen tener un solo nivel de encabezados para las columnas y/o un solo nivel de encabezados en las filas.

Normalmente, en las tablas simples, la celda de la fila 1, columna 1 está vacía o describe el contenido de toda la columna 1. Las celdas de la fila 1 no están vacías (es decir, contienen «encabezados de columna»), describen el contenido de toda la columna y permiten al lector distinguir la diferencia de significado entre esa columna y las demás.

Las celdas de la columna 1 normalmente no están vacías; suelen contener «encabezados de fila» que describen el contenido de toda la fila y permiten al lector distinguir la diferencia de significado entre esa fila y las demás. En caso contrario, la columna 1 contendría simplemente datos.

Ejemplos

Un horario marcado como tabla de datos simple con encabezados de columna y de fila

Este ejemplo usa marcado para una tabla de datos simple. La primera fila muestra los días de la semana. Los intervalos de tiempo se muestran en la primera columna. Estas celdas están marcadas con el elemento th. Esto identifica los días de la semana como encabezados de columna y los intervalos de tiempo como encabezados de fila.

Los lectores de pantalla leen la información de encabezado que va cambiando a medida que el usuario se desplaza por la tabla. Así, cuando los usuarios de lector de pantalla se mueven a izquierda o derecha a lo largo de una fila, oirán el día de la semana (el encabezado de columna) seguido de la cita (si la hay). Oirán el intervalo de tiempo cuando se muevan hacia arriba o hacia abajo dentro de la misma columna.

<table>
  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
  </tr>
  <tr>
    <th scope="row">8:00-9:00</th>
    <td>Meet with Sam</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th scope="row">9:00-10:00</th>
    <td></td>
    <td></td>
    <td>Doctor Williams</td>
    <td>Sam again</td>
    <td>Leave for San Antonio</td>
  </tr>
</table>

Pruebas

Procedimiento

Comprobar si existe información tabular.
Para cada aparición de información tabular:
1. Comprobar que se usa marcado de tabla con, al menos, los elementos table, tr, th y td.

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