Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2 obsoleta

H73Resumir las tablas de datos con el atributo summary

Nombre oficial en el W3C: Usar el atributo summary del elemento table para ofrecer una visión general de las tablas de datos

Técnica obsoleta: el W3C ya no la recomienda. |

En pocas palabras

Técnica obsoleta. El atributo summary de table daba a los lectores de pantalla una explicación invisible de cómo estaba organizada una tabla compleja. El HTML actual ya no lo admite y muchos lectores lo ignoran. Hoy esa explicación se pone en el caption o en un texto visible junto a la tabla, que sirve a todo el mundo.

Por qué es importante

En una tabla compleja, con varios niveles de encabezados, quien usa un lector de pantalla no ve la forma de la tabla. Una frase que explique cómo está organizada le ahorra mucho tiempo.

El atributo summary nació con esa idea, pero solo lo oían quienes usan lector de pantalla. Además, ya no es HTML válido y su soporte no está garantizado. Una explicación visible ayuda también a personas con dificultades de comprensión.

Cómo se hace

  1. No use summary en páginas nuevas.
  2. Dé a la tabla un título con <caption>.
  3. Si la tabla necesita explicación, añádala dentro del caption o en un párrafo justo antes de la tabla.
  4. Si la explicación va en un párrafo aparte, puede unirla a la tabla con aria-describedby.
  5. Explique cómo se lee la tabla, sin repetir sus datos: «Las columnas son trimestres; las filas, distritos».

Cómo comprobarlo

  1. Busque summary= en el código de las tablas. Si aparece, pase su texto a un caption o a un párrafo visible.
  2. Compruebe que las tablas complejas tienen una explicación visible de cómo se leen.
  3. Pase el validador del W3C (validator.w3.org): avisa de que summary está obsoleto.

Ejemplo

Alternativa actual: título y explicación breve dentro del caption, visibles para todos.

<table>
  <caption>
    Solicitudes de ayudas por distrito, 2026
    <span>Filas: distritos. Columnas: trimestres. Última fila: totales.</span>
  </caption>
  <tr>
    <th scope="col">Distrito</th>
    <th scope="col">1.er trimestre</th>
    <th scope="col">2.º trimestre</th>
  </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 H73 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 4.01, XHTML 1.x

Descripción

El objetivo de esta técnica es proporcionar una breve visión general de cómo se han organizado los datos en una tabla o una breve explicación de cómo navegar por ella. El atributo summary del elemento table pone esta información a disposición de las personas que usan lectores de pantalla; la información no se muestra visualmente.

El summary es útil cuando la tabla tiene una estructura compleja (por ejemplo, cuando hay varios conjuntos de encabezados de fila o de columna, o cuando hay varios grupos de columnas o de filas). El summary también puede ser de ayuda en tablas de datos sencillas que contienen muchas columnas o filas de datos.

El atributo summary puede utilizarse tanto si la tabla incluye un elemento caption como si no. Si se usan ambos, el summary no debería duplicar el caption.

En HTML5 el atributo summary está obsoleto. Las tecnologías de asistencia pueden seguir admitiendo el atributo o no. Los autores deberían considerar alternativas y usarlo únicamente con precaución.

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 codificación de separar la presentación del contenido. No obstante, si se utiliza una tabla de maquetación, el atributo summary no se usa o es nulo. El propósito de una tabla de maquetación es simplemente controlar la colocación del contenido; la tabla en sí es «transparente» para el usuario. Un summary «rompería» esta transparencia al llamar la atención sobre la tabla. Un summary nulo (summary="") en las tablas de maquetación es aceptable. Consulte F46 para más detalles.

Ejemplos

Una tabla de datos con summary pero sin caption

Este ejemplo muestra un horario de autobuses. El número de línea y el sentido se incluyen en el summary, junto con información sobre cómo usar el horario.

<table summary="Schedule for Route 7 going downtown. Service begins 
at 4:00 AM and ends at midnight. Intersections are listed in the top row. 
Find the intersection closest to your starting point or destination, then read 
down that column to find out what time the bus leaves that intersection.">
  <tr>
    <th scope="col">State & First</th>
    <th scope="col">State & Sixth</th>
    <th scope="col">State & Fifteenth</th>
    <th scope="col">Fifteenth & Morrison</th>
  </tr>
  <tr>
    <td>4:00</td>
    <td>4:05</td>
    <td>4:11</td>
    <td>4:19</td>
  </tr>
  …
</table>

Una tabla de datos con summary y caption

En este ejemplo se utilizan tanto un atributo summary como un elemento caption. El caption identifica la línea de autobús. El summary ayuda a los usuarios ciegos a entender cómo usar el horario. Los lectores de pantalla leen el caption, seguido del summary.

<table summary="Intersections are listed in row 1. 
Find the intersection closest to your starting point 
or destination, then read down that column to find 
out what time the bus leaves that intersection.  
Service begins at 4:00 AM and ends at midnight.">
  <caption>Route 7 Downtown (Weekdays)</caption>
…
</table>

Pruebas

Procedimiento

Para cada tabla de datos:

  1. Si hay un summary, comprobar que el atributo summary describe la organización de la tabla o explica cómo usar la tabla.
  2. Si la tabla de datos tiene tanto un atributo summary como un elemento caption, comprobar que el summary no duplica el caption.

Resultados esperados

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

Recursos

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