Técnica HTML WCAG 2.2

H39Poner el título de las tablas de datos en un elemento caption

Nombre oficial en el W3C: Usar elementos caption para asociar títulos a las tablas de datos

En pocas palabras

Cuando una tabla de datos lleva un título, ese título debe ir en un elemento caption dentro de la propia tabla. Así queda unido a ella en el código. El lector de pantalla lo anuncia al entrar en la tabla y la persona sabe qué datos va a encontrar.

Por qué es importante

Un título escrito como párrafo suelto encima de la tabla parece unido a ella solo a la vista. Para el lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) son dos cosas separadas.

Con <caption>, al llegar a la tabla el lector dice su título. Esto ayuda mucho en páginas con varias tablas, como unos horarios o unos presupuestos: la persona sabe en cuál está sin recorrerla entera.

Cómo se hace

Use <caption> solo en tablas de datos, no en tablas que se usan para colocar elementos en la página.
Póngalo justo después de la etiqueta de apertura <table>, como primer elemento.
Escriba un título corto que diga qué contiene la tabla: «Horario de la piscina municipal, invierno 2026».
No repita el mismo título en un párrafo o encabezado justo encima de la tabla.
Cambie su aspecto con CSS si lo necesita. No lo oculte: el título también ayuda a quien ve la tabla.

Cómo comprobarlo

Localice las tablas de datos de la página con las herramientas del navegador (F12).
Si tienen un título visible, compruebe que está en un <caption> y que es el primer hijo de <table>.
Confirme que el texto del caption identifica bien la tabla.
Con un lector de pantalla, salte a la tabla (tecla T en NVDA) y escuche si anuncia el título.

Ejemplo

Tabla de horarios de una piscina municipal con su título en caption.

<table>
  <caption>Horario de la piscina municipal, invierno 2026</caption>
  <tr>
    <th scope="col">Día</th>
    <th scope="col">Apertura</th>
    <th scope="col">Cierre</th>
  </tr>
  <tr>
    <td>Lunes a viernes</td><td>8:00</td><td>21:00</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 H39 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

Tablas de datos en HTML

Descripción

El objetivo de esta técnica es asociar por software los títulos de las tablas de datos cuando dichos títulos se muestran en la presentación. El caption de una table es un identificador de la tabla y actúa como su título o encabezado.

El elemento caption es el marcado adecuado para ese texto y garantiza que el identificador de la tabla permanezca asociado a ella, también visualmente (de forma predeterminada). Además, usar el elemento caption permite que los programas lectores de pantalla naveguen directamente al título de una tabla cuando existe.

Aunque las WCAG 2 no prohíben el uso de tablas de maquetación, se recomiendan las maquetaciones basadas en CSS para conservar el significado semántico definido de los elementos table de HTML y para ajustarse a la práctica de programación de separar la presentación del contenido. Si una tabla se usa para maquetar, no se utiliza el elemento caption. La finalidad de una tabla de maquetación es simplemente controlar la colocación del contenido; la propia tabla es «transparente» para el usuario. Un caption «rompería» esa transparencia al llamar la atención sobre la tabla. Consulte F46 para más detalles.

Ejemplos

Un calendario de citas con un `caption`

<table>
  <caption>Schedule for the week of March 6</caption>
  ...
</table>

Pruebas

Procedimiento

Para cada tabla de datos que tenga contenido presentado como título:

Comprobar que la tabla incluye un elemento caption.
Comprobar que el texto que da título a la tabla está incluido en el elemento caption.

Resultados esperados

Las comprobaciones n.º 1 y n.º 2 son verdaderas.

Recursos

HTML: el elemento caption.

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