Tablas

Crear tablas accesibles es fundamental para garantizar que todas las personas puedan comprender y utilizar la información que presentan. Esto implica añadir un título descriptivo e identificar correctamente los encabezados de filas y columnas.

Título de tabla

El título de la tabla describe brevemente su contenido. Permite a los usuarios conocer su propósito y resulta especialmente útil para quienes utilizan lectores de pantalla.

Para incluir un título, se utiliza el elemento <caption>:

<table>
  <caption>Temperaturas medias por estación</caption>
  ...
</table>

Como alternativa al elemento <caption> puedes usar los atributos aria-label o aria-labelledby.

Encabezados

Las celdas de encabezado se identifican con el elemento <th>.

Aunque visualmente se distingan de las celdas de datos, es importante marcarlas correctamente en el código para que los lectores de pantalla puedan interpretar la tabla de forma coherente.

Los encabezados pueden aplicarse tanto a filas como a columnas.

Ejemplo de tabla simple:

<table>
  <caption>Temperaturas medias por estación</caption>
  <thead>
    <tr>
      <th>Estación</th>
      <th>Mínima</th>
      <th>Máxima</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Primavera</th>
      <td>12 °C</td>
      <td>22 °C</td>
    </tr>
    ...
  </tbody>
</table>

Tablas complejas

En tablas más complejas, es útil emplear el atributo scope para relacionar cada encabezado con sus celdas de datos:

• scope="col" para encabezados de columna.
• scope="row" para encabezados de fila.

Este atributo ayuda a los lectores de pantalla a asociar correctamente los encabezados con los datos correspondientes.