Descripción de las tablas en HTML5. Alternativa a "summary"

Resumen:

Las tablas que se incluyen en una página web deben cumplir ciertos requisitos de accesibilidad. Uno de estos requisitos es que la tabla tenga una descripción. La descripción se incluía con el atributo summary del elemento <table>. Sin embargo, el atributo summary está obsoleto en HTML5.

Las WCAG 2.1 solo indican al respecto:

En HTML5, el atributo "summary" está obsoleto. Los productos de apoyo pueden o no continuar admitiendo el atributo. Los autores deben considerar alternativas y solo usarlo con precaución.

H73: Using the summary attribute of the table element to give an overview of data tables

Este artículo explica cuál puede ser esta alternativa, tratando los siguientes temas:

• cómo se incluye la descripción de la tabla en HTML5;
• si es obligatorio que el párrafo con la descripción esté antes de la tabla;
• por qué es importante que las tablas tengan descripción;
• la diferencia entre la descripción y el caption;
• cómo lee el lector de pantalla la descripción y el caption;
• cómo redactar descripciones útiles, con ejemplos;
• cómo incluir la descripción de las tablas a través del gestor de contenidos;
• qué dicen las WCAG 2.1 sobre la descripción de las tablas

Cómo se incluye la descripción de la tabla en HTML5

La descripción de una tabla se incluía en HTML con el atributo summary:

En HTML4 y (X)HTML:

<table summary="[Descripción de la tabla]">

Sin embargo, el atributo summary está obsoleto en HTML5.

En los desarrollos en HTML5, la descripción se incluye en la página y se relaciona por código con la tabla mediante el atributo aria-describedby:

En HTML5:

<p id="table1">[Descripción de la tabla]</p>

<table aria-describedby="table1">

¿Es obligatorio que el párrafo con la descripción esté antes de la tabla?

La descripción asociada por código con la tabla podría estar en cualquier parte de la página, o incluso oculta visualmente (por ejemplo, con text-indent:-999em), y el lector de pantalla la leería igual. 

Sin embargo, yo os recomiendo que el párrafo con la descripción de la tabla esté visible y antes de la tabla por varias razones:

• Una descripción redactada de forma adecuada ayuda a que muchos usuarios comprendan mejor la información que se ofrece en la tabla, especialmente ayuda a las personas que tienen más dificultades para comprender la página y los datos dispuestos en tablas.
• Como la descripción también es de utilidad para las personas que pueden ver la tabla, el lugar más lógico y útil para quien puede verla es antes de la tabla.
• Si la descripción se incluye visible antes de la tabla, es más probable que el publicador redacte una descripción para la tabla y lo haga de manera adecuada, además, seguramente así será más sencillo de implementar con el gestor de contenidos.
• Si la tabla se incluye en un portal de la Administración Pública, evitarás un posible error en el validador automático del Observatorio de Accesibilidad que revisa estos portales.

  El validador del Observatorio de Accesibilidad da error si encuentra un encabezado (h1, h2, h3...) seguido inmediatamente de una tabla, pues presupone que dicho encabezado está simulando el caption de la tabla.

  Por tanto, incluir la descripción de la tabla antes de la misma evitará este error y, lo que es más importante, ayudará a comprender al publicador que el encabezado (h2, h3...) debe ser el de la sección, mientras que el título de la tabla, en caso de necesitarlo, debe incluirse con el elemento caption.

Por qué es importante que las tablas tengan descripción

Cuando una persona que puede ver se enfrenta a una tabla, de un solo vistazo obtiene mucha información:

• ve la estructura de la tabla; 
• dónde están los encabezados y cuántos niveles tiene; 
• si hay celdas unidas o vacías; 
• si hay filas o columnas con enlaces o con totales; 
• etc.

Sin embargo, una persona que no puede ver y accede con un lector de pantalla, no tiene esa visión general de la tabla que le ayude a hacerse una imagen mental de la misma, y a recorrerla después más rápidamente con los atajos de teclado del lector de pantalla.

La descripción de la tabla proporciona a los usuarios de lector de pantalla la información que obtienen las personas que pueden ver en un primer vistazo de la tabla.

Por ejemplo, si el usuario sabe que en la última columna o fila están los totales, puede utilizar los atajos de teclado del lector para saltar más rápidamente a estos contenidos.

Por último, ya he comentado que una descripción concisa y bien redactada también es útil para que todas las personas comprendan mejor la tabla.

