La importancia de hacer tablas accesibles radica en garantizar que todas las personas puedan acceder y comprender la información presentada en las tablas de un sitio web.
Por ejemplo, una persona con una barrera visual, como ceguera o baja visión, no puede leer correctamente una tabla si esta carece de etiquetas semánticas como <table>, <th>, y <td>, las cuales son esenciales para que los lectores de pantalla identifiquen cabeceras y celdas de datos. Además, la ausencia de descripciones o resúmenes que proporcionen un contexto general del contenido de la tabla, así como una estructura compleja sin un etiquetado adecuado, dificulta la interpretación correcta de la información.
Por ello, una buena creación de tablas, además de mejorar la experiencia de usuario, fomenta la inclusión y cumple con los estándares de accesibilidad web, promoviendo un entorno digital más igualitario y accesible. Aparte, las tablas accesibles también benefician a los motores de búsqueda, ya que facilitan la indexación y comprensión del contenido, mejorando el posicionamiento en los resultados de búsqueda.
5. Cómo hacer tablas accesibles
Las tablas son una herramienta útil para presentar datos en un formato estructurado y fácil de entender. Sin embargo, para asegurarnos de que nuestras tablas sean accesibles para todos los usuarios, es importante seguir las siguientes pautas de accesibilidad.
5.1. Utilizar encabezados de tabla
Los encabezados de tabla ayudan a los usuarios a entender la estructura y el contenido de la tabla. Asegúrate de utilizar la etiqueta <th> para los encabezados de tabla y de incluir un atributo scope para indicar si el encabezado se aplica a una columna (scope="col") o a una fila (scope="row"). Esto mejorará la interpretación de la tabla por parte de los lectores de pantalla.
Ejemplo 1 (Tabla de encabezados de columnas):
<table>
<tr>
<th scope="col">Lenguaje</th>
<th scope="col">Uso</th>
<th scope="col">Popularidad</th>
</tr>
<tr>
<td>Python</td>
<td>Desarrollo web, ciencia de datos, IA</td>
<td>Muy alta</td>
</tr>
<tr>
<td>Java</td>
<td>Aplicaciones empresariales, móviles</td>
<td>Alta</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Desarrollo frontend y backend</td>
<td>Muy alta</td>
</tr>
</table>
En esta tabla, los encabezados de columna (Lenguaje, Uso, Popularidad) organizan los datos por categorías relacionadas con lenguajes de programación, su uso principal y su nivel de popularidad.
Ejemplo 2 (tabla de encabezados de columnas y filas):
<table>
<tr>
<th scope="col">Área</th>
<th scope="col">Herramienta</th>
<th scope="col">Descripción</th>
</tr>
<tr>
<th scope="row">Desarrollo Frontend</th>
<td>React</td>
<td>Biblioteca para construir interfaces de usuario dinámicas.</td>
</tr>
<tr>
<th scope="row">Desarrollo Backend</th>
<td>Node.js</td>
<td>Entorno de ejecución para crear aplicaciones en JavaScript del lado del servidor.</td>
</tr>
<tr>
<th scope="row">Diseño UI</th>
<td>Figma</td>
<td>Herramienta para diseñar interfaces de usuario de manera colaborativa.</td>
</tr>
<tr>
<th scope="row">Accesibilidad</th>
<td>AXE</td>
<td>Extensión para analizar y mejorar la accesibilidad web.</td>
</tr>
</table>
En este ejemplo, los encabezados de columna (Área, Herramienta, Descripción) organizan la tabla indicando la categoría general, la herramienta asociada y su descripción. Los encabezados de fila, definidos con <th scope="row">, describen cada fila completa, como «Desarrollo Frontend»
5.2. Proporcionar una descripción
Si tu tabla es compleja o contiene una gran cantidad de información, puede ser útil proporcionar una descripción para ayudar a los usuarios a entender su contenido. Puedes utilizar la etiqueta <caption> dentro de la etiqueta <table> para agregar una descripción a tu tabla.
<table>
<caption>Lista de participantes</caption>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Edad</th>
<th scope="col">Ciudad</th>
</tr>
<tr>
<td>Juan</td>
<td>32</td>
<td>Madrid</td>
</tr>
<tr>
<td>Andrea</td>
<td>27</td>
<td>Elche</td>
</tr>
</table>
El atributo summary se utilizaba en el elemento <table> para proporcionar una descripción de la tabla, pensada especialmente para lectores de pantalla. Sin embargo, ya está obsoleto en HTML5 y no se recomienda su uso, porque los usuarios sin discapacidad visual no pueden verlo, ya que no se muestra en la página. En su lugar, es mejor usar el elemento <caption>, que permite incluir un título o descripción visible de la tabla, accesible para todos los usuarios.
5.3. Utilizar un diseño claro y sencillo
Un diseño claro y sencillo ayuda a los usuarios a entender el contenido de la tabla. Evita utilizar colores o fuentes que puedan dificultar la lectura y asegúrate de que el contenido esté bien organizado y sea fácil de seguir.
5.4. Usar el atributo headers
El atributo headers se puede utilizar para asociar celdas de datos con celdas de encabezado en tablas complejas. Para ello, debemos asociar las celdas de datos (<td>) con los encabezados (<th>) mediante el atributo headers. Esto puede ayudar a mejorar la accesibilidad para usuarios que utilizan lectores de pantalla.
<table>
<tr>
<th id="nombre">Nombre</th>
<th id="edad">Edad</th>
<th id="ciudad">Ciudad</th>
</tr>
<tr>
<td headers="nombre">Juan</td>
<td headers="edad">32</td>
<td headers="ciudad">Madrid</td>
</tr>
<tr>
<td headers="nombre">Andrea</td>
<td headers="edad">27</td>
<td headers="ciudad">Elche</td>
</tr>
</table>
En este ejemplo, hemos utilizado el atributo headers para asociar cada celda de datos con su celda de encabezado correspondiente. Esto puede ayudar a los usuarios que utilizan lectores de pantalla a entender mejor la estructura y el contenido de la tabla.
5.5. Agregar etiquetas <thead>, <tbody> y <tfoot>
Las etiquetas <thead>, <tbody> y <tfoot> se pueden utilizar para mejorar la estructura y la accesibilidad de tus tablas. La etiqueta <thead> se utiliza para agrupar el contenido del encabezado de la tabla, la etiqueta <tbody> se utiliza para agrupar el contenido principal de la tabla y la etiqueta <tfoot> se utiliza para agrupar el contenido del pie de la tabla.
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>32</td>
<td>Madrid</td>
</tr>
<tr>
<td>Andrea</td>
<td>27</td>
<td>Elche</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: 2 participantes</td>
</tr>
</tfoot>
</table>
En este ejemplo, hemos utilizado las etiquetas <thead>, <tbody> y <tfoot> para mejorar la estructura y la compatibilidad con lectores de pantalla.
5.6. Evitar celdas vacías o duplicadas
Las celdas vacías o duplicadas pueden dificultar la comprensión de la tabla para los usuarios, especialmente para aquellos que utilizan lectores de pantalla. Asegúrate de que todas las celdas de tu tabla contengan contenido relevante y evita duplicar información.
Si necesitas fusionar celdas en una fila o columna, puedes utilizar los atributos colspan y rowspan para hacerlo. Estos atributos te permiten especificar cuántas columnas o filas debe ocupar una celda.
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
<tr>
<td>Juan</td>
<td>32</td>
<td>Madrid</td>
</tr>
<tr>
<td>Andrea</td>
<td>27</td>
<td>Elche</td>
</tr>
<tr>
<td colspan="3">Total: 2 participantes</td>
</tr>
</table>
En este ejemplo, hemos utilizado el atributo colspan para fusionar las tres celdas de la última fila en una sola celda. Esto nos permite mostrar un resumen del contenido de la tabla sin dejar celdas vacías o duplicar información.
5.7. Proporcionar información adicional con <abbr> y el atributo title
La etiqueta <abbr> se utiliza para indicar una abreviatura y el atributo title se utiliza para proporcionar información adicional sobre el contenido de la etiqueta.
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th><abbr title="Ciudad de residencia">Ciudad</abbr></th>
</tr>
<tr>
<td>Juan</td>
<td>32</td>
<td>Madrid</td>
</tr>
<tr>
<td>María</td>
<td>27</td>
<td>Barcelona</td>
</tr>
</table>
En este ejemplo, hemos utilizado la etiqueta <abbr> para indicar que la palabra «Ciudad» es una abreviatura de «Ciudad de residencia». También hemos utilizado el atributo title para proporcionar información adicional sobre el contenido de la celda.
5.8. Hacer que la tabla sea responsive
Hacer que tu tabla sea responsive, es decir, que se adapte al tamaño de la pantalla del dispositivo del usuario, puede mejorar significativamente su accesibilidad. Una tabla responsive se ajusta automáticamente para mostrar su contenido de manera clara y legible en pantallas de diferentes tamaños, lo que facilita su uso para todos los usuarios.
Hay varias técnicas que puedes utilizar para hacer que tus tablas sean responsive. Una opción es utilizar consultas de medios para aplicar diferentes estilos a tu tabla según el tamaño de la pantalla del dispositivo. Otra opción es utilizar un diseño de cuadrícula flexible para permitir que las celdas de la tabla se ajusten automáticamente al tamaño de la pantalla. También puedes utilizar la propiedad overflow-x: auto; para permitir el desplazamiento horizontal en tablas grandes en dispositivos pequeños.
Ejemplo 1: Tabla accesible responsive
Esta tabla representa una lista de productos con sus precios y disponibilidad en euros. Cada columna está correctamente etiquetada con el atributo scope="col", y se han añadido los atributos id en las celdas de cabecera correspondientes. Las celdas de datos están etiquetadas con el atributo scope="row" para asociarlas con la cabecera de la columna correspondiente. Además, se ha añadido un pie de tabla (<tfoot>) que indica que los precios están expresados en euros.
<table>
<caption>Tabla de precios de productos</caption>
<thead>
<tr>
<th scope="col">Producto</th>
<th scope="col" id="precio-producto">Precio</th>
<th scope="col" id="disponibilidad-producto">Disponibilidad</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Producto 1</th>
<td headers="precio-producto">20,00 €</td>
<td headers="disponibilidad-producto">En stock</td>
</tr>
<tr>
<th scope="row">Producto 2</th>
<td headers="precio-producto">25,00 €</td>
<td headers="disponibilidad-producto">Agotado</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Precios en euros.</td>
</tr>
</tfoot>
</table>
Ejemplo en CodePen con estilos
Ejemplo 2: Tabla accesible responsive
En este ejemplo, la tabla muestra información sobre tres estudiantes y sus calificaciones en diferentes asignaturas. Los estilos aplicados son similares al ejemplo anterior, con bordes y relleno en las celdas para mejorar la legibilidad. Además, se utiliza el atributo scope para indicar el alcance de las celdas de encabezado y se agrega un pie de tabla para proporcionar información adicional sobre las calificaciones.
Además, se utilizan los elementos y atributos HTML adecuados, como caption, thead, tbody, tfoot, th, y scope, para mejorar la estructura y la navegación para usuarios con discapacidades visuales o que utilizan lectores de pantalla.
<table>
<caption>Tabla de calificaciones de estudiantes</caption>
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Asignatura</th>
<th scope="col">Calificación</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Juan Pérez</th>
<td>Lengua y Literatura</td>
<td>8.5</td>
</tr>
<tr>
<th scope="row">María Gómez</th>
<td>Matemáticas</td>
<td>9.2</td>
</tr>
<tr>
<th scope="row">Carlos López</th>
<td>Ciencias Sociales</td>
<td>7.8</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Calificaciones en escala de 0 a 10.</td>
</tr>
</tfoot>
</table>
Ejemplo en CodePen con estilos
Siguiendo estas pautas, podrás hacer que tus tablas sean accesibles y ofrecer una mejor experiencia a todos los usuarios. Además, no te olvides de revisar el contraste entre el texto y el fondo y de realizar pruebas de accesibilidad para asegurarte de que la tabla sea accesible.