Tablas accesibles con scope y caption

Buenas prácticas para construir tablas de datos legibles y navegables en lector de pantalla.

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

Qué incluir para que una tabla sea comprensible de verdad.

Caption descriptivo

Explica qué representa la tabla y su alcance temporal o contextual.

Cabeceras con scope

Usa `th` con `scope="col"` o `scope="row"` para definir relaciones.

Estructura completa

Aprovecha `thead`, `tbody` y `tfoot` cuando el conjunto de datos lo requiera.

No abuses de merged cells

Muchos `rowspan/colspan` complican lectura asistida y mantenimiento.

Tablas grandes

Añade filtros, búsqueda o segmentación para reducir carga cognitiva.

Error común

Poner títulos visuales fuera de tabla sin un caption asociado.

Aplicación en proyectos reales

Cómo mejorar tablas existentes sin rehacer toda la UI.

Comienza por tablas de reporting, facturación y paneles de operaciones.

Añade caption y scope primero: son mejoras de alto impacto y bajo coste.

Si la tabla es interactiva, valida también orden de foco y feedback de cambios.

Define convención de caption en todos los módulos de datos.
Revisa que cada columna tenga cabecera única y consistente.
Comprueba lectura de filas completas con lector de pantalla.
Documenta cuándo migrar tabla a vista resumida o tarjetas en móvil.

Patrón de código

Tabla básica con caption y cabeceras correctamente asociadas.

Tabla de datos accesible

<table>
  <caption>Ventas por trimestre en 2026</caption>
  <thead>
    <tr>
      <th scope="col">Trimestre</th>
      <th scope="col">Ingresos</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td>12.000 €</td>
    </tr>
  </tbody>
</table>