a11y tips #3: tablas accesibles

En esta entrada se aborda la creación de tablas accesibles en formato HTML.

Qué son, para qué sirven y para qué no sirven las tablas

Una tabla es un recurso estructural que organiza datos en filas y columnas. Su objetivo es mostrar relaciones entre datos, facilitando su comparación o la consulta de un valor específico.

Las tablas permiten a las personas comprender patrones, correlaciones o jerarquías en datos numéricos, textuales o de otro tipo. Son especialmente útiles en contextos como informes, estudios estadísticos, catálogos de productos o comparativas técnicas.

Las tablas no deben usarse nunca únicamente como herramienta de diseño o maquetación visual. Es decir, no se deberían crear tablas solo para ubicar elementos en distintas posiciones de la página o para simular un layout. Para esos casos, lo adecuado es utilizar CSS Grid Layout, Flexbox o alguna otra técnica más tradicional.

Características de una tabla

• Muestra datos tabulares y nunca otros tipos de valores.
• Se distingue claramente, tanto de forma visual como semántica, qué filas y celdas funcionan como encabezados.
• Se distingue claramente los límites de cada celda, fila, columna, así como de la propia tabla.

Utilidad, uso previsto y consideraciones de diseño

Las tablas son especialmente útiles para:

• Representar colecciones de datos de forma ordenada.
• Mostrar comparativas de datos.
• Facilitar la consulta rápida de un dato específico.

Se deben evitar o replantear cuando:

• El contenido es lineal y no necesita estructuras tabulares. Es decir, puede resolverse con una lista o una aproximación más narrativa.

Ten en cuenta que:

• Las tablas demasiado grandes pueden resultar muy complejas de navegar, especialmente para usuarios de lectores de pantalla y magnificadores de texto.
• En el actual contexto multidispositivo, se debe garantizar su adecuación a diferentes tamaños y orientaciones de pantalla.

Requisitos de accesibilidad

• Toda tabla requiere un titulo o descripción específico que contemple su propósito implementado mediante el elemento <caption>.
• Las celdas que funcionan como encabezados deben marcarse con el elemento <th> e indicarse su relación con filas o columnas mediante el atributo scope.
• Los elementos <thead> y <tbody> permiten agrupar las filas de encabezado y del cuerpo, respectivamente.
• En tablas con encabezados múltiples, es posible utilizar las parejas de atributos headers e id para asociar los datos a sus encabezados.
• Por lo que respecta a los números, tipográficamente hablando pueden ser proporcionales (con ancho variable) o tabulares (con ancho fijo, es decir, que ocupan el mismo espacio). Los números tabulares están pensados para el trabajo con datos. El hecho de ocupar el mismo ancho hace que con los números tabulares resulte más fácil el reconocimiento de los números y sus posiciones, o procesos como realizar comparaciones entre valores. Procura alinear a la derecha los valores numéricos para facilitar su lectura y comparación.

Criterios de conformidad WCAG relacionados

• 1.3.1: Información y relaciones (nivel A).
• 2.1.1: Teclado (nivel A).

Código HTML y CSS

A continuación, se muestra un ejemplo de código para implementar una tabla sencilla con una fila de encabezado (horizontal y vertical). El elemento <caption> aporta una descripción breve del contenido. Como se puede observar en el ejemplo, más allá de los elementos básicos HTML previstos por el estándar, no se requiere ninguna adaptación adicional.

See the Pen

En el siguiente ejemplo, se utiliza además La propiedad aria-describedby que relaciona el elemento <table> con el identificador del elemento que describe su contenido (<caption>). La semántica asociada al elemento <caption> (The <caption> tag defines a table caption) ya es suficiente, por lo que el uso de WAI-ARIA en este caso sólo estaría realmente justificado si por alguna razón no es posible utilizar el elemento <caption> y se utiliza un elemento HTML no pensado específicamente para esa función. El atributo scope con el valor col o row, según el caso, define la dirección de las celdas de encabezado y las asocia con las celdas de datos correspondientes. El atributo scope es necesario para tablas más grandes, pero no aporta demasiado en casos tan simples.

See the Pen
Tabla accesible (una fila de encabezado) con ARIA y scope by Rubén (@ralcaraz)
on CodePen.

