Cómo hacer tablas accesibles
La importancia de hacer tablas accesibles radica en garantizar que todas las personas puedan acceder y comprender la información presentada en las tablas. Esto mejora 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.
Además, 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.
<table>
<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>
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 también se puede usar en el elemento table para proporcionar una descripción. Pero, es recomendable usar el elemento caption, porque summary está obsoleto conforme a la especificación HTML5 y porque los usuarios sin discapacidad visual no pueden leerlo (no aparece en la página).
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 accesibilidad de nuestra tabla. Esto puede ayudar a los usuarios a entender mejor el contenido de la tabla y también puede mejorar 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.
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.
5.9. Ejemplos
Ejemplo 1:
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
0
Ejemplo 2:
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
0