No es lo mismo la descripción de la tabla que su caption

El objetivo del título de la tabla (el caption) y el objetivo de su descripción es diferente.

El título (caption)

El título de la tabla se incluye con la etiqueta caption justo después de la etiqueta table, mientras que, como hemos comentado, la descripción se incluye en un párrafo antes de la tabla, asociado a la misma con el atributo aria-describedby.

<p id="tabla1">
   [Descripción de la tabla]
</p>
<table aria-describedby="tabla1">
<caption>[Título de la tabla]
</caption>

El caption de la tabla identifica la tabla para que sepamos qué información contiene.

Por ejemplo:

• <caption>Tabla 1. Comparativa de las ventas en los años 2018, 2019 y 2020</caption>
• <caption>Tabla 2. Indicadores sociodemográficos de 2019</caption>
• <caption>Tabla 3. Recursos y actividades de innovación social por distritos</caption>

El caption es muy útil para los usuarios:

• Permite ojear más fácilmente el contenido de la página, ya que de un solo vistazo identificas qué datos tienen las tablas, sin tener que investigarlo leyendo el título de la sección y el contenido que precede a cada tabla.
• Los usuarios de lector de pantalla también pueden ojear las tablas de la página más eficazmente, pues, como luego comentaré, al pulsar la tecla "t" saltan de tabla en tabla, y el lector las anuncia con su caption en primer lugar (si tienen caption).
• Otra ventaja, es que el título de una tabla ayuda a referenciarla en el contenido de la página (por ejemplo, "como se aprecia en la 'Tabla 2. Indicadores sociodemográficos de 2019'") o a incluir un índice de tablas.

En los casos en los que hay varias tablas, resulta muy útil que el título comience por "Tabla 1.", "Tabla 2.", "Tabla 3.", porque de este modo es más fácil encontrar la tabla referenciada, tanto al ojear visualmente la página, como al hacerlo con el atajo de teclado del lector de pantalla (tecla "t").

La descripción de la tabla

Mientras que el objetivo del caption es identificar la tabla, hemos comentado que el objetivo de la descripción es, en gran medida, suplir ese primer vistazo de la tabla que tienen las personas que pueden verla.

Por tanto, la descripción debe resumir aspectos estructurales de la tabla que permitan hacerse una visión mental de la misma y encontrar más fácilmente la información dentro de ella, sin necesidad de recorrerla celda a celda.

Hay que tener en cuenta que los lectores de pantalla tienen atajos de teclado que facilitan moverse por la tabla. Por tanto, una vez que conoces la estructura de la tabla, es mucho más fácil recorrerla con el lector para encontrar la información.

Es importante saber que en la descripción no debes indicar el número de filas o columnas que tiene la tabla, porque esto ya lo anuncia el lector de pantalla por defecto.

También hay que tener en cuenta que el lector de pantalla leerá tanto el caption como la descripción, tal y como voy a explicar a continuación, por tanto no deben ser iguales ni repetitivos.

¿Como lee el lector de pantalla la descripción y el caption?

Imaginemos la siguiente tabla:

<h3>Ejemplo de tabla</h3>

<p id="tabla1" aria-hidden="true">

En cada fila de la siguiente tabla encontrará los datos de un criterio de las WCAG 2.1. El nombre del criterio en la primera columna es un enlace a la página "Comprender el criterio ..." del portal del W3C.

</p>
<table aria-describedby="tabla1">
<caption>
  Tabla 1. Criterio de las WCAG 2.1
</caption>
  <tr>
    <th>Criterio</th>
    <th>Nivel</th>
    <th>Principio</th>
    <th>En las WCAG 2.0</th>
  </tr>
  <tr>
    <td lang="en"> 
     <a href="[...]" 
        target="blank"
        title="Abre la página  
              'Comprender el 
              criterio 1.1.1' 
              en ventana nueva">
     1.1.1 Non-text Content
     </a>
    </td>
    <td>A</td>
    <td>Perceptible</td>
    <td>Sí</td>
  </tr>
  [...]
</table>

* En el código de sobrentiende que los acrónimos se han explicado previamente.

El resultado del código anterior, sin estilos, es el siguiente:

Ejemplo de tabla

En cada fila de la siguiente tabla encontrará los datos de un criterio de las WCAG 2.1. El nombre del criterio en la primera columna es un enlace a la página "Comprender el criterio ..." del portal del W3C.