Si necesitas definir una tabla con un doble encabezado (horizontal y vertical), es posible resolverlo como en el ejemplo siguiente:

See the Pen
Tabla accesible con doble encabezado (horizontal y vertical) by Rubén (@ralcaraz)
on CodePen.

En el siguiente ejemplo, tenemos dos pares de encabezados idénticos («developed» y «sold») que se vinculan con un encabezado superior que identifica a cada compañía (Nintendo y Sony). El atributo colspan="2" permite que estos dos últimos encabezados abarquen las dos columnas anteriores. Los elementos <col> y <colgroup> se usan para describir la estructura de columnas de la tabla. Aunque no son estrictamente necesarios para que una tabla funcione visualmente, mejoran la accesibilidad y el control semántico, sobre todo en tablas complejas. Por otro lado, el valor del atributo scope en los encabezados de primer nivel (Nintendo y Sony) se define como colgroup para que se asocie con todo el grupo de columnas. Los encabezados de segundo nivel («developed» y «sold») solo se aplican a la columna correspondiente, por lo que el atributo scope se define como col. Finalmente, en las celdas con los encabezados de las filas («Platforms» y «Action / Adventure») el atributo scope se define con el valor row para describir el contenido de todas las celdas en la misma fila (de izquierda a derecha). De esta manera, con los atributos scope bien definidos, un lector de pantalla es capaz de leer automáticamente el encabezado de columna o fila para dar el contexto necesario al usuario.

See the Pen
Tabla accesible con encabezados en dos niveles by Rubén (@ralcaraz)
on CodePen.

Los atributos headers e id en las tablas HTML ofrecen un mecanismo más explícito y robusto para definir la relación entre celdas de datos (<td>) y sus celdas de encabezado (<th>) correspondientes. Son especialmente útiles en tablas complejas donde los atributos scope pueden no ser suficientes.

En el ejemplo siguiente, cada <th> tiene un atributo id único que lo identifica programáticamente. Por otro lado, cada elemento <td> cuenta con un atributo headers que enumera todos los id de todos los <th> (encabezados) que describen esa celda.

See the Pen
Tabla accesible con atributos headers e id by Rubén (@ralcaraz)
on CodePen.

Debido al espacio limitado, muchas tablas utilizan abreviaturas. Siempre que sea posible, utiliza la forma completa o, en caso contrario, el marcado semántico HTML correspondiente: <abbr title="Población">Pob.</abbr>.

Tablas en dispositivos móviles

A medida que los dispositivos móviles se han consolidado como principal punto de acceso a la web, es fundamental reconsiderar cómo se presentan las tablas para garantizar su accesibilidad y experiencia de usuario.

En pantallas pequeñas, las tablas tradicionales —pensadas para resoluciones de escritorio— tienden a desbordar el espacio horizontal, obligando al usuario a hacer scroll lateral. Esto dificulta la lectura, puede implicar que para ciertos usuarios una parte del contenido pase desapercibido, interrumpe la comprensión de las relaciones entre datos y, en muchos casos, afecta gravemente la usabilidad para cualquier usuario.

Por ello, resulta imprescindible aplicar estrategias de diseño responsivo. Entre ellas destacan el uso de tablas convertidas en listas, la reestructuración del contenido en tarjetas o componentes visuales más accesibles o tablas en las que parte del contenido queda colapsado y se amplia a petición del usuario. A continuación, se muestra un ejemplo de tabla con los estilos de Bootstrap que, en la versión móvil deja de mostrarse mediante CSS para mostrar varias listas con los mismos datos.

See the Pen
Tabla accesible que se transforma en lista en versión móvil by Rubén (@ralcaraz)
on CodePen.

También existen soluciones como Footable, una biblioteca que permite ocultar y expandir columnas para mantener la tabla legible en pantallas pequeñas, además de facilitar otras funcionalidades como filtrado, paginación u ordenación de datos. A continuación, se muestra un ejemplo con su versión adaptada a Bootstrap.

See the Pen
Footable by Rubén (@ralcaraz)
on CodePen.

Referencias y otros ejemplos

W3C (2023). Tables tutorial. https://www.w3.org/WAI/tutorials/tables