Cómo crear tablas accesibles con Bootstrap o Tailwind

Las tablas son esenciales para presentar información estructurada: informes, estadísticas, comparativas, etc. Pero si no están correctamente construidas, se vuelven un laberinto imposible para usuarios de lectores de pantalla.

En este post veremos cómo hacer tablas accesibles usando Bootstrap y Tailwind, aplicando buenas prácticas para garantizar inclusión y usabilidad.

Problemas comunes en tablas

Falta de encabezados claros → Sin <th>, los lectores de pantalla no saben qué columna corresponde.
No usar scope → No se especifica si el encabezado es de columna o fila.
Tablas sin <caption> → No hay contexto sobre qué datos se muestran.
Uso incorrecto de <div> → Intentar maquetar tablas con div rompe la semántica.
Tablas complejas sin relación entre celdas → En tablas con múltiples niveles de encabezados, si no se usan headers e id, la información es inentendible.

Tablas accesibles con Bootstrap 5

Bootstrap ofrece clases listas para darle estilo y hacerlas responsivas, pero debemos cuidar la semántica:

<table class="table table-striped table-bordered">
  <caption>Comparativa de planes de precios</caption>
  <thead class="table-light">
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Usuarios</th>
      <th scope="col">Almacenamiento</th>
      <th scope="col">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Básico</th>
      <td>1</td>
      <td>5 GB</td>
      <td>Gratis</td>
    </tr>
    <tr>
      <th scope="row">Pro</th>
      <td>5</td>
      <td>50 GB</td>
      <td>9 €/mes</td>
    </tr>
    <tr>
      <th scope="row">Empresa</th>
      <td>50</td>
      <td>1 TB</td>
      <td>49 €/mes</td>
    </tr>
  </tbody>
</table>

👉 Puntos clave:

<caption> describe la tabla.
<th scope="col"> para encabezados de columna.
<th scope="row"> para encabezados de fila.

Tablas accesibles con Tailwind

Con Tailwind debemos aplicar estilos manualmente, pero la semántica sigue siendo la misma:

<table class="min-w-full border border-gray-300">
  <caption class="text-left p-2 text-sm text-gray-600">
    Comparativa de planes de precios
  </caption>
  <thead class="bg-gray-100">
    <tr>
      <th scope="col" class="border px-4 py-2 text-left">Plan</th>
      <th scope="col" class="border px-4 py-2 text-left">Usuarios</th>
      <th scope="col" class="border px-4 py-2 text-left">Almacenamiento</th>
      <th scope="col" class="border px-4 py-2 text-left">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" class="border px-4 py-2 font-medium">Básico</th>
      <td class="border px-4 py-2">1</td>
      <td class="border px-4 py-2">5 GB</td>
      <td class="border px-4 py-2">Gratis</td>
    </tr>
    <tr>
      <th scope="row" class="border px-4 py-2 font-medium">Pro</th>
      <td class="border px-4 py-2">5</td>
      <td class="border px-4 py-2">50 GB</td>
      <td class="border px-4 py-2">9 €/mes</td>
    </tr>
    <tr>
      <th scope="row" class="border px-4 py-2 font-medium">Empresa</th>
      <td class="border px-4 py-2">50</td>
      <td class="border px-4 py-2">1 TB</td>
      <td class="border px-4 py-2">49 €/mes</td>
    </tr>
  </tbody>
</table>

👉 Aquí usamos Tailwind solo para el diseño (border, px, py, bg-gray-100), mientras la accesibilidad web depende del HTML semántico correcto.

Buenas prácticas para tablas accesibles

Usa siempre <caption> para describir el propósito de la tabla.
Define encabezados con <th> y especifica scope="col" o scope="row".
Para tablas complejas, usa headers e id para asociar celdas y encabezados.
Mantén un contraste suficiente entre fondo y texto.
Permite navegación por teclado con foco visible.
No uses tablas para maquetación → resérvalas para datos.

Conclusión

Las tablas son potentes herramientas para mostrar información, pero requieren un cuidado especial para que todos los usuarios puedan interpretarlas correctamente.

Con Bootstrap, tenemos estilos y soporte responsivo, pero debemos aplicar bien la semántica.
Con Tailwind, controlamos el diseño, pero toda la accesibilidad web depende de nuestra estructura HTML.