Tabla 1. Criterio de las WCAG 2.1

Criterio	Nivel	Principio	En las WCAG 2.0
1.1.1 Non-text Content	A	Perceptible	Sí

Esta tabla tiene un caption que la identifica y una descripción útil para todos los usuarios. Voy a explicar cómo lee el lector de pantalla la tabla. 

En primer lugar hay que saber que puedes llegar a una tabla con el lector de pantalla de las siguientes maneras:

• Saltando a la tabla con el atajo de teclado (tecla "t") que permite saltar de tabla en tabla.
• Con las flechas arriba/abajo del teclado, en una lectura lineal de la página. La flecha abajo te permite acceder al siguiente contenido y la flecha arriba al contenido anterior.

La lectura difiere en ambos casos. Voy a explicar ambas.

Lectura al saltar a la tabla con la tecla "t"

Si llegas a la tabla saltando con la tecla "t", el lector de pantalla anunciará lo siguiente:

"Tabla 1. Criterios de las WCAG 2.1. Tabla con 79 filas y 4 columnas. En cada fila de la siguiente tabla encontrará los datos de un criterio de las WCAG 2.1. El nombre del criterio en la primera columna es un enlace a la página 'Comprender el criterio ...' del portal del W3C."

* lectura con NVDA+Chrome

El lector nos lee la información en este orden: Caption + Número de filas y columnas + Descripción.

Es importante tener en cuenta que el lector de pantalla:

• indica por defecto el número de filas y columnas que tiene la tabla, por eso esta información no debe indicarse en la descripción, pues resultaría repetitiva.
• lee el título y la descripción de la tabla, por tanto el caption y la descripción no deben ser iguales ni repetir la misma información.

Si la tabla no tiene caption, la descripción deberá identificar la tabla para que el usuario sepa a qué tabla ha llegado. Pero si está en tu mano, intenta usar el caption para el título.

Lectura en el acceso con las flechas

Cuando llegas a la tabla con la flecha abajo, el lector de pantalla anunciará lo siguiente:

[Flecha abajo]

"Encabezado de nivel 3 Ejemplo de tabla."

[Flecha abajo]

Tabla con 79 filas y 4 columnas. En cada fila de la siguiente tabla encontrará los datos de un criterio de las WCAG 2.1. El nombre del criterio en la primera columna es un enlace a la página 'Comprender el criterio ...' del portal del W3C. Tabla 1. Criterios de las WCAG 2.1."

* lectura con NVDA+Chrome

Como se observa:

• Llegamos al encabezado y nos lo anuncia: "Encabezado de nivel 3 Ejemplo de tabla".
• Pulsamos la tecla "flecha abajo" para llegar al siguiente contenido y el lector ignora el párrafo de la descripción, no lo lee, sino que pasa a anunciar la tabla.
• La información de la tabla la lee en un orden diferente al del acceso con la tecla "t", ahora es: Número de filas y columnas + Descripción + Caption

¿Por qué el lector de pantalla se ha saltado la lectura del párrafo?

Porque tiene el atributo aria-hidden="true". Este atributo permite que un contenido se vea pero que esté oculto para el lector de pantalla, de forma que no lo anuncie.

Si no pusiéramos aria-hidden="true" el lector leería el párrafo dos veces, la primera como párrafo, y la segunda como parte de la información de la tabla:

"Encabezado de nivel 3 Ejemplo de tabla. [flecha abajo] En cada fila de la siguiente tabla encontrará los datos de un criterio de las WCAG 2.1. El nombre del criterio en la primera columna es un enlace a la página 'Comprender el criterio ...' del portal del W3C. [flecha abajo] Tabla con 79 filas y 4 columnas. En cada fila de la siguiente tabla encontrará los datos de un criterio de las WCAG 2.1. El nombre del criterio en la primera columna es un enlace a la página 'Comprender el criterio ...' del portal del W3C. Tabla 1. Criterios de las WCAG 2.1.".

El soporte de aria-describedby es muy alto, por ello, y según las características del proyecto, valora el uso de aria-hidden="true" para evitar contenido repetitivo.

Cómo redactar descripciones útiles. Ejemplos.

Sigue estas recomendaciones a la hora de redactar la descripción:

• Debe ser concisa y clara.
• No hay que indicar el número de filas y columnas que tiene la tabla porque esto ya lo anuncia el lector de pantalla por defecto.
• Redacta la descripción pensando también en las personas que ven la tabla, de manera que la información les sea de utilidad.
• La descripción resumirá aspectos relevantes de la estructura y/o contenido de la tabla.
• Si la tabla no tiene caption, la descripción debe identificar además la tabla, para que el usuario sepa qué información contiene.
• Si la tabla tiene caption, la descripción y el caption nunca serán iguales, para que la información no sea repetitiva. En este caso, la descripción no debe identificar la tabla a menos que se haga de manera complementaria al caption.

Un truco si tienes dudas sobre cómo redactar la descripción es pensar: ¿que información he obtenido yo de la tabla en un primer vistazo?

Ejemplos de descripciones de tablas

Os voy a poner ejemplos de tablas con caption y una descripción adecuada. 

No pondré el resto de la tabla para que estéis en la misma situación que una persona que no puede verla. De este modo, puedes valorar si tienes suficiente información sobre la tabla para comprender qué información contiene y poder hacerte una imagen mental de la misma.

Ejemplo 1

<p id="tabla1">

Esta tabla tiene tantas filas como canales de comunicación tiene la empresa, y tantas columnas como grupos de interés a los que queremos dirigirnos. Se incluye una imagen con un visto verde ("Sí") si el canal permite el diálogo con ese grupo de interés, de lo contrario, la celda está vacía.

</p>
<table aria-describedby="tabla1">
<caption>

Tabla 1. Principales canales de comunicación.

</caption>

Ejemplo 2

<p id="tabla2">

En cada fila de esta tabla encontrará los datos de una comunidad autónoma. En las dos primeras columnas se agrupan los datos de 2017; y en las dos siguientes los datos del 2016. En la última fila y columna encontrará los totales.

</p>
<table aria-describedby="tabla2">
<caption>

Tabla 2. Distribución de la plantilla con contrato fijo.

</caption>

Ejemplo 3

<p id="tabla3">

En cada fila de esta tabla encontrará los datos de un objetivo específico del tema 10, con el enlace a la página de actuaciones en la última columna.

</p>
<table aria-describedby="tabla3">
<caption>

Tema 10. "Aprendizaje permanente"

</caption>
     

Incluir la descripción de las tablas a través del gestor de contenidos

Es habitual que el editor de texto del gestor de contenidos solo permita incluir la descripción con summary, así ocurre por ejemplo con CKEditor. Permite incluir un título y una descripción a la tabla en su ventana de propiedades, en los campos "Título" y "Síntesis". El título lo incluye con caption y la descripción la añade con el atributo summary de la tabla.

En estos casos, se puede implementar un botón personalizado en el editor, algo relativamente sencillo con CKEditor. 

Por ejemplo, al pulsar este botón personalizado se puede solicitar el número de filas, columnas, el título y la descripción de la tabla, de tal manera que, cuando el editor inserta la tabla, lo hace incluyendo automáticamente un párrafo antes de la tabla con la descripción, asociado a la misma con el atributo aria-describedby.

Que dicen las WCAG 2.1 sobre la descripción de las tablas

Las WCAG 2.1 indican que el resumen es especialmente útil cuando la tabla tiene una estructura compleja (por ejemplo, cuando hay varios conjuntos de encabezados de fila o columna, o cuando hay múltiples grupos de columnas o filas); o cuando las tablas de datos simples tienen muchas columnas o filas de datos.

Pero, como hemos explicado, la descripción es útil en todas las tablas: si tienen filas y columnas de totales; si tienen enlaces; si tienen celdas vacías o con iconos; o incluso si la tabla es muy sencilla, para aportar ese primer vistazo a los usuarios de lector de pantalla, de modo que estén en igualdad de condiciones con una persona que ve.

La clave para que la descripción sea siempre útil está en redactarla de forma adecuada.

Mi recomendación es que se anime a los publicadores a incluirla siempre, explicándoles su razón de ser y las buenas prácticas de redacción comentadas.

Artículos relacionados:

• Ayuda contextual de los formularios más accesible con "aria-describedby" (WAI-ARIA)
• LONGDESC. Soporte y alternativas (WCAG 2.0, ARIA, HTML5)
• Descripción extensa de una imagen: accesible con lector de pantalla y visible sin imágenes activas
• Asociación compleja de radios y labels de forma accesible
• Textos alternativos, imágenes accesibles. Herramientas de ayuda: mapa de decisión y wizard online